From 61dd23153e2cd55ca1873af808f7ffa597261de3 Mon Sep 17 00:00:00 2001 From: Alimadadi Date: Tue, 5 Nov 2019 11:58:21 +0330 Subject: [PATCH 1/8] fix(menu): sticking menu to the right side of page for user convenience and better UI/UX in RTL mode (this commit doesn't affect UI/UX in LTR mode) --- src/app/@theme/layouts/one-column/one-column.layout.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/app/@theme/layouts/one-column/one-column.layout.ts b/src/app/@theme/layouts/one-column/one-column.layout.ts index cc0b789a..6486d63f 100644 --- a/src/app/@theme/layouts/one-column/one-column.layout.ts +++ b/src/app/@theme/layouts/one-column/one-column.layout.ts @@ -9,7 +9,7 @@ import { Component } from '@angular/core'; - + From b661d5901cc583f2242deb44cd21a8e2aaca14f2 Mon Sep 17 00:00:00 2001 From: Alimadadi Date: Tue, 5 Nov 2019 12:07:59 +0330 Subject: [PATCH 2/8] refactor(RTL mode): to save developers time from searching docs and Google to prepare RTL mode, optional arguments are set to their default values. Now they just need to change NbLayoutDirection.LTR to NbLayoutDirection.RTL and the theme switchs to RTL mode. --- src/app/@theme/theme.module.ts | 3 +++ 1 file changed, 3 insertions(+) diff --git a/src/app/@theme/theme.module.ts b/src/app/@theme/theme.module.ts index 5ae45d8c..0e42b001 100644 --- a/src/app/@theme/theme.module.ts +++ b/src/app/@theme/theme.module.ts @@ -12,6 +12,7 @@ import { NbSelectModule, NbIconModule, NbThemeModule, + NbLayoutDirection, } from '@nebular/theme'; import { NbEvaIconsModule } from '@nebular/eva-icons'; import { NbSecurityModule } from '@nebular/security'; @@ -85,6 +86,8 @@ export class ThemeModule { name: 'default', }, [ DEFAULT_THEME, COSMIC_THEME, CORPORATE_THEME, DARK_THEME ], + null, + NbLayoutDirection.LTR, ).providers, ], }; From 07ab60b08c7435a40e91a07e902fae04d6768fc6 Mon Sep 17 00:00:00 2001 From: Alimadadi Date: Tue, 5 Nov 2019 12:16:58 +0330 Subject: [PATCH 3/8] fix: fixing direction of icon for user convenience and better UI/UX in RTL mode (this commit doesn't affect UI/UX in LTR mode) --- .../pages/e-commerce/earning-card/earning-card.component.scss | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/app/pages/e-commerce/earning-card/earning-card.component.scss b/src/app/pages/e-commerce/earning-card/earning-card.component.scss index 293d2717..feff3fe1 100644 --- a/src/app/pages/e-commerce/earning-card/earning-card.component.scss +++ b/src/app/pages/e-commerce/earning-card/earning-card.component.scss @@ -11,13 +11,15 @@ top: 1rem; @include nb-rtl(right, auto); @include nb-rtl(left, 0.625rem); + @include nb-rtl(transform, scaleX(-1)); cursor: pointer; } ::ng-deep .flipped { .back-container { .flip-icon { - transform: scaleX(-1); + @include nb-ltr(transform, scaleX(-1)); + @include nb-rtl(transform, scaleX(1)); } } From e9fe2491c4848f50b4be8ee4cb69639ebe90824e Mon Sep 17 00:00:00 2001 From: Alimadadi Date: Tue, 5 Nov 2019 12:18:55 +0330 Subject: [PATCH 4/8] fix: padding of title moved to the right for better UI/UX in RTL mode (this commit doesn't affect UI/UX in LTR mode) --- .../profit-card/back-side/stats-card-back.component.scss | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/app/pages/e-commerce/profit-card/back-side/stats-card-back.component.scss b/src/app/pages/e-commerce/profit-card/back-side/stats-card-back.component.scss index 23f37b27..534e4b55 100644 --- a/src/app/pages/e-commerce/profit-card/back-side/stats-card-back.component.scss +++ b/src/app/pages/e-commerce/profit-card/back-side/stats-card-back.component.scss @@ -6,7 +6,8 @@ flex: 1; .title { - padding-left: 0.5rem; + @include nb-ltr(padding-left, 0.5rem); + @include nb-rtl(padding-right, 0.5rem); } nb-card-body { From 12dc3b19c80cd596cd4c364be532868c2c473328 Mon Sep 17 00:00:00 2001 From: Alimadadi Date: Tue, 5 Nov 2019 12:22:23 +0330 Subject: [PATCH 5/8] fix: padding of title moved to the right for better UI/UX in RTL mode (this commit doesn't affect UI/UX in LTR mode) --- .../profit-card/front-side/stats-card-front.component.scss | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/app/pages/e-commerce/profit-card/front-side/stats-card-front.component.scss b/src/app/pages/e-commerce/profit-card/front-side/stats-card-front.component.scss index 03c74d66..8b2e0b0a 100644 --- a/src/app/pages/e-commerce/profit-card/front-side/stats-card-front.component.scss +++ b/src/app/pages/e-commerce/profit-card/front-side/stats-card-front.component.scss @@ -6,7 +6,8 @@ flex: 1; .title { - padding-left: 0.5rem; + @include nb-ltr(padding-left, 0.5rem); + @include nb-rtl(padding-right, 0.5rem); } nb-card-header { From ce58a9bb533effde24b626cad4d69f687f0f1f56 Mon Sep 17 00:00:00 2001 From: Alimadadi Date: Tue, 5 Nov 2019 12:25:04 +0330 Subject: [PATCH 6/8] fix: fixing direction of icon for user convenience and better UI/UX in RTL mode (this commit doesn't affect UI/UX in LTR mode) --- .../pages/e-commerce/profit-card/profit-card.component.scss | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/app/pages/e-commerce/profit-card/profit-card.component.scss b/src/app/pages/e-commerce/profit-card/profit-card.component.scss index ed0bf32c..36ddca10 100644 --- a/src/app/pages/e-commerce/profit-card/profit-card.component.scss +++ b/src/app/pages/e-commerce/profit-card/profit-card.component.scss @@ -7,13 +7,15 @@ top: 1rem; @include nb-rtl(right, auto); @include nb-rtl(left, 0.625rem); + @include nb-rtl(transform, scaleX(-1)); cursor: pointer; } ::ng-deep .flipped { .back-container { .flip-icon { - transform: scaleX(-1); + @include nb-ltr(transform, scaleX(-1)); + @include nb-rtl(transform, scaleX(1)); } } From bae22bca9ac4e8dd8be41869208cf7de91a86dfc Mon Sep 17 00:00:00 2001 From: Alimadadi Date: Tue, 5 Nov 2019 12:27:27 +0330 Subject: [PATCH 7/8] fix: fixing direction of icon for user convenience and better UI/UX in RTL mode (this commit doesn't affect UI/UX in LTR mode) --- src/app/pages/e-commerce/slide-out/slide-out.component.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/src/app/pages/e-commerce/slide-out/slide-out.component.scss b/src/app/pages/e-commerce/slide-out/slide-out.component.scss index 4b232674..216e81b5 100644 --- a/src/app/pages/e-commerce/slide-out/slide-out.component.scss +++ b/src/app/pages/e-commerce/slide-out/slide-out.component.scss @@ -11,6 +11,7 @@ top: 1.5rem; @include nb-ltr(right, 1.5rem); @include nb-rtl(left, 1.5rem); + @include nb-rtl(transform, scaleX(-1)); cursor: pointer; background-color: transparent; z-index: 2; From b9b87301a3b491c8f999bf5a168ba1dda54da2dc Mon Sep 17 00:00:00 2001 From: Alimadadi Date: Tue, 5 Nov 2019 12:29:01 +0330 Subject: [PATCH 8/8] fix: fixing direction of icon for user convenience and better UI/UX in RTL mode (this commit doesn't affect UI/UX in LTR mode) --- src/app/pages/tables/tree-grid/tree-grid.component.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/src/app/pages/tables/tree-grid/tree-grid.component.scss b/src/app/pages/tables/tree-grid/tree-grid.component.scss index 755b885b..d6b7bbaa 100644 --- a/src/app/pages/tables/tree-grid/tree-grid.component.scss +++ b/src/app/pages/tables/tree-grid/tree-grid.component.scss @@ -20,6 +20,7 @@ ::ng-deep .row-toggle-button { color: nb-theme(text-basic-color); + @include nb-rtl(transform, scaleX(-1)); } .nb-tree-grid-header-cell,