diff --git a/src/app/app.component.ts b/src/app/app.component.ts index 2e1ee672..bd1e623a 100644 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -4,6 +4,7 @@ import {RouteConfig} from '@angular/router-deprecated'; import {Pages} from './pages'; import {AppState} from './app.state'; import {BaThemeConfigProvider, BaThemeConfig} from './theme'; +import {BaThemeRun} from './theme/directives'; import './app.loader.ts'; /* @@ -13,11 +14,12 @@ import './app.loader.ts'; @Component({ selector: 'app', pipes: [], + directives: [BaThemeRun], providers: [BaThemeConfigProvider, BaThemeConfig], encapsulation: ViewEncapsulation.None, styles: [require('normalize.css'), require('./app.scss')], template: ` -
+
` diff --git a/src/app/theme/directives/baThemeRun/baThemeRun.directive.ts b/src/app/theme/directives/baThemeRun/baThemeRun.directive.ts new file mode 100644 index 00000000..14cf709a --- /dev/null +++ b/src/app/theme/directives/baThemeRun/baThemeRun.directive.ts @@ -0,0 +1,29 @@ +import {Directive, HostBinding} from '@angular/core'; + +import {BaThemeConfigProvider, isMobile} from '../../../theme'; + +@Directive({ + selector: '[baThemeRun]' +}) +export class BaThemeRun { + + @HostBinding('class.blur-theme') isBlur:boolean = false; + @HostBinding('class.mobile') isMobile:boolean = false; + + constructor(private _baConfig:BaThemeConfigProvider) { + } + + ngOnInit() { + this._assignBlur(); + this._assingMobile(); + } + + // TODO: assign any theme class, not only hardcoded blur + private _assignBlur() { + this.isBlur = this._baConfig.get().theme.blur; + } + + private _assingMobile() { + this.isMobile = isMobile(); + } +} diff --git a/src/app/theme/directives/baThemeRun/index.ts b/src/app/theme/directives/baThemeRun/index.ts new file mode 100644 index 00000000..559bd421 --- /dev/null +++ b/src/app/theme/directives/baThemeRun/index.ts @@ -0,0 +1 @@ +export * from './baThemeRun.directive.ts'; diff --git a/src/app/theme/directives/index.ts b/src/app/theme/directives/index.ts index e11431fe..eec2a1e2 100644 --- a/src/app/theme/directives/index.ts +++ b/src/app/theme/directives/index.ts @@ -1 +1,2 @@ export * from './scrollPosition'; +export * from './baThemeRun'; diff --git a/src/app/theme/sass/_layout.scss b/src/app/theme/sass/_layout.scss index 5b6efa24..45a914ab 100644 --- a/src/app/theme/sass/_layout.scss +++ b/src/app/theme/sass/_layout.scss @@ -16,25 +16,27 @@ body { font: 14px/16px $font-family; color: $default-text; background-color: $body-bg; - &.blur-theme { +} + +.blur-theme { + @at-root body { @include main-background(); } } -body.mobile{ - background: none; - .body-bg{ - display: block; - position: fixed; - top: 0; - left: 0; - bottom: 0; - right: 0; - background-attachment: inherit; - background-color: $body-bg; - } - &.blur-theme { - @include main-background(); +.mobile { + @at-root body { + background: none; + .body-bg { + display: block; + position: fixed; + top: 0; + left: 0; + bottom: 0; + right: 0; + background-attachment: inherit; + background-color: $body-bg; + } } } diff --git a/src/app/theme/theme.constants.ts b/src/app/theme/theme.constants.ts index bb87714c..45a2b410 100644 --- a/src/app/theme/theme.constants.ts +++ b/src/app/theme/theme.constants.ts @@ -51,3 +51,5 @@ export class colorHelper { return result; }; } + +export const isMobile = () => (/android|webos|iphone|ipad|ipod|blackberry|windows phone/).test(navigator.userAgent.toLowerCase()); diff --git a/src/index.html b/src/index.html index c297c1b0..5788a00d 100644 --- a/src/index.html +++ b/src/index.html @@ -19,12 +19,10 @@ - + -
-
-
+ Loading...