[ADF-1372] support for tooltips (Upload button) (#2204)

* support for tooltips (Upload button)

* readme update

* update layout to fix the tests

* remove test code

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

@@ -263,6 +263,7 @@
     <div *ngIf="!acceptedFilesTypeShow">
         <alfresco-upload-button
             #uploadButton
+            tooltip="Custom tooltip"
             [disabled]="!enableUpload"
             data-automation-id="multiple-file-upload"
             [rootFolderId]="documentList.currentFolderId"
@@ -276,6 +277,7 @@
     <div *ngIf="acceptedFilesTypeShow">
         <alfresco-upload-button
             #uploadButton
+            tooltip="Custom tooltip"
             [disabled]="!enableUpload"
             data-automation-id="multiple-file-upload"
             [rootFolderId]="documentList.currentFolderId"

ng2-components/ng2-alfresco-upload/README.md

@@ -93,6 +93,7 @@ npm install ng2-alfresco-upload
 | versioning | boolean | false | Versioning false is the default uploader behaviour and it renames the file using an integer suffix if there is a name clash. Versioning true to indicate that a major version should be created |
 | staticTitle | string | (predefined) | define the text of the upload button |
 | disableWithNoPermission | boolean | false |  If the value is true and the user doesn't have the permission to delete the node the button will be disabled |
+| tooltip | string | | Custom tooltip |
 
 ### Events
 

ng2-components/ng2-alfresco-upload/index.ts

@@ -16,8 +16,9 @@
  */
 
 import { ModuleWithProviders, NgModule } from '@angular/core';
-import { MdButtonModule, MdIconModule, MdProgressSpinnerModule } from '@angular/material';
+
 import { CoreModule, TRANSLATION_PROVIDER } from 'ng2-alfresco-core';
+import { MaterialModule } from './src/material.module';
 
 import { FileUploadingDialogComponent } from './src/components/file-uploading-dialog.component';
 import { FileUploadingListRowComponent } from './src/components/file-uploading-list-row.component';
@@ -52,9 +53,7 @@ export const UPLOAD_PROVIDERS: any[] = [
 @NgModule({
     imports: [
         CoreModule,
-        MdIconModule,
+        MaterialModule
-        MdProgressSpinnerModule,
-        MdButtonModule
     ],
     declarations: [
         ...UPLOAD_DIRECTIVES

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

@@ -1,43 +1,77 @@
 <form>
     <!--Files Upload-->
-    <div *ngIf="!uploadFolders" [class.mdl-button--file--disabled]="isButtonDisabled()" class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored mdl-button--file">
+    <div *ngIf="!uploadFolders"
+        [class.mdl-button--file--disabled]="isButtonDisabled()"
+        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">
-            <label id="upload-multiple-file-label" *ngIf="!staticTitle" for="upload-multiple-files">{{'FILE_UPLOAD.BUTTON.UPLOAD_FILE' | translate}}</label>
+            <label
-            <label id="upload-multiple-file-label-static" *ngIf="staticTitle" for="upload-multiple-files">{{staticTitle}}</label>
+                id="upload-multiple-file-label"
-            <input id="upload-multiple-files" data-automation-id="upload-multiple-files" type="file" name="uploadFiles"
+                *ngIf="!staticTitle"
-                   (change)="onFilesAdded($event)"
+                for="upload-multiple-files">{{ 'FILE_UPLOAD.BUTTON.UPLOAD_FILE' | translate }}</label>
-                   multiple="multiple"
+            <label
-                   accept="{{acceptedFilesType}}"
+                id="upload-multiple-file-label-static"
-                   [attr.disabled]="isButtonDisabled()"
+                *ngIf="staticTitle"
-                   #uploadFiles>
+                for="upload-multiple-files">{{ staticTitle }}</label>
+            <input #uploadFiles
+                id="upload-multiple-files"
+                data-automation-id="upload-multiple-files"
+                type="file"
+                name="uploadFiles"
+                multiple="multiple"
+                accept="{{acceptedFilesType}}"
+                [attr.disabled]="isButtonDisabled()"
+                [title]="tooltip"
+                (change)="onFilesAdded($event)">
         </span>
 
         <!--Single Files Upload-->
         <span *ngIf="!multipleFiles">
-            <label id="upload-single-file-label" *ngIf="!staticTitle" for="upload-single-file">{{'FILE_UPLOAD.BUTTON.UPLOAD_FILE' | translate}}</label>
+            <label
-            <label id="upload-single-file-label-static" *ngIf="staticTitle" for="upload-single-file">{{staticTitle}}</label>
+                id="upload-single-file-label"
-            <input id="upload-single-file" data-automation-id="upload-single-file" type="file" name="uploadFiles"
+                *ngIf="!staticTitle"
-                   (change)="onFilesAdded($event)"
+                for="upload-single-file">{{ 'FILE_UPLOAD.BUTTON.UPLOAD_FILE' | translate }}</label>
-                   accept="{{acceptedFilesType}}"
+            <label
-                   [attr.disabled]="isButtonDisabled()"
+                id="upload-single-file-label-static"
-                   #uploadFiles>
+                *ngIf="staticTitle"
+                for="upload-single-file">{{ staticTitle }}</label>
+            <input #uploadFiles
+                id="upload-single-file"
+                data-automation-id="upload-single-file"
+                type="file"
+                name="uploadFiles"
+                accept="{{acceptedFilesType}}"
+                [attr.disabled]="isButtonDisabled()"
+                [title]="tooltip"
+                (change)="onFilesAdded($event)">
         </span>
     </div>
 
     <!--Folders Upload-->
-    <div *ngIf="uploadFolders" [class.mdl-button--file--disabled]="isButtonDisabled()" class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored mdl-button--file">
+    <div *ngIf="uploadFolders"
+        [class.mdl-button--file--disabled]="isButtonDisabled()"
+        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
-        <label id="uploadFolder-label-static" *ngIf="staticTitle" for="uploadFolder">{{staticTitle}}</label>
+            id="uploadFolder-label"
-        <input id="uploadFolder" data-automation-id="uploadFolder" type="file" name="uploadFiles"
+            *ngIf="!staticTitle"
-               (change)="onDirectoryAdded($event)"
+            for="uploadFolder">{{ 'FILE_UPLOAD.BUTTON.UPLOAD_FOLDER' | translate }}</label>
-               multiple="multiple"
+        <label
-               accept="{{acceptedFilesType}}"
+            id="uploadFolder-label-static"
-               [attr.disabled]="isButtonDisabled()"
+            *ngIf="staticTitle"
-               webkitdirectory directory
+            for="uploadFolder">{{ staticTitle }}</label>
-               multiple #uploadFolders>
+        <input #uploadFolders
+            id="uploadFolder"
+            data-automation-id="uploadFolder"
+            type="file"
+            name="uploadFiles"
+            multiple="multiple"
+            accept="{{acceptedFilesType}}"
+            webkitdirectory directory
+            [attr.disabled]="isButtonDisabled()"
+            [title]="tooltip"
+            (change)="onDirectoryAdded($event)">
     </div>
 </form>

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

@@ -55,6 +55,9 @@ export class UploadButtonComponent implements OnInit, OnChanges {
     @Input()
     staticTitle: string;
 
+    @Input()
+    tooltip: string = null;
+
     /**
      * @deprecated Deprecated in 1.6.0, this property is not used for couple of releases already.
      *

ng2-components/ng2-alfresco-upload/src/material.module.ts

@@ -0,0 +1,37 @@
+/*!
+ * @license
+ * Copyright 2016 Alfresco Software, Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { NgModule } from '@angular/core';
+import {
+    MdButtonModule,
+    MdIconModule,
+    MdProgressSpinnerModule
+} from '@angular/material';
+
+export function modules() {
+    return [
+        MdIconModule,
+        MdProgressSpinnerModule,
+        MdButtonModule
+    ];
+}
+
+@NgModule({
+    imports: modules(),
+    exports: modules()
+})
+export class MaterialModule {}