Skip to content

Commit

Permalink
feat: RTL support (#1634)
Browse files Browse the repository at this point in the history
  • Loading branch information
yggg authored and nnixaa committed May 11, 2018
1 parent 06d2197 commit 3b63759
Show file tree
Hide file tree
Showing 40 changed files with 660 additions and 196 deletions.
100 changes: 27 additions & 73 deletions package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

6 changes: 3 additions & 3 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -40,9 +40,9 @@
"@angular/platform-browser-dynamic": "6.0.0",
"@angular/router": "6.0.0",
"@asymmetrik/ngx-leaflet": "3.0.1",
"@nebular/auth": "^2.0.0-rc.7",
"@nebular/security": "^2.0.0-rc.7",
"@nebular/theme": "^2.0.0-rc.7",
"@nebular/auth": "^2.0.0-rc.8",
"@nebular/security": "^2.0.0-rc.8",
"@nebular/theme": "^2.0.0-rc.8",
"@ng-bootstrap/ng-bootstrap": "1.0.0",
"@swimlane/ngx-charts": "7.0.1",
"angular2-chartjs": "0.4.1",
Expand Down
40 changes: 32 additions & 8 deletions src/app/@core/data/state.service.ts
Original file line number Diff line number Diff line change
@@ -1,10 +1,11 @@
import { Injectable, OnDestroy } from '@angular/core';
import { of as observableOf, Observable, BehaviorSubject } from 'rxjs';
import { takeWhile } from 'rxjs/operators';

import { of as observableOf, Observable , BehaviorSubject } from 'rxjs';
import { Injectable } from '@angular/core';

import { NbLayoutDirectionService, NbLayoutDirection } from '@nebular/theme';

@Injectable()
export class StateService {
export class StateService implements OnDestroy {

protected layouts: any = [
{
Expand All @@ -27,21 +28,44 @@ export class StateService {

protected sidebars: any = [
{
name: 'Left Sidebar',
name: 'Sidebar at layout start',
icon: 'nb-layout-sidebar-left',
id: 'left',
id: 'start',
selected: true,
},
{
name: 'Right Sidebar',
name: 'Sidebar at layout end',
icon: 'nb-layout-sidebar-right',
id: 'right',
id: 'end',
},
];

protected layoutState$ = new BehaviorSubject(this.layouts[0]);
protected sidebarState$ = new BehaviorSubject(this.sidebars[0]);

alive = true;

constructor(directionService: NbLayoutDirectionService) {
directionService.onDirectionChange()
.pipe(takeWhile(() => this.alive))
.subscribe(direction => this.updateSidebarIcons(direction));

this.updateSidebarIcons(directionService.getDirection());
}

ngOnDestroy() {
this.alive = false;
}

private updateSidebarIcons(direction: NbLayoutDirection) {
const [ startSidebar, endSidebar ] = this.sidebars;
const isLtr = direction === NbLayoutDirection.LTR;
const startIconClass = isLtr ? 'nb-layout-sidebar-left' : 'nb-layout-sidebar-right';
const endIconClass = isLtr ? 'nb-layout-sidebar-right' : 'nb-layout-sidebar-left';
startSidebar.icon = startIconClass;
endSidebar.icon = endIconClass;
}

setLayoutState(state: any): any {
this.layoutState$.next(state);
}
Expand Down
3 changes: 2 additions & 1 deletion src/app/@theme/components/header/header.component.html
Original file line number Diff line number Diff line change
Expand Up @@ -6,14 +6,15 @@
<div class="logo" (click)="goToHome()">ngx-<span>admin</span></div>
</div>
<ngx-theme-switcher></ngx-theme-switcher>
<ngx-layout-direction-switcher></ngx-layout-direction-switcher>
</div>

<nb-actions
size="medium"
class="header-container"
[class.right]="position === 'normal'"
[class.left]="position === 'inverse'">
<nb-action icon="nb-grid-b" class="toggle-layout" (click)="toggleSettings()"></nb-action>
<nb-action icon="nb-gear" class="toggle-layout" (click)="toggleSettings()"></nb-action>
<nb-action *nbIsGranted="['view', 'user']" >
<nb-user [nbContextMenu]="userMenu" [name]="user?.name" [picture]="user?.picture"></nb-user>
</nb-action>
Expand Down
Loading

0 comments on commit 3b63759

Please sign in to comment.