Add grid size changer #716

src/common/config/public/ClientConfig.ts

@@ -5,6 +5,7 @@ import {UserRoles} from '../../entities/UserDTO';
 import {ConfigProperty, SubConfigClass} from 'typeconfig/common';
 import {SearchQueryDTO} from '../../entities/SearchQueryDTO';
 import {DefaultsJobs} from '../../entities/job/JobDTO';
+import {GridSizes} from '../../entities/GridSizes';
 
 declare let $localize: (s: TemplateStringsArray) => string;
 if (typeof $localize === 'undefined') {
@@ -986,6 +987,17 @@ export class ClientGalleryConfig {
   })
   defaultSearchGroupingMethod: ClientGroupingConfig = new ClientGroupingConfig(GroupByTypes.Date, false);
 
+  @ConfigProperty({
+    type: GridSizes,
+    tags: {
+      name: $localize`Default grid size`,
+      githubIssue: 716,
+      priority: ConfigPriority.advanced,
+    },
+    description: $localize`Default grid size that is used to render photos and videos.`
+  })
+  defaultGidSize: GridSizes = GridSizes.medium;
+
   @ConfigProperty({
     tags: {
       name: $localize`Sort directories by date`,

src/common/entities/GridSizes.ts

@@ -0,0 +1,7 @@
+export enum GridSizes {
+  extraSmall = 10,
+  small = 20,
+  medium = 30,
+  large = 40,
+  extraLarge = 50
+}

src/frontend/app/app.module.ts

@@ -112,6 +112,7 @@ import {NgIconsModule} from '@ng-icons/core';
 import {
   ionAddOutline,
   ionAlbumsOutline,
+  ionAppsOutline,
   ionArrowDownOutline,
   ionArrowUpOutline,
   ionBrowsersOutline,
@@ -137,6 +138,7 @@ import {
   ionFunnelOutline,
   ionGitBranchOutline,
   ionGlobeOutline,
+  ionGridOutline,
   ionHammerOutline,
   ionImageOutline,
   ionImagesOutline,
@@ -162,6 +164,7 @@ import {
   ionSettingsOutline,
   ionShareSocialOutline,
   ionShuffleOutline,
+  ionSquareOutline,
   ionStar,
   ionStarOutline,
   ionStopOutline,
@@ -176,7 +179,6 @@ import {
   ionVolumeMuteOutline,
   ionWarningOutline
 } from '@ng-icons/ionicons';
-import {SortingMethodIconComponent} from './ui/sorting-method-icon/sorting-method-icon.component';
 import {SafeHtmlPipe} from './pipes/SafeHTMLPipe';
 import {DatePipe} from '@angular/common';
 import {ParseIntPipe} from './pipes/ParseIntPipe';
@@ -185,6 +187,10 @@ import {
 } from './ui/settings/template/settings-entry/sorting-method/sorting-method.settings-entry.component';
 import {ContentLoaderService} from './ui/gallery/contentLoader.service';
 import {FileDTOToRelativePathPipe} from './pipes/FileDTOToRelativePathPipe';
+import {StringifyGridSize} from './pipes/StringifyGridSize';
+import {GalleryNavigatorService} from './ui/gallery/navigator/navigator.service';
+import {GridSizeIconComponent} from './ui/utils/grid-size-icon/grid-size-icon.component';
+import {SortingMethodIconComponent} from './ui/utils/sorting-method-icon/sorting-method-icon.component';
 
 @Injectable()
 export class MyHammerConfig extends HammerGestureConfig {
@@ -246,7 +252,8 @@ Marker.prototype.options.icon = MarkerFactory.defIcon;
       ionFlagOutline, ionGlobeOutline, ionPieChartOutline, ionStopOutline,
       ionTimeOutline, ionCheckmarkOutline, ionPulseOutline, ionResizeOutline,
       ionCloudOutline, ionChatboxOutline, ionServerOutline, ionFileTrayFullOutline, ionBrushOutline,
-      ionBrowsersOutline, ionUnlinkOutline
+      ionBrowsersOutline, ionUnlinkOutline, ionSquareOutline, ionGridOutline,
+      ionAppsOutline
     }),
     ClipboardModule,
     TooltipModule.forRoot(),
@@ -325,6 +332,7 @@ Marker.prototype.options.icon = MarkerFactory.defIcon;
     StringifySearchQuery,
     StringifyEnum,
     StringifySearchType,
+    StringifyGridSize,
     FileDTOToPathPipe,
     FileDTOToRelativePathPipe,
     PhotoFilterPipe,
@@ -332,6 +340,7 @@ Marker.prototype.options.icon = MarkerFactory.defIcon;
     UsersComponent,
     SharingsListComponent,
     SortingMethodIconComponent,
+    GridSizeIconComponent,
     SafeHtmlPipe,
     SortingMethodSettingsEntryComponent
   ],
@@ -350,6 +359,7 @@ Marker.prototype.options.icon = MarkerFactory.defIcon;
     ContentLoaderService,
     FilterService,
     GallerySortingService,
+    GalleryNavigatorService,
     MapService,
     BlogService,
     SearchQueryParserService,

src/frontend/app/pipes/StringifyGridSize.ts

@@ -0,0 +1,12 @@
+import {Pipe, PipeTransform} from '@angular/core';
+import {EnumTranslations} from '../ui/EnumTranslations';
+import {GridSizes} from '../../../common/entities/GridSizes';
+
+@Pipe({name: 'stringifyGridSize'})
+export class StringifyGridSize implements PipeTransform {
+
+  transform(gs: GridSizes): string {
+    return EnumTranslations[GridSizes[gs]];
+  }
+}
+

src/frontend/app/ui/EnumTranslations.ts

@@ -4,6 +4,7 @@ import {ReIndexingSensitivity} from '../../../common/config/private/PrivateConfi
 import {SearchQueryTypes} from '../../../common/entities/SearchQueryDTO';
 import {ConfigStyle} from './settings/settings.service';
 import {SortByTypes,GroupByTypes} from '../../../common/entities/SortingMethods';
+import {GridSizes} from '../../../common/entities/GridSizes';
 
 export const EnumTranslations: Record<string, string> = {};
 export const enumToTranslatedArray = (EnumType: any): { key: number; value: string }[] => {
@@ -55,6 +56,12 @@ EnumTranslations[SortByTypes[SortByTypes.FileSize]] = $localize`file size`;
 EnumTranslations[GroupByTypes[GroupByTypes.NoGrouping]] = $localize`don't group`;
 
 
+EnumTranslations[GridSizes[GridSizes.extraSmall]] = $localize`extra small`;
+EnumTranslations[GridSizes[GridSizes.small]] = $localize`small`;
+EnumTranslations[GridSizes[GridSizes.medium]] = $localize`medium`;
+EnumTranslations[GridSizes[GridSizes.large]] = $localize`big`;
+EnumTranslations[GridSizes[GridSizes.extraLarge]] = $localize`extra large`;
+
 EnumTranslations[NavigationLinkTypes[NavigationLinkTypes.url]] = $localize`Url`;
 EnumTranslations[NavigationLinkTypes[NavigationLinkTypes.search]] = $localize`Search`;
 EnumTranslations[NavigationLinkTypes[NavigationLinkTypes.gallery]] = $localize`Gallery`;

src/frontend/app/ui/gallery/cache.gallery.service.ts

@@ -10,6 +10,7 @@ import {SearchQueryDTO, SearchQueryTypes,} from '../../../../common/entities/Sea
 import {ContentWrapper} from '../../../../common/entities/ConentWrapper';
 import {ContentWrapperWithError} from './contentLoader.service';
 import {ThemeModes} from '../../../../common/config/public/ClientConfig';
+import {GridSizes} from '../../../../common/entities/GridSizes';
 
 interface CacheItem<T> {
   timestamp: number;
@@ -24,6 +25,7 @@ export class GalleryCacheService {
   private static readonly SEARCH_PREFIX = 'SEARCH:';
   private static readonly SORTING_PREFIX = 'SORTING:';
   private static readonly GROUPING_PREFIX = 'GROUPING:';
+  private static readonly GRID_SIZE_PREFIX = 'GRID_SIZE:';
   private static readonly VERSION = 'VERSION';
   private static readonly SLIDESHOW_SPEED = 'SLIDESHOW_SPEED';
   private static THEME_MODE = 'THEME_MODE';
@@ -172,6 +174,45 @@ export class GalleryCacheService {
     }
   }
 
+  removeGridSize(cw: ContentWrapperWithError): void {
+    let key = GalleryCacheService.GRID_SIZE_PREFIX;
+    if (cw?.searchResult?.searchQuery) {
+      key += JSON.stringify(cw.searchResult.searchQuery);
+    } else {
+      key += cw?.directory?.path + '/' + cw?.directory?.name;
+    }
+    localStorage.removeItem(key);
+  }
+
+  getGridSize(cw: ContentWrapperWithError): GridSizes {
+    let key = GalleryCacheService.GRID_SIZE_PREFIX;
+    if (cw?.searchResult?.searchQuery) {
+      key += JSON.stringify(cw.searchResult.searchQuery);
+    } else {
+      key += cw?.directory?.path + '/' + cw?.directory?.name;
+    }
+    const tmp = localStorage.getItem(key);
+    if (tmp != null) {
+      return parseInt(tmp);
+    }
+    return null;
+  }
+
+  setGridSize(cw: ContentWrapperWithError, gs: GridSizes) {
+    try {
+      let key = GalleryCacheService.GRID_SIZE_PREFIX;
+      if (cw?.searchResult?.searchQuery) {
+        key += JSON.stringify(cw.searchResult.searchQuery);
+      } else {
+        key += cw?.directory?.path + '/' + cw?.directory?.name;
+      }
+      localStorage.setItem(key, gs.toString());
+    } catch (e) {
+      this.reset();
+      console.error(e);
+    }
+  }
+
   public getAutoComplete(
       text: string,
       type: SearchQueryTypes

src/frontend/app/ui/gallery/grid/grid.gallery.component.ts

@@ -26,6 +26,8 @@ import {MediaDTO, MediaDTOUtils,} from '../../../../../common/entities/MediaDTO'
 import {QueryParams} from '../../../../../common/QueryParams';
 import {GallerySortingService, MediaGroup} from '../navigator/sorting.service';
 import {GroupByTypes} from '../../../../../common/entities/SortingMethods';
+import {GalleryNavigatorService} from '../navigator/navigator.service';
+import {GridSizes} from '../../../../../common/entities/GridSizes';
 
 @Component({
   selector: 'app-gallery-grid',
@@ -45,9 +47,11 @@ export class GalleryGridComponent
   public IMAGE_MARGIN = 2;
   isAfterViewInit = false;
   subscriptions: {
+    girdSize: Subscription;
     route: Subscription;
   } = {
     route: null,
+    girdSize: null
   };
   delayedRenderUpToPhoto: string = null;
   private scrollListenerPhotos: GalleryPhotoComponent[] = [];
@@ -66,6 +70,7 @@ export class GalleryGridComponent
       public queryService: QueryService,
       private router: Router,
       public sortingService: GallerySortingService,
+      public navigatorService: GalleryNavigatorService,
       private route: ActivatedRoute
   ) {
   }
@@ -76,12 +81,7 @@ export class GalleryGridComponent
     }
     this.updateContainerDimensions();
     this.mergeNewPhotos();
-    this.helperTime = window.setTimeout((): void => {
+    this.renderMinimalPhotos();
-      this.renderPhotos();
-      if (this.delayedRenderUpToPhoto) {
-        this.renderUpToMedia(this.delayedRenderUpToPhoto);
-      }
-    }, 0);
   }
 
   ngOnInit(): void {
@@ -100,6 +100,38 @@ export class GalleryGridComponent
           }
         }
     );
+
+    this.subscriptions.girdSize = this.navigatorService.girdSize.subscribe(gs => {
+      switch (gs) {
+        case GridSizes.extraSmall:
+          this.TARGET_COL_COUNT = 12;
+          this.MIN_ROW_COUNT = 5;
+          this.MAX_ROW_COUNT = 10;
+          break;
+        case GridSizes.small:
+          this.TARGET_COL_COUNT = 8;
+          this.MIN_ROW_COUNT = 3;
+          this.MAX_ROW_COUNT = 8;
+          break;
+        case GridSizes.medium:
+          this.TARGET_COL_COUNT = 5;
+          this.MIN_ROW_COUNT = 2;
+          this.MAX_ROW_COUNT = 5;
+          break;
+        case GridSizes.large:
+          this.TARGET_COL_COUNT = 2;
+          this.MIN_ROW_COUNT = 1;
+          this.MAX_ROW_COUNT = 3;
+          break;
+        case GridSizes.extraLarge:
+          this.TARGET_COL_COUNT = 1;
+          this.MIN_ROW_COUNT = 1;
+          this.MAX_ROW_COUNT = 2;
+          break;
+      }
+      this.clearRenderedPhotos();
+      this.renderMinimalPhotos();
+    });
   }
 
   ngOnDestroy(): void {
@@ -114,6 +146,10 @@ export class GalleryGridComponent
       this.subscriptions.route.unsubscribe();
       this.subscriptions.route = null;
     }
+    if (this.subscriptions.girdSize !== null) {
+      this.subscriptions.girdSize.unsubscribe();
+      this.subscriptions.girdSize = null;
+    }
   }
 
   @HostListener('window:resize')
@@ -137,6 +173,18 @@ export class GalleryGridComponent
     }, 100);
   }
 
+  /*
+  Renders some photos. If nothing specified, this amount should be enough
+  * */
+  private renderMinimalPhotos() {
+    this.helperTime = window.setTimeout((): void => {
+      this.renderPhotos();
+      if (this.delayedRenderUpToPhoto) {
+        this.renderUpToMedia(this.delayedRenderUpToPhoto);
+      }
+    }, 0);
+  }
+
   photoClicked(media: MediaDTO): void {
     this.router.navigate([], {
       queryParams: this.queryService.getParams(media),
@@ -156,12 +204,7 @@ export class GalleryGridComponent
 
     this.updateContainerDimensions();
     this.clearRenderedPhotos();
-    this.helperTime = window.setTimeout((): void => {
+    this.renderMinimalPhotos();
-      this.renderPhotos();
-      if (this.delayedRenderUpToPhoto) {
-        this.renderUpToMedia(this.delayedRenderUpToPhoto);
-      }
-    }, 0);
     this.isAfterViewInit = true;
   }
 

src/frontend/app/ui/gallery/navigator/navigator.gallery.component.html

@@ -68,7 +68,8 @@
                         <div>
                             <ng-icon
                                     [name]="!sortingService.grouping.value.ascending ? 'ionArrowDownOutline' : 'ionArrowUpOutline'"></ng-icon>
-              <app-sorting-method-icon [method]="sortingService.grouping.value.method"></app-sorting-method-icon>
+                            <app-sorting-method-icon
+                                    [method]="sortingService.grouping.value.method"></app-sorting-method-icon>
                         </div>
                         <div class="ps-1" i18n>
                             group
@@ -160,6 +161,33 @@
                     </div>
                 </div>
             </div>
+            <div class="divider">&nbsp;</div>
+            <div class="btn-group" dropdown #dropdown="bs-dropdown" placement="bottom right"
+                 [insideClick]="true"
+                 title="Grid size" i18n-title>
+                <button id="button-grid-size" dropdownToggle type="button"
+                        class="btn dropdown-toggle  btn-outline-secondary btn-navigator"
+                        [class.btn-secondary]="!navigatorService.isDefaultGridSize()"
+                        [class.btn-outline-secondary]="navigatorService.isDefaultGridSize()"
+                        aria-controls="grid-size-dropdown">
+                    <app-grid-size-icon [method]="navigatorService.girdSize.value"></app-grid-size-icon>
+                </button>
+                <div id="grid-size-dropdown" *dropdownMenu class="dropdown-menu dropdown-menu-right"
+                     role="menu" aria-labelledby="button-alignment">
+                    <h6 class="ps-2" i18n>Grid size</h6>
+                    <div class="dropdown-item sorting-grouping-item ps-3 pe-3" role="menuitem"
+                         [class.active]="navigatorService.girdSize.value == type.key"
+                         *ngFor="let type of gridSizes"
+                         (click)="navigatorService.setGridSize(type.key)">
+                        <div class="me-2 d-inline-block">
+                            <app-grid-size-icon [method]="type.key"></app-grid-size-icon>
+                        </div>
+                        <div class="d-inline-block">{{type.key | stringifyGridSize}}</div>
+                    </div>
+
+                </div>
+            </div>
+
         </div>
     </nav>
 

src/frontend/app/ui/gallery/navigator/navigator.gallery.component.ts

@@ -15,6 +15,8 @@ import {PageHelper} from '../../../model/page.helper';
 import {BsDropdownDirective} from 'ngx-bootstrap/dropdown';
 import {FilterService} from '../filter/filter.service';
 import {ContentLoaderService, ContentWrapperWithError, DirectoryContent} from '../contentLoader.service';
+import {GalleryNavigatorService} from './navigator.service';
+import {GridSizes} from '../../../../../common/entities/GridSizes';
 
 @Component({
   selector: 'app-gallery-navbar',
@@ -25,6 +27,7 @@ import {ContentLoaderService, ContentWrapperWithError, DirectoryContent} from '.
 export class GalleryNavigatorComponent {
   public readonly sortingByTypes: { key: number; value: string }[] = [];
   public readonly groupingByTypes: { key: number; value: string }[] = [];
+  public readonly gridSizes: { key: number; value: string }[] = [];
   public readonly config = Config;
   // DefaultSorting = Config.Gallery.defaultPhotoSortingMethod;
   public readonly SearchQueryTypes = SearchQueryTypes;
@@ -50,12 +53,14 @@ export class GalleryNavigatorComponent {
       public contentLoaderService: ContentLoaderService,
       public filterService: FilterService,
       public sortingService: GallerySortingService,
+      public navigatorService: GalleryNavigatorService,
       private router: Router,
       public sanitizer: DomSanitizer
   ) {
     this.sortingByTypes = Utils.enumToArray(SortByTypes);
     // can't group by random
     this.groupingByTypes = Utils.enumToArray(GroupByTypes);
+    this.gridSizes = Utils.enumToArray(GridSizes);
     this.RootFolderName = $localize`Home`;
     this.wrappedContent = this.contentLoaderService.content;
     this.directoryContent = this.wrappedContent.pipe(
@@ -146,6 +151,7 @@ export class GalleryNavigatorComponent {
     );
   }
 
+
   isDirectionalSort(value: number) {
     return Utils.isValidEnumInt(SortByDirectionalTypes, value);
   }

src/frontend/app/ui/gallery/navigator/navigator.service.ts

@@ -0,0 +1,61 @@
+import {Injectable} from '@angular/core';
+import {GalleryCacheService} from '../cache.gallery.service';
+import {BehaviorSubject} from 'rxjs';
+import {Config} from '../../../../../common/config/public/Config';
+import {ContentLoaderService} from '../contentLoader.service';
+import {GridSizes} from '../../../../../common/entities/GridSizes';
+
+@Injectable()
+export class GalleryNavigatorService {
+  public girdSize: BehaviorSubject<GridSizes>;
+
+  constructor(
+      private galleryCacheService: GalleryCacheService,
+      private galleryService: ContentLoaderService,
+  ) {
+
+    // TODO load def instead
+    this.girdSize = new BehaviorSubject(this.getDefaultGridSize());
+    this.galleryService.content.subscribe((c) => {
+      if (c) {
+        if (c) {
+          const gs = this.galleryCacheService.getGridSize(c);
+          if (gs !== null) {
+            this.girdSize.next(gs);
+          } else {
+            this.girdSize.next(this.getDefaultGridSize());
+          }
+        }
+      }
+    });
+  }
+
+
+  setGridSize(gs: GridSizes) {
+    this.girdSize.next(gs);
+    if (this.galleryService.content.value) {
+      if (
+          !this.isDefaultGridSize()
+      ) {
+        this.galleryCacheService.setGridSize(
+            this.galleryService.content.value,
+            gs
+        );
+      } else {
+        this.galleryCacheService.removeGridSize(
+            this.galleryService.content.value
+        );
+      }
+    }
+  }
+
+  isDefaultGridSize(): boolean {
+    return this.girdSize.value === this.getDefaultGridSize();
+  }
+
+
+  getDefaultGridSize(): GridSizes {
+    return Config.Gallery.defaultGidSize;
+  }
+
+}

src/frontend/app/ui/utils/grid-size-icon/grid-size-icon.component.css

@@ -0,0 +1,3 @@
+.line-height-0 {
+    line-height: 0;
+}

src/frontend/app/ui/utils/grid-size-icon/grid-size-icon.component.html

@@ -0,0 +1,27 @@
+<ng-container [ngSwitch]="method">
+    <ng-container *ngSwitchCase="GridSizes.extraSmall">
+        <ng-icon name="ionAppsOutline"></ng-icon>
+    </ng-container>
+    <div class="align-middle" *ngSwitchCase="GridSizes.small">
+        <div class="d-flex" style="margin-bottom: 0.1em">
+            <ng-icon class="line-height-0" strokeWidth="80" size="0.33em" name="ionSquareOutline"></ng-icon>
+            <ng-icon class="line-height-0" strokeWidth="80" size="0.33em" name="ionSquareOutline"></ng-icon>
+            <ng-icon class="line-height-0" strokeWidth="80" size="0.33em" name="ionSquareOutline"></ng-icon>
+        </div>
+        <div class="d-flex">
+            <ng-icon class="line-height-0" strokeWidth="80" size="0.33em" name="ionSquareOutline"></ng-icon>
+            <ng-icon class="line-height-0" strokeWidth="80" size="0.33em" name="ionSquareOutline"></ng-icon>
+            <ng-icon class="line-height-0" strokeWidth="80" size="0.33em" name="ionSquareOutline"></ng-icon>
+        </div>
+    </div>
+    <ng-container *ngSwitchCase="GridSizes.medium">
+        <ng-icon name="ionGridOutline"></ng-icon>
+    </ng-container>
+    <ng-container *ngSwitchCase="GridSizes.large">
+        <ng-icon strokeWidth="70" class="line-height-0 align-middle" size="0.5em" name="ionSquareOutline"></ng-icon>
+        <ng-icon strokeWidth="70" class="line-height-0 align-middle" size="0.5em" name="ionSquareOutline"></ng-icon>
+    </ng-container>
+    <ng-container *ngSwitchCase="GridSizes.extraLarge">
+        <ng-icon name="ionSquareOutline"></ng-icon>
+    </ng-container>
+</ng-container>

src/frontend/app/ui/utils/grid-size-icon/grid-size-icon.component.ts

@@ -0,0 +1,12 @@
+import {Component, Input} from '@angular/core';
+import {GridSizes} from '../../../../../common/entities/GridSizes';
+
+@Component({
+  selector: 'app-grid-size-icon',
+  templateUrl: './grid-size-icon.component.html',
+  styleUrls: ['./grid-size-icon.component.css']
+})
+export class GridSizeIconComponent {
+  @Input() method: number;
+  public readonly GridSizes = GridSizes;
+}

src/frontend/app/ui/utils/sorting-method-icon/sorting-method-icon.component.ts

@@ -1,5 +1,5 @@
 import {Component, Input} from '@angular/core';
-import {GroupSortByTypes} from '../../../../common/entities/SortingMethods';
+import {GroupSortByTypes} from '../../../../../common/entities/SortingMethods';
 
 @Component({
   selector: 'app-sorting-method-icon',
@@ -8,5 +8,5 @@ import {GroupSortByTypes} from '../../../../common/entities/SortingMethods';
 })
 export class SortingMethodIconComponent {
   @Input() method: number;
-  GroupSortByTypes = GroupSortByTypes;
+  public readonly GroupSortByTypes = GroupSortByTypes;
 }

src/frontend/styles.css

@@ -58,7 +58,7 @@ ng-icon {
   font-size: 1.15em
 }
 
-ng-icon svg {
+ng-icon:not([strokeWidth]) svg {
   vertical-align: unset;
   --ng-icon__stroke-width: 40;
 }