From 9b487bdf994e2ab8c8e13906cf1014d88dc463cd Mon Sep 17 00:00:00 2001
From: "Patrik J. Braun" <bra.patrik@gmail.com>
Date: Tue, 22 Aug 2023 22:46:15 +0200
Subject: [PATCH] Replacing icons with https://ionic.io/ionicons at Albums #587

---
 src/frontend/app/app.module.ts                |  4 ++--
 .../app/ui/albums/album/album.component.html  | 20 +++++++++++--------
 .../app/ui/albums/albums.component.css        | 10 +++++++---
 .../app/ui/albums/albums.component.html       |  4 ++--
 .../saved-search-popup.component.html         |  2 +-
 5 files changed, 24 insertions(+), 16 deletions(-)

diff --git a/src/frontend/app/app.module.ts b/src/frontend/app/app.module.ts
index 72efbf3d..60ca8ce9 100644
--- a/src/frontend/app/app.module.ts
+++ b/src/frontend/app/app.module.ts
@@ -133,7 +133,7 @@ import {
   ionImagesOutline,
   ionInformationOutline,
   ionLinkOutline,
-  ionLocationOutline,
+  ionLocationOutline, ionLockClosedOutline,
   ionLogOutOutline,
   ionMenuOutline,
   ionMoonOutline,
@@ -217,7 +217,7 @@ Marker.prototype.options.icon = MarkerFactory.defIcon;
       ionInformationOutline, ionContractOutline, ionExpandOutline, ionCloseOutline,
       ionTimerOutline,
       ionPlayOutline, ionPauseOutline, ionVolumeMediumOutline, ionVolumeMuteOutline,
-      ionCameraOutline, ionWarningOutline
+      ionCameraOutline, ionWarningOutline, ionLockClosedOutline
     }),
     ClipboardModule,
     TooltipModule.forRoot(),
diff --git a/src/frontend/app/ui/albums/album/album.component.html b/src/frontend/app/ui/albums/album/album.component.html
index 82b4490d..70caaaab 100644
--- a/src/frontend/app/ui/albums/album/album.component.html
+++ b/src/frontend/app/ui/albums/album/album.component.html
@@ -10,21 +10,25 @@
          *ngIf="thumbnail && thumbnail.Available"
          [style.background-image]="getSanitizedThUrl()"></div>
 
-    <app-icon *ngIf="!thumbnail || !thumbnail.Available"  class="no-image"></app-icon>
+    <app-icon *ngIf="!thumbnail || !thumbnail.Available" class="no-image"></app-icon>
   </div>
 
 
   <!--Info box -->
   <div class="info rounded-bottom">
     {{album.name}} ({{album.count}})
-    <span *ngIf="CanUpdate && !album.locked"
-          (click)="deleteAlbum($event)"
-          class="info-button delete oi oi-trash float-end"></span>
+    <ng-icon *ngIf="CanUpdate && !album.locked"
+             (click)="deleteAlbum($event)"
+             class="info-button delete float-end"
+             name="ionTrashOutline"
+             title="Delete" i18n-title></ng-icon>
+
+    <ng-icon *ngIf="album.locked"
+             class="info-button float-end"
+             name="ionLockClosedOutline"
+             title="Album is locked, cannot be deleted from the webpage."
+             i18n-title></ng-icon>
 
-    <span *ngIf="album.locked"
-          title="Album is locked, cannot be deleted from the webpage."
-          i18n-title
-          class="info-button oi oi-lock-locked float-end"></span>
   </div>
 </a>
 
diff --git a/src/frontend/app/ui/albums/albums.component.css b/src/frontend/app/ui/albums/albums.component.css
index 43f801a6..9d056715 100644
--- a/src/frontend/app/ui/albums/albums.component.css
+++ b/src/frontend/app/ui/albums/albums.component.css
@@ -20,10 +20,14 @@ app-album {
 
 .add-saved-search .text {
   position: relative;
-  top: calc(50% - 40px);
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%,-50%);
   text-align: center;
 }
 
-.add-saved-search .text .oi {
-  font-size: 80px;
+.add-saved-search .text ng-icon {
+  font-size: 120px;
+  display: inline-block;
+  width: 100%;
 }
diff --git a/src/frontend/app/ui/albums/albums.component.html b/src/frontend/app/ui/albums/albums.component.html
index d3c5254d..e9e875de 100644
--- a/src/frontend/app/ui/albums/albums.component.html
+++ b/src/frontend/app/ui/albums/albums.component.html
@@ -11,7 +11,7 @@
          [style.height.px]="size"
          (click)="openModal(modal)">
       <div class="text">
-        <span class="oi oi-plus" aria-hidden="true">  </span><br/>
+        <ng-icon name="ionAddOutline" class="mb-2"></ng-icon>
         <span i18n>Add saved search</span>
       </div>
     </div>
@@ -67,7 +67,7 @@
         <button class="btn btn-primary" type="button"
                 [disabled]="savedSearch.searchQuery.text == ''"
                 (click)="saveSearch()">
-          <span class="oi oi-folder"></span> Save
+          <ng-icon name="ionSaveOutline" class="me-2"></ng-icon><span i18n>Save</span>
         </button>
       </div>
     </form>
diff --git a/src/frontend/app/ui/albums/saved-search-popup/saved-search-popup.component.html b/src/frontend/app/ui/albums/saved-search-popup/saved-search-popup.component.html
index b29a8f99..c5344850 100644
--- a/src/frontend/app/ui/albums/saved-search-popup/saved-search-popup.component.html
+++ b/src/frontend/app/ui/albums/saved-search-popup/saved-search-popup.component.html
@@ -1,7 +1,7 @@
 <button class="btn btn-secondary" type="button"
         [disabled]="disabled"
         (click)="openModal(modal)">
-  <span class="oi oi-file  me-2"></span><ng-container i18n>To .pg2conf</ng-container>
+  <ng-icon class="me-2" name="ionFolderOutline"></ng-icon><ng-container i18n>To .pg2conf</ng-container>
 </button>