UI: Standarize colors and themify the app(First step) (#1485)

app/components/account/details/programatic-usage/aad-credentials-picker/aad-app-picker/aad-app-picker.scss

@@ -37,9 +37,7 @@ bl-aad-app-picker {
         > .app-list {
             grid-column: span 4;
 
-            // border: 1px solid $border-color;
-            // border-bottom: none;
-            background: $whitesmoke-darker;
+            background: $main-background;
             overflow: auto;
         }
     }

app/components/data/action/add/file-group-create-form.scss

@@ -16,6 +16,6 @@ bl-file-group-create-form {
 
     p.exists {
         margin-top: -10px;
-        color: $infoText;
+        color: $primary-color;
     }
 }

app/components/job/details/job-details.scss

@@ -8,7 +8,7 @@ bl-job-details {
         cursor: pointer;
 
         &:hover {
-            background: $whitesmoke-darker;
+            background: $selection-color;
         }
 
         .fa {

app/components/market/application-action/choose-action.scss

@@ -4,7 +4,6 @@ bl-choose-action {
     display: flex;
     width: 100%;
     height: $contentview-height;
-    background: $whitesmoke-darker;
 
     h1 {
         margin: 10px;
@@ -33,7 +32,7 @@ bl-choose-action {
             flex: 1;
 
             &:hover {
-                background: $whitesmoke;
+                background: $selection-color;
             }
 
             > .name {

app/components/market/home/market.scss

@@ -4,7 +4,6 @@ bl-market {
     display: flex;
     width: 100%;
     height: $contentview-height;
-    background: $whitesmoke-darker;
 
     h1 {
         margin: 10px;
@@ -46,7 +45,7 @@ bl-market {
         padding: 5px;
 
         &:hover {
-            background: $whitesmoke-darker;
+            background: $selection-color;
         }
 
         img.logo {

app/components/market/local-template-browser/local-template-browser.scss

@@ -5,7 +5,6 @@ bl-local-template-browser {
     display: block;
     width: 100%;
     height: $contentview-height;
-    background: $whitesmoke-darker;
 
     > .header {
         height: 40px;
@@ -32,7 +31,7 @@ bl-local-template-browser {
             align-items: center;
             justify-content: center;
             color: $alto;
-            border: 3px dashed $alto;
+            border: 3px dashed $border-color;
             text-align: center;
 
             > .main {

app/components/market/submit-local-template/submit-local-template.scss

@@ -4,6 +4,5 @@ bl-submit-local-template {
     display: flex;
     width: 100%;
     height: $contentview-height;
-    background: $whitesmoke-darker;
 
 }

app/components/market/submit-recent-template/submit-recent-template.scss

@@ -4,5 +4,4 @@ bl-submit-recent-template {
     display: flex;
     width: 100%;
     height: $contentview-height;
-    background: $whitesmoke-darker;
 }

app/components/market/submit/submit-market-application.scss

@@ -4,5 +4,4 @@ bl-submit-market-application {
     display: flex;
     width: 100%;
     height: $contentview-height;
-    background: $whitesmoke-darker;
 }

app/models/settings.ts

@@ -1,13 +1,10 @@
 import { EntityConfigurationView } from "@batch-flask/ui/batch-flask-settings";
 
-export enum Theme {
-    classic = "classic",
-}
-
 /**
  * Interface mapping how the settings should be
  */
 export interface Settings {
+    theme: string;
     fileTypes: StringMap<string[]>;
     "configuration.default-view": EntityConfigurationView;
     "subscription.ignore": string[];

app/services/themes/theme-core.spec.ts

@@ -0,0 +1,55 @@
+import { CssColor, ThemeElement } from "./theme-core";
+
+class InputColors extends ThemeElement<any> {
+    @CssColor() public background: string;
+    @CssColor() public text: string;
+}
+
+class MainTheme extends ThemeElement<any> {
+    @CssColor() public basic: string;
+    @CssColor("custom-name") public customName: string;
+    @CssColor() public input: InputColors;
+}
+
+const fullTheme = new MainTheme({
+    "basic": "red",
+    "custom-name": "blue",
+    "input": {
+        background: "green",
+        text: "white",
+    },
+});
+
+const partialTheme = new MainTheme({
+    "custom-name": "yellow",
+    "input": {
+        background: "orange",
+    },
+});
+
+describe("ThemeCore", () => {
+    it("create a theme from definition", () => {
+        expect(fullTheme.basic).toEqual("red");
+        expect(fullTheme.customName).toEqual("blue");
+        expect(fullTheme.input.background).toEqual("green");
+        expect(fullTheme.input.text).toEqual("white");
+    });
+
+    it("merges theme into an empty theme", () => {
+        const theme = new MainTheme({}).merge(fullTheme);
+
+        expect(theme.basic).toEqual("red");
+        expect(theme.customName).toEqual("blue");
+        expect(theme.input.background).toEqual("green");
+        expect(theme.input.text).toEqual("white");
+    });
+
+    it("merges a partial theme", () => {
+        const theme = new MainTheme({}).merge(fullTheme).merge(partialTheme);
+
+        expect(theme.basic).toEqual("red");
+        expect(theme.customName).toEqual("yellow");
+        expect(theme.input.background).toEqual("orange");
+        expect(theme.input.text).toEqual("white");
+    });
+});

app/services/themes/theme-core.ts

@@ -1,4 +1,4 @@
-import { log } from "@batch-flask/utils";
+import { exists, log, nil } from "@batch-flask/utils";
 
 const attrMetadataKey = "csscolor:attrs";
 
@@ -32,6 +32,21 @@ export class ThemeElement<ThemeInput> {
         }
     }
 
+    public merge(other: this) {
+        for (const { attr, metadata } of this._getAttrs()) {
+            const { type } = metadata;
+            const value = other[attr];
+            if (exists(value)) {
+                if (type.name === "String" || nil(this[attr])) {
+                    this[attr] = value;
+                } else {
+                    this[attr].merge(value);
+                }
+            }
+        }
+        return this;
+    }
+
     public asCss(): Array<{ key: string, value: string }> {
         let css = [];
         for (const { attr, metadata } of this._getAttrs()) {

app/services/themes/theme-definition.model.ts

@@ -37,6 +37,16 @@ export interface ThemeDefinition {
      */
     "card-background": string;
 
+    /**
+     * Background color for selected items
+     */
+    "selection": string;
+
+    /**
+     * Color for borders
+     */
+    "border": string;
+
     outline: string;
 
     /**
@@ -72,6 +82,9 @@ export interface ThemeDefinition {
     };
 
     button: {
+        "basic-text": string;
+        "basic-bg": string;
+        "basic-hover-bg": string;
         "disabled-text": string;
         "disabled-bg": string;
     };

app/services/themes/theme.model.ts

@@ -86,6 +86,9 @@ export class FileExplorerColors extends ThemeElement<ThemeDefinition["file-explo
 }
 
 export class ButtonColors extends ThemeElement<ThemeDefinition["button"]> {
+    @CssColor("basic-text") public basicText: string;
+    @CssColor("basic-bg") public basicBg: string;
+    @CssColor("basic-hover-bg") public basicHoverBg: string;
     @CssColor("disabled-text") public disabledText: string;
     @CssColor("disabled-bg") public disabledBg: string;
 }
@@ -115,6 +118,8 @@ export class Theme extends ThemeElement<ThemeDefinition> {
     @CssColor() public success: ColorPalette;
     @CssColor("main-background") public mainBackground: string;
     @CssColor("card-background") public cardBackground: string;
+    @CssColor() public selection: string;
+    @CssColor() public border: string;
     @CssColor() public outline: string;
     @CssColor() public text: TextColor;
     @CssColor() public header: EntityColor;

app/services/themes/theme.service.ts

@@ -1,50 +1,68 @@
-import { Injectable, NgZone } from "@angular/core";
+import { Injectable, NgZone, OnDestroy } from "@angular/core";
 import { FSWatcher } from "chokidar";
 import * as path from "path";
-import { BehaviorSubject, Observable } from "rxjs";
+import { BehaviorSubject, Observable, Subscription } from "rxjs";
 // tslint:disable-next-line:no-var-requires
 const stripJsonComments = require("strip-json-comments");
 
 import { NotificationService } from "@batch-flask/ui/notifications";
 import { FileSystemService } from "app/services/fs.service";
 import { log } from "app/utils";
 import { BatchLabsService } from "../batch-labs.service";
+import { SettingsService } from "../settings.service";
 import { Theme } from "./theme.model";
 
 /**
  * Service handling theme selection
  */
 @Injectable()
-export class ThemeService {
+export class ThemeService implements OnDestroy {
+    public baseTheme = "classic";
     public defaultTheme = "classic";
     public currentTheme: Observable<Theme>;
-    private _currentTheme = new BehaviorSubject(null);
+    private _currentTheme = new BehaviorSubject<Theme>(null);
+    private _currentThemeName = null;
     private _watcher: FSWatcher;
     private _themesLoadPath: string[];
+    private _baseThemeDefinition;
+    private _subs: Subscription[] = [];
 
     constructor(
         private fs: FileSystemService,
         private notificationService: NotificationService,
+        private settingsService: SettingsService,
         private zone: NgZone,
         batchLabs: BatchLabsService) {
         this.currentTheme = this._currentTheme.filter(x => x !== null);
-        this.currentTheme.subscribe((theme) => {
+        this._subs.push(this.currentTheme.subscribe((theme) => {
             this._applyTheme(theme);
-        });
+        }));
+
+        this._subs.push(this.settingsService.settingsObs.subscribe((settings) => {
+            const themeName = settings.theme || this.defaultTheme;
+            this.setTheme(themeName);
+        }));
 
         this._themesLoadPath = [
             path.join(batchLabs.resourcesFolder, "data", "themes"),
             path.join(fs.commonFolders.userData, "themes"),
         ];
     }
 
-    public init() {
-        this.setTheme(this.defaultTheme);
+    public async init() {
+        this._baseThemeDefinition = await this._loadTheme(this.baseTheme);
+        await this.setTheme(this.defaultTheme);
+    }
+
+    public ngOnDestroy() {
+        this._subs.forEach(x => x.unsubscribe());
     }
 
     public async setTheme(name: string) {
+        if (this._currentThemeName === name) { return; }
+        this._currentThemeName = name;
         const theme = await this._loadTheme(name);
-        this._currentTheme.next(theme);
+        this._setTheme(theme);
     }
 
     public async findThemeLocation(name: string): Promise<string> {
@@ -83,6 +101,11 @@ export class ThemeService {
         }
     }
 
+    private _setTheme(theme: Theme) {
+        const computedTheme = new Theme({} as any).merge(this._baseThemeDefinition).merge(theme);
+        this._currentTheme.next(computedTheme);
+    }
+
     private _notifyErrorLoadingTheme(message: string) {
         this.zone.run(() => {
             this.notificationService.warn(`Error loading theme file`, message);
@@ -98,7 +121,7 @@ export class ThemeService {
             log.info("[BatchLabs] Theme file updated. Reloading theme.");
             const theme = await this._loadThemeAt(filePath);
             this.zone.run(() => {
-                this._currentTheme.next(theme);
+                this._setTheme(theme);
             });
         });
     }

app/styles/base/advanced-filter.scss

@@ -14,7 +14,7 @@
         .value {
             flex: 1;
             font-size: 13px;
-            background: $whitesmoke-darker;
+            background: $main-background;
             color: $mineshaft-grey;
             padding: 2px 5px;
         }

app/styles/base/forms.scss

@@ -25,7 +25,6 @@ fieldset {
     p {
         line-height: 1.2em;
         padding-top: 10px;
-        color: $mineShaftGray;
     }
 
     .message {
@@ -61,7 +60,7 @@ fieldset {
         padding-top: 15px;
 
         p {
-            color: $errorText;
+            color: $danger-color;
             margin-bottom: 0.1em;
         }
     }
@@ -82,7 +81,7 @@ fieldset {
         background-color: $silver-grey;
 
         i {
-            color: map-get($primary, 400);
+            color: $primary-color;
         }
     }
 

app/styles/common/type.scss

@@ -9,7 +9,7 @@ body {
     font-family: $main-font;
     font-size: $font-size-base;
     line-height: $baseLineHeight;
-    color: $textColor;
+    color: $primary-color;
 }
 
 p {

app/styles/partials/refresh-btn.scss

@@ -16,5 +16,5 @@ bl-refresh-btn {
 }
 
 .fa-ban {
-    color: $errorText;
+    color: $danger-color;
 }