upload button enhancements (#1835)

- add support for [disabled] attribute
- move to angular/material icons
- improve demo shell layout (files.component)
This commit is contained in:
Denys Vuika
2017-04-21 15:55:45 +01:00
committed by Mario Romano
parent 39ffd515d9
commit 95711616ca
5 changed files with 83 additions and 97 deletions

View File

@@ -1,7 +1,7 @@
<form>
<!--Files Upload-->
<div *ngIf="!uploadFolders" [class.mdl-button--file--disabled]="disableButton" class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored mdl-button--file">
<i class="material-icons">file_upload</i>
<div *ngIf="!uploadFolders" [class.mdl-button--file--disabled]="isDisabled()" class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored mdl-button--file">
<md-icon>file_upload</md-icon>
<!--Multiple Files Upload-->
<span *ngIf="multipleFiles">
@@ -11,7 +11,7 @@
(change)="onFilesAdded($event)"
multiple="multiple"
accept="{{acceptedFilesType}}"
[attr.disabled]="disableButton"
[attr.disabled]="isDisabled()"
#uploadFiles>
</span>
@@ -22,21 +22,21 @@
<input id="upload-single-file" data-automation-id="upload-single-file" type="file" name="uploadFiles"
(change)="onFilesAdded($event)"
accept="{{acceptedFilesType}}"
[attr.disabled]="disableButton"
[attr.disabled]="isDisabled()"
#uploadFiles>
</span>
</div>
<!--Folders Upload-->
<div *ngIf="uploadFolders" class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored mdl-button--file">
<i class="material-icons">file_upload</i>
<div *ngIf="uploadFolders" [class.mdl-button--file--disabled]="isDisabled()" class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored mdl-button--file">
<md-icon>file_upload</md-icon>
<label id="uploadFolder-label" *ngIf="!staticTitle" for="uploadFolder">{{'FILE_UPLOAD.BUTTON.UPLOAD_FOLDER' | translate}}</label>
<label id="uploadFolder-label-static" *ngIf="staticTitle" for="uploadFolder">{{staticTitle}}</label>
<input id="uploadFolder" data-automation-id="uploadFolder" type="file" name="uploadFiles"
(change)="onDirectoryAdded($event)"
multiple="multiple"
accept="{{acceptedFilesType}}"
[attr.disabled]="disableButton"
[attr.disabled]="isDisabled()"
webkitdirectory directory
multiple #uploadFolders>
</div>

View File

@@ -56,6 +56,9 @@ export class UploadButtonComponent implements OnInit, OnChanges {
private static DEFAULT_ROOT_ID: string = '-root-';
@Input()
disabled: boolean = false;
@Input()
showNotificationBar: boolean = true;
@@ -96,7 +99,6 @@ export class UploadButtonComponent implements OnInit, OnChanges {
permissionEvent: EventEmitter<PermissionModel> = new EventEmitter<PermissionModel>();
private disableButton: boolean = false;
private permissionValue: Subject<boolean> = new Subject<boolean>();
constructor(private el: ElementRef,
@@ -109,6 +111,10 @@ export class UploadButtonComponent implements OnInit, OnChanges {
}
}
isDisabled(): boolean {
return this.disabled || this.disableButton;
}
ngOnInit() {
this.permissionValue.subscribe((hasPermission: boolean) => {
if (!hasPermission && this.disableWithNoPermission) {