ProgressDrawer & DragDrop improvements

src/plugins/ProgressDrawer.js

@@ -33,25 +33,37 @@ export default class ProgressDrawer extends Plugin {
     return yo`<li id="${file.id}" class="UppyProgressDrawer-item"
                   title="${file.name}">
       <div class="UppyProgressDrawer-itemInfo">
-        ${file.type.general === 'bla'
-          ? yo`<img class="UppyProgressDrawer-itemIcon" alt="${file.name}" src="${file.preview}">`
-          : yo`<span class="UppyProgressDrawer-itemType">${file.type.specific}</span>`
-        }
+        <svg width="32" height="44" viewBox="0 0 21 29">
+          <path d="M2.473.31C1.44.31.59 1.21.59 2.307V26.31c0 1.097.85 2 1.883 2H18.71c1.03 0 1.88-.903 1.88-2V7.746a.525.525 0 0 0-.014-.108v-.015a.51.51 0 0 0-.014-.03v-.017a.51.51 0 0 0-.015-.03.482.482 0 0 0-.014-.016v-.015a.482.482 0 0 0-.015-.015.51.51 0 0 0-.014-.03.482.482 0 0 0-.014-.017.51.51 0 0 0-.015-.03.483.483 0 0 0-.03-.03L13.636.45a.47.47 0 0 0-.118-.093.448.448 0 0 0-.044-.015.448.448 0 0 0-.044-.016.448.448 0 0 0-.045-.015.44.44 0 0 0-.073 0H2.474zm0 .99h10.372v4.943c0 1.097.85 2 1.88 2h4.932V26.31c0 .56-.42 1.007-.948 1.007H2.472c-.527 0-.95-.446-.95-1.007V2.308c0-.56.423-1.008.95-1.008zm11.305.667l4.843 4.927.352.357h-4.246c-.527 0-.948-.446-.948-1.007V1.967z"
+                fill="#F6A623"
+                fill-rule="evenodd" />
+          <text font-family="ArialMT, Arial"
+                font-size="5"
+                font-weight="bold"
+                fill="#F6A623"
+                text-anchor="middle"
+                x="11"
+                y="22">
+            ${file.type.specific ? file.type.specific.toUpperCase() : '?'}
+          </text>
+          </svg>
       </div>
       <div class="UppyProgressDrawer-itemInner">
-        <span class="UppyProgressDrawer-itemProgress"
-              style="width: ${file.progress}%"></span>
         <h4 class="UppyProgressDrawer-itemName">
           ${file.uploadURL
             ? yo`<a href="${file.uploadURL}" target="_blank">${file.name}</a>`
-            : yo`<span>${file.name} (${file.progress}%)</span>`
+            : yo`<span>${file.name}</span>`
           }
+          <br>
+          <span>${file.progress > 0 && file.progress < 100 ? file.progress + '%' : ''}</span>
         </h4>
           ${isUploaded ? checkIcon : ''}
           ${isUploaded
             ? ''
             : yo`<button class="UppyProgressDrawer-itemRemove" onclick=${remove}>×</button>`
           }
+          <div class="UppyProgressDrawer-itemProgress"
+               style="width: ${file.progress}%"></div>
       </div>
     </li>`
   }
@@ -81,11 +93,6 @@ export default class ProgressDrawer extends Plugin {
     }
 
     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(files).map((fileID) => {
           return this.drawerItem(files[fileID])
@@ -94,7 +101,8 @@ export default class ProgressDrawer extends Plugin {
       ${autoProceed
         ? ''
         : yo`<button class="UppyProgressDrawer-upload ${isSomethingSelected ? 'is-active' : ''}"
-                     type="button" onclick=${next}>
+                     type="button"
+                     onclick=${next}>
           ${isSomethingSelected
             ? this.core.i18n('uploadFiles', {'smart_count': selectedFileCount})
             : this.core.i18n('selectToUpload')
@@ -102,6 +110,13 @@ export default class ProgressDrawer extends Plugin {
         </button>`
       }
     </div>`
+
+    // TODO: add this info to the upload button?
+    //    <div class="UppyProgressDrawer-status">
+    //      ${isSomethingSelected ? this.core.i18n('filesChosen', {'smart_count': selectedFileCount}) : ''}
+    //      ${isSomethingSelected && isSomethingUploaded ? ', ' : ''}
+    //      ${isSomethingUploaded ? this.core.i18n('filesUploaded', {'smart_count': uploadedFileCount}) : ''}
+    //    </div>
   }
 
   install () {

src/scss/_dragdrop.scss

@@ -2,18 +2,16 @@
 * Drag & Drop CSS to style the plugin
 */
 .UppyDragDrop-container {
-  height: 100%;
   min-height: 100px;
   display: flex;
   align-items: center;
   justify-content: center;
   border-radius: 10px;
-  padding: 15px;
 }
 
   .UppyDragDrop-container.is-dragdrop-supported {
     border: 3px dashed;
-    border-color: #dadada;
+    border-color: lighten($color-gray, 5%);
   }
 
   .UppyDragDrop-container.is-dragdrop-supported .UppyDragDrop-dragText {
@@ -21,8 +19,8 @@
   }
 
   .UppyDragDrop-container.drag {
-    border-color: #d2ecea;
-    background-color: #dbf5f3;
+    border-color: darken($color-gray, 15%);
+    // background-color: #dbf5f3;
   }
 
 /* http://tympanus.net/codrops/2015/09/15/styling-customizing-file-inputs-smart-way/ */
@@ -53,12 +51,18 @@
   text-transform: uppercase;
   letter-spacing: 1px;
   border: 0;
-  border: 1px solid #ccc;
+  border: 1px solid $color-gray;
   background: none;
   cursor: pointer;
   margin-top: 15px;
 
   &:hover {
-    background: #ccc;
+    background: $color-gray;
   }
 }
+
+// Modal specific
+.UppyModal .UppyDragDrop-container {
+  margin: 15px;
+  height: calc(100% - 30px);
+}

src/scss/_progressdrawer.scss

@@ -17,9 +17,8 @@
 }
 
 .UppyProgressDrawer-status {
-  height: 30px;
-  line-height: 30px;
-  font-size: 12px;
+  line-height: 15px;
+  font-size: 10px;
   font-weight: bold;
   background-color: $color-asphalt-gray;
   color: $color-white;
@@ -31,9 +30,10 @@
   padding: 0;
   margin: 0;
   overflow-y: auto;
-  height: 130px;
+  height: 160px;
+  padding-top: 10px;
   // position: relative;
-  //
+  // TODO: list scroll inner shadow?
   // &:before {
   //   content: '';
   //   position: absolute;
@@ -47,20 +47,20 @@
 
 .UppyProgressDrawer-item {
   @include clearfix;
-  height: 40px;
-  line-height: 30px;
+  // height: 40px;
+  // line-height: 30px;
   margin: 0;
-  padding: 0;
-  margin-bottom: 1px;
+  padding: 0 10px;
   position: relative;
-  background-color: $color-cornflower-blue;
+  margin-bottom: 10px;
+  // background-color: $color-cornflower-blue;
 }
 
 .UppyProgressDrawer-itemInfo {
   float: left;
   width: 12%;
-  height: 40px;
-  border-right: 1px solid white;
+  // height: 40px;
+  // border-right: 1px solid white;
 }
 
 .UppyProgressDrawer-itemIcon {
@@ -76,38 +76,39 @@
   line-height: 40px;
   text-transform: uppercase;
   text-align: center;
-  color: $color-white;
+  // color: $color-white;
 }
 
 .UppyProgressDrawer-itemInner {
   float: left;
   width: 88%;
   height: 40px;
+  padding-left: 10px;
   position: relative;
 }
 
 .UppyProgressDrawer-itemProgress {
-  position: absolute;
-  left: 0;
-  top: 0;
-  height: 100%;
-  background-color: $color-pink;
+  // position: absolute;
+  // left: 0;
+  // bottom: 0;
+  height: 2px;
+  background-color: $color-cornflower-blue;
   width: 0;
   transition: width 0.4s ease;
 }
 
 .UppyProgressDrawer-itemName {
-  color: $color-white;
   margin: 0;
   padding: 0;
-  padding: 5px 15px;
   font-size: 13px;
   z-index: $zIndex-4;
   position: relative;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
 }
 
 .UppyProgressDrawer-itemName a {
-  color: $color-white;
   text-decoration: underline;
 }
 
@@ -118,7 +119,7 @@
   padding: 10px;
   font-size: 20px;
   line-height: 20px;
-  color: $color-white;
+  // color: $color-white;
   cursor: pointer;
   position: absolute;
   top: 0;