mirror of
https://github.com/akveo/ngx-admin.git
synced 2025-12-21 01:40:13 +01:00
feat: RTL support (#1634)
This commit is contained in:
parent
06d2197583
commit
3b63759e84
40 changed files with 660 additions and 196 deletions
|
|
@ -1,27 +1,35 @@
|
|||
import { Component, OnInit } from '@angular/core';
|
||||
import { Component, OnInit, Input } from '@angular/core';
|
||||
import { NbThemeService } from '@nebular/theme';
|
||||
import { NbJSThemeOptions } from '@nebular/theme/services/js-themes/theme.options';
|
||||
import { AnalyticsService } from '../../../@core/utils/analytics.service';
|
||||
|
||||
@Component({
|
||||
selector: 'ngx-theme-switcher',
|
||||
styleUrls: ['./theme-switcher.component.scss'],
|
||||
template: `
|
||||
<label class="theme-switch">
|
||||
<span class="light">Light</span>
|
||||
<div class="switch">
|
||||
<input type="checkbox" [checked]="currentBoolTheme()" (change)="toggleTheme(theme.checked)" #theme>
|
||||
<span class="slider"></span>
|
||||
</div>
|
||||
<span class="cosmic">Cosmic</span>
|
||||
</label>
|
||||
<ngx-switcher
|
||||
[firstValue]="false"
|
||||
[secondValue]="true"
|
||||
[firstValueLabel]="'Light'"
|
||||
[secondValueLabel]="'Cosmic'"
|
||||
[value]="currentBoolTheme()"
|
||||
(valueChange)="toggleTheme($event)"
|
||||
[vertical]="vertical"
|
||||
>
|
||||
</ngx-switcher>
|
||||
`,
|
||||
})
|
||||
export class ThemeSwitcherComponent implements OnInit {
|
||||
theme: NbJSThemeOptions;
|
||||
|
||||
constructor(private themeService: NbThemeService, private analyticsService: AnalyticsService) {
|
||||
}
|
||||
firstTheme = 'default';
|
||||
secondTheme = 'cosmic';
|
||||
|
||||
@Input() vertical: boolean = false;
|
||||
|
||||
constructor(
|
||||
private themeService: NbThemeService,
|
||||
private analyticsService: AnalyticsService,
|
||||
) {}
|
||||
|
||||
ngOnInit() {
|
||||
this.themeService.getJsTheme()
|
||||
|
|
@ -29,8 +37,9 @@ export class ThemeSwitcherComponent implements OnInit {
|
|||
}
|
||||
|
||||
toggleTheme(theme: boolean) {
|
||||
const boolTheme = this.boolToTheme(theme);
|
||||
this.themeService.changeTheme(boolTheme);
|
||||
const themeName = this.boolToTheme(theme);
|
||||
this.themeService.changeTheme(themeName);
|
||||
|
||||
this.analyticsService.trackEvent('switchTheme');
|
||||
}
|
||||
|
||||
|
|
@ -39,10 +48,10 @@ export class ThemeSwitcherComponent implements OnInit {
|
|||
}
|
||||
|
||||
private themeToBool(theme: NbJSThemeOptions) {
|
||||
return theme.name === 'cosmic';
|
||||
return theme.name === this.secondTheme;
|
||||
}
|
||||
|
||||
private boolToTheme(theme: boolean) {
|
||||
return theme ? 'cosmic' : 'default';
|
||||
return theme ? this.secondTheme : this.firstTheme;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue