ProgressDrawer img upload preview, styles and refactoring

src/plugins/ProgressDrawer.js

@@ -25,15 +25,14 @@ export default class ProgressDrawer extends Plugin {
 
   render (state) {
     const selectedFiles = state.selectedFiles
-    // this.core.log(selectedFiles)
     const selectedFileCount = Object.keys(selectedFiles).length
     const isSomethingSelected = selectedFileCount > 0
 
-    const drawerItem = (fileID) => {
-      const isUploaded = selectedFiles[fileID].progress === 100
+    const drawerItem = (file) => {
+      const isUploaded = file.progress === 100
 
       const remove = (ev) => {
-        this.core.emitter.emit('file-remove', fileID)
+        this.core.emitter.emit('file-remove', file.id)
       }
 
       const checkIcon = yo`<svg class="UppyProgressDrawer-itemCheck" width="16" height="16" viewBox="0 0 32 32" enable-background="new 0 0 32 32">
@@ -41,24 +40,34 @@ export default class ProgressDrawer extends Plugin {
         </svg>`
 
       return yo`<li class="UppyProgressDrawer-item ${isUploaded ? 'is-uploaded' : ''}">
-        <span class="UppyProgressDrawer-itemProgress"
-              style="width: ${selectedFiles[fileID].progress}%"></span>
-        <h4 class="UppyProgressDrawer-itemName">
-          ${selectedFiles[fileID].name} (${selectedFiles[fileID].progress})</h4>
-        ${checkIcon}
-        <button class="UppyProgressDrawer-itemRemove" onclick=${remove}>×</button>
+        <img class="UppyProgressDrawer-itemIcon" src="${file.preview}">
+        <div class="UppyProgressDrawer-itemInner">
+          <span class="UppyProgressDrawer-itemProgress"
+                style="width: ${file.progress}%"></span>
+          <h4 class="UppyProgressDrawer-itemName">
+            ${file.name} (${file.progress})</h4>
+          ${checkIcon}
+          <button class="UppyProgressDrawer-itemRemove" onclick=${remove}>×</button>
+        </div>
       </li>`
     }
 
+    const next = (ev) => {
+      this.core.emitter.emit('next')
+    }
+
     return yo`<div class="UppyProgressDrawer ${isSomethingSelected ? 'is-visible' : ''}">
       <div class="UppyProgressDrawer-status">
-        ${isSomethingSelected ? this.core.i18n('uploadFiles', {'smart_count': selectedFileCount}) : ''}
+        ${isSomethingSelected ? this.core.i18n('filesChosen', {'smart_count': selectedFileCount}) : ''}
       </div>
       <ul class="UppyProgressDrawer-list">
         ${Object.keys(selectedFiles).map((fileID) => {
-          return drawerItem(fileID)
+          return drawerItem(selectedFiles[fileID])
         })}
       </ul>
+      <button class="UppyProgressDrawer-upload" type="button" onclick=${next}>
+        ${isSomethingSelected ? this.core.i18n('uploadFiles', {'smart_count': selectedFileCount}) : ''}
+      </button>
     </div>`
   }
 

src/scss/_progressdrawer.scss

@@ -6,7 +6,7 @@
   width: 350px;
   height: 200px;
   background-color: $color-white;
-  box-shadow: 0 0 20px rgba($color-asphalt-gray, 0.2);
+  box-shadow: 0 5px 30px rgba($color-black, 0.25);
   overflow: hidden;
   transition: all .3s;
 
@@ -20,6 +20,7 @@
   height: 30px;
   line-height: 30px;
   font-size: 12px;
+  font-weight: bold;
   background-color: $color-asphalt-gray;
   color: $color-white;
   text-align: center;
@@ -39,7 +40,7 @@
   line-height: 30px;
   margin: 0;
   padding: 0;
-  border-bottom: 1px solid $color-white;
+  margin-bottom: 1px;
   position: relative;
   background-color: $color-cornflower-blue;
 }
@@ -58,10 +59,24 @@
   }
 }
 
+.UppyProgressDrawer-itemIcon {
+  float: left;
+  width: 12%;
+  height: 40px;
+  object-fit: cover;
+}
+
+.UppyProgressDrawer-itemInner {
+  float: left;
+  width: 88%;
+  height: 40px;
+  position: relative;
+}
+
 .UppyProgressDrawer-itemProgress {
   position: absolute;
-  top: 0;
   left: 0;
+  top: 0;
   height: 100%;
   background-color: $color-pink;
 }
@@ -83,7 +98,6 @@
   padding: 10px;
   font-size: 20px;
   line-height: 20px;
-  // background-color: $color-pink;
   color: $color-white;
   cursor: pointer;
   position: absolute;
@@ -99,3 +113,21 @@
   right: 15px;
   fill: $color-white;
 }
+
+.UppyProgressDrawer-upload {
+  @include reset-button;
+  width: 100%;
+  height: 40px;
+  transition: background-color 0.5s;
+  color: $color-black;
+  font-weight: bold;
+  // border-top: 1px solid $color-asphalt-gray;
+  cursor: pointer;
+  background-color: darken($color-cornflower-blue, 10%);
+  color: $color-white;
+
+  &:hover {
+    background-color: darken($color-cornflower-blue, 30%);
+    color: $color-white;
+  }
+}