Update app settings component to enable user-changed markers for conf…

…ig settings
safing · Feb 1, 2022 · eda50a1 · eda50a1
1 parent fd41e9f
commit eda50a1
Show file tree

Hide file tree

Showing 2 changed files with 45 additions and 46 deletions.
diff --git a/modules/portmaster/src/app/pages/app-settings/app-settings.html b/modules/portmaster/src/app/pages/app-settings/app-settings.html
@@ -112,7 +112,8 @@ <h1>
 
     <ng-container *ngIf="settings.length > 0; else: noSettingsTemplate">
       <app-settings-view [searchTerm]="searchTerm" [availableSettings]="settings" [highlightKey]="highlightSettingKey"
-        (onSave)="saveSetting($event)" resetLabelText="Use global setting" lockDefaults="true" displayStackable="true">
+        userSettingsMarker="true" (onSave)="saveSetting($event)" resetLabelText="Use global setting" lockDefaults="true"
+        displayStackable="true">
       </app-settings-view>
     </ng-container>
 

diff --git a/modules/portmaster/src/app/pages/app-settings/app-settings.scss b/modules/portmaster/src/app/pages/app-settings/app-settings.scss
@@ -8,51 +8,50 @@ app-tipup {
 
 h1 {
   @apply my-6;
-  display    : flex;
+  display: flex;
   align-items: center;
 
   app-icon {
     --app-icon-size: 35px;
   }
 
   .link {
-    display        : flex;
+    display: flex;
     justify-content: center;
-    align-items    : center;
-    height         : 24px;
-    width          : 24px;
-    opacity        : .5;
+    align-items: center;
+    height: 24px;
+    width: 24px;
+    opacity: .5;
     @apply bg-buttons-dark;
     @apply ml-4;
-    cursor       : pointer;
+    cursor: pointer;
     border-radius: 50%;
-    transition   : all .15s ease-in-out;
+    transition: all .15s ease-in-out;
 
     &:hover {
       opacity: 1;
       @apply bg-buttons-light;
     }
 
     fa-icon {
-      color          : theme('colors.buttons.icon');
-      display        : flex;
-      font-size      : 12px;
-      flex-direction : column;
-      align-items    : center;
+      @apply text-secondary;
+      display: flex;
+      font-size: 12px;
+      flex-direction: column;
+      align-items: center;
       justify-content: center;
     }
   }
 
   .delete-profile-container {
-    flex-grow      : 1;
-    display        : flex;
+    flex-grow: 1;
+    display: flex;
     justify-content: flex-end;
-    align-items    : center;
+    align-items: center;
 
     button {
       transition: all .2s ease-in-out;
-      color     : theme('colors.text.tertiary');
-      @apply bg-transparent;
+      @apply bg-transparent text-tertiary;
       opacity: 0.8;
 
       &:hover {
@@ -63,10 +62,10 @@ h1 {
 }
 
 h2.app-settings {
-  display        : flex;
+  display: flex;
   justify-content: space-between;
-  align-items    : center;
-  padding-left   : 3rem;
+  align-items: center;
+  padding-left: 3rem;
 
   app-dropdown {
     margin-right: 0.5em;
@@ -76,26 +75,25 @@ h2.app-settings {
     display: inline-flex;
 
     fa-icon[icon*="question-circle"] {
-      align-self : center;
+      align-self: center;
       margin-left: 0.35rem;
-      font-size  : 0.8rem;
+      font-size: 0.8rem;
     }
 
   }
 }
 
 .no-customization {
-  display        : flex;
+  display: flex;
   justify-content: center;
-  align-items    : center;
-  flex-direction : column;
+  align-items: center;
+  flex-direction: column;
   @apply p-8;
   @apply mt-8;
 
   fa-icon {
-    @apply text-4xl;
+    @apply text-4xl text-secondary;
     opacity: 0.5;
-    color  : theme('colors.buttons.icon');
   }
 
   p {
@@ -111,7 +109,7 @@ h2.app-settings {
 
 .app-name {
   @apply mx-2;
-  opacity  : 0.7;
+  opacity: 0.7;
   font-size: 0.9em;
 
   app-icon {
@@ -121,16 +119,16 @@ h2.app-settings {
 }
 
 .app-overview {
-  margin-left : calc(34px + 1rem);
+  margin-left: calc(34px + 1rem);
   margin-right: 1rem;
 }
 
 .meta {
-  display              : grid;
+  display: grid;
   grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
-  gap                  : 1rem;
-  white-space          : normal;
-  text-overflow        : ellipsis;
+  gap: 1rem;
+  white-space: normal;
+  text-overflow: ellipsis;
 
   @apply mb-8;
 
@@ -139,12 +137,12 @@ h2.app-settings {
     @apply rounded;
     @apply p-4;
 
-    display        : flex;
-    flex-direction : column;
+    display: flex;
+    flex-direction: column;
     justify-content: space-evenly;
 
     p {
-      overflow     : hidden;
+      overflow: hidden;
       text-overflow: ellipsis;
     }
 
@@ -160,25 +158,25 @@ h2.app-settings {
   }
 
   .app-warning {
-    display       : flex;
+    display: flex;
     flex-direction: row;
-    border-left   : 2px solid;
-    border-color  : theme("colors.info.yellow");
+    border-left: 2px solid;
+    @apply border-yellow;
 
     .icon fa-icon {
-      color: theme("colors.info.yellow");
+      @apply text-yellow;
     }
 
     markdown {
       padding: 0;
     }
 
     .icon {
-      display     : flex;
-      align-items : flex-start;
-      flex-shrink : 1;
+      display: flex;
+      align-items: flex-start;
+      flex-shrink: 1;
       margin-right: 1rem;
-      padding-top : 2px;
+      padding-top: 2px;
     }
   }
 }