Fixes build issues. Removes warnings.

2026-05-21 15:10:12 +00:00 · 2018-08-16 07:16:40 +10:00
parent a7ed69c843
commit f7bc2433dd
11 changed files with 4141 additions and 603 deletions
--- a/web/src/app/shared/theme-picker/theme-picker.component.ts
+++ b/web/src/app/shared/theme-picker/theme-picker.component.ts
@@ -0,0 +1,87 @@
+import {Component, ViewEncapsulation, ChangeDetectionStrategy, NgModule} from '@angular/core';
+import { StyleManagerService } from './../../services/style-manager/style-manager.service';
+
+import { ThemeStorageService, DocsSiteTheme } from './../../services/theme-storage/theme-storage.service';
+import {CommonModule} from '@angular/common';
+
+
+@Component({
+  selector: 'app-theme-picker',
+  templateUrl: 'theme-picker.component.html',
+  styleUrls: ['theme-picker.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  encapsulation: ViewEncapsulation.None,
+  host: {'aria-hidden': 'true'},
+})
+export class ThemePickerComponent {
+  currentTheme;
+
+  themes = [
+    {
+      primary: '#673AB7',
+      accent: '#FFC107',
+      href: 'deeppurple-amber.css',
+      isDark: false,
+    },
+    {
+      primary: '#3F51B5',
+      accent: '#E91E63',
+      href: 'indigo-pink.css',
+      isDark: false,
+      isDefault: true,
+    },
+    {
+      primary: '#E91E63',
+      accent: '#607D8B',
+      href: 'pink-bluegrey.css',
+      isDark: true,
+    },
+    {
+      primary: '#9C27B0',
+      accent: '#4CAF50',
+      href: 'purple-green.css',
+      isDark: true,
+    },
+    {
+      primary: '#53D06C',
+      accent: '#FFD800',
+      href: 'green-gold-dark.css',
+      isDark: true,
+    },
+    {
+      primary: '#358444',
+      accent: '#FFFB38',
+      href: 'green-gold.css',
+      isDark: false,
+    },
+
+  ];
+
+  constructor(
+    public styleManager: StyleManagerService,
+    private _themeStorage: ThemeStorageService
+  ) {
+    const currentTheme = this._themeStorage.getStoredTheme();
+    if (currentTheme) {
+      this.installTheme(currentTheme);
+    }
+  }
+
+  installTheme(theme: DocsSiteTheme) {
+    this.currentTheme = this._getCurrentThemeFromHref(theme.href);
+
+    if (theme.isDefault) {
+      this.styleManager.removeStyle('theme');
+    } else {
+      this.styleManager.setStyle('theme', `assets/themes/${theme.href}`);
+    }
+
+    if (this.currentTheme) {
+      this._themeStorage.storeTheme(this.currentTheme);
+    }
+  }
+
+  private _getCurrentThemeFromHref(href: string): DocsSiteTheme {
+    return this.themes.find(theme => theme.href === href);
+  }
+}