feat: adjust theming mechanism, add bootstrap for grid, static module…

… for static content

.angular-cli.json

@@ -21,6 +21,9 @@
       "styles": [
         "styles.scss"
       ],
+      "stylePreprocessorOptions": {
+        "includePaths": ["./themes"]
+      },
       "scripts": [],
       "environmentSource": "environments/environment.ts",
       "environments": {

README.md

@@ -1,5 +1,14 @@
-# Angular, ngrx & Material Starter by [@tomastrajan](https://twitter.com/tomastrajan) [![Build Status](https://travis-ci.org/tomastrajan/angular-ngrx-material-starter.svg?branch=master)](https://travis-ci.org/tomastrajan/angular-ngrx-material-starter)
+# Angular, ngrx and Angular Material Starter by [@tomastrajan](https://twitter.com/tomastrajan) [![Build Status](https://travis-ci.org/tomastrajan/angular-ngrx-material-starter.svg?branch=master)](https://travis-ci.org/tomastrajan/angular-ngrx-material-starter)
                            
-Check out [Demo & Documentation](http://tomastrajan.github.io/angular-ngrx-material-starter/) 
+Check out [Demo & Documentation](http://tomastrajan.github.io/angular-ngrx-material-starter/)
+
+## Features
+
+* Angular
+* ngrx
+* Angular Material
+* Bootstrap 4 (only reset and grids)
+
+## Build
 
 Built with [Angular CLI](https://github.com/angular/angular-cli)

package.json

@@ -32,7 +32,8 @@
     "@ngrx/core": "^1.2.0",
     "@ngrx/effects": "^2.0.3",
     "@ngrx/store": "^2.2.2",
-    "classlist.js": "^1.1.20150312",
+    "bootstrap": "^4.0.0-alpha.6",
+    "classlist.js": "^1.1",
     "core-js": "^2.4.1",
     "hammerjs": "^2.0.8",
     "intl": "^1.2.5",

src/app/app-routing.module.ts

@@ -6,7 +6,8 @@ import { SettingsComponent } from './settings';
 const routes: Routes = [
   {
     path: '',
-    children: []
+    redirectTo: 'about',
+    pathMatch: 'full'
   }, {
     path: 'settings',
     component: SettingsComponent

src/app/app.component.html

@@ -1,31 +1,33 @@
 <div [class]="themeClass">
-<md-toolbar color="primary" class="toolbar">
-  <span>Angular NGrx Material Starter</span>
-  <span class="spacer"></span>
-  <button md-button>About</button>
-  <button md-button>Features</button>
-  <button md-button>Examples</button>
-  <button md-icon-button [mdMenuTriggerFor]="toolbarMenu">
-    <md-icon>more_vert</md-icon>
-  </button>
-  <md-menu #toolbarMenu="mdMenu">
-    <button md-menu-item>
-      <md-icon>person</md-icon>
-      <span>Manage account</span>
+  <md-toolbar color="primary" class="toolbar">
+    <span>Angular NGrx Material Starter</span>
+    <span class="spacer"></span>
+    <button md-button routerLink="about" routerLinkActive="active">About</button>
+    <button md-button routerLink="features" routerLinkActive="active">Features</button>
+    <button md-button>Examples</button>
+    <button md-icon-button [mdMenuTriggerFor]="toolbarMenu">
+      <md-icon>more_vert</md-icon>
     </button>
-    <button md-menu-item routerLink="settings">
-      <md-icon>settings</md-icon>
-      <span>Settings</span>
-    </button>
-    <button md-menu-item>
-      <md-icon>power_settings_new</md-icon>
-      <span>Logout</span>
-    </button>
-  </md-menu>
-</md-toolbar>
-<h1>
-  {{title}}
-</h1>
-
-<router-outlet></router-outlet>
+    <md-menu #toolbarMenu="mdMenu">
+      <button md-menu-item disabled>
+        <md-icon>person</md-icon>
+        <span>Manage account</span>
+      </button>
+      <button md-menu-item routerLink="settings">
+        <md-icon>settings</md-icon>
+        <span>Settings</span>
+      </button>
+      <button md-menu-item disabled>
+        <md-icon>power_settings_new</md-icon>
+        <span>Logout</span>
+      </button>
+    </md-menu>
+  </md-toolbar>
+  <div class="container-fluid">
+    <div class="row">
+      <div class="col-sm-12">
+        <router-outlet></router-outlet>
+      </div>
+    </div>
+  </div>
 </div>

src/app/app.component.scss

@@ -1,5 +1,3 @@
-
-
 .toolbar{
 
   button {

src/app/app.component.scss-theme.scss

@@ -0,0 +1,24 @@
+@import '~@angular/material/theming';
+@import 'default-theme.scss';
+@import 'alternative-theme.scss';
+
+@mixin app-component-theme($theme) {
+  $accent: map-get($theme, accent);
+
+  .toolbar{
+    button {
+      &.active {
+        background-color: mat-color($accent);
+      }
+    }
+  }
+}
+
+.default-theme {
+  @include app-component-theme($anms-theme);
+}
+
+.alternative-theme {
+  @include app-component-theme($anms-alternative-theme);
+}
+

src/app/app.component.spec.ts

@@ -26,16 +26,4 @@ describe('AppComponent', () => {
     expect(app).toBeTruthy();
   }));
 
-  it(`should have as title 'anms works!'`, async(() => {
-    const fixture = TestBed.createComponent(AppComponent);
-    const app = fixture.debugElement.componentInstance;
-    expect(app.title).toEqual('anms works!');
-  }));
-
-  it('should render title in a h1 tag', async(() => {
-    const fixture = TestBed.createComponent(AppComponent);
-    fixture.detectChanges();
-    const compiled = fixture.debugElement.nativeElement;
-    expect(compiled.querySelector('h1').textContent).toContain('anms works!');
-  }));
 });

src/app/app.component.ts

@@ -3,30 +3,30 @@ import { OverlayContainer } from '@angular/material';
 import { Store } from '@ngrx/store';
 import { Subject } from 'rxjs/Subject';
 import 'rxjs/add/operator/takeUntil';
+import 'rxjs/add/operator/map';
 
 @Component({
   selector: 'anms-root',
   templateUrl: './app.component.html',
-  styleUrls: ['./app.component.scss']
+  styleUrls: ['./app.component.scss', './app.component.scss-theme.scss']
 })
 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')
+    store
+      .select('settings')
       .takeUntil(this.unsubscribe$)
-      .subscribe(({ theme }) => {
-        const themeClass = theme.toLowerCase();
-        overlayContainer.themeClass = themeClass;
-        this.themeClass = themeClass;
+      .map(({ theme }) => theme.toLowerCase())
+      .subscribe(theme => {
+        this.themeClass = theme;
+        overlayContainer.themeClass = theme;
       });
   }
 

src/app/app.module.ts

@@ -7,21 +7,28 @@ import { SharedModule } from './shared/shared.module';
 
 import { CoreModule } from './core';
 import { SettingsModule } from './settings';
+import { StaticModule } from './static';
 
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
 
 @NgModule({
   imports: [
+    // angular
     BrowserAnimationsModule,
     BrowserModule,
     HttpModule,
-    AppRoutingModule,
 
+    // core & shared
     CoreModule,
     SharedModule,
 
-    SettingsModule
+    // features
+    StaticModule,
+    SettingsModule,
+
+    // app
+    AppRoutingModule
   ],
   declarations: [
     AppComponent

src/app/settings/settings.reducer.ts

@@ -3,7 +3,7 @@ import { Action } from '@ngrx/store';
 export const SETTINGS_THEME = 'SETTINGS_THEME';
 
 export const initialState = {
-  theme: 'default'
+  theme: 'DEFAULT-THEME'
 };
 
 export function settingsReducer(state = initialState, action: Action) {

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

@@ -1,5 +1,12 @@
-<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>
+<div class="row">
+  <div class="col-sm-12"><h1>Settings</h1></div>
+</div>
+<br>
+<div class="row">
+  <md-select class="col-md-4" placeholder="Select theme" name="theme"
+             [ngModel]="theme" (change)="onThemeSelect($event)">
+    <md-option *ngFor="let t of themes" [value]="t.value">
+      {{t.label}}
+    </md-option>
+  </md-select>
+</div>

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

@@ -16,7 +16,7 @@ export class SettingsComponent implements OnInit, OnDestroy {
 
   themes = [
     { value: 'DEFAULT-THEME', label: 'Default' },
-    { value: 'DARK-THEME', label: 'Dark' }
+    { value: 'ALTERNATIVE-THEME', label: 'Alternative' }
   ];
 
   constructor(private store: Store<any>) {

src/app/static/about/about.component.html

@@ -0,0 +1,3 @@
+<p>
+  about works!
+</p>

src/app/static/about/about.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { AboutComponent } from './about.component';
+
+describe('AboutComponent', () => {
+  let component: AboutComponent;
+  let fixture: ComponentFixture<AboutComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ AboutComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(AboutComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/static/about/about.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'anms-about',
+  templateUrl: './about.component.html',
+  styleUrls: ['./about.component.scss']
+})
+export class AboutComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

src/app/static/features/features.component.html

@@ -0,0 +1,3 @@
+<p>
+  features works!
+</p>

src/app/static/features/features.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { FeaturesComponent } from './features.component';
+
+describe('FeaturesComponent', () => {
+  let component: FeaturesComponent;
+  let fixture: ComponentFixture<FeaturesComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ FeaturesComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(FeaturesComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/static/features/features.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'anms-features',
+  templateUrl: './features.component.html',
+  styleUrls: ['./features.component.scss']
+})
+export class FeaturesComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

src/app/static/index.ts

@@ -0,0 +1,3 @@
+export * from './static-routing.module';
+export * from './static.module';
+export * from './about/about.component';

src/app/static/static-routing.module.ts

@@ -0,0 +1,16 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+
+import { AboutComponent } from './about/about.component';
+import { FeaturesComponent } from './features/features.component';
+
+const routes: Routes = [
+  { path: 'about', component: AboutComponent },
+  { path: 'features', component: FeaturesComponent }
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule]
+})
+export class StaticRoutingModule { }

src/app/static/static.module.ts

@@ -0,0 +1,21 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+import { SharedModule } from '../shared';
+
+import { StaticRoutingModule } from './static-routing.module';
+import { AboutComponent } from './about/about.component';
+import { FeaturesComponent } from './features/features.component';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    SharedModule,
+    StaticRoutingModule
+  ],
+  declarations: [
+    AboutComponent,
+    FeaturesComponent
+  ]
+})
+export class StaticModule { }