fix(admin-ui): Add some new ltr/rtl compatibility (#2466)

packages/admin-ui/src/lib/core/src/public_api.ts

@@ -113,6 +113,7 @@ export * from './providers/i18n/custom-message-format-compiler';
 export * from './providers/i18n/i18n.service';
 export * from './providers/job-queue/job-queue.service';
 export * from './providers/local-storage/local-storage.service';
+export * from './providers/localization/localization.service';
 export * from './providers/modal/modal.service';
 export * from './providers/modal/modal.types';
 export * from './providers/nav-builder/nav-builder-types';

packages/admin-ui/src/lib/login/src/components/login/login.component.html

@@ -1,4 +1,4 @@
-<div class="login-wrapper">
+<div class="login-wrapper" [dir]="direction$ | async">
     <div class="login-wrapper-inner">
         <div class="login-wrapper-image">
             <div class="login-wrapper-image-content">

packages/admin-ui/src/lib/login/src/components/login/login.component.scss

@@ -10,6 +10,8 @@
     padding: 20px;
 
     .login-wrapper-inner {
+
+
         background: #fff;
         width: 1120px;
         height: 590px;
@@ -53,8 +55,8 @@
                 left: 0;
                 bottom: 0;
                 z-index: 10;
-                background: rgb(2,0,36);
-                background: linear-gradient(180deg, rgba(2,0,36,0) 0%, rgba(0,0,0,0.75) 100%);
+                background: rgb(2, 0, 36);
+                background: linear-gradient(180deg, rgba(2, 0, 36, 0) 0%, rgba(0, 0, 0, 0.75) 100%);
                 display: flex;
                 flex-direction: column;
                 align-items: flex-start;
@@ -74,13 +76,14 @@
 
                 .login-wrapper-image-copyright {
                     opacity: 0.8;
+
                     p {
                         font-size: 0.6rem;
                         color: white;
                         margin: 0 !important;
                     }
 
-                    a{
+                    a {
                         color: white;
                         text-decoration: underline;
                     }
@@ -96,7 +99,7 @@
             flex-direction: column;
             align-items: stretch;
             justify-content: center;
-            box-shadow: 0px 20px 25px rgba(0,0,0,0.1);
+            box-shadow: 0px 20px 25px rgba(0, 0, 0, 0.1);
             overflow: hidden;
             border-radius: 5px;
             flex-shrink: 0;
@@ -182,6 +185,7 @@
 }
 
 @keyframes shake {
+
     10%,
     90% {
         transform: translate3d(-1px, 0, 0);
@@ -203,3 +207,19 @@
         transform: translate3d(4px, 0, 0);
     }
 }
+
+.login-wrapper[dir="rtl"] {
+    .login-wrapper-inner {
+        .login-wrapper-logo {
+            right: auto;
+            left: 20px;
+        }
+
+        .login-wrapper-image {
+            .login-wrapper-image-content {
+                left: auto;
+                right: 0;
+            }
+        }
+    }
+}

packages/admin-ui/src/lib/login/src/components/login/login.component.ts

@@ -1,14 +1,16 @@
-import { HttpClient, HttpParams } from '@angular/common/http';
-import { Component } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+import { Component, OnInit } from '@angular/core';
 import { Router } from '@angular/router';
-import { ADMIN_UI_VERSION, AuthService, AUTH_REDIRECT_PARAM, getAppConfig } from '@vendure/admin-ui/core';
+import { ADMIN_UI_VERSION, AuthService, AUTH_REDIRECT_PARAM, getAppConfig, LocalizationDirectionType, LocalizationService } from '@vendure/admin-ui/core';
 
 @Component({
     selector: 'vdr-login',
     templateUrl: './login.component.html',
     styleUrls: ['./login.component.scss'],
 })
-export class LoginComponent {
+export class LoginComponent implements OnInit {
+    direction$: LocalizationDirectionType;
+
     username = '';
     password = '';
     rememberMe = false;
@@ -24,13 +26,16 @@ export class LoginComponent {
     imageCreator = '';
     imageCreatorUrl = '';
 
-    constructor(private authService: AuthService, private router: Router, private httpClient: HttpClient) {
+    constructor(private authService: AuthService, private router: Router, private httpClient: HttpClient, private localizationService: LocalizationService) {
         if (this.customImageUrl) {
             this.imageUrl = this.customImageUrl;
         } else {
             this.loadImage();
         }
     }
+    ngOnInit(): void {
+        this.direction$ = this.localizationService.direction$;
+    }
 
     logIn(): void {
         this.errorMessage = undefined;