ProgressDrawer: show uploaded and selected, don’t hide after upload

src/locales/en_US.js

@@ -8,6 +8,10 @@ en_US.strings = {
     0: '%{smart_count} file selected',
     1: '%{smart_count} files selected'
   },
+  filesUploaded: {
+    0: '%{smart_count} file uploaded',
+    1: '%{smart_count} files uploaded'
+  },
   files: {
     0: '%{smart_count} file',
     1: '%{smart_count} files'
@@ -16,6 +20,7 @@ en_US.strings = {
     0: 'Upload %{smart_count} file',
     1: 'Upload %{smart_count} files'
   },
+  selectToUpload: 'Select files to upload',
   closeModal: 'Close Modal',
   upload: 'Upload'
 }

src/plugins/ProgressDrawer.js

@@ -27,8 +27,12 @@ export default class ProgressDrawer extends Plugin {
 
   render (state) {
     const selectedFiles = state.selectedFiles
+    const uploadedFiles = state.uploadedFiles
     const selectedFileCount = Object.keys(selectedFiles).length
+    const uploadedFileCount = Object.keys(uploadedFiles).length
     const isSomethingSelected = selectedFileCount > 0
+    const isSomethingUploaded = uploadedFileCount > 0
+    const isSomethingSelectedOrUploaded = isSomethingSelected || isSomethingUploaded
     const autoProceed = this.core.opts.autoProceed
 
     const drawerItem = (file) => {
@@ -52,8 +56,11 @@ export default class ProgressDrawer extends Plugin {
                 style="width: ${file.progress}%"></span>
           <h4 class="UppyProgressDrawer-itemName">
             ${file.name} (${file.progress})</h4>
-          ${isUploaded ? checkIcon : ''}
-          <button class="UppyProgressDrawer-itemRemove" onclick=${remove}>×</button>
+            ${isUploaded ? checkIcon : ''}
+            ${isUploaded
+              ? ''
+              : yo`<button class="UppyProgressDrawer-itemRemove" onclick=${remove}>×</button>`
+            }
         </div>
       </li>`
     }
@@ -62,19 +69,29 @@ export default class ProgressDrawer extends Plugin {
       this.core.emitter.emit('next')
     }
 
-    return yo`<div class="UppyProgressDrawer ${isSomethingSelected ? 'is-visible' : ''}">
+    return yo`<div class="UppyProgressDrawer ${isSomethingSelectedOrUploaded ? 'is-visible' : ''}">
       <div class="UppyProgressDrawer-status">
         ${isSomethingSelected ? this.core.i18n('filesChosen', {'smart_count': selectedFileCount}) : ''}
+        ${isSomethingSelected && isSomethingUploaded ? ', ' : ''}
+        ${isSomethingUploaded ? this.core.i18n('filesUploaded', {'smart_count': uploadedFileCount}) : ''}
       </div>
       <ul class="UppyProgressDrawer-list">
         ${Object.keys(selectedFiles).map((fileID) => {
           return drawerItem(selectedFiles[fileID])
         })}
+
+        ${Object.keys(uploadedFiles).map((fileID) => {
+          return drawerItem(uploadedFiles[fileID])
+        })}
       </ul>
       ${autoProceed
         ? ''
-        : yo`<button class="UppyProgressDrawer-upload" type="button" onclick=${next}>
-          ${isSomethingSelected ? this.core.i18n('uploadFiles', {'smart_count': selectedFileCount}) : ''}
+        : yo`<button class="UppyProgressDrawer-upload ${isSomethingSelected ? 'is-active' : ''}"
+                     type="button" onclick=${next}>
+          ${isSomethingSelected
+            ? this.core.i18n('uploadFiles', {'smart_count': selectedFileCount})
+            : this.core.i18n('selectToUpload')
+          }
         </button>`
       }
     </div>`

src/scss/_progressdrawer.scss

@@ -32,6 +32,17 @@
   margin: 0;
   overflow-y: auto;
   height: 130px;
+  // position: relative;
+  //
+  // &:before {
+  //   content: '';
+  //   position: absolute;
+  //   bottom: 0;
+  //   left: 0;
+  //   right: 0;
+  //   height: 15px;
+  //   background-image: linear-gradient(to bottom, rgba($color-black, 0.65) 0%, rgba($color-black, 0) 100%);
+  // }
 }
 
 .UppyProgressDrawer-item {
@@ -45,19 +56,19 @@
   background-color: $color-cornflower-blue;
 }
 
-.UppyProgressDrawer-item.is-uploaded {
-  .UppyProgressDrawer-itemBar {
-    width: 100%;
-  }
-
-  .UppyProgressDrawer-itemRemove {
-    display: none;
-  }
-
-  .UppyProgressDrawer-itemCheck {
-    display: block;
-  }
-}
+// .UppyProgressDrawer-item.is-uploaded {
+//   .UppyProgressDrawer-itemBar {
+//     width: 100%;
+//   }
+//
+//   .UppyProgressDrawer-itemRemove {
+//     display: block;
+//   }
+//
+//   .UppyProgressDrawer-itemCheck {
+//     display: block;
+//   }
+// }
 
 .UppyProgressDrawer-itemInfo {
   float: left;
@@ -113,11 +124,13 @@
 }
 
 .UppyProgressDrawer-itemCheck {
-  display: none;
   position: absolute;
   top: 12px;
   right: 15px;
-  fill: $color-white;
+  fill: darken($color-cornflower-blue, 20%);
+  background-color: $color-white;
+  border-radius: 50%;
+  padding: 2px;
 }
 
 .UppyProgressDrawer-upload {
@@ -128,10 +141,15 @@
   color: $color-black;
   font-size: 13px;
   font-weight: bold;
-  // border-top: 1px solid $color-asphalt-gray;
-  cursor: pointer;
-  background-color: darken($color-cornflower-blue, 10%);
+  background-color: $color-gray;
   color: $color-white;
+  pointer-events: none;
+
+  &.is-active {
+    background-color: darken($color-cornflower-blue, 10%);
+    cursor: pointer;
+    pointer-events: auto;
+  }
 
   &:hover {
     background-color: darken($color-cornflower-blue, 30%);