Improving settings UI

2025-01-14 14:43:17 +08:00 · 2022-01-26 23:38:18 +01:00 · 2022-01-26 23:38:18 +01:00 · 97fcc3eeea
commit 97fcc3eeea
parent 8f871f31f2
41 changed files with 69 additions and 46 deletions
--- 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>
--- 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;
 }
--- 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,
--- 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"
--- 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);
  }


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

  }

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

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


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

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


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


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

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


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

--- 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 {
--- 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 &&
--- 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>
--- 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
    }));
--- 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"
--- 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',
--- 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"
--- 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
    }));