[ADF-4583] Upload dialog - RTL support (#4745)

* overwrite mat-drawer-content position

* set attributes based on direction and position

* add direction support

* update tests

* update doc

* fix direction description

* use native direction attribute

* bind to dir input

* update docs

* remove direction attribute

* listen to user preference textOrientation changes

* update tests

* remove unused import

lib/content-services/upload/components/file-uploading-dialog.component.html

@@ -1,9 +1,7 @@
 <div *ngIf="isDialogActive"
      class="adf-upload-dialog"
      id="upload-dialog"
-     [class.adf-upload-dialog--minimized]="isDialogMinimized"
+     [class.adf-upload-dialog--minimized]="isDialogMinimized">
-     [class.adf-upload-dialog--position-left]="position === 'left'"
-     [class.adf-upload-dialog--position-right]="position === 'right'">
     <header class="adf-upload-dialog__header">
         <button
             mat-button

lib/content-services/upload/components/file-uploading-dialog.component.scss

@@ -19,14 +19,6 @@
             display: none !important;
         }
 
-        &--position-left {
-            left: 25px;
-        }
-
-        &--position-right {
-            right: 25px;
-        }
-
         &--minimized {
             width: 20%;
 
@@ -88,4 +80,6 @@
             }
         }
     }
+    [adfUploadDialogLeft] .adf-upload-dialog { left: 25px; }
+    [adfUploadDialogRight] .adf-upload-dialog { right: 25px;}
 }

lib/content-services/upload/components/file-uploading-dialog.component.spec.ts

@@ -17,7 +17,9 @@
 
 import { EventEmitter } from '@angular/core';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { FileModel, FileUploadCompleteEvent, FileUploadErrorEvent, UploadService, setupTestBed, CoreModule, AlfrescoApiService, AlfrescoApiServiceMock } from '@alfresco/adf-core';
+import {
+    FileModel, FileUploadCompleteEvent, FileUploadErrorEvent, UploadService, setupTestBed, CoreModule, AlfrescoApiService, AlfrescoApiServiceMock, UserPreferencesService
+} from '@alfresco/adf-core';
 import { UploadModule } from '../upload.module';
 import { FileUploadingDialogComponent } from './file-uploading-dialog.component';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
@@ -25,6 +27,7 @@ import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 describe('FileUploadingDialogComponent', () => {
     let fixture: ComponentFixture<FileUploadingDialogComponent>;
     let uploadService: UploadService;
+    let userPreferenceService: UserPreferencesService;
     let component: FileUploadingDialogComponent;
     let emitter: EventEmitter<any>;
     let fileList: FileModel[];
@@ -36,7 +39,8 @@ describe('FileUploadingDialogComponent', () => {
             UploadModule
         ],
         providers: [
-            { provide: AlfrescoApiService, useClass: AlfrescoApiServiceMock }
+            { provide: AlfrescoApiService, useClass: AlfrescoApiServiceMock },
+            UserPreferencesService
         ]
     });
 
@@ -45,6 +49,7 @@ describe('FileUploadingDialogComponent', () => {
         component = fixture.componentInstance;
 
         uploadService = TestBed.get(UploadService);
+        userPreferenceService = TestBed.get(UserPreferencesService);
         uploadService.clearQueue();
 
         emitter = new EventEmitter();
@@ -211,4 +216,51 @@ describe('FileUploadingDialogComponent', () => {
             expect(uploadService.getQueue().length).toBe(0);
         });
     });
+
+    describe('direction position', () => {
+        beforeEach(() => {
+            uploadService.addToQueue(...fileList);
+            uploadService.uploadFilesInTheQueue(emitter);
+        });
+
+        describe('left position', () => {
+            beforeEach(() => {
+                component.position = 'left';
+            });
+
+            it('should be positioned to the left when direction is LTR', () => {
+                userPreferenceService.set('textOrientation', 'ltr');
+
+                fixture.detectChanges();
+                expect(document.body.querySelector('[adfuploaddialogleft]')).not.toBe(null);
+            });
+
+            it('should be positioned to the right when direction is RTL', () => {
+                userPreferenceService.set('textOrientation', 'rtl');
+
+                fixture.detectChanges();
+                expect(document.body.querySelector('[adfuploaddialogright]')).not.toBe(null);
+            });
+        });
+
+        describe('right position', () => {
+            beforeEach(() => {
+                component.position = 'right';
+            });
+
+            it('should be positioned to the right when direction is LTR', () => {
+                userPreferenceService.set('textOrientation', 'ltr');
+
+                fixture.detectChanges();
+                expect(document.body.querySelector('[adfuploaddialogright]')).not.toBe(null);
+            });
+
+            it('should be positioned to the left when direction is RTL', () => {
+                userPreferenceService.set('textOrientation', 'rtl');
+
+                fixture.detectChanges();
+                expect(document.body.querySelector('[adfuploaddialogleft]')).not.toBe(null);
+            });
+        });
+    });
 });

lib/content-services/upload/components/file-uploading-dialog.component.ts

@@ -17,11 +17,13 @@
 
 import {
     FileModel, FileUploadCompleteEvent, FileUploadDeleteEvent,
-    FileUploadErrorEvent, FileUploadStatus, UploadService
+    FileUploadErrorEvent, FileUploadStatus, UploadService, UserPreferencesService
 } from '@alfresco/adf-core';
-import { ChangeDetectorRef, Component, Input, Output, EventEmitter, OnDestroy, OnInit, ViewChild } from '@angular/core';
+import { ChangeDetectorRef, Component, Input, Output, EventEmitter, OnDestroy, OnInit, ViewChild, HostBinding } from '@angular/core';
-import { Subscription, merge } from 'rxjs';
+import { Subscription, merge, Subject } from 'rxjs';
 import { FileUploadingListComponent } from './file-uploading-list.component';
+import { Direction } from '@angular/cdk/bidi';
+import { takeUntil } from 'rxjs/operators';
 
 @Component({
     selector: 'adf-file-uploading-dialog',
@@ -29,6 +31,10 @@ import { FileUploadingListComponent } from './file-uploading-list.component';
     styleUrls: ['./file-uploading-dialog.component.scss']
 })
 export class FileUploadingDialogComponent implements OnInit, OnDestroy {
+    /** Dialog direction. Can be 'ltr' or 'rtl. */
+    private direction: Direction = 'ltr';
+    private onDestroy$: Subject<boolean> = new Subject<boolean>();
+
     @ViewChild('uploadList')
     uploadList: FileUploadingListComponent;
 
@@ -40,6 +46,19 @@ export class FileUploadingDialogComponent implements OnInit, OnDestroy {
     @Output()
     error: EventEmitter<any> = new EventEmitter();
 
+    @HostBinding('attr.adfUploadDialogRight')
+    public get isPositionRight(): boolean {
+        return (this.direction === 'ltr' && this.position === 'right')
+            || (this.direction === 'rtl' && this.position === 'left')
+            || null;
+    }
+    @HostBinding('attr.adfUploadDialogLeft')
+    public get isPositionLeft(): boolean {
+        return (this.direction === 'ltr' && this.position === 'left')
+            || (this.direction === 'rtl' && this.position === 'right')
+            || null;
+    }
+
     filesUploadingList: FileModel[] = [];
     isDialogActive: boolean = false;
     totalCompleted: number = 0;
@@ -52,8 +71,11 @@ export class FileUploadingDialogComponent implements OnInit, OnDestroy {
     private fileUploadSubscription: Subscription;
     private errorSubscription: Subscription;
 
-    constructor(private uploadService: UploadService,
+    constructor(
-                private changeDetector: ChangeDetectorRef) {
+        private uploadService: UploadService,
+        private changeDetector: ChangeDetectorRef,
+        private userPreferencesService: UserPreferencesService
+        ) {
     }
 
     ngOnInit() {
@@ -97,6 +119,12 @@ export class FileUploadingDialogComponent implements OnInit, OnDestroy {
                 }
             }
         });
+
+        this.userPreferencesService.select('textOrientation')
+            .pipe(takeUntil(this.onDestroy$))
+            .subscribe((textOrientation: Direction) => {
+                this.direction = textOrientation;
+            });
     }
 
     /**
@@ -147,5 +175,7 @@ export class FileUploadingDialogComponent implements OnInit, OnDestroy {
         this.counterSubscription.unsubscribe();
         this.fileUploadSubscription.unsubscribe();
         this.errorSubscription.unsubscribe();
+        this.onDestroy$.next(true);
+        this.onDestroy$.complete();
     }
 }

lib/core/layout/components/sidenav-layout/sidenav-layout.component.scss

@@ -33,6 +33,7 @@
 
         .mat-drawer-content {
             @include flex-column;
+            position: unset;
             overflow: auto;
         }
     }