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

#587

src/common/config/private/PrivateConfig.ts

@@ -944,7 +944,7 @@ export class ServerMediaConfig extends ClientMediaConfig {
   @ConfigProperty({
     tags: {
       name: $localize`Video`,
-      uiIcon: 'video',
+      uiIcon: 'ionVideocamOutline',
       priority: ConfigPriority.advanced,
       uiJob: [
         {
@@ -958,7 +958,7 @@ export class ServerMediaConfig extends ClientMediaConfig {
   @ConfigProperty({
     tags: {
       name: $localize`Photo`,
-      uiIcon: 'camera-slr',
+      uiIcon: 'ionCameraOutline',
       priority: ConfigPriority.advanced,
       uiJob: [
         {
@@ -971,7 +971,7 @@ export class ServerMediaConfig extends ClientMediaConfig {
   @ConfigProperty({
     tags: {
       name: $localize`Thumbnail`,
-      uiIcon: 'grid-three-up',
+      uiIcon: 'ionImageOutline',
       priority: ConfigPriority.advanced,
       uiJob: [{job: DefaultsJobs[DefaultsJobs['Thumbnail Generation']]}]
     } as TAGS
@@ -1065,7 +1065,7 @@ export class ServerConfig extends ClientConfig {
   @ConfigProperty({
     tags: {
       name: $localize`Server`,
-      uiIcon: 'cog'
+      uiIcon: 'ionCloudOutline'
     } as TAGS,
   })
   Server: ServerServiceConfig = new ServerServiceConfig();
@@ -1073,7 +1073,7 @@ export class ServerConfig extends ClientConfig {
   @ConfigProperty({
     tags: {
       name: $localize`Database`,
-      uiIcon: 'list'
+      uiIcon: 'ionServerOutline'
     } as TAGS
   })
   Database: ServerDataBaseConfig = new ServerDataBaseConfig();
@@ -1081,7 +1081,7 @@ export class ServerConfig extends ClientConfig {
   @ConfigProperty({
     tags: {
       name: $localize`Users`,
-      uiIcon: 'person'
+      uiIcon: 'ionPersonOutline'
     } as TAGS,
   })
   Users: ServerUserConfig = new ServerUserConfig();
@@ -1089,7 +1089,7 @@ export class ServerConfig extends ClientConfig {
   @ConfigProperty({
     tags: {
       name: $localize`Indexing`,
-      uiIcon: 'pie-chart',
+      uiIcon: 'ionFileTrayFullOutline',
       uiJob: [
         {
           job: DefaultsJobs[DefaultsJobs.Indexing],
@@ -1105,7 +1105,7 @@ export class ServerConfig extends ClientConfig {
   @ConfigProperty({
     tags: {
       name: $localize`Media`,
-      uiIcon: 'camera-slr'
+      uiIcon: 'ionImagesOutline'
     } as TAGS,
   })
   Media: ServerMediaConfig = new ServerMediaConfig();
@@ -1113,7 +1113,7 @@ export class ServerConfig extends ClientConfig {
   @ConfigProperty({
     tags: {
       name: $localize`Meta file`,
-      uiIcon: 'file'
+      uiIcon: 'ionDocumentOutline'
     } as TAGS,
   })
   MetaFile: ServerMetaFileConfig = new ServerMetaFileConfig();
@@ -1121,7 +1121,7 @@ export class ServerConfig extends ClientConfig {
   @ConfigProperty({
     tags: {
       name: $localize`Preview`,
-      uiIcon: 'image',
+      uiIcon: 'ionImageOutline',
       uiJob: [
         {
           job: DefaultsJobs[DefaultsJobs['Preview Filling']],
@@ -1136,7 +1136,7 @@ export class ServerConfig extends ClientConfig {
   @ConfigProperty({
     tags: {
       name: $localize`Sharing`,
-      uiIcon: 'share'
+      uiIcon: 'ionShareSocialOutline'
     } as TAGS,
   })
   Sharing: ServerSharingConfig = new ServerSharingConfig();
@@ -1144,7 +1144,7 @@ export class ServerConfig extends ClientConfig {
   @ConfigProperty({
     tags: {
       name: $localize`Duplicates`,
-      uiIcon: 'layers'
+      uiIcon: 'ionCopyOutline'
     } as TAGS
   })
   Duplicates: ServerDuplicatesConfig = new ServerDuplicatesConfig();
@@ -1152,7 +1152,7 @@ export class ServerConfig extends ClientConfig {
   @ConfigProperty({
     tags: {
       name: $localize`Messaging`,
-      uiIcon: 'chat',
+      uiIcon: 'ionChatboxOutline',
       githubIssue: 683
     } as TAGS,
     description: $localize`The App can send messages (like photos on the same day a year ago. aka: "Top Pick"). Here you can configure the delivery method.`
@@ -1162,7 +1162,7 @@ export class ServerConfig extends ClientConfig {
   @ConfigProperty({
     tags: {
       name: $localize`Jobs`,
-      uiIcon: 'project'
+      uiIcon: 'ionPlayOutline'
     } as TAGS
   })
   Jobs: ServerJobConfig = new ServerJobConfig();

src/common/config/public/ClientConfig.ts

@@ -982,7 +982,7 @@ export class ClientGalleryConfig {
   @ConfigProperty({
     tags: {
       name: $localize`Themes`,
-      uiIcon: 'brush',
+      uiIcon: 'ionBrushOutline',
       priority: ConfigPriority.advanced,
     } as TAGS,
     description: $localize`Pigallery2 uses Bootstrap 5.3 (https://getbootstrap.com/docs/5.3) for design (css, layout). In dark mode it sets 'data-bs-theme="dark"' to the <html> to take advantage bootstrap's color modes. For theming, read more at: https://getbootstrap.com/docs/5.3/customize/color-modes/`
@@ -1313,7 +1313,7 @@ export class ClientConfig {
   @ConfigProperty({
     tags: {
       name: $localize`Gallery`,
-      uiIcon: 'browser'
+      uiIcon: 'ionBrowsersOutline'
     } as TAGS,
   })
   Gallery: ClientGalleryConfig = new ClientGalleryConfig();
@@ -1327,7 +1327,7 @@ export class ClientConfig {
   @ConfigProperty({
     tags: {
       name: $localize`Album`,
-      uiIcon: 'grid-two-up',
+      uiIcon: 'ionAlbumsOutline',
       uiJob: [{
         job: DefaultsJobs[DefaultsJobs['Album Reset']],
         hideProgress: true
@@ -1339,7 +1339,7 @@ export class ClientConfig {
   @ConfigProperty({
     tags: {
       name: $localize`Search`,
-      uiIcon: 'magnifying-glass'
+      uiIcon: 'ionSearchOutline'
     } as TAGS,
   })
   Search: ClientSearchConfig = new ClientSearchConfig();
@@ -1350,7 +1350,7 @@ export class ClientConfig {
   @ConfigProperty({
     tags: {
       name: $localize`Map`,
-      uiIcon: 'map-marker'
+      uiIcon: 'ionLocationOutline'
     } as TAGS,
   })
   Map: ClientMapConfig = new ClientMapConfig();
@@ -1358,7 +1358,7 @@ export class ClientConfig {
   @ConfigProperty({
     tags: {
       name: $localize`Faces`,
-      uiIcon: 'people'
+      uiIcon: 'ionPeopleOutline'
     } as TAGS,
   })
   Faces: ClientFacesConfig = new ClientFacesConfig();
@@ -1366,7 +1366,7 @@ export class ClientConfig {
   @ConfigProperty({
     tags: {
       name: $localize`Random photo`,
-      uiIcon: 'random',
+      uiIcon: 'ionShuffleOutline',
       githubIssue: 392
     } as TAGS,
     description: $localize`This feature enables you to generate 'random photo' urls. That URL returns a photo random selected from your gallery. You can use the url with 3rd party application like random changing desktop background. Note: With the current implementation, random link also requires login.`

src/frontend/app/app.module.ts

@@ -114,19 +114,24 @@ import {
   ionAlbumsOutline,
   ionArrowDownOutline,
   ionArrowUpOutline,
+  ionBrowsersOutline,
+  ionBrushOutline,
   ionCalendarOutline,
   ionCameraOutline,
+  ionChatboxOutline,
   ionCheckmarkOutline,
   ionChevronBackOutline,
   ionChevronDownOutline,
   ionChevronForwardOutline,
   ionChevronUpOutline,
   ionCloseOutline,
+  ionCloudOutline,
   ionContractOutline,
   ionCopyOutline,
   ionDocumentOutline,
   ionDownloadOutline,
   ionExpandOutline,
+  ionFileTrayFullOutline,
   ionFlagOutline,
   ionFolderOutline,
   ionFunnelOutline,
@@ -153,6 +158,7 @@ import {
   ionResizeOutline,
   ionSaveOutline,
   ionSearchOutline,
+  ionServerOutline,
   ionSettingsOutline,
   ionShareSocialOutline,
   ionShuffleOutline,
@@ -229,7 +235,9 @@ Marker.prototype.options.icon = MarkerFactory.defIcon;
       ionPlayOutline, ionPauseOutline, ionVolumeMediumOutline, ionVolumeMuteOutline,
       ionCameraOutline, ionWarningOutline, ionLockClosedOutline, ionChevronUpOutline,
       ionFlagOutline, ionGlobeOutline, ionPieChartOutline, ionStopOutline,
-      ionTimeOutline,ionCheckmarkOutline,ionPulseOutline,ionResizeOutline
+      ionTimeOutline, ionCheckmarkOutline, ionPulseOutline, ionResizeOutline,
+      ionCloudOutline, ionChatboxOutline, ionServerOutline, ionFileTrayFullOutline,ionBrushOutline,
+      ionBrowsersOutline
     }),
     ClipboardModule,
     TooltipModule.forRoot(),

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

@@ -90,13 +90,13 @@
                 <button class="btn btn-link nav-link text-start p-0 text-nowrap"
                         (click)="viewportScroller.scrollToAnchor(s.ConfigPath)"
                 >
-                  <span class="oi oi-{{s.icon}}"></span> {{s.Name}}
+                  <ng-icon [name]="s.icon"></ng-icon> {{s.Name}}
                 </button>
                 <button class="btn btn-link nav-link text-start ms-3 p-0  text-nowrap"
                         *ngFor="let n of s.nestedConfigs;"
                         [hidden]="!n.visible()"
                         (click)="viewportScroller.scrollToAnchor(n.id)">
-                  <span class="oi oi-{{n.icon}}"></span>  {{n.name}}
+                  <ng-icon [name]="n.icon"></ng-icon> {{n.name}}
                 </button>
               </div>
             </div>

src/frontend/app/ui/faces/face/face.component.css

@@ -13,6 +13,10 @@
 
 }
 
+ng-icon.star ::ng-deep svg {
+  vertical-align: top;
+}
+
 .star.favourite {
   color: white;
 }

src/frontend/app/ui/faces/face/face.component.html

@@ -17,9 +17,12 @@
 
   <!--Info box -->
   <div class="info rounded-bottom">
-      <span (click)="CanUpdate && toggleFavourite($event)"
-            class="star oi oi-star"
-            [ngClass]="{'favourite':person.isFavourite, 'clickable':CanUpdate}"></span>
+    <ng-icon class="star"
+             name="ionStarOutline"
+             [class.favourite]="person.isFavourite"
+             [class.clickable]="CanUpdate"
+             (click)="CanUpdate && toggleFavourite($event)"
+    ></ng-icon>
     {{person.name}} ({{person.count}})
 
   </div>

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

@@ -8,9 +8,6 @@
   cursor: pointer;
 }
 
-.oi {
-  font-size: 59pt;
-}
 
 #map {
   width: 100%;

src/frontend/app/ui/settings/template/template.component.html

@@ -2,7 +2,8 @@
   <div class="card mb-4">
     <div class="card-header">
       <h5 class="d-inline-block mb-0">
-        <span class="oi oi-{{icon}}"></span> {{Name}}
+        <ng-icon [name]="icon"></ng-icon>
+        {{Name}}
       </h5>
       <div *ngIf="states.value.enabled !== undefined" class="float-end p-0">
 
@@ -69,7 +70,8 @@
 
   <ng-template #Recursion let-rStates="rStates" let-topLevel="topLevel" let-skipJobs="skipJobs"
                let-confPath="confPath">
-    <div class="alert alert-secondary" role="alert" *ngIf="rStates.description && settingsService.configStyle == ConfigStyle.full">
+    <div class="alert alert-secondary" role="alert"
+         *ngIf="rStates.description && settingsService.configStyle == ConfigStyle.full">
       {{rStates.description}}
       <a *ngIf="rStates.tags?.githubIssue"
          [href]="'https://github.com/bpatrik/pigallery2/issues/'+rStates.tags?.githubIssue">
@@ -84,10 +86,12 @@
           [ngModel]="rStates?.value.__state[ck]">
         </app-settings-entry>
         <ng-container *ngIf="isExpandableConfig(rStates.value.__state[ck])">
-          <div class="card mt-2 mb-2" *ngIf="topLevel && rStates?.value.__state[ck].tags?.uiIcon" [id]="ConfigPath+'.'+ck">
+          <div class="card mt-2 mb-2" *ngIf="topLevel && rStates?.value.__state[ck].tags?.uiIcon"
+               [id]="ConfigPath+'.'+ck">
             <div class="card-body">
-              <h5 class="card-title"><span
-                class="oi oi-{{rStates?.value.__state[ck].tags?.uiIcon}}"></span> {{rStates?.value.__state[ck].tags?.name || ck}}
+              <h5 class="card-title">
+                <ng-icon [name]="rStates?.value.__state[ck].tags?.uiIcon"></ng-icon>
+                {{rStates?.value.__state[ck].tags?.name || ck}}
               </h5>
               <ng-container
                 *ngTemplateOutlet="Recursion; context:{ rStates: rStates.value.__state[ck], confPath:confPath+'.'+ck }"
@@ -124,7 +128,8 @@
   <ng-template #JobTemplate let-uiJob="uiJob">
     <div class="mb-2">
       <ng-container *ngFor="let job of uiJob; let i = index">
-        <div class="alert alert-secondary" role="alert" *ngIf="job.description  && settingsService.configStyle == ConfigStyle.full">
+        <div class="alert alert-secondary" role="alert"
+             *ngIf="job.description  && settingsService.configStyle == ConfigStyle.full">
           {{job.description}}
         </div>
         <app-settings-job-button