Andreas/ngx-admin
1
0
Fork 0
mirror of https://github.com/akveo/ngx-admin.git synced 2025-12-20 01:10:13 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

theme run classes

Browse source
This commit is contained in:
nixa 2016-05-17 14:13:56 +03:00
parent e7595af72c
commit 9d0fef1dd3
7 changed files with 55 additions and 20 deletions
Download patch file Download diff file Expand all files Collapse all files

4
src/app/app.component.ts
View file

@ -4,6 +4,7 @@ import {RouteConfig} from '@angular/router-deprecated';
import {Pages} from './pages'; import {Pages} from './pages';
import {AppState} from './app.state'; import {AppState} from './app.state';
import {BaThemeConfigProvider, BaThemeConfig} from './theme'; import {BaThemeConfigProvider, BaThemeConfig} from './theme';
import {BaThemeRun} from './theme/directives';
import './app.loader.ts'; import './app.loader.ts';
/* /*
@ -13,11 +14,12 @@ import './app.loader.ts';
@Component({ @Component({
selector: 'app', selector: 'app',
pipes: [], pipes: [],
directives: [BaThemeRun],
providers: [BaThemeConfigProvider, BaThemeConfig], providers: [BaThemeConfigProvider, BaThemeConfig],
encapsulation: ViewEncapsulation.None, encapsulation: ViewEncapsulation.None,
styles: [require('normalize.css'), require('./app.scss')], styles: [require('normalize.css'), require('./app.scss')],
template: ` template: `
<main [ngClass]="{'menu-collapsed': isMenuCollapsed}"> <main [ngClass]="{'menu-collapsed': isMenuCollapsed}" baThemeRun>
<router-outlet></router-outlet> <router-outlet></router-outlet>
</main> </main>
` `

29
src/app/theme/directives/baThemeRun/baThemeRun.directive.ts Normal file
View file

@ -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();
}
}

1
src/app/theme/directives/baThemeRun/index.ts Normal file
View file

@ -0,0 +1 @@
export * from './baThemeRun.directive.ts';

1
src/app/theme/directives/index.ts
View file

@ -1 +1,2 @@
export * from './scrollPosition'; export * from './scrollPosition';
export * from './baThemeRun';

32
src/app/theme/sass/_layout.scss
View file

@ -16,25 +16,27 @@ body {
font: 14px/16px $font-family; font: 14px/16px $font-family;
color: $default-text; color: $default-text;
background-color: $body-bg; background-color: $body-bg;
&.blur-theme { }
.blur-theme {
@at-root body {
@include main-background(); @include main-background();
} }
} }
body.mobile{ .mobile {
background: none; @at-root body {
.body-bg{ background: none;
display: block; .body-bg {
position: fixed; display: block;
top: 0; position: fixed;
left: 0; top: 0;
bottom: 0; left: 0;
right: 0; bottom: 0;
background-attachment: inherit; right: 0;
background-color: $body-bg; background-attachment: inherit;
} background-color: $body-bg;
&.blur-theme { }
@include main-background();
} }
} }

2
src/app/theme/theme.constants.ts
View file

@ -51,3 +51,5 @@ export class colorHelper {
return result; return result;
}; };
} }
export const isMobile = () => (/android|webos|iphone|ipad|ipod|blackberry|windows phone/).test(navigator.userAgent.toLowerCase());

6
src/index.html
View file

@ -19,12 +19,10 @@
</head> </head>
<body class="blur-theme"> <body>
<app> <app>
<div id="preloader"> Loading...
<div></div>
</div>
</app> </app>