Replacing icons with https://ionic.io/ionicons in settings

#587
bpatrik · Aug 24, 2023 · 258770e · 258770e
1 parent da91f10
commit 258770e
Show file tree

Hide file tree

Showing 15 changed files with 99 additions and 57 deletions.
diff --git a/src/frontend/app/app.module.ts b/src/frontend/app/app.module.ts
@@ -116,6 +116,7 @@ import {
   ionArrowUpOutline,
   ionCalendarOutline,
   ionCameraOutline,
+  ionCheckmarkOutline,
   ionChevronBackOutline,
   ionChevronDownOutline,
   ionChevronForwardOutline,
@@ -136,32 +137,37 @@ import {
   ionImagesOutline,
   ionInformationOutline,
   ionLinkOutline,
-  ionLocationOutline, ionLockClosedOutline,
+  ionLocationOutline,
+  ionLockClosedOutline,
   ionLogOutOutline,
   ionMenuOutline,
   ionMoonOutline,
   ionPauseOutline,
   ionPeopleOutline,
   ionPersonOutline,
-  ionPinOutline,
+  ionPieChartOutline,
   ionPlayOutline,
   ionPricetagOutline,
+  ionPulseOutline,
   ionRemoveOutline,
+  ionResizeOutline,
   ionSaveOutline,
   ionSearchOutline,
   ionSettingsOutline,
   ionShareSocialOutline,
   ionShuffleOutline,
   ionStar,
   ionStarOutline,
+  ionStopOutline,
   ionSunnyOutline,
   ionTextOutline,
+  ionTimeOutline,
   ionTimerOutline,
   ionTrashOutline,
   ionVideocamOutline,
   ionVolumeMediumOutline,
   ionVolumeMuteOutline,
-  ionWarningOutline,
+  ionWarningOutline
 } from '@ng-icons/ionicons';
 import {SortingMethodIconComponent} from './ui/sorting-method-icon/sorting-method-icon.component';
 
@@ -221,8 +227,9 @@ Marker.prototype.options.icon = MarkerFactory.defIcon;
       ionInformationOutline, ionContractOutline, ionExpandOutline, ionCloseOutline,
       ionTimerOutline,
       ionPlayOutline, ionPauseOutline, ionVolumeMediumOutline, ionVolumeMuteOutline,
-      ionCameraOutline, ionWarningOutline, ionLockClosedOutline,ionChevronUpOutline,
-      ionFlagOutline,ionGlobeOutline
+      ionCameraOutline, ionWarningOutline, ionLockClosedOutline, ionChevronUpOutline,
+      ionFlagOutline, ionGlobeOutline, ionPieChartOutline, ionStopOutline,
+      ionTimeOutline,ionCheckmarkOutline,ionPulseOutline,ionResizeOutline
     }),
     ClipboardModule,
     TooltipModule.forRoot(),

diff --git a/src/frontend/app/ui/albums/albums.component.html b/src/frontend/app/ui/albums/albums.component.html
@@ -67,7 +67,7 @@ <h5 class="modal-title" i18n>Add saved search</h5>
         <button class="btn btn-primary" type="button"
                 [disabled]="savedSearch.searchQuery.text == ''"
                 (click)="saveSearch()">
-          <ng-icon name="ionSaveOutline" class="me-2"></ng-icon><span i18n>Save</span>
+          <ng-icon name="ionSaveOutline" class="me-1"></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
@@ -1,7 +1,7 @@
 <button class="btn btn-secondary" type="button"
         [disabled]="disabled"
         (click)="openModal(modal)">
-  <ng-icon class="me-2" name="ionFolderOutline"></ng-icon><ng-container i18n>To .pg2conf</ng-container>
+  <ng-icon class="me-1" name="ionFolderOutline"></ng-icon><ng-container i18n>To .pg2conf</ng-container>
 </button>
 
 

diff --git a/src/frontend/app/ui/gallery/search/search.gallery.component.html b/src/frontend/app/ui/gallery/search/search.gallery.component.html
@@ -47,13 +47,13 @@ <h5 class="modal-title" i18n>Search</h5>
                 class="btn btn-secondary me-2" type="button"
                 [disabled]="rawSearchText == ''"
                 (click)="openSaveSearchModal(saveSearchModal)">
-          <ng-icon name="ionSaveOutline" class="me-2"></ng-icon>
+          <ng-icon name="ionSaveOutline" class="me-1"></ng-icon>
           <ng-container i18n>Save</ng-container>
         </button>
         <button class="btn btn-primary" type="button"
                 [routerLink]="['/search', HTMLSearchQuery]"
                 (click)="hideSearchModal()">
-          <ng-icon name="ionSearchOutline" class="me-2"></ng-icon>
+          <ng-icon name="ionSearchOutline" class="me-1"></ng-icon>
           <ng-container i18n>Search</ng-container>
         </button>
       </div>
@@ -94,7 +94,7 @@ <h5 class="modal-title" i18n>Save search to album</h5>
           <button class="btn btn-primary" type="button"
                   [disabled]="saveSearchName == ''"
                   (click)="saveSearch()">
-            <ng-icon name="ionSaveOutline" class="me-2"></ng-icon>
+            <ng-icon name="ionSaveOutline" class="me-1"></ng-icon>
             <ng-container i18n>Save as album</ng-container>
           </button>
         </div>

diff --git a/src/frontend/app/ui/login/login.component.css b/src/frontend/app/ui/login/login.component.css
@@ -35,3 +35,7 @@
     margin-top: calc((100vh - 120px - 295px) / 2 - 60px)
   }
 }
+
+ng-icon ::ng-deep svg {
+  vertical-align: text-top;
+}
diff --git a/src/frontend/app/ui/login/login.component.html b/src/frontend/app/ui/login/login.component.html
@@ -16,7 +16,7 @@ <h4 class="card-title" i18n>Please log in</h4>
         </div>
 
         <div class="input-group mb-3">
-          <div class="input-group-text"><span class="oi oi-person"></span></div>
+          <div class="input-group-text"><ng-icon name="ionPersonOutline"></ng-icon></div>
           <input type="text"
                  i18n-placeholder
                  class="form-control"
@@ -29,7 +29,7 @@ <h4 class="card-title" i18n>Please log in</h4>
         </div>
 
         <div class="input-group mb-3">
-          <div class="input-group-text"><span class="oi oi-lock-locked"></span></div>
+          <div class="input-group-text"><ng-icon name="ionLockClosedOutline"></ng-icon></div>
           <input type="password"
                  i18n-placeholder
                  class="form-control"

diff --git a/src/frontend/app/ui/settings/gallery-statistic/gallery-statistic.component.html b/src/frontend/app/ui/settings/gallery-statistic/gallery-statistic.component.html
@@ -3,24 +3,24 @@
     Statistic:
   </div>
   <div class="col-md-2 col-6">
-    <span class="oi oi-folder" title="Folders" i18n-title aria-hidden="true">  </span>
+    <ng-icon name="ionFolderOutline" title="Folders" i18n-title></ng-icon>
     {{settingsService.statistic.value ? settingsService.statistic.value.directories : '...'}}
   </div>
   <div class="col-md-2 col-6">
-    <span class="oi oi-camera-slr" title="Photos" i18n-title aria-hidden="true">  </span>
+    <ng-icon name="ionCameraOutline" title="Photos" i18n-title></ng-icon>
     {{settingsService.statistic.value ? settingsService.statistic.value.photos : '...'}}
   </div>
   <div class="col-md-2 col-6">
-    <span class="oi oi-video" title="Videos" i18n-title aria-hidden="true">  </span>
+    <ng-icon name="ionVideocamOutline" title="Videos" i18n-title></ng-icon>
     {{settingsService.statistic.value ? settingsService.statistic.value.videos : '...'}}
 
   </div>
   <div class="col-md-2 col-6">
-    <span class="oi oi-people" title="Persons" i18n-title aria-hidden="true">  </span>
+    <ng-icon name="ionPersonOutline" title="Persons" i18n-title></ng-icon>
     {{settingsService.statistic.value ? settingsService.statistic.value.persons : '...'}}
   </div>
   <div class="col-md-2 col-6">
-    <span class="oi oi-pie-chart" title="Size" i18n-title aria-hidden="true">  </span>
+    <ng-icon name="ionPieChartOutline" title="Size" i18n-title></ng-icon>
     {{settingsService.statistic.value ? (settingsService.statistic.value.diskUsage | fileSize) : '...'}}
   </div>
 </div>
diff --git a/src/frontend/app/ui/settings/sharings-list/sharings-list.component.html b/src/frontend/app/ui/settings/sharings-list/sharings-list.component.html
@@ -26,7 +26,7 @@ <h5 i18n>Active shares</h5>
         <td>{{share.expires | date}}</td>
         <td>
           <button (click)="deleteSharing(share)" class="btn btn-danger float-end">
-            <span class="oi oi-trash" aria-hidden="true" aria-label="Delete"></span>
+            <ng-icon name="ionTrashOutline" title="Delete" i18n-title></ng-icon>
           </button>
         </td>
       </tr>

diff --git a/src/frontend/app/ui/settings/template/settings-entry/settings-entry.component.html b/src/frontend/app/ui/settings/template/settings-entry/settings-entry.component.html
@@ -26,6 +26,7 @@
         </app-gallery-search-field>
 
         <div class="input-group"
+             style="flex: 1"
              *ngSwitchCase="'StringInput'">
           <input
             [type]="HTMLInputType" [min]="state.min" [max]="state.max" class="form-control"
@@ -82,13 +83,13 @@
 
           <button class="btn btn-primary"
                   (click)="showNewThemeModal(newThemeModal)">
-            <span class="oi oi-plus me-2"></span>
+            <ng-icon name="ionAddOutline" class="me-1"></ng-icon>
             <ng-container i18n>Add new</ng-container>
           </button>
           <button class="btn btn-danger"
                   *ngIf="state.value !== 'default'"
                   (click)="removeTheme()">
-            <span class="oi oi-trash"></span>
+            <ng-icon name="ionTrashOutline" title="Delete" i18n-title></ng-icon>
           </button>
 
           <ng-template #newThemeModal>
@@ -119,7 +120,7 @@ <h5 class="modal-title" i18n>Add new theme</h5>
                 <div class="pe-0">
                   <button class="btn btn-primary" type="button"
                           (click)="addNewTheme()">
-                    <span class="oi oi-plus me-2"></span>
+                    <ng-icon name="ionAddOutline" class="me-1"></ng-icon>
                     <ng-container i18n>Add new Theme</ng-container>
                   </button>
                 </div>
@@ -255,15 +256,17 @@ <h5 class="modal-title" i18n>Icon</h5>
                   <button [disabled]="state.value.length == 1" (click)="removeLayer(layer)"
                           [ngClass]="state.value.length > 1? 'btn-danger':'btn-secondary'"
                           class="btn float-end">
-                    <span class="oi oi-trash" aria-hidden="true" aria-label="Delete"></span>
+                    <ng-icon name="ionTrashOutline" title="Delete" i18n-title></ng-icon>
                   </button>
                 </td>
               </tr>
             </table>
 
             <div class="row justify-content-end">
               <button class="btn btn-primary"
-                      (click)="addNewLayer()" i18n>+ Add Layer
+                      (click)="addNewLayer()">
+                <ng-icon name="ionAddOutline" class="me-1"></ng-icon>
+                <span i18n>Add Layer</span>
               </button>
             </div>
           </div>
@@ -285,7 +288,7 @@ <h5 class="modal-title" i18n>Icon</h5>
                   <button [disabled]="state.value.length == 1" (click)="remove(i)"
                           [ngClass]="state.value.length > 1? 'btn-danger':'btn-secondary'"
                           class="btn float-end">
-                    <span class="oi oi-trash" aria-hidden="true" aria-label="Delete"></span>
+                    <ng-icon name="ionTrashOutline" title="Delete" i18n-title></ng-icon>
                   </button>
                 </div>
               </div>
@@ -322,7 +325,9 @@ <h5 class="modal-title" i18n>Icon</h5>
             <div class="row">
               <div class="col pe-0">
                 <button class="btn btn-primary float-end"
-                        (click)="AddNew()" i18n>+ Add matcher
+                        (click)="AddNew()">
+                  <ng-icon name="ionAddOutline" class="me-1"></ng-icon>
+                  <span i18n>Add matcher</span>
                 </button>
               </div>
             </div>
@@ -345,7 +350,7 @@ <h5 class="modal-title" i18n>Icon</h5>
                   <button [disabled]="state.value.length == 1" (click)="remove(i)"
                           [ngClass]="state.value.length > 1? 'btn-danger':'btn-secondary'"
                           class="btn float-end">
-                    <span class="oi oi-trash" aria-hidden="true" aria-label="Delete"></span>
+                    <ng-icon name="ionTrashOutline" title="Delete" i18n-title></ng-icon>
                   </button>
                 </div>
 
@@ -366,7 +371,9 @@ <h5 class="modal-title" i18n>Icon</h5>
             <div class="row">
               <div class="col pe-0">
                 <button class="btn btn-primary float-end"
-                        (click)="AddNew()" i18n>+ Add path theme group
+                        (click)="AddNew()">
+                  <ng-icon name="ionAddOutline" class="me-1"></ng-icon>
+                  <span i18n>Add path theme group</span>
                 </button>
               </div>
             </div>
@@ -421,15 +428,17 @@ <h5 class="modal-title" i18n>Icon</h5>
                 <button [disabled]="state.value.length == 1" (click)="remove(i)"
                         [ngClass]="state.value.length > 1? 'btn-danger':'btn-secondary'"
                         class="btn float-end">
-                  <span class="oi oi-trash" aria-hidden="true" aria-label="Delete"></span>
+                  <ng-icon name="ionTrashOutline" title="Delete" i18n-title></ng-icon>
                 </button>
               </div>
 
             </div>
             <div class="row">
               <div class="col pe-0">
                 <button class="btn btn-primary float-end"
-                        (click)="AddNew()" i18n>+ Add Link
+                        (click)="AddNew()">
+                  <ng-icon name="ionAddOutline" class="me-1"></ng-icon>
+                  <span i18n>Add Link</span>
                 </button>
               </div>
             </div>
@@ -484,7 +493,7 @@ <h5 class="modal-title" i18n>Icon</h5>
                         (click)="remove(i)"
                         [ngClass]="(state.value.length > 1  || state.tags.uiOptional)? 'btn-danger':'btn-secondary'"
                         class="btn float-end">
-                  <span class="oi oi-trash" aria-hidden="true" aria-label="Delete"></span>
+                  <ng-icon name="ionTrashOutline" title="Delete" i18n-title></ng-icon>
                 </button>
               </div>
 
@@ -493,7 +502,9 @@ <h5 class="modal-title" i18n>Icon</h5>
               <div class="col pe-0">
                 <button class="btn btn-primary float-end"
                         [disabled]="state.readonly"
-                        (click)="AddNew()" i18n>+ Add
+                        (click)="AddNew()">
+                  <ng-icon name="ionAddOutline" class="me-1"></ng-icon>
+                  <span i18n>Add</span>
                 </button>
               </div>
             </div>
@@ -521,8 +532,8 @@ <h5 class="modal-title" i18n>Icon</h5>
                 <div class="col-auto pe-0">
                   <button class="btn btn-secondary float-end"
                           [id]="'list_btn_'+idName+i"
-                          [name]="'list_btn_'+idName+i" (click)="remove(i)"><span
-                    class="oi oi-trash"></span>
+                          [name]="'list_btn_'+idName+i" (click)="remove(i)">
+                    <ng-icon name="ionTrashOutline" title="Delete" i18n-title></ng-icon>
                   </button>
                 </div>
               </ng-container>
@@ -533,7 +544,9 @@ <h5 class="modal-title" i18n>Icon</h5>
               <button class="btn btn-primary mt-1 float-end"
                       [id]="'btn_add_'+idName"
                       [name]="'btn_add_'+idName"
-                      (click)="AddNew()" i18n>+ Add
+                      (click)="AddNew()">
+                <ng-icon name="ionAddOutline" class="me-1"></ng-icon>
+                <span i18n>Add</span>
               </button>
             </div>
           </ng-container>
@@ -542,14 +555,18 @@ <h5 class="modal-title" i18n>Icon</h5>
           <span
             triggers="mouseenter:mouseleave"
             placement="bottom"
+            container="body"
             [popover]="popTemplate"
-            class="oi oi-warning text-warning warning-icon ms-2"></span>
+            class="text-warning warning-icon ms-2">
+          <ng-icon name="ionWarningOutline"></ng-icon>
+          </span>
         </div>
       </div>
 
       <small class="form-text text-muted" *ngIf="settingsService.configStyle == ConfigStyle.full">
         <ng-container *ngIf="experimental">
-          <span class="oi oi-warning"></span>[Experimental]
+          <ng-icon name="ionWarningOutline"></ng-icon>
+          [<span i18n>Experimental</span>]
         </ng-container>
         <ng-container *ngIf="description">{{description}} </ng-container>
         <span *ngIf="type==='array' && (state.arrayType === 'string' || isNumberArray)" i18n>';' separated list.</span>
@@ -559,11 +576,13 @@ <h5 class="modal-title" i18n>Icon</h5>
           #{{state.tags?.githubIssue}}.</a>
         <ng-container *ngIf="state.tags?.uiResetNeeded?.db && !isOriginal">
           <br/>
-          <span class="oi oi-warning" i18n>Reset database after changing this settings!</span>
+          <ng-icon name="ionWarningOutline"></ng-icon>
+          <span i18n>Reset database after changing this settings!</span>
         </ng-container>
         <ng-container *ngIf="state.tags?.uiResetNeeded?.server && !isOriginal">
           <br/>
-          <span class="oi oi-warning" i18n>Restart server after changing this settings!</span>
+          <ng-icon name="ionWarningOutline"></ng-icon>
+          <span i18n>Restart server after changing this settings!</span>
         </ng-container>
       </small>
     </div>

diff --git a/src/frontend/app/ui/settings/users/users.component.html b/src/frontend/app/ui/settings/users/users.component.html
@@ -35,15 +35,17 @@ <h5 i18n>User list</h5>
         <button [disabled]="!canModifyUser(user)" (click)="deleteUser(user)"
                 [ngClass]="canModifyUser(user)? 'btn-danger':'btn-secondary'"
                 class="btn float-end">
-          <span class="oi oi-trash" aria-hidden="true" aria-label="Delete"></span>
+          <ng-icon name="ionTrashOutline" title="Delete" i18n-title></ng-icon>
         </button>
       </td>
     </tr>
     </tbody>
   </table>
 
   <button class="btn btn-primary float-end"
-          (click)="initNewUser()" i18n>+ Add user
+          (click)="initNewUser()">
+    <ng-icon name="ionAddOutline" class="me-1"></ng-icon>
+    <span i18n>Add user</span>
   </button>
 </ng-container>
 

diff --git a/src/frontend/app/ui/settings/workflow/button/job-button.settings.component.html b/src/frontend/app/ui/settings/workflow/button/job-button.settings.component.html
@@ -6,13 +6,13 @@
         (click)="start();">
   <span class="me-2" *ngIf="!shortName"><ng-container
     i18n>Run now</ng-container>: {{backendTextService.getJobName(jobName)}}</span>
-  <span class="oi oi-media-play"></span>
+  <ng-icon name="ionPlayOutline"></ng-icon>
 </button>
 <button class="btn btn-secondary"
         *ngIf="Running"
         [disabled]="disabled || jobsService.jobStartingStopping[jobName] || Progress.state !== JobProgressStates.running"
         (click)="stop();">
-  <span class="oi oi-media-stop"></span>
+  <ng-icon name="ionStopOutline"></ng-icon>
   <span class="ms-2" *ngIf="!shortName"><ng-container
     i18n>Cancel</ng-container>: {{backendTextService.getJobName(jobName)}}</span>
 </button>