fix(theme:layout-default): fix RTL will misalignment in medium screen (…

…#1469)
ng-alain · Apr 15, 2022 · f5950f6 · f5950f6
1 parent 8608736
commit f5950f6
Show file tree

Hide file tree

Showing 7 changed files with 57 additions and 7 deletions.
diff --git a/package.json b/package.json
@@ -95,8 +95,8 @@
     "isutf8": "^4.0.0"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "~13.3.0",
-    "@angular/cli": "~13.3.0",
+    "@angular-devkit/build-angular": "~13.3.3",
+    "@angular/cli": "~13.3.3",
     "@angular/compiler-cli": "~13.3.0",
     "@types/jasmine": "~3.10.0",
     "@types/node": "^12.11.1",

diff --git a/packages/abc/ellipsis/ellipsis.spec.ts b/packages/abc/ellipsis/ellipsis.spec.ts
@@ -100,7 +100,7 @@ describe('abc: ellipsis', () => {
         }));
         it('should be not innerText', fakeAsync(() => {
           const el = page.getEl('.ellipsis__shadow');
-          spyOnProperty(el!, 'innerText').and.returnValue(null);
+          spyOnProperty(el!, 'innerText').and.returnValue(null as NzSafeAny);
           context.lines = 2;
           page.tick();
           expect((dl.nativeElement as HTMLElement).innerHTML).toContain('...');

diff --git a/packages/abc/reuse-tab/reuse-tab.component.ts b/packages/abc/reuse-tab/reuse-tab.component.ts
@@ -1,3 +1,4 @@
+import { Direction, Directionality } from '@angular/cdk/bidi';
 import { Platform } from '@angular/cdk/platform';
 import { DOCUMENT } from '@angular/common';
 import {
@@ -49,7 +50,8 @@ import { ReuseTabService } from './reuse-tab.service';
     '[class.reuse-tab]': 'true',
     '[class.reuse-tab__line]': `tabType === 'line'`,
     '[class.reuse-tab__card]': `tabType === 'card'`,
-    '[class.reuse-tab__disabled]': `disabled`
+    '[class.reuse-tab__disabled]': `disabled`,
+    '[class.reuse-tab-rtl]': `dir === 'rtl'`
   },
   providers: [ReuseTabContextService],
   preserveWhitespaces: false,
@@ -70,6 +72,7 @@ export class ReuseTabComponent implements OnInit, OnChanges, OnDestroy {
   list: ReuseItem[] = [];
   item?: ReuseItem;
   pos = 0;
+  dir: Direction = 'ltr';
 
   // #region fields
 
@@ -105,7 +108,8 @@ export class ReuseTabComponent implements OnInit, OnChanges, OnDestroy {
     private route: ActivatedRoute,
     @Optional() @Inject(ALAIN_I18N_TOKEN) private i18nSrv: AlainI18NService,
     @Inject(DOCUMENT) private doc: NzSafeAny,
-    private platform: Platform
+    private platform: Platform,
+    @Optional() private directionality: Directionality
   ) {}
 
   private genTit(title: ReuseTitle): string {
@@ -269,6 +273,12 @@ export class ReuseTabComponent implements OnInit, OnChanges, OnDestroy {
   // #endregion
 
   ngOnInit(): void {
+    this.dir = this.directionality.value;
+    this.directionality.change?.pipe(takeUntil(this.destroy$)).subscribe((direction: Direction) => {
+      this.dir = direction;
+      this.cdr.detectChanges();
+    });
+
     if (!this.platform.isBrowser) {
       return;
     }

diff --git a/packages/abc/reuse-tab/style/index.less b/packages/abc/reuse-tab/style/index.less
@@ -81,3 +81,5 @@
     border: 1px solid #e9e9e9;
   }
 }
+
+@import './rtl.less';
diff --git a/packages/abc/reuse-tab/style/rtl.less b/packages/abc/reuse-tab/style/rtl.less
@@ -0,0 +1,3 @@
+@{reuse-tab-prefix}-rtl {
+  direction: rtl;
+}
diff --git a/packages/theme/layout-default/style/_aside.less b/packages/theme/layout-default/style/_aside.less
@@ -81,6 +81,19 @@
         left: 0;
       }
     }
+    @media (max-width: @mobile-max) {
+      @{alain-default-prefix}__content {
+        transform: translate3d(-@alain-default-aside-wd, 0, 0);
+      }
+      @{alain-default-prefix}__collapsed {
+        @{alain-default-prefix}__aside {
+          transform: translate3d(100%, 0, 0);
+        }
+        @{alain-default-prefix}__content {
+          transform: translateZ(0);
+        }
+      }
+    }
   }
 }
 .layout-default-aside-rtl-mixin(@rtl-enabled);
diff --git a/packages/theme/layout-default/style/fix/_reuse-tab.less b/packages/theme/layout-default/style/fix/_reuse-tab.less
@@ -1,3 +1,6 @@
+@alain-default-aside-width: @alain-default-aside-wd + @alain-default-content-padding;
+@alain-default-aside-collapsed-width: @alain-default-aside-collapsed-wd + @alain-default-content-padding;
+
 @{reuse-tab-prefix} {
   margin: 0 -@alain-default-content-padding 0 -@alain-default-content-padding;
 }
@@ -7,14 +10,14 @@
     position: fixed;
     top: @alain-default-header-hg;
     right: @alain-default-content-padding;
-    left: @alain-default-aside-wd + @alain-default-content-padding;
+    left: @alain-default-aside-width;
     z-index: @zindex-fixed + 1;
   }
 }
 
 @{alain-default-prefix}__collapsed {
   @{reuse-tab-prefix} {
-    left: @alain-default-aside-collapsed-wd + @alain-default-content-padding;
+    left: @alain-default-aside-collapsed-width;
   }
 }
 
@@ -44,3 +47,22 @@
     }
   }
 }
+
+.layout-default-reuse-tab-rtl-mixin(@enabled) when(@enabled=true) {
+  [dir='rtl'] {
+    @{alain-default-prefix}__fixed {
+      @{reuse-tab-prefix} {
+        right: @alain-default-aside-width;
+        left: @alain-default-content-padding;
+      }
+    }
+
+    @{alain-default-prefix}__collapsed {
+      @{reuse-tab-prefix} {
+        right: @alain-default-aside-collapsed-width;
+        left: 0;
+      }
+    }
+  }
+}
+.layout-default-reuse-tab-rtl-mixin(@rtl-enabled);