#46 Accessibility

ng2-components/ng2-alfresco-upload/i18n/en.json

@@ -8,6 +8,12 @@
       "COMPLETED": "uploads complete",
       "PROGRESS": "Upload in progress..."
     },
+    "FILE_INFO": {
+      "NAME": "File name",
+      "PROGRESS": "File progress",
+      "SIZE": "File size",
+      "ACTION": "Actions"
+    },
     "ACTION": {
       "UNDO": "Undo"
     }

ng2-components/ng2-alfresco-upload/i18n/it.json

@@ -5,9 +5,15 @@
       "UPLOAD_FOLDER": "Carica una cartella"
     },
     "MESSAGES": {
-      "COMPLETED": "caricamento completato",
+      "COMPLETED": "caricamenti completati",
       "PROGRESS": "caricamento in corso..."
     },
+    "FILE_INFO": {
+      "NAME": "Nome file",
+      "PROGRESS": "Percentuale caricamento",
+      "SIZE": "Dimensione file",
+      "ACTION": "Azioni"
+    },
     "ACTION": {
       "UNDO": "Annulla"
     }

ng2-components/ng2-alfresco-upload/src/components/file-uploading-dialog.component.ts

@@ -19,7 +19,7 @@
 import {Component, ElementRef, Input} from 'angular2/core';
 import {FileModel} from '../models/file.model';
 import {FileUploadingListComponent} from './file-uploading-list.component';
-import {TranslateService, TranslatePipe} from 'ng2-translate/ng2-translate';
+import {TranslatePipe} from 'ng2-translate/ng2-translate';
 
 declare let __moduleName: string;
 

ng2-components/ng2-alfresco-upload/src/components/file-uploading-list.component.html

@@ -1,5 +1,10 @@
 <table class="mdl-data-table mdl-js-data-table mdl-shadow--2dp">
-    <tbody>
+    <tr>
+        <th>{{'FILE_UPLOAD.FILE_INFO.NAME' | translate}}</th>
+        <th>{{'FILE_UPLOAD.FILE_INFO.PROGRESS' | translate}}</th>
+        <th>{{'FILE_UPLOAD.FILE_INFO.SIZE' | translate}}</th>
+        <th>{{'FILE_UPLOAD.FILE_INFO.ACTION' | translate}}</th>
+    </tr>
     <tr *ngFor="#file of filesUploadingList">
         <td class="mdl-data-table__cell--non-numeric">{{file.name}}</td>
         <td _ngcontent-hvq-3="">
@@ -18,5 +23,4 @@
             <span *ngIf="!file.abort && !file.uploading && !file.done"><i class="material-icons">pause</i></span>
         </td>
     </tr>
-    </tbody>
 </table>

ng2-components/ng2-alfresco-upload/src/components/file-uploading-list.component.js

@@ -14,7 +14,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-System.register(['angular2/core'], function(exports_1, context_1) {
+System.register(['angular2/core', 'ng2-translate/ng2-translate'], function(exports_1, context_1) {
     "use strict";
     var __moduleName = context_1 && context_1.id;
     var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
@@ -26,12 +26,15 @@ System.register(['angular2/core'], function(exports_1, context_1) {
     var __metadata = (this && this.__metadata) || function (k, v) {
         if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
     };
-    var core_1;
+    var core_1, ng2_translate_1;
     var FileUploadingListComponent;
     return {
         setters:[
             function (core_1_1) {
                 core_1 = core_1_1;
+            },
+            function (ng2_translate_1_1) {
+                ng2_translate_1 = ng2_translate_1_1;
             }],
         execute: function() {
             /**
@@ -72,7 +75,8 @@ System.register(['angular2/core'], function(exports_1, context_1) {
                         selector: 'alfresco-file-uploading-list',
                         moduleId: __moduleName,
                         templateUrl: './file-uploading-list.component.html',
-                        styleUrls: ['./file-uploading-list.component.css']
+                        styleUrls: ['./file-uploading-list.component.css'],
+                        pipes: [ng2_translate_1.TranslatePipe]
                     }), 
                     __metadata('design:paramtypes', [core_1.ElementRef])
                 ], FileUploadingListComponent);

ng2-components/ng2-alfresco-upload/src/components/file-uploading-list.component.js.map

@@ -1 +1 @@
-{"version":3,"file":"file-uploading-list.component.js","sourceRoot":"","sources":["file-uploading-list.component.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;GAeG;;;;;;;;;;;;;;;;;;;;;YAQH;;;;;;;;;eASG;YAOH;gBAKI,oCAAmB,EAAc;oBAAd,OAAE,GAAF,EAAE,CAAY;oBAC7B,OAAO,CAAC,GAAG,CAAC,gCAAgC,EAAE,EAAE,CAAC,CAAC;oBAElD,WAAW,CAAC;wBACR,OAAO,CAAC,GAAG,CAAC,4CAA4C,CAAC,CAAC;oBAC9D,CAAC,EAAE,IAAI,CAAC,CAAC;gBACb,CAAC;gBAED;;;;mBAIG;gBACH,0CAAK,GAAL,UAAM,EAAE;oBACJ,IAAI,IAAI,GAAG,IAAI,CAAC,kBAAkB,CAAC,MAAM,CAAC,UAAC,kBAAkB;wBACzD,MAAM,CAAC,kBAAkB,CAAC,EAAE,IAAI,EAAE,CAAC;oBACvC,CAAC,CAAC,CAAC;oBACH,IAAI,CAAC,CAAC,CAAC,CAAC,QAAQ,EAAE,CAAC;gBACvB,CAAC;gBArBD;oBAAC,YAAK,EAAE;;sFAAA;gBARZ;oBAAC,gBAAS,CAAC;wBACP,QAAQ,EAAE,8BAA8B;wBACxC,QAAQ,EAAE,YAAY;wBACtB,WAAW,EAAE,sCAAsC;wBACnD,SAAS,EAAE,CAAC,qCAAqC,CAAC;qBACrD,CAAC;;8CAAA;gBAyBF,iCAAC;YAAD,CAAC,AAxBD,IAwBC;YAxBD,mEAwBC,CAAA"}
+{"version":3,"file":"file-uploading-list.component.js","sourceRoot":"","sources":["file-uploading-list.component.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;GAeG;;;;;;;;;;;;;;;;;;;;;;;;YASH;;;;;;;;;eASG;YAQH;gBAKI,oCAAmB,EAAc;oBAAd,OAAE,GAAF,EAAE,CAAY;oBAC7B,OAAO,CAAC,GAAG,CAAC,gCAAgC,EAAE,EAAE,CAAC,CAAC;oBAElD,WAAW,CAAC;wBACR,OAAO,CAAC,GAAG,CAAC,4CAA4C,CAAC,CAAC;oBAC9D,CAAC,EAAE,IAAI,CAAC,CAAC;gBACb,CAAC;gBAED;;;;mBAIG;gBACH,0CAAK,GAAL,UAAM,EAAE;oBACJ,IAAI,IAAI,GAAG,IAAI,CAAC,kBAAkB,CAAC,MAAM,CAAC,UAAC,kBAAkB;wBACzD,MAAM,CAAC,kBAAkB,CAAC,EAAE,IAAI,EAAE,CAAC;oBACvC,CAAC,CAAC,CAAC;oBACH,IAAI,CAAC,CAAC,CAAC,CAAC,QAAQ,EAAE,CAAC;gBACvB,CAAC;gBArBD;oBAAC,YAAK,EAAE;;sFAAA;gBATZ;oBAAC,gBAAS,CAAC;wBACP,QAAQ,EAAE,8BAA8B;wBACxC,QAAQ,EAAE,YAAY;wBACtB,WAAW,EAAE,sCAAsC;wBACnD,SAAS,EAAE,CAAC,qCAAqC,CAAC;wBAClD,KAAK,EAAE,CAAC,6BAAa,CAAC;qBACzB,CAAC;;8CAAA;gBAyBF,iCAAC;YAAD,CAAC,AAxBD,IAwBC;YAxBD,mEAwBC,CAAA"}

ng2-components/ng2-alfresco-upload/src/components/file-uploading-list.component.ts

@@ -18,6 +18,7 @@
 
 import {Component, ElementRef, Input} from 'angular2/core';
 import {FileModel} from '../models/file.model';
+import {TranslatePipe} from 'ng2-translate/ng2-translate';
 
 declare let __moduleName: string;
 
@@ -35,7 +36,8 @@ declare let __moduleName: string;
     selector: 'alfresco-file-uploading-list',
     moduleId: __moduleName,
     templateUrl: './file-uploading-list.component.html',
-    styleUrls: ['./file-uploading-list.component.css']
+    styleUrls: ['./file-uploading-list.component.css'],
+    pipes: [TranslatePipe]
 })
 export class FileUploadingListComponent {
 

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

@@ -1,10 +1,11 @@
 <form>
     <!--Files Upload-->
     <div *ngIf="!uploadFolders" class="mdl-button mdl-js-button mdl-button--raised mdl-button--file">
-        <i class="material-icons">file_upload</i> {{'FILE_UPLOAD.BUTTON.UPLOAD_FILE' | translate}}
+        <i class="material-icons">file_upload</i>
 
         <!--Multiple Files Upload-->
         <span *ngIf="multipleFiles">
+            <label for="upload-multiple-files">{{'FILE_UPLOAD.BUTTON.UPLOAD_FILE' | translate}}</label>
             <input id="upload-multiple-files" type="file" name="uploadFiles"
                    (change)="onFilesAdded($event)"
                    multiple="multiple"
@@ -14,6 +15,7 @@
 
         <!--Single Files Upload-->
         <span *ngIf="!multipleFiles">
+            <label for="upload-single-file">{{'FILE_UPLOAD.BUTTON.UPLOAD_FILE' | translate}}</label>
             <input id="upload-single-file" type="file" name="uploadFiles"
                    (change)="onFilesAdded($event)"
                    accept="{{acceptedFilesType}}"
@@ -23,7 +25,8 @@
 
     <!--Folders Upload-->
     <div *ngIf="uploadFolders" class="mdl-button mdl-js-button mdl-button--raised mdl-button--file">
-        <i class="material-icons">file_upload</i> {{'FILE_UPLOAD.BUTTON.UPLOAD_FOLDER' | translate}}
+        <i class="material-icons">file_upload</i>
+        <label for="uploadFolder">{{'FILE_UPLOAD.BUTTON.UPLOAD_FOLDER' | translate}}</label>
         <input id="uploadFolder" type="file" name="uploadFiles"
                (change)="onFilesAdded($event)"
                multiple="multiple"
@@ -41,5 +44,5 @@
 <div id="undo-notification-bar"  class="mdl-js-snackbar mdl-snackbar"
      #undoNotificationBar>
     <div class="mdl-snackbar__text"></div>
-    <button class="mdl-snackbar__action" type="button"></button>
+    <button class="mdl-snackbar__action" type="button">{{'FILE_UPLOAD.ACTION.UNDO' | translate}}</button>
 </div>

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

@@ -69,7 +69,7 @@ export class UploadButtonComponent {
     showUdoNotificationBar: boolean = true;
 
     @Input()
-    uploadFolders: boolean = true;
+    uploadFolders: boolean = false;
 
     @Input()
     multipleFiles: boolean = false;