feat: add theming, ngrx

package.json

@@ -29,6 +29,9 @@
     "@angular/platform-browser": "^4.0.0",
     "@angular/platform-browser-dynamic": "^4.0.0",
     "@angular/router": "^4.0.0",
+    "@ngrx/core": "^1.2.0",
+    "@ngrx/effects": "^2.0.3",
+    "@ngrx/store": "^2.2.2",
     "classlist.js": "^1.1.20150312",
     "core-js": "^2.4.1",
     "hammerjs": "^2.0.8",

src/app/app-routing.module.ts

@@ -1,10 +1,15 @@
 import { NgModule } from '@angular/core';
 import { Routes, RouterModule } from '@angular/router';
 
+import { SettingsComponent } from './settings';
+
 const routes: Routes = [
   {
     path: '',
     children: []
+  }, {
+    path: 'settings',
+    component: SettingsComponent
   }
 ];
 

src/app/app.component.html

@@ -1,3 +1,4 @@
+<div [class]="themeClass">
 <md-toolbar color="primary" class="toolbar">
   <span>Angular NGrx Material Starter</span>
   <span class="spacer"></span>
@@ -12,7 +13,7 @@
       <md-icon>person</md-icon>
       <span>Manage account</span>
     </button>
-    <button md-menu-item>
+    <button md-menu-item routerLink="settings">
       <md-icon>settings</md-icon>
       <span>Settings</span>
     </button>
@@ -25,4 +26,6 @@
 <h1>
   {{title}}
 </h1>
+
 <router-outlet></router-outlet>
+</div>

src/app/app.component.spec.ts

@@ -1,15 +1,18 @@
 import { TestBed, async } from '@angular/core/testing';
 import { RouterTestingModule } from '@angular/router/testing';
 
-import { SharedModule } from './shared/shared.module';
+import { SharedModule } from './shared';
+import { CoreModule } from './core';
+
 import { AppComponent } from './app.component';
 
 describe('AppComponent', () => {
   beforeEach(async(() => {
     TestBed.configureTestingModule({
       imports: [
         RouterTestingModule,
-        SharedModule
+        SharedModule,
+        CoreModule
       ],
       declarations: [
         AppComponent

src/app/app.component.ts

@@ -1,10 +1,38 @@
-import { Component } from '@angular/core';
+import { Component, OnDestroy } from '@angular/core';
+import { OverlayContainer } from '@angular/material';
+import { Store } from '@ngrx/store';
+import { Subject } from 'rxjs/Subject';
+import 'rxjs/add/operator/takeUntil';
 
 @Component({
   selector: 'anms-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.scss']
 })
-export class AppComponent {
+export class AppComponent implements OnDestroy {
+
+  private unsubscribe$: Subject<void> = new Subject<void>();
+
+  themeClass: string;
+
   title = 'anms works!';
+
+  constructor(
+    overlayContainer: OverlayContainer,
+    private store: Store<any>
+  ) {
+    store.select('settings')
+      .takeUntil(this.unsubscribe$)
+      .subscribe(({ theme }) => {
+        const themeClass = theme.toLowerCase();
+        overlayContainer.themeClass = themeClass;
+        this.themeClass = themeClass;
+      });
+  }
+
+  ngOnDestroy(): void {
+    this.unsubscribe$.next();
+    this.unsubscribe$.complete();
+  }
+
 }

src/app/app.module.ts

@@ -5,6 +5,9 @@ import { HttpModule } from '@angular/http';
 
 import { SharedModule } from './shared/shared.module';
 
+import { CoreModule } from './core';
+import { SettingsModule } from './settings';
+
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
 
@@ -14,7 +17,11 @@ import { AppComponent } from './app.component';
     BrowserModule,
     HttpModule,
     AppRoutingModule,
-    SharedModule
+
+    CoreModule,
+    SharedModule,
+
+    SettingsModule
   ],
   declarations: [
     AppComponent

src/app/core/core.module.ts

@@ -1,9 +1,13 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
+import { StoreModule } from '@ngrx/store';
+
+import { settingsReducer } from '../settings';
 
 @NgModule({
   imports: [
-    CommonModule
+    CommonModule,
+    StoreModule.provideStore({ settings: settingsReducer })
   ],
   declarations: []
 })

src/app/core/index.ts

@@ -0,0 +1 @@
+export * from './core.module';

src/app/settings/index.ts

@@ -0,0 +1,3 @@
+export * from './settings.module';
+export * from './settings.reducer';
+export * from './settings/settings.component';

src/app/settings/settings.module.ts

@@ -0,0 +1,15 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+import { SharedModule } from '../shared';
+
+import { SettingsComponent } from './settings/settings.component';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    SharedModule
+  ],
+  declarations: [SettingsComponent]
+})
+export class SettingsModule { }

src/app/settings/settings.reducer.ts

@@ -0,0 +1,18 @@
+import { Action } from '@ngrx/store';
+
+export const SETTINGS_THEME = 'SETTINGS_THEME';
+
+export const initialState = {
+  theme: 'default'
+};
+
+export function settingsReducer(state = initialState, action: Action) {
+  switch (action.type) {
+    case SETTINGS_THEME:
+      return { theme: action.payload };
+
+    default:
+      return state;
+  }
+}
+

src/app/settings/settings/settings.component.html

@@ -0,0 +1,5 @@
+<md-select placeholder="Select theme" [ngModel]="theme" (change)="onThemeSelect($event)" name="theme">
+  <md-option *ngFor="let t of themes" [value]="t.value">
+    {{t.label}}
+  </md-option>
+</md-select>

src/app/settings/settings/settings.component.spec.ts

@@ -0,0 +1,34 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+
+import { CoreModule } from '../../core';
+import { SharedModule } from '../../shared';
+
+import { SettingsComponent } from './settings.component';
+
+describe('SettingsComponent', () => {
+  let component: SettingsComponent;
+  let fixture: ComponentFixture<SettingsComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      imports: [
+        NoopAnimationsModule,
+        CoreModule,
+        SharedModule
+      ],
+      declarations: [ SettingsComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(SettingsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/settings/settings/settings.component.ts

@@ -0,0 +1,40 @@
+import { Component, OnInit, OnDestroy } from '@angular/core';
+import { Store } from '@ngrx/store';
+import { Subject } from 'rxjs/Subject';
+import 'rxjs/add/operator/takeUntil';
+import { SETTINGS_THEME } from '../settings.reducer';
+
+@Component({
+  selector: 'anms-settings',
+  templateUrl: './settings.component.html',
+  styleUrls: ['./settings.component.scss']
+})
+export class SettingsComponent implements OnInit, OnDestroy {
+
+  private unsubscribe$: Subject<void> = new Subject<void>();
+  theme: string;
+
+  themes = [
+    { value: 'DEFAULT-THEME', label: 'Default' },
+    { value: 'DARK-THEME', label: 'Dark' }
+  ];
+
+  constructor(private store: Store<any>) {
+    store.select('settings')
+      .takeUntil(this.unsubscribe$)
+      .subscribe(({ theme }) => this.theme = theme);
+  }
+
+  ngOnInit() {
+  }
+
+  ngOnDestroy(): void {
+    this.unsubscribe$.next();
+    this.unsubscribe$.complete();
+  }
+
+  onThemeSelect({ value }) {
+    this.store.dispatch({ type: SETTINGS_THEME, payload: value });
+  }
+
+}

src/app/shared/index.ts

@@ -0,0 +1 @@
+export * from './shared.module';

src/app/shared/shared.module.ts

@@ -5,6 +5,7 @@ import {
   MdButtonModule,
   MdToolbarModule,
   MdMenuModule,
+  MdSelectModule,
   MdIconModule
 } from '@angular/material';
 
@@ -15,6 +16,7 @@ import {
 
     MdButtonModule,
     MdToolbarModule,
+    MdSelectModule,
     MdMenuModule,
     MdIconModule
   ],
@@ -25,6 +27,7 @@ import {
 
     MdButtonModule,
     MdMenuModule,
+    MdSelectModule,
     MdToolbarModule,
     MdIconModule
   ]

src/styles-theme-dark.scss

@@ -0,0 +1,4 @@
+$anms-dark-primary: mat-palette($mat-indigo, 900);
+$anms-dark-accent:  mat-palette($mat-amber, A200, A100, A400);
+$anms-dark-warn:    mat-palette($mat-deep-orange);
+$anms-dark-theme:   mat-dark-theme($anms-dark-primary, $anms-dark-accent, $anms-dark-warn);

src/styles-theme-default.scss

@@ -0,0 +1,5 @@
+$anms-primary: mat-palette($mat-amber);
+$anms-accent:  mat-palette($mat-pink, A200, A100, A400);
+$anms-warn:    mat-palette($mat-red);
+
+$anms-theme: mat-light-theme($anms-primary, $anms-accent, $anms-warn);

src/styles.scss

@@ -1,26 +1,14 @@
 @import 'reset.scss';
 
 @import '~@angular/material/theming';
-// Plus imports for other components in your app.
 
-// Include the common styles for Angular Material. We include this here so that you only
-// have to load a single css file for Angular Material in your app.
-// Be sure that you only ever include this mixin once!
 @include mat-core();
 
-// Define the palettes for your theme using the Material Design palettes available in palette.scss
-// (imported above). For each palette, you can optionally specify a default, lighter, and darker
-// hue.
-$anms-primary: mat-palette($mat-amber);
-$anms-accent:  mat-palette($mat-pink, A200, A100, A400);
+@import 'styles-theme-default.scss';
+@import 'styles-theme-dark.scss';
 
-// The warn palette is optional (defaults to red).
-$anms-warn:    mat-palette($mat-red);
-
-// Create the theme object (a Sass map containing all of the palettes).
-$anms-theme: mat-light-theme($anms-primary, $anms-accent, $anms-warn);
-
-// Include theme styles for core and each component used in your app.
-// Alternatively, you can import and @include the theme mixins for each component
-// that you are using.
 @include angular-material-theme($anms-theme);
+
+.dark-theme {
+  @include angular-material-theme($anms-dark-theme);
+}