upload button enhancements (#1835)

- add support for [disabled] attribute
- move to angular/material icons
- improve demo shell layout (files.component)

demo-shell-ng2/app/components/files/files.component.css

@@ -15,8 +15,3 @@
 .error-message--text {
     color: #d50000;
 }
-
-.options-container {
-    width: 250px;
-    margin: 20px;
-}

demo-shell-ng2/app/components/files/files.component.html

@@ -121,75 +121,65 @@
 
 <context-menu-holder></context-menu-holder>
 
-<p class="options-container">
-    <label for="switch-multiple-file" class="mdl-switch mdl-js-switch mdl-js-ripple-effect">
-        <input type="checkbox" id="switch-multiple-file" class="mdl-switch__input" (change)="toggleMultipleFileUpload()" >
-        <span class="mdl-switch__label">Multiple File Upload</span>
-    </label>
-</p>
+<div class="container">
+    <section>
+        <md-slide-toggle [(ngModel)]="multipleFileUpload">Multiple File Upload</md-slide-toggle>
+    </section>
 
+    <section>
+        <md-slide-toggle [(ngModel)]="folderUpload">Folder upload</md-slide-toggle>
+    </section>
 
-<p class="options-container">
-    <label for="switch-folder-upload" class="mdl-switch mdl-js-switch mdl-js-ripple-effect">
-        <input type="checkbox" id="switch-folder-upload" class="mdl-switch__input" (change)="toggleFolder()">
-        <span class="mdl-switch__label">Folder Upload</span>
-    </label>
-</p>
+    <section>
+        <md-slide-toggle [(ngModel)]="acceptedFilesTypeShow">Custom extensions filter</md-slide-toggle>
+    </section>
 
-<p class="options-container">
-    <label for="switch-accepted-file-type" class="mdl-switch mdl-js-switch mdl-js-ripple-effect">
-        <input type="checkbox" id="switch-accepted-file-type" class="mdl-switch__input" (change)="toggleAcceptedFilesType()">
-        <span class="mdl-switch__label">Filter extension</span>
-    </label>
-</p>
+    <section>
+        <md-slide-toggle [(ngModel)]="versioning">Enable versioning</md-slide-toggle>
+    </section>
 
-<p style="width:250px;margin: 20px;">
-    <label for="switch-versioning" class="mdl-switch mdl-js-switch mdl-js-ripple-effect">
-        <input type="checkbox" id="switch-versioning" class="mdl-switch__input" (change)="toggleVersioning()">
-        <span class="mdl-switch__label">Versioning</span>
-    </label>
-</p>
+    <section>
+        <md-slide-toggle [(ngModel)]="disableWithNoPermission">Disable when user has no permissions</md-slide-toggle>
+    </section>
 
-<p class="options-container">
-    <label for="switch-disableWithNoPermission" class="mdl-switch mdl-js-switch mdl-js-ripple-effect">
-        <input type="checkbox" id="switch-disableWithNoPermission" class="mdl-switch__input" (change)="toggleDisableWithNoPermission()" >
-        <span class="mdl-switch__label">Disable upload</span>
-    </label>
-</p>
-
-<h5>Upload</h5>
-<br>
-<div *ngIf="acceptedFilesTypeShow">
-    <label class="mdl-input__label">Extension accepted
-        <input type="text" data-automation-id="accepted-files-type" [(ngModel)]="acceptedFilesType">
-    </label>
-    <br/>
-</div>
-<div *ngIf="!acceptedFilesTypeShow">
-    <alfresco-upload-button #uploadButton
-                            data-automation-id="multiple-file-upload"
-                            [rootFolderId]="documentList.currentFolderId"
-                            [multipleFiles]="multipleFileUpload"
-                            [uploadFolders]="folderUpload"
-                            [versioning] = "versioning"
-                            [disableWithNoPermission]="disableWithNoPermission"
-                            (permissionEvent)="onUploadPermissionFailed($event)">
-        <div class="mdl-spinner mdl-js-spinner is-active"></div>
-    </alfresco-upload-button>
-</div>
-<div *ngIf="acceptedFilesTypeShow">
-    <alfresco-upload-button #uploadButton
-                            data-automation-id="multiple-file-upload"
-                            [rootFolderId]="documentList.currentFolderId"
-                            [acceptedFilesType]="acceptedFilesType"
-                            [multipleFiles]="multipleFileUpload"
-                            [uploadFolders]="folderUpload"
-                            [versioning] = "versioning"
-                            [disableWithNoPermission]="disableWithNoPermission"
-                            (permissionEvent)="onUploadPermissionFailed($event)">
-        <div class="mdl-spinner mdl-js-spinner is-active"></div>
-    </alfresco-upload-button>
+    <h5>Upload</h5>
+    <section *ngIf="acceptedFilesTypeShow">
+        <md-input-container>
+            <input md-input placeholder="Extension accepted" [(ngModel)]="acceptedFilesType"  data-automation-id="accepted-files-type">
+        </md-input-container>
+    </section>
+    <div *ngIf="!acceptedFilesTypeShow">
+        <alfresco-upload-button
+            #uploadButton
+            [disabled]="!enableUpload"
+            data-automation-id="multiple-file-upload"
+            [rootFolderId]="documentList.currentFolderId"
+            [multipleFiles]="multipleFileUpload"
+            [uploadFolders]="folderUpload"
+            [versioning]="versioning"
+            [disableWithNoPermission]="disableWithNoPermission"
+            (permissionEvent)="onUploadPermissionFailed($event)">
+        </alfresco-upload-button>
+    </div>
+    <div *ngIf="acceptedFilesTypeShow">
+        <alfresco-upload-button
+            #uploadButton
+            [disabled]="!enableUpload"
+            data-automation-id="multiple-file-upload"
+            [rootFolderId]="documentList.currentFolderId"
+            [acceptedFilesType]="acceptedFilesType"
+            [multipleFiles]="multipleFileUpload"
+            [uploadFolders]="folderUpload"
+            [versioning]="versioning"
+            [disableWithNoPermission]="disableWithNoPermission"
+            (permissionEvent)="onUploadPermissionFailed($event)">
+        </alfresco-upload-button>
+    </div>
+    <section>
+        <md-checkbox [(ngModel)]="enableUpload">Enable upload (demoing enabled/disabled state)</md-checkbox>
+    </section>
 </div>
+
 <file-uploading-dialog #fileDialog></file-uploading-dialog>
 
 <div *ngIf="fileShowed">

demo-shell-ng2/app/components/files/files.component.ts

@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 
-import { Component, OnInit, AfterViewInit, Optional, ViewChild, ChangeDetectorRef } from '@angular/core';
+import { Component, Input, OnInit, AfterViewInit, Optional, ViewChild, ChangeDetectorRef } from '@angular/core';
 import { ActivatedRoute, Params, Router } from '@angular/router';
 import { AlfrescoAuthenticationService, LogService, NotificationService } from 'ng2-alfresco-core';
 import { DocumentActionsService, DocumentListComponent, ContentActionHandler, DocumentActionModel, FolderActionModel } from 'ng2-alfresco-documentlist';
@@ -34,13 +34,28 @@ export class FilesComponent implements OnInit, AfterViewInit {
     errorMessage: string = null;
     fileNodeId: any;
     fileShowed: boolean = false;
+
+    @Input()
     multipleFileUpload: boolean = false;
+
+    @Input()
     disableWithNoPermission: boolean = false;
+
+    @Input()
     folderUpload: boolean = false;
+
+    @Input()
     acceptedFilesTypeShow: boolean = false;
+
+    @Input()
     versioning: boolean = false;
+
+    @Input()
     acceptedFilesType: string = '.jpg,.pdf,.js';
 
+    @Input()
+    enableUpload: boolean = true;
+
     @ViewChild(DocumentListComponent)
     documentList: DocumentListComponent;
 
@@ -82,32 +97,12 @@ export class FilesComponent implements OnInit, AfterViewInit {
         }
     }
 
-    toggleMultipleFileUpload() {
-        this.multipleFileUpload = !this.multipleFileUpload;
-        return this.multipleFileUpload;
-    }
-
-    toggleDisableWithNoPermission() {
-        this.disableWithNoPermission = !this.disableWithNoPermission;
-        return this.disableWithNoPermission;
-    }
-
     toggleFolder() {
         this.multipleFileUpload = false;
         this.folderUpload = !this.folderUpload;
         return this.folderUpload;
     }
 
-    toggleAcceptedFilesType() {
-        this.acceptedFilesTypeShow = !this.acceptedFilesTypeShow;
-        return this.acceptedFilesTypeShow;
-    }
-
-    toggleVersioning() {
-        this.versioning = !this.versioning;
-        return this.versioning;
-    }
-
     ngOnInit() {
         if (this.route) {
             this.route.params.forEach((params: Params) => {

ng2-components/ng2-alfresco-upload/src/components/upload-button.component.html

@@ -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>

ng2-components/ng2-alfresco-upload/src/components/upload-button.component.ts

@@ -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) {