diff --git a/.angular-cli.json b/.angular-cli.json index b798322c6..c9cbc1226 100644 --- a/.angular-cli.json +++ b/.angular-cli.json @@ -21,6 +21,9 @@ "styles": [ "styles.scss" ], + "stylePreprocessorOptions": { + "includePaths": ["./themes"] + }, "scripts": [], "environmentSource": "environments/environment.ts", "environments": { diff --git a/README.md b/README.md index 439673bb8..3fbc5089e 100644 --- a/README.md +++ b/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) diff --git a/package.json b/package.json index 9324dfa8e..cac7f4613 100644 --- a/package.json +++ b/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", diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts index 763ce6846..6dffdbf1e 100644 --- a/src/app/app-routing.module.ts +++ b/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 diff --git a/src/app/app.component.html b/src/app/app.component.html index 8d6609b83..3a751f033 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -1,31 +1,33 @@
- - Angular NGrx Material Starter - - - - - - - + + + - - - - -

- {{title}} -

- - + + + + + + +
+
+
+ +
+
+
diff --git a/src/app/app.component.scss b/src/app/app.component.scss index 8253e55b7..57ed74b11 100644 --- a/src/app/app.component.scss +++ b/src/app/app.component.scss @@ -1,5 +1,3 @@ - - .toolbar{ button { diff --git a/src/app/app.component.scss-theme.scss b/src/app/app.component.scss-theme.scss new file mode 100644 index 000000000..cc9c2bdeb --- /dev/null +++ b/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); +} + diff --git a/src/app/app.component.spec.ts b/src/app/app.component.spec.ts index 35a7302af..3d1e02fe2 100644 --- a/src/app/app.component.spec.ts +++ b/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!'); - })); }); diff --git a/src/app/app.component.ts b/src/app/app.component.ts index 26d5af139..d163f3645 100644 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -3,11 +3,12 @@ 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 { @@ -15,18 +16,17 @@ export class AppComponent implements OnDestroy { themeClass: string; - title = 'anms works!'; - constructor( overlayContainer: OverlayContainer, private store: Store ) { - 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; }); } diff --git a/src/app/app.module.ts b/src/app/app.module.ts index aae6825bd..c03aee420 100644 --- a/src/app/app.module.ts +++ b/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 diff --git a/src/app/settings/settings.reducer.ts b/src/app/settings/settings.reducer.ts index dc4402967..36f8cf987 100644 --- a/src/app/settings/settings.reducer.ts +++ b/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) { diff --git a/src/app/settings/settings/settings.component.html b/src/app/settings/settings/settings.component.html index 00c1e8358..e161f65dd 100644 --- a/src/app/settings/settings/settings.component.html +++ b/src/app/settings/settings/settings.component.html @@ -1,5 +1,12 @@ - - - {{t.label}} - - +
+

Settings

+
+
+
+ + + {{t.label}} + + +
diff --git a/src/app/settings/settings/settings.component.ts b/src/app/settings/settings/settings.component.ts index 44d624eb0..ce8018c31 100644 --- a/src/app/settings/settings/settings.component.ts +++ b/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) { diff --git a/src/app/static/about/about.component.html b/src/app/static/about/about.component.html new file mode 100644 index 000000000..17e2a33d9 --- /dev/null +++ b/src/app/static/about/about.component.html @@ -0,0 +1,3 @@ +

+ about works! +

diff --git a/src/app/static/about/about.component.scss b/src/app/static/about/about.component.scss new file mode 100644 index 000000000..e69de29bb diff --git a/src/app/static/about/about.component.spec.ts b/src/app/static/about/about.component.spec.ts new file mode 100644 index 000000000..3ed180055 --- /dev/null +++ b/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; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ AboutComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(AboutComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should be created', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/static/about/about.component.ts b/src/app/static/about/about.component.ts new file mode 100644 index 000000000..bf19898d5 --- /dev/null +++ b/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() { + } + +} diff --git a/src/app/static/features/features.component.html b/src/app/static/features/features.component.html new file mode 100644 index 000000000..f50c2b9d7 --- /dev/null +++ b/src/app/static/features/features.component.html @@ -0,0 +1,3 @@ +

+ features works! +

diff --git a/src/app/static/features/features.component.scss b/src/app/static/features/features.component.scss new file mode 100644 index 000000000..e69de29bb diff --git a/src/app/static/features/features.component.spec.ts b/src/app/static/features/features.component.spec.ts new file mode 100644 index 000000000..1d5d7eaa7 --- /dev/null +++ b/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; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ FeaturesComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(FeaturesComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should be created', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/static/features/features.component.ts b/src/app/static/features/features.component.ts new file mode 100644 index 000000000..7b241f03d --- /dev/null +++ b/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() { + } + +} diff --git a/src/app/static/index.ts b/src/app/static/index.ts new file mode 100644 index 000000000..0cb57e4c4 --- /dev/null +++ b/src/app/static/index.ts @@ -0,0 +1,3 @@ +export * from './static-routing.module'; +export * from './static.module'; +export * from './about/about.component'; diff --git a/src/app/static/static-routing.module.ts b/src/app/static/static-routing.module.ts new file mode 100644 index 000000000..b9b33dcb9 --- /dev/null +++ b/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 { } diff --git a/src/app/static/static.module.ts b/src/app/static/static.module.ts new file mode 100644 index 000000000..b3524c7f6 --- /dev/null +++ b/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 { } diff --git a/src/reset.scss b/src/reset.scss deleted file mode 100644 index ea1e941c3..000000000 --- a/src/reset.scss +++ /dev/null @@ -1,4 +0,0 @@ -body { - margin: 0; - padding: 0; -} diff --git a/src/styles-theme-dark.scss b/src/styles-theme-dark.scss deleted file mode 100644 index f4e8cda75..000000000 --- a/src/styles-theme-dark.scss +++ /dev/null @@ -1,4 +0,0 @@ -$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); diff --git a/src/styles-theme-default.scss b/src/styles-theme-default.scss deleted file mode 100644 index da2d0519f..000000000 --- a/src/styles-theme-default.scss +++ /dev/null @@ -1,5 +0,0 @@ -$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); diff --git a/src/styles.scss b/src/styles.scss index 3b5d7f2a1..039529806 100644 --- a/src/styles.scss +++ b/src/styles.scss @@ -1,14 +1,23 @@ -@import 'reset.scss'; +@import '~bootstrap/scss/bootstrap-reboot'; +@import '~bootstrap/scss/bootstrap-grid'; + +* { + &:active, :focus { + outline: none !important; + } +} @import '~@angular/material/theming'; @include mat-core(); -@import 'styles-theme-default.scss'; -@import 'styles-theme-dark.scss'; +@import 'default-theme.scss'; +@import 'alternative-theme.scss'; -@include angular-material-theme($anms-theme); +.default-theme { + @include angular-material-theme($anms-theme); +} -.dark-theme { - @include angular-material-theme($anms-dark-theme); +.alternative-theme { + @include angular-material-theme($anms-alternative-theme); } diff --git a/src/themes/alternative-theme.scss b/src/themes/alternative-theme.scss new file mode 100644 index 000000000..16824baa9 --- /dev/null +++ b/src/themes/alternative-theme.scss @@ -0,0 +1,4 @@ +$anms-alternative-primary: mat-palette($mat-purple, 900); +$anms-alternative-accent: mat-palette($mat-amber, A700); +$anms-alternative-warn: mat-palette($mat-deep-orange); +$anms-alternative-theme: mat-light-theme($anms-alternative-primary, $anms-alternative-accent, $anms-alternative-warn); diff --git a/src/themes/default-theme.scss b/src/themes/default-theme.scss new file mode 100644 index 000000000..a495d79d7 --- /dev/null +++ b/src/themes/default-theme.scss @@ -0,0 +1,5 @@ +$anms-primary: mat-palette($mat-pink, 700); +//$anms-accent: mat-palette($mat-light-green, A700); +$anms-accent: mat-palette($mat-grey, 900); +$anms-warn: mat-palette($mat-red); +$anms-theme: mat-light-theme($anms-primary, $anms-accent, $anms-warn);