[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
This commit is contained in:
Cilibiu Bogdan
2019-05-20 17:45:10 +03:00
committed by Denys Vuika
parent 2f44c45903
commit bb0bdbfc1d
5 changed files with 93 additions and 18 deletions

View File

@@ -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 { Subscription, merge } from 'rxjs';
import { ChangeDetectorRef, Component, Input, Output, EventEmitter, OnDestroy, OnInit, ViewChild, HostBinding } from '@angular/core';
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,
private changeDetector: ChangeDetectorRef) {
constructor(
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();
}
}