mirror of
https://github.com/akveo/ngx-admin.git
synced 2025-12-21 01:40:13 +01:00
feat(theme): add corporate theme (#1727)
This commit is contained in:
parent
6d705d2786
commit
e37f12dfc9
45 changed files with 3747 additions and 2960 deletions
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue