From 97fcc3eeeaa51e8d985041a25526f6d7c83acfe4 Mon Sep 17 00:00:00 2001
From: "Patrik J. Braun" <bra.patrik@gmail.com>
Date: Wed, 26 Jan 2022 23:38:18 +0100
Subject: [PATCH] Improving settings UI

---
 src/frontend/app/ui/admin/admin.component.html         |  2 +-
 .../app/ui/settings/_abstract/ISettingsComponent.ts    |  1 +
 .../settings/_abstract/abstract.settings.component.ts  |  1 +
 .../ui/settings/albums/albums.settings.component.html  |  2 +-
 .../ui/settings/albums/albums.settings.component.ts    |  2 +-
 .../ui/settings/basic/basic.settings.component.html    |  2 +-
 .../app/ui/settings/basic/basic.settings.component.ts  |  2 +-
 .../settings/database/database.settings.component.html |  2 +-
 .../settings/database/database.settings.component.ts   |  4 ++--
 .../ui/settings/faces/faces.settings.component.html    |  2 +-
 .../app/ui/settings/faces/faces.settings.component.ts  |  4 ++--
 .../app/ui/settings/faces/faces.settings.service.ts    |  8 ++++++--
 .../settings/indexing/indexing.settings.component.html |  2 +-
 .../settings/indexing/indexing.settings.component.ts   |  1 +
 .../app/ui/settings/jobs/jobs.settings.component.html  |  2 +-
 .../app/ui/settings/jobs/jobs.settings.component.ts    |  1 +
 .../app/ui/settings/map/map.settings.component.html    |  3 ++-
 .../app/ui/settings/map/map.settings.component.ts      |  2 +-
 .../app/ui/settings/map/map.settings.service.ts        |  6 +++++-
 .../metafiles/metafile.settings.component.html         |  2 +-
 .../settings/metafiles/metafile.settings.component.ts  |  4 ++--
 .../ui/settings/other/other.settings.component.html    |  2 +-
 .../app/ui/settings/other/other.settings.component.ts  |  2 +-
 .../ui/settings/photo/photo.settings.component.html    |  3 ++-
 .../app/ui/settings/photo/photo.settings.component.ts  | 10 +++++-----
 .../settings/preview/preview.settings.component.html   |  2 +-
 .../ui/settings/preview/preview.settings.component.ts  |  2 +-
 .../random-photo/random-photo.settings.component.html  |  2 +-
 .../random-photo/random-photo.settings.component.ts    |  2 +-
 .../ui/settings/search/search.settings.component.html  |  3 ++-
 .../ui/settings/search/search.settings.component.ts    |  2 +-
 .../app/ui/settings/search/search.settings.service.ts  |  3 +++
 .../ui/settings/share/share.settings.component.html    |  3 ++-
 .../app/ui/settings/share/share.settings.component.ts  |  4 ++--
 .../app/ui/settings/share/share.settings.service.ts    |  3 +++
 .../thumbnail/thumbnail.settings.component.html        |  2 +-
 .../settings/thumbnail/thumbnail.settings.component.ts |  8 ++++----
 .../usermanager/usermanager.settings.component.html    |  2 +-
 .../usermanager/usermanager.settings.component.ts      |  1 +
 .../ui/settings/video/video.settings.component.html    |  2 +-
 .../app/ui/settings/video/video.settings.component.ts  |  2 +-
 41 files changed, 69 insertions(+), 46 deletions(-)

diff --git a/src/frontend/app/ui/admin/admin.component.html b/src/frontend/app/ui/admin/admin.component.html
index 807370eb..abaaaf65 100644
--- a/src/frontend/app/ui/admin/admin.component.html
+++ b/src/frontend/app/ui/admin/admin.component.html
@@ -81,7 +81,7 @@
                       *ngFor="let s of contents; let i=index;"
                       (click)="scrollTo(i)"
                       [hidden]="!s.HasAvailableSettings">
-                {{s.Name}}
+               <span class="oi oi-{{s.icon}}"></span> {{s.Name}}
               </button>
             </div>
           </div>
diff --git a/src/frontend/app/ui/settings/_abstract/ISettingsComponent.ts b/src/frontend/app/ui/settings/_abstract/ISettingsComponent.ts
index 2d3814b0..865bf103 100644
--- a/src/frontend/app/ui/settings/_abstract/ISettingsComponent.ts
+++ b/src/frontend/app/ui/settings/_abstract/ISettingsComponent.ts
@@ -2,5 +2,6 @@ export interface ISettingsComponent {
 
   HasAvailableSettings: boolean;
   Name: string;
+  icon: string;
   Changed: boolean;
 }
diff --git a/src/frontend/app/ui/settings/_abstract/abstract.settings.component.ts b/src/frontend/app/ui/settings/_abstract/abstract.settings.component.ts
index d5fecd53..8d392140 100644
--- a/src/frontend/app/ui/settings/_abstract/abstract.settings.component.ts
+++ b/src/frontend/app/ui/settings/_abstract/abstract.settings.component.ts
@@ -58,6 +58,7 @@ export abstract class SettingsComponentDirective<T extends { [key: string]: any
   private readonly settingsSubscription: Subscription = null;
 
   protected constructor(private name: string,
+                        public icon: string,
                         protected authService: AuthenticationService,
                         private navigation: NavigationService,
                         public settingsService: S,
diff --git a/src/frontend/app/ui/settings/albums/albums.settings.component.html b/src/frontend/app/ui/settings/albums/albums.settings.component.html
index 67e17791..677a62ed 100644
--- a/src/frontend/app/ui/settings/albums/albums.settings.component.html
+++ b/src/frontend/app/ui/settings/albums/albums.settings.component.html
@@ -1,7 +1,7 @@
 <form #settingsForm="ngForm" class="form-horizontal">
   <div class="card mb-4">
     <h5 class="card-header">
-      {{Name}}
+      <span class="oi oi-{{icon}}"></span> {{Name}}
       <div class="switch-wrapper">
         <bSwitch
           class="switch"
diff --git a/src/frontend/app/ui/settings/albums/albums.settings.component.ts b/src/frontend/app/ui/settings/albums/albums.settings.component.ts
index 15d31f7a..3880f7f3 100644
--- a/src/frontend/app/ui/settings/albums/albums.settings.component.ts
+++ b/src/frontend/app/ui/settings/albums/albums.settings.component.ts
@@ -20,7 +20,7 @@ export class AlbumsSettingsComponent extends SettingsComponentDirective<ClientAl
               navigation: NavigationService,
               settingsService: AlbumsSettingsService,
               notification: NotificationService) {
-    super($localize`Albums`, authService, navigation, settingsService, notification, s => s.Client.Album);
+    super($localize`Albums`, 'grid-two-up', authService, navigation, settingsService, notification, s => s.Client.Album);
   }
 
 
diff --git a/src/frontend/app/ui/settings/basic/basic.settings.component.html b/src/frontend/app/ui/settings/basic/basic.settings.component.html
index 58a693a4..30f8aa8c 100644
--- a/src/frontend/app/ui/settings/basic/basic.settings.component.html
+++ b/src/frontend/app/ui/settings/basic/basic.settings.component.html
@@ -1,7 +1,7 @@
 <form #settingsForm="ngForm" class="form-horizontal">
   <div class="card mb-4">
     <h5 class="card-header">
-      {{Name}}
+      <span class="oi oi-{{icon}}"></span> {{Name}}
     </h5>
     <div class="card-body">
       <div [hidden]="!error" class="alert alert-danger" role="alert"><strong>Error: </strong>{{error}}</div>
diff --git a/src/frontend/app/ui/settings/basic/basic.settings.component.ts b/src/frontend/app/ui/settings/basic/basic.settings.component.ts
index 9ad36f69..d5299261 100644
--- a/src/frontend/app/ui/settings/basic/basic.settings.component.ts
+++ b/src/frontend/app/ui/settings/basic/basic.settings.component.ts
@@ -23,7 +23,7 @@ export class BasicSettingsComponent extends SettingsComponentDirective<BasicConf
               navigation: NavigationService,
               settingsService: BasicSettingsService,
               notification: NotificationService) {
-    super($localize`Basic`, authService, navigation, settingsService, notification,
+    super($localize`Basic`, 'star', authService, navigation, settingsService, notification,
       BasicConfigDTOUtil.mapToDTO);
     this.checkUrlError();
   }
diff --git a/src/frontend/app/ui/settings/database/database.settings.component.html b/src/frontend/app/ui/settings/database/database.settings.component.html
index c33f2900..3916fcba 100644
--- a/src/frontend/app/ui/settings/database/database.settings.component.html
+++ b/src/frontend/app/ui/settings/database/database.settings.component.html
@@ -1,7 +1,7 @@
 <form #settingsForm="ngForm" class="form-horizontal">
   <div class="card mb-4">
     <h5 class="card-header">
-      {{Name}}
+      <span class="oi oi-{{icon}}"></span> {{Name}}
     </h5>
     <div class="card-body">
       <div [hidden]="!error" class="alert alert-danger" role="alert"><strong>Error: </strong>{{error}}</div>
diff --git a/src/frontend/app/ui/settings/database/database.settings.component.ts b/src/frontend/app/ui/settings/database/database.settings.component.ts
index 29ee64bb..2a51b450 100644
--- a/src/frontend/app/ui/settings/database/database.settings.component.ts
+++ b/src/frontend/app/ui/settings/database/database.settings.component.ts
@@ -5,7 +5,7 @@ import {NotificationService} from '../../../model/notification.service';
 import {NavigationService} from '../../../model/navigation.service';
 import {SettingsComponentDirective} from '../_abstract/abstract.settings.component';
 import {DatabaseSettingsService} from './database.settings.service';
-import {DatabaseType, ServerConfig, ServerDataBaseConfig} from '../../../../../common/config/private/PrivateConfig';
+import {DatabaseType, ServerDataBaseConfig} from '../../../../../common/config/private/PrivateConfig';
 
 @Component({
   selector: 'app-settings-database',
@@ -23,7 +23,7 @@ export class DatabaseSettingsComponent extends SettingsComponentDirective<Server
               navigation: NavigationService,
               settingsService: DatabaseSettingsService,
               notification: NotificationService) {
-    super($localize`Database`, authService, navigation, settingsService, notification, s => s.Server.Database);
+    super($localize`Database`, 'list', authService, navigation, settingsService, notification, s => s.Server.Database);
   }
 
   ngOnInit(): void {
diff --git a/src/frontend/app/ui/settings/faces/faces.settings.component.html b/src/frontend/app/ui/settings/faces/faces.settings.component.html
index 285e7544..22601216 100644
--- a/src/frontend/app/ui/settings/faces/faces.settings.component.html
+++ b/src/frontend/app/ui/settings/faces/faces.settings.component.html
@@ -2,7 +2,7 @@
   <div class="card mb-4"
        [ngClass]="states.enabled.value && !settingsService.isSupported()?'panel-warning':''">
     <h5 class="card-header">
-      {{Name}}
+      <span class="oi oi-{{icon}}"></span> {{Name}}
       <div class="switch-wrapper"
            [class.changed-settings]="states.enabled.value != states.enabled.default">
         <bSwitch
diff --git a/src/frontend/app/ui/settings/faces/faces.settings.component.ts b/src/frontend/app/ui/settings/faces/faces.settings.component.ts
index 5040ebc3..b04ce3bc 100644
--- a/src/frontend/app/ui/settings/faces/faces.settings.component.ts
+++ b/src/frontend/app/ui/settings/faces/faces.settings.component.ts
@@ -6,7 +6,7 @@ import {NotificationService} from '../../../model/notification.service';
 import {FacesSettingsService} from './faces.settings.service';
 import {Utils} from '../../../../../common/Utils';
 import {UserRoles} from '../../../../../common/entities/UserDTO';
-import {ClientConfig, ClientFacesConfig} from '../../../../../common/config/public/ClientConfig';
+import {ClientFacesConfig} from '../../../../../common/config/public/ClientConfig';
 
 @Component({
   selector: 'app-settings-faces',
@@ -27,7 +27,7 @@ export class FacesSettingsComponent extends SettingsComponentDirective<ClientFac
               navigation: NavigationService,
               settingsService: FacesSettingsService,
               notification: NotificationService) {
-    super($localize`Faces`, authService, navigation, settingsService, notification, s => s.Client.Faces);
+    super($localize`Faces`, 'people', authService, navigation, settingsService, notification, s => s.Client.Faces);
 
   }
 
diff --git a/src/frontend/app/ui/settings/faces/faces.settings.service.ts b/src/frontend/app/ui/settings/faces/faces.settings.service.ts
index 1d7cbbf8..3129239e 100644
--- a/src/frontend/app/ui/settings/faces/faces.settings.service.ts
+++ b/src/frontend/app/ui/settings/faces/faces.settings.service.ts
@@ -2,8 +2,8 @@ import {Injectable} from '@angular/core';
 import {NetworkService} from '../../../model/network/network.service';
 import {SettingsService} from '../settings.service';
 import {AbstractSettingsService} from '../_abstract/abstract.settings.service';
-import {ClientConfig, ClientFacesConfig} from '../../../../../common/config/public/ClientConfig';
-import {DatabaseType, ServerConfig} from '../../../../../common/config/private/PrivateConfig';
+import {ClientFacesConfig} from '../../../../../common/config/public/ClientConfig';
+import {DatabaseType} from '../../../../../common/config/private/PrivateConfig';
 
 @Injectable()
 export class FacesSettingsService extends AbstractSettingsService<ClientFacesConfig> {
@@ -12,6 +12,10 @@ export class FacesSettingsService extends AbstractSettingsService<ClientFacesCon
     super(settingsService);
   }
 
+  showInSimplifiedMode(): boolean {
+    return false;
+  }
+
   public isSupported(): boolean {
     return this.settingsService.settings.value.Server.Database.type !== DatabaseType.memory &&
       this.settingsService.settings.value.Client.Search.enabled === true;
diff --git a/src/frontend/app/ui/settings/indexing/indexing.settings.component.html b/src/frontend/app/ui/settings/indexing/indexing.settings.component.html
index c4129251..cc17b7a7 100644
--- a/src/frontend/app/ui/settings/indexing/indexing.settings.component.html
+++ b/src/frontend/app/ui/settings/indexing/indexing.settings.component.html
@@ -1,7 +1,7 @@
 <form #settingsForm="ngForm" class="form-horizontal">
   <div class="card mb-4">
     <h5 class="card-header">
-      {{Name}}
+      <span class="oi oi-{{icon}}"></span> {{Name}}
     </h5>
     <div class="card-body">
       <div [hidden]="!error" class="alert alert-danger" role="alert"><strong>Error: </strong>{{error}}</div>
diff --git a/src/frontend/app/ui/settings/indexing/indexing.settings.component.ts b/src/frontend/app/ui/settings/indexing/indexing.settings.component.ts
index dd2ef53e..e441b589 100644
--- a/src/frontend/app/ui/settings/indexing/indexing.settings.component.ts
+++ b/src/frontend/app/ui/settings/indexing/indexing.settings.component.ts
@@ -34,6 +34,7 @@ export class IndexingSettingsComponent extends SettingsComponentDirective<Server
               notification: NotificationService) {
 
     super($localize`Folder indexing`,
+      'pie-chart',
       authService,
       navigation,
       settingsService,
diff --git a/src/frontend/app/ui/settings/jobs/jobs.settings.component.html b/src/frontend/app/ui/settings/jobs/jobs.settings.component.html
index a9372961..2f0668fc 100644
--- a/src/frontend/app/ui/settings/jobs/jobs.settings.component.html
+++ b/src/frontend/app/ui/settings/jobs/jobs.settings.component.html
@@ -1,7 +1,7 @@
 <form #settingsForm="ngForm" class="form-horizontal">
   <div class="card mb-4">
     <h5 class="card-header">
-      {{Name}}
+      <span class="oi oi-{{icon}}"></span> {{Name}}
     </h5>
     <div class="card-body">
       <div [hidden]="!error" class="alert alert-danger" role="alert"><strong>Error: </strong>{{error}}</div>
diff --git a/src/frontend/app/ui/settings/jobs/jobs.settings.component.ts b/src/frontend/app/ui/settings/jobs/jobs.settings.component.ts
index 44acb99e..ca4c2d7a 100644
--- a/src/frontend/app/ui/settings/jobs/jobs.settings.component.ts
+++ b/src/frontend/app/ui/settings/jobs/jobs.settings.component.ts
@@ -55,6 +55,7 @@ export class JobsSettingsComponent extends SettingsComponentDirective<ServerJobC
               notification: NotificationService) {
 
     super($localize`Jobs`,
+      'project',
       authService,
       navigation,
       settingsService,
diff --git a/src/frontend/app/ui/settings/map/map.settings.component.html b/src/frontend/app/ui/settings/map/map.settings.component.html
index 1c12d8d0..294a9859 100644
--- a/src/frontend/app/ui/settings/map/map.settings.component.html
+++ b/src/frontend/app/ui/settings/map/map.settings.component.html
@@ -1,7 +1,7 @@
 <form #settingsForm="ngForm" class="form-horizontal">
   <div class="card mb-4">
     <h5 class="card-header">
-      {{Name}}
+      <span class="oi oi-{{icon}}"></span> {{Name}}
       <div class="switch-wrapper">
         <bSwitch
           class="switch"
@@ -40,6 +40,7 @@
           name="Map provider"
           i18n-name
           [ngModel]="states.mapProvider"
+          [simplifiedMode]="simplifiedMode"
           required="true">
         </app-settings-entry>
 
diff --git a/src/frontend/app/ui/settings/map/map.settings.component.ts b/src/frontend/app/ui/settings/map/map.settings.component.ts
index 8470a3d2..df769e1f 100644
--- a/src/frontend/app/ui/settings/map/map.settings.component.ts
+++ b/src/frontend/app/ui/settings/map/map.settings.component.ts
@@ -24,7 +24,7 @@ export class MapSettingsComponent extends SettingsComponentDirective<ClientMapCo
               navigation: NavigationService,
               settingsService: MapSettingsService,
               notification: NotificationService) {
-    super($localize`Map`, authService, navigation, settingsService, notification, s => s.Client.Map);
+    super($localize`Map`,'map-marker', authService, navigation, settingsService, notification, s => s.Client.Map);
 
     this.mapProviders = Utils.enumToArray(MapProviders);
   }
diff --git a/src/frontend/app/ui/settings/map/map.settings.service.ts b/src/frontend/app/ui/settings/map/map.settings.service.ts
index f928c6b8..660aa6ad 100644
--- a/src/frontend/app/ui/settings/map/map.settings.service.ts
+++ b/src/frontend/app/ui/settings/map/map.settings.service.ts
@@ -2,7 +2,7 @@ import {Injectable} from '@angular/core';
 import {NetworkService} from '../../../model/network/network.service';
 import {SettingsService} from '../settings.service';
 import {AbstractSettingsService} from '../_abstract/abstract.settings.service';
-import {ClientConfig, ClientMapConfig} from '../../../../../common/config/public/ClientConfig';
+import {ClientMapConfig} from '../../../../../common/config/public/ClientConfig';
 
 @Injectable()
 export class MapSettingsService extends AbstractSettingsService<ClientMapConfig> {
@@ -12,6 +12,10 @@ export class MapSettingsService extends AbstractSettingsService<ClientMapConfig>
 
   }
 
+  showInSimplifiedMode(): boolean {
+    return false;
+  }
+
   public updateSettings(settings: ClientMapConfig): Promise<void> {
     return this.networkService.putJson('/settings/map', {settings});
   }
diff --git a/src/frontend/app/ui/settings/metafiles/metafile.settings.component.html b/src/frontend/app/ui/settings/metafiles/metafile.settings.component.html
index 19a242f0..c5387bbb 100644
--- a/src/frontend/app/ui/settings/metafiles/metafile.settings.component.html
+++ b/src/frontend/app/ui/settings/metafiles/metafile.settings.component.html
@@ -1,7 +1,7 @@
 <form #settingsForm="ngForm" class="form-horizontal">
   <div class="card mb-4">
     <h5 class="card-header">
-      {{Name}}
+      <span class="oi oi-{{icon}}"></span> {{Name}}
     </h5>
     <div class="card-body">
       <div [hidden]="!error" class="alert alert-danger" role="alert"><strong>Error: </strong>{{error}}</div>
diff --git a/src/frontend/app/ui/settings/metafiles/metafile.settings.component.ts b/src/frontend/app/ui/settings/metafiles/metafile.settings.component.ts
index 5b1ca914..2f89bde6 100644
--- a/src/frontend/app/ui/settings/metafiles/metafile.settings.component.ts
+++ b/src/frontend/app/ui/settings/metafiles/metafile.settings.component.ts
@@ -4,7 +4,7 @@ import {SettingsComponentDirective} from '../_abstract/abstract.settings.compone
 import {AuthenticationService} from '../../../model/network/authentication.service';
 import {NavigationService} from '../../../model/navigation.service';
 import {NotificationService} from '../../../model/notification.service';
-import {ClientConfig, ClientMetaFileConfig} from '../../../../../common/config/public/ClientConfig';
+import {ClientMetaFileConfig} from '../../../../../common/config/public/ClientConfig';
 
 
 @Component({
@@ -20,7 +20,7 @@ export class MetaFileSettingsComponent extends SettingsComponentDirective<Client
               navigation: NavigationService,
               settingsService: MetaFileSettingsService,
               notification: NotificationService) {
-    super($localize`Meta file`, authService, navigation, settingsService, notification, s => s.Client.MetaFile);
+    super($localize`Meta file`, 'file', authService, navigation, settingsService, notification, s => s.Client.MetaFile);
   }
 
 
diff --git a/src/frontend/app/ui/settings/other/other.settings.component.html b/src/frontend/app/ui/settings/other/other.settings.component.html
index dcb13475..1328a1b1 100644
--- a/src/frontend/app/ui/settings/other/other.settings.component.html
+++ b/src/frontend/app/ui/settings/other/other.settings.component.html
@@ -1,7 +1,7 @@
 <form #settingsForm="ngForm" class="form-horizontal" >
   <div class="card mb-4">
     <h5 class="card-header">
-      {{Name}}
+      <span class="oi oi-{{icon}}"></span> {{Name}}
     </h5>
     <div class="card-body">
       <div [hidden]="!error" class="alert alert-danger" role="alert"><strong i18n>Error: </strong>{{error}}</div>
diff --git a/src/frontend/app/ui/settings/other/other.settings.component.ts b/src/frontend/app/ui/settings/other/other.settings.component.ts
index d47f48d1..f6514bf5 100644
--- a/src/frontend/app/ui/settings/other/other.settings.component.ts
+++ b/src/frontend/app/ui/settings/other/other.settings.component.ts
@@ -29,7 +29,7 @@ export class OtherSettingsComponent extends SettingsComponentDirective<OtherConf
               settingsService: OtherSettingsService,
               notification: NotificationService,
               private formatter: StringifySortingMethod) {
-    super($localize`Other`, authService, navigation, settingsService, notification, s => ({
+    super($localize`Other`, 'target', authService, navigation, settingsService, notification, s => ({
       Server: s.Server.Threading,
       Client: s.Client.Other
     }));
diff --git a/src/frontend/app/ui/settings/photo/photo.settings.component.html b/src/frontend/app/ui/settings/photo/photo.settings.component.html
index ffd449c6..02724da7 100644
--- a/src/frontend/app/ui/settings/photo/photo.settings.component.html
+++ b/src/frontend/app/ui/settings/photo/photo.settings.component.html
@@ -1,7 +1,8 @@
 <form #settingsForm="ngForm" class="form-horizontal">
   <div class="card mb-4">
     <h5 class="card-header">
-      {{Name}}</h5>
+      <span class="oi oi-{{icon}}"></span> {{Name}}
+    </h5>
     <div class="card-body">
       <div [hidden]="!error" class="alert alert-danger" role="alert"><strong>Error: </strong>{{error}}</div>
 
diff --git a/src/frontend/app/ui/settings/photo/photo.settings.component.ts b/src/frontend/app/ui/settings/photo/photo.settings.component.ts
index 4f33d297..85632bab 100644
--- a/src/frontend/app/ui/settings/photo/photo.settings.component.ts
+++ b/src/frontend/app/ui/settings/photo/photo.settings.component.ts
@@ -5,10 +5,10 @@ import {AuthenticationService} from '../../../model/network/authentication.servi
 import {NavigationService} from '../../../model/navigation.service';
 import {NotificationService} from '../../../model/notification.service';
 import {ScheduledJobsService} from '../scheduled-jobs.service';
-import {DefaultsJobs, JobDTO, JobDTOUtils} from '../../../../../common/entities/job/JobDTO';
+import {DefaultsJobs, JobDTOUtils} from '../../../../../common/entities/job/JobDTO';
 import {JobProgressDTO, JobProgressStates} from '../../../../../common/entities/job/JobProgressDTO';
-import {ServerConfig, ServerPhotoConfig} from '../../../../../common/config/private/PrivateConfig';
-import {ClientConfig, ClientPhotoConfig} from '../../../../../common/config/public/ClientConfig';
+import {ServerPhotoConfig} from '../../../../../common/config/private/PrivateConfig';
+import {ClientPhotoConfig} from '../../../../../common/config/public/ClientConfig';
 
 
 @Component({
@@ -33,7 +33,7 @@ export class PhotoSettingsComponent extends SettingsComponentDirective<{
               settingsService: PhotoSettingsService,
               public jobsService: ScheduledJobsService,
               notification: NotificationService) {
-    super($localize`Photo`, authService, navigation, settingsService, notification, s => ({
+    super($localize`Photo`, 'camera-slr', authService, navigation, settingsService, notification, s => ({
       client: s.Client.Media.Photo,
       server: s.Server.Media.Photo
     }));
@@ -55,7 +55,7 @@ export class PhotoSettingsComponent extends SettingsComponentDirective<{
       v.value += ' ' + $localize`(deprecated, will be removed)`;
     }
     return v;
-  }
+  };
 }
 
 
diff --git a/src/frontend/app/ui/settings/preview/preview.settings.component.html b/src/frontend/app/ui/settings/preview/preview.settings.component.html
index 00866de0..cddec551 100644
--- a/src/frontend/app/ui/settings/preview/preview.settings.component.html
+++ b/src/frontend/app/ui/settings/preview/preview.settings.component.html
@@ -1,7 +1,7 @@
 <form #settingsForm="ngForm" class="form-horizontal">
   <div class="card mb-4">
     <h5 class="card-header">
-      {{Name}}
+      <span class="oi oi-{{icon}}"></span> {{Name}}
     </h5>
     <div class="card-body">
       <div [hidden]="!error" class="alert alert-danger" role="alert"><strong>Error: </strong>{{error}}</div>
diff --git a/src/frontend/app/ui/settings/preview/preview.settings.component.ts b/src/frontend/app/ui/settings/preview/preview.settings.component.ts
index 61e76262..7270bb17 100644
--- a/src/frontend/app/ui/settings/preview/preview.settings.component.ts
+++ b/src/frontend/app/ui/settings/preview/preview.settings.component.ts
@@ -28,7 +28,7 @@ export class PreviewSettingsComponent
               settingsService: PreviewSettingsService,
               notification: NotificationService,
               public jobsService: ScheduledJobsService) {
-    super($localize`Preview`, authService, navigation, settingsService, notification, s => s.Server.Preview);
+    super($localize`Preview`, 'image', authService, navigation, settingsService, notification, s => s.Server.Preview);
   }
 
   get Config(): any {
diff --git a/src/frontend/app/ui/settings/random-photo/random-photo.settings.component.html b/src/frontend/app/ui/settings/random-photo/random-photo.settings.component.html
index 55de5d7c..3843cc1d 100644
--- a/src/frontend/app/ui/settings/random-photo/random-photo.settings.component.html
+++ b/src/frontend/app/ui/settings/random-photo/random-photo.settings.component.html
@@ -2,7 +2,7 @@
   <div class="card mb-4"
        [ngClass]="states.enabled.value && !settingsService.isSupported()?'panel-warning':''">
     <h5 class="card-header">
-      {{Name}}
+      <span class="oi oi-{{icon}}"></span> {{Name}}
       <div class="switch-wrapper">
         <bSwitch
           class="switch"
diff --git a/src/frontend/app/ui/settings/random-photo/random-photo.settings.component.ts b/src/frontend/app/ui/settings/random-photo/random-photo.settings.component.ts
index f5dc9c2c..822151bc 100644
--- a/src/frontend/app/ui/settings/random-photo/random-photo.settings.component.ts
+++ b/src/frontend/app/ui/settings/random-photo/random-photo.settings.component.ts
@@ -19,7 +19,7 @@ export class RandomPhotoSettingsComponent extends SettingsComponentDirective<Cli
               navigation: NavigationService,
               settingsService: RandomPhotoSettingsService,
               notification: NotificationService) {
-    super($localize`Random Photo`, authService, navigation, settingsService, notification, s => s.Client.RandomPhoto);
+    super($localize`Random Photo`, 'random', authService, navigation, settingsService, notification, s => s.Client.RandomPhoto);
   }
 
 
diff --git a/src/frontend/app/ui/settings/search/search.settings.component.html b/src/frontend/app/ui/settings/search/search.settings.component.html
index 31c83665..cf3fc586 100644
--- a/src/frontend/app/ui/settings/search/search.settings.component.html
+++ b/src/frontend/app/ui/settings/search/search.settings.component.html
@@ -2,7 +2,7 @@
   <div class="card mb-4"
        [ngClass]="states.enabled.value && !settingsService.isSupported()?'panel-warning':''">
     <h5 class="card-header">
-      {{Name}}
+      <span class="oi oi-{{icon}}"></span> {{Name}}
       <div class="switch-wrapper">
         <bSwitch
           class="switch"
@@ -32,6 +32,7 @@
           name="Autocomplete"
           description="Show hints while typing search query."
           i18n-description i18n-name
+          [simplifiedMode]="simplifiedMode"
           [ngModel]="states.AutoComplete.enabled">
         </app-settings-entry>
 
diff --git a/src/frontend/app/ui/settings/search/search.settings.component.ts b/src/frontend/app/ui/settings/search/search.settings.component.ts
index 40a2b1d7..57f80275 100644
--- a/src/frontend/app/ui/settings/search/search.settings.component.ts
+++ b/src/frontend/app/ui/settings/search/search.settings.component.ts
@@ -19,7 +19,7 @@ export class SearchSettingsComponent extends SettingsComponentDirective<ClientSe
               navigation: NavigationService,
               settingsService: SearchSettingsService,
               notification: NotificationService) {
-    super($localize`Search`, authService, navigation, settingsService, notification, s => s.Client.Search);
+    super($localize`Search`, 'magnifying-glass', authService, navigation, settingsService, notification, s => s.Client.Search);
   }
 
 
diff --git a/src/frontend/app/ui/settings/search/search.settings.service.ts b/src/frontend/app/ui/settings/search/search.settings.service.ts
index 054a0188..7b57b4e8 100644
--- a/src/frontend/app/ui/settings/search/search.settings.service.ts
+++ b/src/frontend/app/ui/settings/search/search.settings.service.ts
@@ -12,6 +12,9 @@ export class SearchSettingsService extends AbstractSettingsService<ClientSearchC
     super(settingsService);
   }
 
+  showInSimplifiedMode(): boolean {
+    return false;
+  }
   public isSupported(): boolean {
     return this.settingsService.settings.value.Server.Database.type !== DatabaseType.memory;
   }
diff --git a/src/frontend/app/ui/settings/share/share.settings.component.html b/src/frontend/app/ui/settings/share/share.settings.component.html
index 75caff99..b3027a0c 100644
--- a/src/frontend/app/ui/settings/share/share.settings.component.html
+++ b/src/frontend/app/ui/settings/share/share.settings.component.html
@@ -2,7 +2,7 @@
   <div class="card mb-4"
        [ngClass]="states.enabled.value && !settingsService.isSupported()?'panel-warning':''">
     <h5 class="card-header">
-      {{Name}}
+      <span class="oi oi-{{icon}}"></span> {{Name}}
       <div class="switch-wrapper">
         <bSwitch
           class="switch"
@@ -30,6 +30,7 @@
           description="Enables password protected sharing links."
           i18n-description i18n-name
           [ngModel]="states.passwordProtected"
+          [simplifiedMode]="simplifiedMode"
           required="true">
         </app-settings-entry>
 
diff --git a/src/frontend/app/ui/settings/share/share.settings.component.ts b/src/frontend/app/ui/settings/share/share.settings.component.ts
index 14c5b1d1..321be10c 100644
--- a/src/frontend/app/ui/settings/share/share.settings.component.ts
+++ b/src/frontend/app/ui/settings/share/share.settings.component.ts
@@ -4,7 +4,7 @@ import {AuthenticationService} from '../../../model/network/authentication.servi
 import {NavigationService} from '../../../model/navigation.service';
 import {NotificationService} from '../../../model/notification.service';
 import {ShareSettingsService} from './share.settings.service';
-import {ClientConfig, ClientSharingConfig} from '../../../../../common/config/public/ClientConfig';
+import {ClientSharingConfig} from '../../../../../common/config/public/ClientConfig';
 import {SharingDTO} from '../../../../../common/entities/SharingDTO';
 
 @Component({
@@ -23,7 +23,7 @@ export class ShareSettingsComponent extends SettingsComponentDirective<ClientSha
               navigation: NavigationService,
               settingsService: ShareSettingsService,
               notification: NotificationService) {
-    super($localize`Share`, authService, navigation, settingsService, notification, s => s.Client.Sharing);
+    super($localize`Share`, 'share', authService, navigation, settingsService, notification, s => s.Client.Sharing);
   }
 
   ngOnInit(): void {
diff --git a/src/frontend/app/ui/settings/share/share.settings.service.ts b/src/frontend/app/ui/settings/share/share.settings.service.ts
index 09f0d010..20fa2cd5 100644
--- a/src/frontend/app/ui/settings/share/share.settings.service.ts
+++ b/src/frontend/app/ui/settings/share/share.settings.service.ts
@@ -14,6 +14,9 @@ export class ShareSettingsService extends AbstractSettingsService<ClientSharingC
 
   }
 
+  showInSimplifiedMode(): boolean {
+    return false;
+  }
 
   public isSupported(): boolean {
     return this.settingsService.settings.value.Server.Database.type !== DatabaseType.memory &&
diff --git a/src/frontend/app/ui/settings/thumbnail/thumbnail.settings.component.html b/src/frontend/app/ui/settings/thumbnail/thumbnail.settings.component.html
index d7576288..6ce26350 100644
--- a/src/frontend/app/ui/settings/thumbnail/thumbnail.settings.component.html
+++ b/src/frontend/app/ui/settings/thumbnail/thumbnail.settings.component.html
@@ -1,7 +1,7 @@
 <form #settingsForm="ngForm" class="form-horizontal">
   <div class="card mb-4">
     <h5 class="card-header">
-      {{Name}}
+      <span class="oi oi-{{icon}}"></span> {{Name}}
     </h5>
     <div class="card-body">
       <div [hidden]="!error" class="alert alert-danger" role="alert"><strong>Error: </strong>{{error}}</div>
diff --git a/src/frontend/app/ui/settings/thumbnail/thumbnail.settings.component.ts b/src/frontend/app/ui/settings/thumbnail/thumbnail.settings.component.ts
index 1ec4bc63..3fd243a5 100644
--- a/src/frontend/app/ui/settings/thumbnail/thumbnail.settings.component.ts
+++ b/src/frontend/app/ui/settings/thumbnail/thumbnail.settings.component.ts
@@ -4,11 +4,11 @@ import {AuthenticationService} from '../../../model/network/authentication.servi
 import {NavigationService} from '../../../model/navigation.service';
 import {NotificationService} from '../../../model/notification.service';
 import {ThumbnailSettingsService} from './thumbnail.settings.service';
-import {DefaultsJobs, JobDTO, JobDTOUtils} from '../../../../../common/entities/job/JobDTO';
+import {DefaultsJobs, JobDTOUtils} from '../../../../../common/entities/job/JobDTO';
 import {ScheduledJobsService} from '../scheduled-jobs.service';
 import {JobProgressDTO, JobProgressStates} from '../../../../../common/entities/job/JobProgressDTO';
-import {ServerConfig, ServerThumbnailConfig} from '../../../../../common/config/private/PrivateConfig';
-import {ClientConfig, ClientThumbnailConfig} from '../../../../../common/config/public/ClientConfig';
+import {ServerThumbnailConfig} from '../../../../../common/config/private/PrivateConfig';
+import {ClientThumbnailConfig} from '../../../../../common/config/public/ClientConfig';
 
 @Component({
   selector: 'app-settings-thumbnail',
@@ -28,7 +28,7 @@ export class ThumbnailSettingsComponent
               settingsService: ThumbnailSettingsService,
               notification: NotificationService,
               public jobsService: ScheduledJobsService) {
-    super($localize`Thumbnail`, authService, navigation, settingsService, notification, s => ({
+    super($localize`Thumbnail`, 'image', authService, navigation, settingsService, notification, s => ({
       client: s.Client.Media.Thumbnail,
       server: s.Server.Media.Thumbnail
     }));
diff --git a/src/frontend/app/ui/settings/usermanager/usermanager.settings.component.html b/src/frontend/app/ui/settings/usermanager/usermanager.settings.component.html
index 8ed95f1f..37ffae5e 100644
--- a/src/frontend/app/ui/settings/usermanager/usermanager.settings.component.html
+++ b/src/frontend/app/ui/settings/usermanager/usermanager.settings.component.html
@@ -1,6 +1,6 @@
 <div class="card mb-4">
   <h5 class="card-header">
-    {{Name}}
+    <span class="oi oi-{{icon}}"></span> {{Name}}
     <div class="switch-wrapper">
       <bSwitch
         class="switch"
diff --git a/src/frontend/app/ui/settings/usermanager/usermanager.settings.component.ts b/src/frontend/app/ui/settings/usermanager/usermanager.settings.component.ts
index 485f7fe0..4d7fa4df 100644
--- a/src/frontend/app/ui/settings/usermanager/usermanager.settings.component.ts
+++ b/src/frontend/app/ui/settings/usermanager/usermanager.settings.component.ts
@@ -29,6 +29,7 @@ export class UserMangerSettingsComponent implements OnInit, ISettingsComponent {
   Changed = false;
 
 
+  icon = 'person';
   text = {
     Enabled: 'Enabled',
     Disabled: 'Disabled',
diff --git a/src/frontend/app/ui/settings/video/video.settings.component.html b/src/frontend/app/ui/settings/video/video.settings.component.html
index e96a15d9..f746751e 100644
--- a/src/frontend/app/ui/settings/video/video.settings.component.html
+++ b/src/frontend/app/ui/settings/video/video.settings.component.html
@@ -1,7 +1,7 @@
 <form #settingsForm="ngForm" class="form-horizontal">
   <div class="card mb-4">
     <h5 class="card-header">
-      {{Name}}
+      <span class="oi oi-{{icon}}"></span> {{Name}}
       <div class="switch-wrapper">
         <bSwitch
           class="switch"
diff --git a/src/frontend/app/ui/settings/video/video.settings.component.ts b/src/frontend/app/ui/settings/video/video.settings.component.ts
index 4382eafd..dad7bacd 100644
--- a/src/frontend/app/ui/settings/video/video.settings.component.ts
+++ b/src/frontend/app/ui/settings/video/video.settings.component.ts
@@ -40,7 +40,7 @@ export class VideoSettingsComponent
               settingsService: VideoSettingsService,
               public jobsService: ScheduledJobsService,
               notification: NotificationService) {
-    super($localize`Video`, authService, navigation, settingsService, notification, s => ({
+    super($localize`Video`, 'video', authService, navigation, settingsService, notification, s => ({
       client: s.Client.Media.Video,
       server: s.Server.Media.Video
     }));