Fix upload responsiveness

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

@@ -131,6 +131,9 @@
         <li>
             <button (click)="documentList.changePath('/')">Go to root</button>
         </li>
+        <li>
+            <button (click)="fileDialog.toggleShowDialog()">Show/Hide File Dialog</button>
+        </li>
     </ul>
 </div>
 
@@ -153,4 +156,4 @@
 <alfresco-viewer [(showViewer)]="fileShowed" [urlFile]="urlFile" [fileName]="fileName" [mimeType]="mimeType" [overlayMode]="true">
     <div class="mdl-spinner mdl-js-spinner is-active"></div>
 </alfresco-viewer>
-<file-uploading-dialog></file-uploading-dialog>
+<file-uploading-dialog #fileDialog></file-uploading-dialog>

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

@@ -6,7 +6,8 @@
     display: none !important;
 }
 
-.file-dialog {
+:host .file-dialog {
+    width: 800px;
     display: none;
     -webkit-box-shadow: 0 2px 8px 0 rgba(0, 0, 0, .2);
     box-shadow: -2px -1px 8px 3px rgba(0, 0, 0, .2);
@@ -27,7 +28,7 @@
     position: fixed;
 }
 
-.file-dialog .header {
+:host .file-dialog .header {
     background-color: rgb(31,188,210);
     border: 1px transparent solid;
     border-bottom: 1px solid #c7c7c7;
@@ -45,13 +46,13 @@
     padding: 0px 10px 0px 10px;
 }
 
-.file-dialog .header .title {
+:host .file-dialog .header .title {
     float: left;
-    min-width: 200px;
+    min-width: 170px;
     color: white;
 }
 
-.file-dialog .header .buttons {
+:host .file-dialog .header .buttons {
     float: right;
     padding: 10px 10px 10px 10px;
     text-align: center;
@@ -60,7 +61,7 @@
     opacity: 0.5;
 }
 
-.file-dialog .header .close-button {
+:host .file-dialog .header .close-button {
     cursor: pointer;
     float: left;
     height: 35px;
@@ -71,12 +72,12 @@
     border: 1px solid transparent;
 }
 
-.file-dialog .header .close-button:hover {
+:host .file-dialog .header .close-button:hover {
     border: 1px solid white;
     opacity: 1.0;
 }
 
-.file-dialog .header .minimize-button {
+:host .file-dialog .header .minimize-button {
     cursor: pointer;
     float: left;
     height: 35px;
@@ -109,7 +110,7 @@
     opacity: 1.0;
 }
 
-.file-dialog .body-dialog {
+:host .file-dialog .body-dialog {
     float: left;
     height: 100%;
     margin-top: -4px;
@@ -118,4 +119,16 @@
     border-left: 1px solid #C0C0C0;
     max-height: 200px;
     overflow-y: auto;
+    width: 99.6%;
+}
+
+:host .mdl-data-table th {
+    text-align: left;
+}
+
+
+@media only screen and (min-width: 360px) and (max-width: 640px) {
+    .file-dialog {
+        width: 315px;
+    }
 }

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

@@ -1,4 +1,4 @@
-<div *ngIf="filesUploadingList" class="file-dialog" [ngClass]="{show: isDialogActive}">
+<div class="file-dialog" [ngClass]="{show: isDialogActive}">
     <div class="header">
         <div class="title">
             <span id="total-upload-completed">{{totalCompleted}}</span> {{'FILE_UPLOAD.MESSAGES.COMPLETED' | translate}}
@@ -14,7 +14,7 @@
             </div>
         </div>
     </div>
-    <div class="body-dialog" [ngClass]="{hide: _isDialogMinimized}">
+    <div class="body-dialog" *ngIf="filesUploadingList"  [ngClass]="{hide: _isDialogMinimized}">
         <alfresco-file-uploading-list [filesUploadingList]="filesUploadingList"></alfresco-file-uploading-list>
     </div>
 </div>

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

@@ -37,13 +37,23 @@
     text-align: right;
 }
 
-.truncate {
+:host .truncate {
-    width: 300px;
+    margin-left: auto;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
 }
 
-.mdl-progress{
+:host .mdl-progress{
     width: 300px;
 }
+
+@media only screen and (min-width: 360px) and (max-width: 640px) {
+    .truncate {
+        max-width: 80px;
+    }
+
+    .mdl-progress {
+        max-width: 80px;
+    }
+}

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

@@ -7,7 +7,7 @@
     <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 class="mdl-cell--hide-phone">{{'FILE_UPLOAD.FILE_INFO.SIZE' | translate}}</th>
         <th>{{'FILE_UPLOAD.FILE_INFO.ACTION' | translate}}</th>
     </tr>
     <tr *ngFor="let file of filesUploadingList">
@@ -20,7 +20,7 @@
                 <div class="auxbar bar bar3" style="width: 0%;"></div>
             </div>
         </td>
-        <td class="mdl-data-table__cell--non-numeric">{{file.size}}</td>
+        <td class="mdl-data-table__cell--non-numeric mdl-cell--hide-phone">{{file.size}}</td>
         <td>
             <span *ngIf="file.done && !file.abort"><i data-automation-id="done_icon" class="material-icons">done</i></span>
             <span *ngIf="file.uploading" (click)="abort(file.id)" class="cursor" ><i data-automation-id="abort_cancel_upload"