feat: RTL support (#1634)

This commit is contained in:
Sergey Andrievskiy 2018-05-11 17:25:02 +03:00 committed by Dmitry Nehaychik
parent 06d2197583
commit 3b63759e84
40 changed files with 660 additions and 196 deletions

View file

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