From 47b1aa7b86af3f8e7bdb31ef977bbe83b32dd31a Mon Sep 17 00:00:00 2001
From: "Patrik J. Braun" <bra.patrik@gmail.com>
Date: Sat, 28 Dec 2019 20:08:55 +0100
Subject: [PATCH] improving changed settings visualization

---
 src/frontend/app/ui/admin/admin.component.html                | 4 +---
 .../app/ui/settings/_abstract/abstract.settings.component.ts  | 2 +-
 .../app/ui/settings/basic/basic.settings.component.html       | 2 +-
 .../app/ui/settings/database/database.settings.component.html | 1 -
 .../app/ui/settings/faces/faces.settings.component.html       | 2 +-
 .../app/ui/settings/indexing/indexing.settings.component.html | 2 +-
 .../app/ui/settings/jobs/jobs.settings.component.html         | 1 -
 src/frontend/app/ui/settings/map/map.settings.component.html  | 3 ++-
 .../ui/settings/metafiles/metafile.settings.component.html    | 2 +-
 .../app/ui/settings/other/other.settings.component.html       | 2 +-
 .../app/ui/settings/photo/photo.settings.component.html       | 3 ++-
 .../random-photo/random-photo.settings.component.html         | 1 -
 .../app/ui/settings/search/search.settings.component.html     | 2 +-
 .../app/ui/settings/share/share.settings.component.html       | 2 +-
 .../ui/settings/thumbnail/thumbnail.settings.component.html   | 1 -
 15 files changed, 13 insertions(+), 17 deletions(-)

diff --git a/src/frontend/app/ui/admin/admin.component.html b/src/frontend/app/ui/admin/admin.component.html
index 3d67efd..0969a4e 100644
--- a/src/frontend/app/ui/admin/admin.component.html
+++ b/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>
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 0056846..07d6faa 100644
--- a/src/frontend/app/ui/settings/_abstract/abstract.settings.component.ts
+++ b/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 {
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 21715b5..49bfd86 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}}<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>
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 95e6893..108f530 100644
--- a/src/frontend/app/ui/settings/database/database.settings.component.html
+++ b/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>
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 2e773a0..010c5ff 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]="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"
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 bc1d8f4..dd0c655 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}}<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>
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 0b9901b..52b8f3c 100644
--- a/src/frontend/app/ui/settings/jobs/jobs.settings.component.html
+++ b/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>
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 23dfd7f..de4be2b 100644
--- a/src/frontend/app/ui/settings/map/map.settings.component.html
+++ b/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"
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 a3a7ce1..2abfd74 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}}<ng-container *ngIf="changed">*</ng-container>
+      {{Name}}
       <div class="switch-wrapper">
         <bSwitch
           class="switch"
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 8e980d5..b58d1ac 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}}<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>
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 9210f39..8af9b00 100644
--- a/src/frontend/app/ui/settings/photo/photo.settings.component.html
+++ b/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"
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 3a14d14..7f07068 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
@@ -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"
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 8f4c9e7..f2df5af 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]="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"
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 a7f4cb8..cb2ad02 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]="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"
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 c235170..fd57362 100644
--- a/src/frontend/app/ui/settings/thumbnail/thumbnail.settings.component.html
+++ b/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>