feat(core): support for multiple themes

A-l-y-l-e · Apr 22, 2018 · d8652f2 · d8652f2
1 parent 4504557
commit d8652f2
Show file tree

Hide file tree

Showing 26 changed files with 340 additions and 475 deletions.
diff --git a/src/app/app.component.html b/src/app/app.component.html
@@ -7,7 +7,7 @@
       <ly-toolbar-item class="logo">
         <button ly-button sensitive color="#fff" [routerLink]="['./']">
           Alyle UI
-          <div class="version">v{{ version }}</div>
+          <span class="version">v{{ version }}</span>
         </button>
       </ly-toolbar-item>
       <ly-toolbar-item *lyResponsive="'(min-width: 720px)'">
@@ -27,8 +27,8 @@
         <div class="content-menu" bg="main">
           <div class="menu-item" lyRipple lyRippleSensitive color="colorText" *ngFor="let item of listColors" (click)="changePrimary(item)">
             <div class="item-container">
-              <div ly-shadow [shadowColor]="theme.AlyleUI.currentTheme.palette[item.primary].default" [style.background]="theme.AlyleUI.currentTheme.palette[item.primary].default"></div>
-              <div ly-shadow [shadowColor]="theme.AlyleUI.currentTheme.palette[item.accent].default" [style.background]="theme.AlyleUI.currentTheme.palette[item.accent].default"></div>
+              <div ly-shadow [shadowColor]="palette[item.primary].default" [style.background]="palette[item.primary].default"></div>
+              <div ly-shadow [shadowColor]="palette[item.accent].default" [style.background]="palette[item.accent].default"></div>
             </div>
           </div>
         </div>

diff --git a/src/app/app.component.ts b/src/app/app.component.ts
@@ -1,13 +1,13 @@
-import { Component, ViewChild, VERSION, ChangeDetectionStrategy} from '@angular/core';
+import { Component, ViewChild, VERSION, ChangeDetectionStrategy, Inject} from '@angular/core';
 import { environment } from './../environments/environment';
 import { Router, ActivatedRoute, NavigationEnd } from '@angular/router';
 import { isPlatformBrowser, isPlatformServer } from '@angular/common';
 import { AUI_VERSION } from 'alyle-ui';
 import { LyMenu } from 'alyle-ui/menu';
-import { LyTheme, Platform } from 'alyle-ui/core';
+import { LyTheme, Platform, PALETTE, PaletteVariables } from 'alyle-ui/core';
 import { RoutesAppService } from './components/routes-app.service';
 import { MinimalLS } from 'alyle-ui/ls';
-import { AlyleServiceConfig } from 'alyle-ui/core';
+import { ThemeVariables } from 'alyle-ui/core';
 
 @Component({
   selector: 'app-root',
@@ -27,6 +27,7 @@ export class AppComponent {
     public router: Router,
     public route: ActivatedRoute,
     public theme: LyTheme,
+    @Inject(PALETTE) public palette: PaletteVariables,
     public routesApp: RoutesAppService
   ) {
     // this.route.url.subscribe((val) => {
@@ -67,7 +68,7 @@ export class AppComponent {
       }
     ];
   }
-  changePrimary(color: AlyleServiceConfig) {
+  changePrimary(color: ThemeVariables) {
     this.theme.setTheme(color);
   }
 }
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
@@ -32,6 +32,7 @@ export class MyHammerConfig extends HammerGestureConfig {
     'pan': {threshold: 0}
  };
 }
+const contrastText = '#fff';
 @NgModule({
   declarations: [
     AppComponent
@@ -64,59 +65,49 @@ export class MyHammerConfig extends HammerGestureConfig {
           shadow: '#252525',
           myColor: 'teal'
         }
-      },
-      palette: {
-        'pink': {
-          // '500': '#ff4b73',
-          // contrast: 'light',
-          default: '#ff4b73'
-        },
-        'pinkLight': {
-          // '500': '#f50057',
-          // contrast: 'light',
-          default: '#f50057'
-        },
-        'cyan': {
-          // '500': '#00bcd4',
-          // contrast: 'light',
-          default: '#00bcd4'
-        },
-        'red': {
-          // '500': '#FF5252',
-          // contrast: 'light',
-          default: '#FF5252'
-        },
-        'amber': {
-          // '500': '#ffc107',
-          // contrast: 'dark',
-          default: '#ffc107'
-        },
-        'teal': {
-          // '500': '#009688',
-          // contrast: 'light',
-          default: '#009688'
-        },
-        'purple': {
-          // '500': '#ce30c9',
-          // contrast: 'light',
-          default: '#ce30c9'
-        },
-        'lightBlue': {
-          // '500': '#03A9F4',
-          // contrast: 'light',
-          default: '#03A9F4'
-        },
-        'blue': {
-          // '500': '#2196F3',
-          // contrast: 'light',
-          default: '#2196F3'
-        },
-        'deepOrange': {
-          // '500': '#FF5722',
-          // contrast: 'light',
-          default: '#FF5722'
-        },
       }
+    },
+    {
+      pink: {
+        default: '#ff4b73',
+        contrastText
+      },
+      pinkLight: {
+        default: '#f50057',
+        contrastText
+      },
+      cyan: {
+        default: '#00bcd4',
+        contrastText
+      },
+      red: {
+        default: '#FF5252',
+        contrastText
+      },
+      amber: {
+        default: '#ffc107',
+        contrastText
+      },
+      teal: {
+        default: '#009688',
+        contrastText
+      },
+      purple: {
+        default: '#ce30c9',
+        contrastText
+      },
+      lightBlue: {
+        default: '#03A9F4',
+        contrastText
+      },
+      blue: {
+        default: '#2196F3',
+        contrastText
+      },
+      deepOrange: {
+        default: '#FF5722',
+        contrastText
+      },
     }),
     ThemeModule,
     LyButtonModule,

diff --git a/src/app/components/button-demo/button-demo/button-demo.component.ts b/src/app/components/button-demo/button-demo/button-demo.component.ts
@@ -1,9 +1,10 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, ChangeDetectionStrategy } from '@angular/core';
 
 @Component({
   selector: 'app-button-demo',
   templateUrl: './button-demo.component.html',
-  styleUrls: ['./button-demo.component.css']
+  styleUrls: ['./button-demo.component.css'],
+  changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class ButtonDemoComponent implements OnInit {
 

diff --git a/src/app/components/button-demo/button-example-03/button-example-03.component.html b/src/app/components/button-demo/button-example-03/button-example-03.component.html
@@ -1,32 +1,32 @@
 <h4>one</h4>
-<button ly-button>
-  <ly-icon-button>
+<button ly-button raised>
+  <span ly-icon-button>
     <ly-svg src="assets/svg/Experiment"></ly-svg>
-  </ly-icon-button>
+  </span>
 </button>
 <h4>with text</h4>
 <button ly-button>
-  <ly-icon-button>
+  <span ly-icon-button start>
     <ly-svg src="assets/svg/Experiment"></ly-svg>
-  </ly-icon-button>
-  Experiment
+  </span>
+  <span end>Experiment</span>
 </button>
 <button ly-button>
-  Experiment
-  <ly-icon-button>
+  <span start>Experiment</span>
+  <span ly-icon-button end>
     <ly-svg src="assets/svg/Experiment.svg"></ly-svg>
-  </ly-icon-button>
+  </span>
 </button>
 <h4>hmm</h4>
 <button ly-button class="item">
-  Heart
-  <ly-icon-button>
+  <span start>Heart</span>
+  <span ly-icon-button end>
     <ly-svg src="assets/svg/Heart.svg"></ly-svg>
-  </ly-icon-button>
+  </span>
 </button>
 <button ly-button class="item">
-  Snow
-  <ly-icon-button>
+  <span start>Snow</span>
+  <span ly-icon-button end>
     <ly-svg src="assets/svg/Snow.svg"></ly-svg>
-  </ly-icon-button>
+  </span>
 </button>
diff --git a/src/app/components/button-demo/button-example-03/button-example-03.component.ts b/src/app/components/button-demo/button-example-03/button-example-03.component.ts
@@ -1,9 +1,10 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, ChangeDetectionStrategy } from '@angular/core';
 
 @Component({
   selector: 'button-example-03',
   templateUrl: './button-example-03.component.html',
-  styleUrls: ['./button-example-03.component.css']
+  styleUrls: ['./button-example-03.component.css'],
+  changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class ButtonExample03Component implements OnInit {
 

diff --git a/src/app/components/button-demo/button-example-04/button-example-04.component.html b/src/app/components/button-demo/button-example-04/button-example-04.component.html
@@ -13,8 +13,8 @@ <h4>Raised{{ raisedState !== undefined ? ': ' + raisedState : raisedState }}</h4
 <button ly-button [color]="color" [raised]="raisedState">raised</button>
 <button ly-button [bg]="color" [raised]="raisedState" color="#fff">bg</button>
 <button ly-button class="item" (click)="raisedState = raisedState === true ? false : (raisedState === false ? '!' : true)">
-  Change
-  <ly-icon-button>
+  <span start>Change</span>
+  <span ly-icon-button end>
     <ly-svg src="assets/svg/Brush.svg"></ly-svg>
-  </ly-icon-button>
+  </span>
 </button>
diff --git a/src/app/components/button-demo/button-example-04/button-example-04.component.ts b/src/app/components/button-demo/button-example-04/button-example-04.component.ts
@@ -1,9 +1,10 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, ChangeDetectionStrategy } from '@angular/core';
 
 @Component({
   selector: 'button-example-04',
   templateUrl: './button-example-04.component.html',
-  styleUrls: ['./button-example-04.component.css']
+  styleUrls: ['./button-example-04.component.css'],
+  changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class ButtonExample04Component implements OnInit {
   color = '#841dab';

diff --git a/src/app/components/button-demo/example-01/example-01.component.ts b/src/app/components/button-demo/example-01/example-01.component.ts
@@ -1,9 +1,10 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, ChangeDetectionStrategy } from '@angular/core';
 
 @Component({
   selector: 'example-01',
   templateUrl: './example-01.component.html',
-  styleUrls: ['./example-01.component.css']
+  styleUrls: ['./example-01.component.css'],
+  changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class Example01Component implements OnInit {
 

diff --git a/src/app/components/button-demo/example-02/example-02.component.ts b/src/app/components/button-demo/example-02/example-02.component.ts
@@ -1,9 +1,10 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, ChangeDetectionStrategy } from '@angular/core';
 
 @Component({
   selector: 'example-02',
   templateUrl: './example-02.component.html',
-  styleUrls: ['./example-02.component.css']
+  styleUrls: ['./example-02.component.css'],
+  changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class Example02Component implements OnInit {
 

diff --git a/src/app/components/multiple-themes/multiple-themes-demo-01/multiple-themes-demo-01.module.ts b/src/app/components/multiple-themes/multiple-themes-demo-01/multiple-themes-demo-01.module.ts
@@ -7,14 +7,10 @@ import { ThemeModule } from 'alyle-ui/core';
 @NgModule({
   imports: [
     CommonModule,
-    AlyleUIModule.setTheme({
+    AlyleUIModule.forChild({
       primary: 'pink',
       accent: 'purple',
-      colorScheme: 'light',
-      palette: {
-        pink: '#ff4b73',
-        purple: '#ce30c9'
-      }
+      colorScheme: 'dark'
     }),
     ThemeModule
   ],

diff --git a/src/lib/alyle-ui.module.ts b/src/lib/alyle-ui.module.ts
@@ -6,12 +6,14 @@ import { BrowserTransferStateModule } from '@angular/platform-browser';
 import {
   LyCoreModule,
   LyTheme,
-  AlyleServiceConfig } from 'alyle-ui/core';
+  ThemeVariables,
+  PaletteVariables,
+  PALETTE } from 'alyle-ui/core';
 
-export function provideTheme(theme: AlyleServiceConfig) {
+export function provideTheme(theme: ThemeVariables) {
   return [
     [ LyTheme ],
-    { provide: AlyleServiceConfig, useValue: theme }
+    { provide: ThemeVariables, useValue: theme }
   ];
 }
 
@@ -20,14 +22,19 @@ export function provideTheme(theme: AlyleServiceConfig) {
   exports: [ LyCoreModule ]
 })
 export class AlyleUIModule {
-  static forRoot(theme: AlyleServiceConfig): ModuleWithProviders {
+  /** Set a theme for core */
+  static forRoot(theme: ThemeVariables, palette: PaletteVariables): ModuleWithProviders {
     return {
       ngModule: AlyleUIModule,
-      providers: provideTheme(theme)
+      providers: [
+        provideTheme(theme),
+        { provide: PALETTE, useValue: palette }
+      ]
     };
   }
 
-  static setTheme(theme: AlyleServiceConfig): ModuleWithProviders {
+  /** Set a theme for this module */
+  static forChild(theme: ThemeVariables): ModuleWithProviders {
     return {
       ngModule: AlyleUIModule,
       providers: provideTheme(theme)

diff --git a/src/lib/button/button.service.ts b/src/lib/button/button.service.ts
@@ -0,0 +1,48 @@
+import { Injectable, Inject, Renderer2, ElementRef } from '@angular/core';
+import { LyTheme, LyRootService } from 'alyle-ui/core';
+import { DOCUMENT } from '@angular/common';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class LyButtonService {
+
+  constructor(
+    private theme: LyTheme,
+    @Inject(DOCUMENT) document
+  ) { }
+
+  applyTheme(renderer: Renderer2, elementRef: ElementRef) {
+    const style = this.theme.createStyle('button', this.style.bind(this));
+    renderer.addClass(elementRef.nativeElement, style.id);
+  }
+
+  private style() {
+    return `font-family:${this.theme.AlyleUI.palette.typography.fontFamily.default};` +
+    `font-size: ${this.theme.AlyleUI.palette.typography.fontSize}px;` +
+    `color: ${this.theme.AlyleUI.palette.text.default};` +
+    '-webkit-tap-highlight-color: transparent;' +
+    'padding: 0;' +
+    'background-color: rgba(0, 0, 0, 0);' +
+    'border: none;' +
+    '-moz-appearance: none;' +
+    'min-height: 36px;' +
+    'height: 36px;' +
+    'margin: 0;' +
+    'border-radius: 3px;' +
+    'outline: none;' +
+    'font-weight: 500;' +
+    'min-width: 88px;' +
+    'box-sizing: border-box;' +
+    'position: relative;' +
+    'text-align: center;' +
+    'cursor: pointer;' +
+    '-webkit-user-select: none;' +
+    '-moz-user-select: none;' +
+    '-ms-user-select: none;' +
+    'user-select: none;' +
+    'display: inline-block;' +
+    'transition: all 375ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;';
+  }
+
+}