feat(theme): add corporate theme (#1727)

This commit is contained in:
Denis Strigo 2018-06-21 15:16:53 +03:00 committed by Dmitry Nehaychik
parent 6d705d2786
commit e37f12dfc9
45 changed files with 3747 additions and 2960 deletions

View file

@ -1,57 +1,19 @@
import { Component, OnInit, Input } from '@angular/core';
import { NbThemeService } from '@nebular/theme';
import { Component, Input, ViewChild } from '@angular/core';
import { NbPopoverDirective } from '@nebular/theme';
import { NbJSThemeOptions } from '@nebular/theme/services/js-themes/theme.options';
import { AnalyticsService } from '../../../@core/utils/analytics.service';
import { ThemeSwitcherListComponent } from './themes-switcher-list/themes-switcher-list.component';
@Component({
selector: 'ngx-theme-switcher',
template: `
<ngx-switcher
[firstValue]="false"
[secondValue]="true"
[firstValueLabel]="'Light'"
[secondValueLabel]="'Cosmic'"
[value]="currentBoolTheme()"
(valueChange)="toggleTheme($event)"
[vertical]="vertical"
>
</ngx-switcher>
`,
templateUrl: './theme-switcher.component.html',
styleUrls: ['./theme-switcher.component.scss'],
})
export class ThemeSwitcherComponent implements OnInit {
export class ThemeSwitcherComponent {
@ViewChild(NbPopoverDirective) popover: NbPopoverDirective;
@Input() showTitle: boolean = true;
switcherListComponent = ThemeSwitcherListComponent;
theme: NbJSThemeOptions;
firstTheme = 'default';
secondTheme = 'cosmic';
@Input() vertical: boolean = false;
constructor(
private themeService: NbThemeService,
private analyticsService: AnalyticsService,
) {}
ngOnInit() {
this.themeService.getJsTheme()
.subscribe((theme: NbJSThemeOptions) => this.theme = theme);
}
toggleTheme(theme: boolean) {
const themeName = this.boolToTheme(theme);
this.themeService.changeTheme(themeName);
this.analyticsService.trackEvent('switchTheme');
}
currentBoolTheme() {
return this.themeToBool(this.theme);
}
private themeToBool(theme: NbJSThemeOptions) {
return theme.name === this.secondTheme;
}
private boolToTheme(theme: boolean) {
return theme ? this.secondTheme : this.firstTheme;
}
}