Improving settings UI

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>

src/frontend/app/ui/settings/_abstract/ISettingsComponent.ts

@@ -2,5 +2,6 @@ export interface ISettingsComponent {
 
   HasAvailableSettings: boolean;
   Name: string;
+  icon: string;
   Changed: boolean;
 }

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,

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"

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);
   }
 
 

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>

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();
   }

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>

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 {

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

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);
 
   }
 

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 {ClientFacesConfig} from '../../../../../common/config/public/ClientConfig';
-import {DatabaseType, ServerConfig} from '../../../../../common/config/private/PrivateConfig';
+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;

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>

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,

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>

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,

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>
 

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);
   }

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});
   }

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>

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);
   }
 
 

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>

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
     }));

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>
 

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 {ServerPhotoConfig} from '../../../../../common/config/private/PrivateConfig';
-import {ClientConfig, ClientPhotoConfig} from '../../../../../common/config/public/ClientConfig';
+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;
-  }
+  };
 }
 
 

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>

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 {

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"

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);
   }
 
 

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>
 

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);
   }
 
 

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;
   }

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>
 

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 {

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 &&

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>

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 {ServerThumbnailConfig} from '../../../../../common/config/private/PrivateConfig';
-import {ClientConfig, ClientThumbnailConfig} from '../../../../../common/config/public/ClientConfig';
+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
     }));

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"

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',

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"

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
     }));