feat: RTL support (#1634)

src/app/@theme/components/header/header.component.html

@@ -6,6 +6,7 @@
     <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
@@ -13,7 +14,7 @@
   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>

src/app/@theme/components/header/header.component.scss

@@ -33,7 +33,8 @@
     width: 100%;
 
     .navigation {
-      padding-right: nb-theme(padding);
+      @include nb-ltr(padding-right, nb-theme(padding));
+      @include nb-rtl(padding-left, nb-theme(padding));
       font-size: 2.5rem;
       text-decoration: none;
 
@@ -47,7 +48,8 @@
       padding: 0 nb-theme(padding);
       font-size: 1.75rem;
       font-weight: nb-theme(font-weight-bolder);
-      border-left: 1px solid nb-theme(separator);
+      @include nb-ltr(border-left, 1px solid nb-theme(separator));
+      @include nb-rtl(border-right, 1px solid nb-theme(separator));
       white-space: nowrap;
 
       span {
@@ -56,6 +58,17 @@
     }
   }
 
+  ngx-layout-direction-switcher,
+  ngx-theme-switcher {
+    margin: 0 1em;
+  }
+
+  @include media-breakpoint-down(xl) {
+    ngx-layout-direction-switcher {
+      display: none;
+    }
+  }
+
   .toggle-layout /deep/ a {
     display: block;
     text-decoration: none;
@@ -64,6 +77,54 @@
     i {
       color: nb-theme(color-fg-highlight);
       font-size: 2.25rem;
+      border-radius: 50%;
+      position: relative;
+      animation-name: pulse-light;
+
+      &::after {
+        content: ' ';
+        // hack to be able to set border-radius
+        background-image: url('data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7');
+        border-radius: 50%;
+        pointer-events: none;
+
+        position: absolute;
+        top: 52.3%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        width: 13%;
+        height: 13%;
+
+        animation: 3s linear infinite pulse;
+
+        @include nb-for-theme(default) {
+          animation-name: pulse-light;
+        }
+      }
+    }
+  }
+
+  @include keyframes(pulse) {
+    0% {
+      box-shadow: 0 0 1px 0 rgba(nb-theme(color-fg-highlight), 0);
+    }
+    20% {
+      box-shadow: 0 0 3px 10px rgba(nb-theme(color-fg-highlight), 0.4);
+    }
+    100% {
+      box-shadow: 0 0 5px 20px rgba(nb-theme(color-fg-highlight), 0);
+    }
+  }
+
+  @include keyframes(pulse-light) {
+    0% {
+      box-shadow: 0 0 1px 0 rgba(115, 255, 208, 0);
+    }
+    20% {
+      box-shadow: 0 0 3px 10px rgba(115, 255, 208, 0.4);
+    }
+    100% {
+      box-shadow: 0 0 5px 20px rgba(115, 255, 208, 0);
     }
   }
 
@@ -80,6 +141,11 @@
     .toggle-layout {
       padding: 0;
     }
+
+    ngx-layout-direction-switcher,
+    ngx-theme-switcher {
+      display: none;
+    }
   }
 
   @include media-breakpoint-down(sm) {
@@ -112,4 +178,3 @@
     }
   }
 }
-

src/app/@theme/components/index.ts

@@ -4,3 +4,5 @@ export * from './search-input/search-input.component';
 export * from './tiny-mce/tiny-mce.component';
 export * from './theme-settings/theme-settings.component';
 export * from './theme-switcher/theme-switcher.component';
+export * from './switcher/switcher.component';
+export * from './layout-direction-switcher/layout-direction-switcher.component'

src/app/@theme/components/layout-direction-switcher/layout-direction-switcher.component.ts

@@ -0,0 +1,42 @@
+import { Component, OnDestroy, Input } from '@angular/core';
+import { NbLayoutDirectionService, NbLayoutDirection } from '@nebular/theme';
+import { takeWhile } from 'rxjs/operators/takeWhile';
+
+@Component({
+  selector: 'ngx-layout-direction-switcher',
+  template: `
+    <ngx-switcher
+      [firstValue]="directions.RTL"
+      [secondValue]="directions.LTR"
+      [firstValueLabel]="'RTL'"
+      [secondValueLabel]="'LTR'"
+      [value]="currentDirection"
+      (valueChange)="toggleDirection($event)"
+      [vertical]="vertical"
+    >
+    </ngx-switcher>
+  `,
+})
+export class LayoutDirectionSwitcherComponent implements OnDestroy {
+  directions = NbLayoutDirection;
+  currentDirection: NbLayoutDirection;
+  alive = true;
+
+  @Input() vertical: boolean = false;
+
+  constructor(private directionService: NbLayoutDirectionService) {
+    this.currentDirection = this.directionService.getDirection();
+
+    this.directionService.onDirectionChange()
+      .pipe(takeWhile(() => this.alive))
+      .subscribe(newDirection => this.currentDirection = newDirection);
+  }
+
+  toggleDirection(newDirection) {
+    this.directionService.setDirection(newDirection);
+  }
+
+  ngOnDestroy() {
+    this.alive = false;
+  }
+}

src/app/@theme/components/switcher/switcher.component.scss

@@ -4,39 +4,51 @@
 @import '~@nebular/theme/styles/global/bootstrap/breakpoints';
 
 @include nb-install-component() {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  width: 50%;
-
-  .theme-switch {
+  .switch-label {
     display: flex;
     justify-content: space-between;
     align-items: center;
     cursor: pointer;
     margin: 0;
 
+    &.vertical {
+      flex-direction: column;
+      align-items: flex-start;
+
+      .first,
+      .second {
+        padding: 0;
+      }
+
+      .switch {
+        margin-top: 0.5em;
+      }
+    }
+
     & > span {
       font-size: 1.125rem;
       font-weight: nb-theme(font-weight-bold);
       transition: opacity 0.3s ease;
+      color: nb-theme(color-fg);
 
-      &.light {
-        color: nb-theme(color-fg-text);
-        padding-right: 10px;
+      &.first {
+        @include nb-ltr(padding-right, 10px);
+        @include nb-rtl(padding-left, 10px);
       }
 
-      &.cosmic {
-        color: nb-theme(color-fg);
-        padding-left: 10px;
+      &.second {
+        @include nb-ltr(padding-left, 10px);
+        @include nb-rtl(padding-right, 10px);
+      }
+
+      &.active {
+        color: nb-theme(color-fg-text);
       }
 
       @include nb-for-theme(cosmic) {
-        &.light {
-          color: nb-theme(color-fg);
-        }
+        color: nb-theme(color-fg);
 
-        &.cosmic {
+        &.active {
           color: nb-theme(color-white);
         }
       }
@@ -58,7 +70,8 @@
       display: none;
 
       &:checked + .slider::before {
-        transform: translateX(2.25rem);
+        @include nb-ltr(transform, translateX(2.25rem));
+        @include nb-rtl(transform, translateX(-2.25rem));
       }
     }
 
@@ -89,13 +102,7 @@
     }
   }
 
-  @include media-breakpoint-down(is) {
-    .light, .cosmic {
-      display: none;
-    }
-  }
-
   @include media-breakpoint-down(xs) {
-      align-items: flex-end;
+    align-items: flex-end;
   }
 }

src/app/@theme/components/switcher/switcher.component.ts

@@ -0,0 +1,60 @@
+import { Component, Input, Output, EventEmitter } from '@angular/core';
+
+@Component({
+  selector: 'ngx-switcher',
+  styleUrls: ['./switcher.component.scss'],
+  template: `
+    <label class="switch-label" [class.vertical]="vertical">
+      <span class="first" [class.active]="vertical || isFirstValue()">
+        {{vertical ? currentValueLabel() : firstValueLabel}}
+      </span>
+
+      <div class="switch">
+        <input type="checkbox" [checked]="isSecondValue()" (change)="changeValue()">
+        <span class="slider"></span>
+      </div>
+
+      <span
+        *ngIf="!vertical"
+        class="second"
+        [class.active]="isSecondValue()"
+      >
+          {{secondValueLabel}}
+      </span>
+    </label>
+  `,
+})
+export class SwitcherComponent {
+  @Input() firstValue: any;
+  @Input() secondValue: any;
+
+  @Input() firstValueLabel: string;
+  @Input() secondValueLabel: string;
+
+  @Input() vertical: boolean;
+
+  @Input() value: any;
+  @Output() valueChange = new EventEmitter<any>();
+
+  isFirstValue() {
+    return this.value === this.firstValue;
+  }
+
+  isSecondValue() {
+    return this.value === this.secondValue;
+  }
+
+  currentValueLabel() {
+    return this.isFirstValue()
+      ? this.firstValueLabel
+      : this.secondValueLabel;
+  }
+
+  changeValue() {
+    this.value = this.isFirstValue()
+      ? this.secondValue
+      : this.firstValue;
+
+    this.valueChange.emit(this.value);
+  }
+}

src/app/@theme/components/theme-settings/theme-settings.component.scss

@@ -32,5 +32,40 @@
       }
     }
   }
-}
 
+  .settings {
+    margin-bottom: 1em;
+  }
+
+  .switcher {
+    margin-bottom: 1rem;
+
+    /deep/ ngx-switcher {
+      .switch-label span {
+        font-size: 1em;
+        font-weight: normal;
+      }
+
+      .switch {
+        height: 1.5em;
+        width: 3em;
+
+        .slider::before {
+          height: 1.5em;
+          width: 1.5em;
+        }
+
+        input:checked + .slider::before {
+          @include nb-ltr(transform, translateX(1.5rem)!important);
+          @include nb-rtl(transform, translateX(-1.5rem)!important);
+        }
+      }
+
+      @include nb-for-theme(cosmic) {
+        .switch .slider {
+          background-color: nb-theme(color-bg);
+        }
+      }
+    }
+  }
+}

src/app/@theme/components/theme-settings/theme-settings.component.ts

@@ -26,6 +26,13 @@ import { StateService } from '../../../@core/data/state.service';
         <i [attr.class]="sidebar.icon"></i>
       </a>
     </div>
+    <h6 class="settings">SETTINGS</h6>
+    <div class="switcher">
+      <ngx-theme-switcher [vertical]="true"></ngx-theme-switcher>
+    </div>
+    <div class="switcher">
+      <ngx-layout-direction-switcher [vertical]="true"></ngx-layout-direction-switcher>
+    </div>
   `,
 })
 export class ThemeSettingsComponent {

src/app/@theme/components/theme-switcher/theme-switcher.component.ts

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