feat(admin-ui): Support dynamic ltr/rtl on NotificationComponent

vendure-ecommerce · Oct 14, 2023 · e7d3bc7 · e7d3bc7
1 parent bafb3fa
commit e7d3bc7
Show file tree

Hide file tree

Showing 2 changed files with 39 additions and 17 deletions.
diff --git a/packages/admin-ui/src/lib/core/src/components/notification/notification.component.html b/packages/admin-ui/src/lib/core/src/components/notification/notification.component.html
@@ -1,15 +1,12 @@
-<div
-    class="notification-wrapper"
-    #wrapper
-    [style.top.px]="offsetTop"
-    [ngClass]="{
-        visible: isVisible,
-        info: type === 'info',
-        success: type === 'success',
-        error: type === 'error',
-        warning: type === 'warning'
-    }"
->
-    <clr-icon [attr.shape]="getIcon()" size="24"></clr-icon>
-    {{ stringifyMessage(message) | translate: translationVars }}
-</div>
+<div class="notification-wrapper" #wrapper [style.top.px]="offsetTop" [ngClass]="{
+            visible: isVisible,
+            info: type === 'info',
+            success: type === 'success',
+            error: type === 'error',
+            warning: type === 'warning'
+        }">
+    <div [dir]="direction$ | async">
+        <clr-icon [attr.shape]="getIcon()" size="24"></clr-icon>
+        {{ stringifyMessage(message) | translate: translationVars }}
+    </div>
+</div>
diff --git a/packages/admin-ui/src/lib/core/src/components/notification/notification.component.ts b/packages/admin-ui/src/lib/core/src/components/notification/notification.component.ts
@@ -1,13 +1,21 @@
-import { Component, ElementRef, HostListener, ViewChild } from '@angular/core';
+import { Component, ElementRef, HostListener, OnInit, ViewChild } from '@angular/core';
 
+import { Observable, map } from 'rxjs';
 import { NotificationType } from '../../providers/notification/notification.service';
 
+import { DataService } from '../../data/providers/data.service';
+import { I18nService } from '../../providers/i18n/i18n.service';
+import { LanguageCode } from '../../common/generated-types';
+
 @Component({
     selector: 'vdr-notification',
     templateUrl: './notification.component.html',
     styleUrls: ['./notification.component.scss'],
 })
-export class NotificationComponent {
+export class NotificationComponent implements OnInit {
+    uiLanguageAndLocale$: Observable<[LanguageCode, string | undefined]>;
+    direction$: Observable<'ltr' | 'rtl'>;
+
     @ViewChild('wrapper', { static: true }) wrapper: ElementRef;
     offsetTop = 0;
     message = '';
@@ -18,6 +26,23 @@ export class NotificationComponent {
         /* */
     };
 
+    /**
+     *
+     */
+    constructor(private i18nService: I18nService, private dataService: DataService) {}
+
+    ngOnInit(): void {
+        this.uiLanguageAndLocale$ = this.dataService.client
+            .uiState()
+            .stream$.pipe(map(({ uiState }) => [uiState.language, uiState.locale ?? undefined]));
+
+        this.direction$ = this.uiLanguageAndLocale$.pipe(
+            map(([languageCode]) => {
+                return this.i18nService.isRTL(languageCode) ? 'rtl' : 'ltr';
+            }),
+        );
+    }
+
     registerOnClickFn(fn: () => void): void {
         this.onClickFn = fn;
     }