Replacing icons with https://ionic.io/ionicons in gallery grid

#587

src/frontend/app/app.module.ts

@@ -130,15 +130,18 @@ import {
   ionLocationOutline,
   ionLogOutOutline,
   ionMenuOutline,
+  ionMoonOutline,
   ionPeopleOutline,
   ionPersonOutline, ionPricetagOutline, ionSaveOutline,
   ionSearchOutline,
   ionSettingsOutline,
   ionShareSocialOutline,
   ionShuffleOutline,
   ionStarOutline,
+  ionSunnyOutline,
   ionTextOutline,
   ionTrashOutline,
+  ionVideocamOutline,
 } from '@ng-icons/ionicons';
 import {SortingMethodIconComponent} from './ui/sorting-method-icon/sorting-method-icon.component';
 
@@ -193,7 +196,8 @@ Marker.prototype.options.icon = MarkerFactory.defIcon;
       ionChevronForwardOutline, ionChevronDownOutline,
       ionTrashOutline,ionSaveOutline,ionAddOutline,
       ionTextOutline, ionFolderOutline, ionDocumentOutline, ionImageOutline,
-      ionPricetagOutline, ionLocationOutline
+      ionPricetagOutline, ionLocationOutline,
+      ionSunnyOutline,ionMoonOutline,ionVideocamOutline
     }),
     ClipboardModule,
     TooltipModule.forRoot(),

src/frontend/app/ui/frame/frame.component.html

@@ -93,16 +93,16 @@
                       <button class="btn w-100 btn-secondary" (click)="themeService.toggleMode()">
                         <ng-container [ngSwitch]="themeService.mode">
                           <ng-container *ngSwitchCase="ThemeModes.light">
-                            <span class="oi oi-sun"></span>
+                            <ng-icon name="ionSunnyOutline"></ng-icon>
                             <ng-container i18n>Light</ng-container>
                           </ng-container>
                           <ng-container *ngSwitchCase="ThemeModes.dark">
-                            <span class="oi oi-moon"></span>
+                            <ng-icon name="ionMoonOutline"></ng-icon>
                             <ng-container i18n>Dark</ng-container>
                           </ng-container>
                           <ng-container *ngSwitchCase="ThemeModes.auto">
-                            <span class="oi oi-moon"></span>
-                            <span class="oi oi-sun" style="margin-left: -0.8rem"></span>
+                            <ng-icon name="ionMoonOutline"></ng-icon>
+                            <ng-icon name="ionSunnyOutline" style="margin-left: -0.3rem"></ng-icon>
                             <ng-container i18n>Auto</ng-container>
                           </ng-container>
                         </ng-container>

src/frontend/app/ui/gallery/grid/photo/photo.grid.gallery.component.css

@@ -153,6 +153,6 @@ a {
   background-color: rgba(0, 0, 0, 0.8);
 }
 
-.photo-keywords .oi-person {
+.photo-keywords ng-icon {
   margin-right: 2px;
 }

src/frontend/app/ui/gallery/grid/photo/photo.grid.gallery.component.html

@@ -12,7 +12,9 @@
 
 
   <div *ngIf="gridMedia.isVideo()" class="video-indicator">
-    {{gridMedia.Video.metadata.duration  | duration}} <span class="oi oi-video"></span></div>
+    {{gridMedia.Video.metadata.duration  | duration}}
+    <ng-icon name="ionVideocamOutline"></ng-icon>
+  </div>
 
 
   <!--Info box -->
@@ -21,12 +23,10 @@
     <div class="photo-name">{{Title}}</div>
 
     <div class="photo-position" *ngIf="gridMedia.hasPositionData()">
-      <span class="oi oi-map-marker"></span>
+      <ng-icon name="ionLocationOutline"></ng-icon>
       <ng-template [ngIf]="getPositionText()">
         <a [routerLink]="['/search', getPositionSearchQuery()]"
-           *ngIf="searchEnabled">
-          {{getPositionText()}}
-        </a>
+           *ngIf="searchEnabled">{{getPositionText()}}</a>
         <span *ngIf="!searchEnabled">{{getPositionText()}}</span>
       </ng-template>
     </div>
@@ -37,11 +37,14 @@
            [routerLink]="['/search', getTextSearchQuery(keyword.value,keyword.type)]" [ngSwitch]="keyword.type">
           <ng-template [ngSwitchCase]="SearchQueryTypes.keyword">#</ng-template><!--
        -->
-          <ng-template [ngSwitchCase]="SearchQueryTypes.person"><span class="oi oi-person"></span></ng-template><!--
+          <ng-template [ngSwitchCase]="SearchQueryTypes.person">
+            <ng-icon name="ionPersonOutline"></ng-icon>
+          </ng-template><!--
        -->{{keyword.value}}</a>
         <span *ngIf="!searchEnabled" [ngSwitch]="keyword.type">
           <ng-template [ngSwitchCase]="SearchQueryTypes.keyword">#</ng-template><!--
-       --><ng-template [ngSwitchCase]="SearchQueryTypes.person"><span class="oi oi-person"></span></ng-template><!--
+       --><ng-template [ngSwitchCase]="SearchQueryTypes.person"><ng-icon
+          name="ionPersonOutline"></ng-icon></ng-template><!--
        -->{{keyword.value}}</span>
         <ng-template [ngIf]="!last">,&#160;</ng-template>
       </ng-template>

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

@@ -1,30 +1,13 @@
-import {
-  Component,
-  ElementRef,
-  Input,
-  OnDestroy,
-  OnInit,
-  ViewChild,
-} from '@angular/core';
-import { Dimension, IRenderable } from '../../../../model/IRenderable';
-import { GridMedia } from '../GridMedia';
-import { RouterLink } from '@angular/router';
-import {
-  Thumbnail,
-  ThumbnailManagerService,
-} from '../../thumbnailManager.service';
-import { Config } from '../../../../../../common/config/public/Config';
-import { PageHelper } from '../../../../model/page.helper';
-import {
-  PhotoDTO,
-  PhotoMetadata,
-} from '../../../../../../common/entities/PhotoDTO';
-import {
-  SearchQueryTypes,
-  TextSearch,
-  TextSearchQueryMatchTypes,
-} from '../../../../../../common/entities/SearchQueryDTO';
-import { AuthenticationService } from '../../../../model/network/authentication.service';
+import {Component, ElementRef, Input, OnDestroy, OnInit, ViewChild,} from '@angular/core';
+import {Dimension, IRenderable} from '../../../../model/IRenderable';
+import {GridMedia} from '../GridMedia';
+import {RouterLink} from '@angular/router';
+import {Thumbnail, ThumbnailManagerService,} from '../../thumbnailManager.service';
+import {Config} from '../../../../../../common/config/public/Config';
+import {PageHelper} from '../../../../model/page.helper';
+import {PhotoDTO, PhotoMetadata,} from '../../../../../../common/entities/PhotoDTO';
+import {SearchQueryTypes, TextSearch, TextSearchQueryMatchTypes,} from '../../../../../../common/entities/SearchQueryDTO';
+import {AuthenticationService} from '../../../../model/network/authentication.service';
 
 @Component({
   selector: 'app-gallery-grid-photo',
@@ -34,8 +17,8 @@ import { AuthenticationService } from '../../../../model/network/authentication.
 })
 export class GalleryPhotoComponent implements IRenderable, OnInit, OnDestroy {
   @Input() gridMedia: GridMedia;
-  @ViewChild('img', { static: false }) imageRef: ElementRef;
-  @ViewChild('photoContainer', { static: true }) container: ElementRef;
+  @ViewChild('img', {static: false}) imageRef: ElementRef;
+  @ViewChild('photoContainer', {static: true}) container: ElementRef;
 
   thumbnail: Thumbnail;
   keywords: { value: string; type: SearchQueryTypes }[] = null;
@@ -115,10 +98,10 @@ export class GalleryPhotoComponent implements IRenderable, OnInit, OnDestroy {
   isInView(): boolean {
     return (
       PageHelper.ScrollY <
-        this.container.nativeElement.offsetTop +
-          this.container.nativeElement.clientHeight &&
+      this.container.nativeElement.offsetTop +
+      this.container.nativeElement.clientHeight &&
       PageHelper.ScrollY + window.innerHeight >
-        this.container.nativeElement.offsetTop
+      this.container.nativeElement.offsetTop
     );
   }
 
@@ -156,8 +139,8 @@ export class GalleryPhotoComponent implements IRenderable, OnInit, OnDestroy {
     return (
       (this.gridMedia.media as PhotoDTO).metadata.positionData.city ||
       (this.gridMedia.media as PhotoDTO).metadata.positionData.state ||
-      (this.gridMedia.media as PhotoDTO).metadata.positionData.country
-    );
+      (this.gridMedia.media as PhotoDTO).metadata.positionData.country || ''
+    ).trim();
   }
 
   mouseOver(): void {

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

@@ -42,11 +42,15 @@ app-gallery-filter {
   overscroll-behavior: contain;
 }
 
-.btn-navigator{
+.btn-navigator {
   border: none;
 }
 
-.btn-navigator:not(:hover) {
+.sorting-item {
+  cursor: pointer;
+}
+
+.btn-navigator:not(:hover):not(.btn-secondary) {
   --bs-text-opacity: 1;
   color: rgba(var(--bs-body-color-rgb), var(--bs-text-opacity)) !important;
 }

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

@@ -46,6 +46,7 @@
       <ng-container *ngIf="ItemCount> 0">
         <a class="btn btn-outline-secondary btn-navigator"
            [class.btn-secondary]="filterService.activeFilters.value.areFiltersActive"
+           [class.btn-outline-secondary]="!filterService.activeFilters.value.areFiltersActive"
            (click)="showFilters = ! showFilters">
           <ng-icon name="ionFunnelOutline"
                    title="Filters" i18n-title></ng-icon>
@@ -56,12 +57,13 @@
         <button id="button-alignment" dropdownToggle type="button"
                 class="btn dropdown-toggle  btn-outline-secondary btn-navigator"
                 [class.btn-secondary]="sortingService.sorting.value !== DefaultSorting"
+                [class.btn-outline-secondary]="sortingService.sorting.value == DefaultSorting"
                 aria-controls="sorting-dropdown">
           <app-sorting-method-icon [method]="sortingService.sorting.value"></app-sorting-method-icon>
         </button>
         <ul id="sorting-dropdown" *dropdownMenu class="dropdown-menu dropdown-menu-right"
             role="menu" aria-labelledby="button-alignment">
-          <li class="row dropdown-item" role="menuitem"
+          <li class="row dropdown-item sorting-item" role="menuitem"
               *ngFor="let type of sortingMethodsType"
               (click)="setSorting(type.key)">
             <div class="col-3">