improving changed settings visualization

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

@@ -54,9 +54,7 @@
                       *ngFor="let s of contents; let i=index;"
                       (click)="scrollTo(i)"
                       [hidden]="!s.HasAvailableSettings">
-                {{s.Name}}<!--
-                -->
-                <ng-container *ngIf="s.Changed">*</ng-container>
+                {{s.Name}}
               </button>
             </div>
           </div>

src/frontend/app/ui/settings/_abstract/abstract.settings.component.ts

@@ -57,7 +57,7 @@ export abstract class SettingsComponent<T extends { [key: string]: any }, S exte
 
 
   get Name(): string {
-    return this.name;
+    return this.changed ? this.name + '*' : this.name;
   }
 
   get Changed(): boolean {

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}}<ng-container *ngIf="changed">*</ng-container>
+      {{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.html

@@ -2,7 +2,6 @@
   <div class="card mb-4">
     <h5 class="card-header">
       {{Name}}
-      <ng-container *ngIf="changed">*</ng-container>
     </h5>
     <div class="card-body">
       <div [hidden]="!error" class="alert alert-danger" role="alert"><strong>Error: </strong>{{error}}</div>

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

@@ -2,7 +2,7 @@
   <div class="card mb-4"
        [ngClass]="settings.enabled && !_settingsService.isSupported()?'panel-warning':''">
     <h5 class="card-header">
-      {{Name}}<ng-container *ngIf="changed">*</ng-container>
+      {{Name}}
       <div class="switch-wrapper">
         <bSwitch
           class="switch"

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}}<ng-container *ngIf="changed">*</ng-container>
+      {{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.html

@@ -2,7 +2,6 @@
   <div class="card mb-4">
     <h5 class="card-header">
       {{Name}}
-      <ng-container *ngIf="changed">*</ng-container>
     </h5>
     <div class="card-body">
       <div [hidden]="!error" class="alert alert-danger" role="alert"><strong>Error: </strong>{{error}}</div>

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

@@ -1,6 +1,7 @@
 <form #settingsForm="ngForm" class="form-horizontal">
   <div class="card mb-4">
-    <h5 class="card-header">{{Name}}<ng-container *ngIf="changed">*</ng-container>
+    <h5 class="card-header">
+      {{Name}}
       <div class="switch-wrapper">
         <bSwitch
           class="switch"

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}}<ng-container *ngIf="changed">*</ng-container>
+      {{Name}}
       <div class="switch-wrapper">
         <bSwitch
           class="switch"

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}}<ng-container *ngIf="changed">*</ng-container>
+      {{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/photo/photo.settings.component.html

@@ -1,6 +1,7 @@
 <form #settingsForm="ngForm" class="form-horizontal">
   <div class="card mb-4">
-    <h5 class="card-header">{{Name}}<span *ngIf="changed">*</span></h5>
+    <h5 class="card-header">
+      {{Name}}</h5>
     <div class="card-body">
       <div [hidden]="!error" class="alert alert-danger" role="alert"><strong>Error: </strong>{{error}}</div>
       <div [hidden]="settings.photoProcessingLibrary!=PhotoProcessingLib.Jimp"

src/frontend/app/ui/settings/random-photo/random-photo.settings.component.html

@@ -3,7 +3,6 @@
        [ngClass]="settings.enabled && !_settingsService.isSupported()?'panel-warning':''">
     <h5 class="card-header">
       {{Name}}
-      <ng-container *ngIf="changed">*</ng-container>
       <div class="switch-wrapper">
         <bSwitch
           class="switch"

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

@@ -2,7 +2,7 @@
   <div class="card mb-4"
        [ngClass]="settings.enabled && !_settingsService.isSupported()?'panel-warning':''">
     <h5 class="card-header">
-      {{Name}}<ng-container *ngIf="changed">*</ng-container>
+      {{Name}}
       <div class="switch-wrapper">
         <bSwitch
           class="switch"

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

@@ -2,7 +2,7 @@
   <div class="card mb-4"
        [ngClass]="settings.enabled && !_settingsService.isSupported()?'panel-warning':''">
     <h5 class="card-header">
-      {{Name}}<ng-container *ngIf="changed">*</ng-container>
+      {{Name}}
       <div class="switch-wrapper">
         <bSwitch
           class="switch"

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

@@ -2,7 +2,6 @@
   <div class="card mb-4">
     <h5 class="card-header">
       {{Name}}
-      <ng-container *ngIf="changed">*</ng-container>
     </h5>
     <div class="card-body">
       <div [hidden]="!error" class="alert alert-danger" role="alert"><strong>Error: </strong>{{error}}</div>