Andreas/ngx-admin
1
0
Fork 0
mirror of https://github.com/akveo/ngx-admin.git synced 2025-12-20 09:20:12 +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 {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: `
<main [ngClass]="{'menu-collapsed': isMenuCollapsed}">
<main [ngClass]="{'menu-collapsed': isMenuCollapsed}" baThemeRun>
<router-outlet></router-outlet>
</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 './baThemeRun';

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

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

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

@ -51,3 +51,5 @@ export class colorHelper {
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>
<body class="blur-theme">
<body>
<app>
<div id="preloader">
<div></div>
</div>
Loading...
</app>