refactor StatusBar and progress

src/plugins/Dashboard/Dashboard.js

@@ -3,7 +3,7 @@ import FileList from './FileList'
 import Tabs from './Tabs'
 import FileCard from './FileCard'
 import UploadBtn from './UploadBtn'
-import ProgressCircle from './ProgressCircle'
+// import ProgressCircle from './ProgressCircle'
 import StatusBar from './StatusBar'
 import { isTouchDevice, toArray } from '../../core/Utils'
 import { closeIcon } from './icons'
@@ -70,6 +70,7 @@ export default function Dashboard (props) {
       <div class="UppyDashboard-innerWrap">
 
         ${Tabs({
+          files: props.files,
           handleInputChange: handleInputChange,
           acquirers: props.acquirers,
           container: props.container,
@@ -87,42 +88,39 @@ export default function Dashboard (props) {
           i18n: props.i18n
         })}
 
-        ${FileList({
-          files: props.files,
-          showFileCard: props.showFileCard,
-          showProgressDetails: props.showProgressDetails,
-          totalProgress: props.totalProgress,
-          totalFileCount: props.totalFileCount,
-          info: props.info,
-          i18n: props.i18n,
-          log: props.log,
-          removeFile: props.removeFile,
-          pauseAll: props.pauseAll,
-          resumeAll: props.resumeAll,
-          pauseUpload: props.pauseUpload,
-          startUpload: props.startUpload
-        })}
+        <div class="UppyDashboard-filesContainer">
+
+          ${FileList({
+            acquirers: props.acquirers,
+            files: props.files,
+            handleInputChange: handleInputChange,
+            container: props.container,
+            showFileCard: props.showFileCard,
+            showProgressDetails: props.showProgressDetails,
+            totalProgress: props.totalProgress,
+            totalFileCount: props.totalFileCount,
+            info: props.info,
+            i18n: props.i18n,
+            log: props.log,
+            removeFile: props.removeFile,
+            pauseAll: props.pauseAll,
+            resumeAll: props.resumeAll,
+            pauseUpload: props.pauseUpload,
+            startUpload: props.startUpload,
+            resumableUploads: props.resumableUploads
+          })}
+
+          <div class="UppyDashboard-actions">
+            ${!props.autoProceed && props.newFiles.length > 0
+              ? UploadBtn({
+                i18n: props.i18n,
+                startUpload: props.startUpload,
+                newFileCount: props.newFiles.length
+              })
+              : null
+            }
+          </div>
 
-        <div class="UppyDashboard-actions">
-          ${!props.autoProceed && props.newFiles.length > 0
-            ? UploadBtn({
-              i18n: props.i18n,
-              startUpload: props.startUpload,
-              newFileCount: props.newFiles.length
-            })
-            : null
-          }
-
-          ${false && props.uploadStartedFiles.length > 0
-            ? ProgressCircle({
-              totalProgress: props.totalProgress,
-              isAllPaused: props.isAllPaused,
-              isAllComplete: props.isAllComplete,
-              pauseAll: props.pauseAll,
-              resumeAll: props.resumeAll
-            })
-            : null
-          }
         </div>
 
         <div class="UppyDashboardContent-panel"
@@ -139,20 +137,23 @@ export default function Dashboard (props) {
         </div>
 
         <div class="UppyDashboard-progressindicators">
-          ${props.uploadStartedFiles.length > 0 && !props.isAllComplete
-            ? StatusBar({
-              totalProgress: props.totalProgress,
-              isAllComplete: props.isAllComplete,
-              isAllPaused: props.isAllPaused,
-              pauseAll: props.pauseAll,
-              resumeAll: props.resumeAll,
-              complete: props.completeFiles.length,
-              inProgress: props.uploadStartedFiles.length,
-              totalSpeed: props.totalSpeed,
-              totalETA: props.totalETA
-            })
-            : null
-          }
+          ${StatusBar({
+            totalProgress: props.totalProgress,
+            totalFileCount: props.totalFileCount,
+            uploadStartedFiles: props.uploadStartedFiles,
+            isAllComplete: props.isAllComplete,
+            isAllPaused: props.isAllPaused,
+            isUploadStarted: props.isUploadStarted,
+            pauseAll: props.pauseAll,
+            resumeAll: props.resumeAll,
+            complete: props.completeFiles.length,
+            inProgress: props.inProgress,
+            totalSpeed: props.totalSpeed,
+            totalETA: props.totalETA,
+            startUpload: props.startUpload,
+            newFileCount: props.newFiles.length,
+            i18n: props.i18n
+          })}
 
           ${props.progressindicators.map((target) => {
             return target.render(props.state)

src/plugins/Dashboard/FileItem.js

@@ -34,7 +34,8 @@ export default function fileItem (props) {
   return html`<li class="UppyDashboardItem
                         ${uploadInProgress ? 'is-inprogress' : ''}
                         ${isUploaded ? 'is-complete' : ''}
-                        ${isPaused ? 'is-paused' : ''}"
+                        ${isPaused ? 'is-paused' : ''}
+                        ${props.resumableUploads ? 'is-resumable' : ''}"
                   id="uppy_${file.id}"
                   title="${file.meta.name}">
       <div class="UppyDashboardItem-preview">
@@ -58,8 +59,8 @@ export default function fileItem (props) {
           </button>
           ${props.showProgressDetails
             ? html`<div class="UppyDashboardItem-progressInfo"
-                        title="${props.i18n('localDisk')}"
-                        aria-label="${props.i18n('localDisk')}">
+                        title="${props.i18n('fileProgress')}"
+                        aria-label="${props.i18n('fileProgress')}">
                 ${!file.isPaused && !isUploaded
                   ? html`<span>${prettyETA(getETA(file.progress))} ・ ↑ ${prettyBytes(getSpeed(file.progress))}/s</span>`
                   : null

src/plugins/Dashboard/FileItemProgress.js

@@ -8,7 +8,7 @@ export default function (props) {
     <svg width="70" height="70" viewBox="0 0 36 36" class="UppyIcon UppyIcon-progressCircle">
       <g class="progress-group">
         <circle r="15" cx="18" cy="18" stroke-width="2" fill="none" class="bg"/>
-        <circle r="15" cx="18" cy="18" transform="rotate(-90, 18, 18)" stroke-width="2" fill="none" stroke-dasharray="100" stroke-dashoffset="${100 - props.progress || 100}" class="progress"/>
+        <circle r="15" cx="18" cy="18" transform="rotate(-90, 18, 18)" stroke-width="2" fill="none" stroke-dasharray="100" stroke-dashoffset="${100 - props.progress}" class="progress"/>
       </g>
       <polygon transform="translate(3, 3)" points="12 20 12 10 20 15" class="play"/>
       <g transform="translate(14.5, 13)" class="pause">

src/plugins/Dashboard/StatusBar.js

@@ -1,44 +1,69 @@
 import html from '../../core/html'
-// import { makeCachingFunction } from '../../core/Utils'
-
-// let cachedElement = makeCachingFunction()
-
-const togglePauseResume = (props) => {
-  if (props.isAllComplete) return
-
-  if (props.isAllPaused) {
-    return props.resumeAll()
-  }
-
-  return props.pauseAll()
-}
 
 export default (props) => {
   props = props || {}
 
-  let statusBar = html`
-    <div class="UppyDashboard-statusBar" onclick=${() => togglePauseResume(props)}>
-      ${props.isAllPaused
-        ? html`<svg class="UppyIcon UppyDashboard-statusBarAction" width="15" height="17" viewBox="0 0 11 13">
-          <path d="M1.26 12.534a.67.67 0 0 1-.674.012.67.67 0 0 1-.336-.583v-11C.25.724.38.5.586.382a.658.658 0 0 1 .673.012l9.165 5.5a.66.66 0 0 1 .325.57.66.66 0 0 1-.325.573l-9.166 5.5z" />
-        </svg>`
-        : html`<svg class="UppyIcon UppyDashboard-statusBarAction" width="16" height="17" viewBox="0 0 12 13">
-          <path d="M4.888.81v11.38c0 .446-.324.81-.722.81H2.722C2.324 13 2 12.636 2 12.19V.81c0-.446.324-.81.722-.81h1.444c.398 0 .722.364.722.81zM9.888.81v11.38c0 .446-.324.81-.722.81H7.722C7.324 13 7 12.636 7 12.19V.81c0-.446.324-.81.722-.81h1.444c.398 0 .722.364.722.81z"/>
-        </svg>`
-      }
+  const isHidden = props.totalFileCount === 0 || !props.isUploadStarted
+
+  return html`
+    <div class="UppyDashboard-statusBar
+                ${props.isAllComplete ? 'is-complete' : ''}"
+                aria-hidden="${isHidden}">
+
       <div class="UppyDashboard-statusBarProgress" style="width: ${props.totalProgress}%"></div>
-      <div class="UppyDashboard-statusBarText">
-        ${!props.isAllComplete
+      <div class="UppyDashboard-statusBarContent">
+        ${props.isUploadStarted && !props.isAllComplete
           ? !props.isAllPaused
-            ? `Uploading... ${props.complete} / ${props.inProgress}・${props.totalProgress || 0}%・${props.totalETA}・↑ ${props.totalSpeed}/s`
-            : `Paused・${props.totalProgress}%`
+            ? html`<span>${pauseResumeButtons(props)} Uploading... ${props.complete} / ${props.inProgress}・${props.totalProgress || 0}%・${props.totalETA}・↑ ${props.totalSpeed}/s</span>`
+            : html`<span>${pauseResumeButtons(props)} Paused・${props.totalProgress}%</span>`
+          : null
+          }
+        ${props.isAllComplete
+          ? html`<span><svg class="UppyIcon" width="18" height="17" viewBox="0 0 23 17">
+              <path d="M8.944 17L0 7.865l2.555-2.61 6.39 6.525L20.41 0 23 2.645z" />
+            </svg>Upload complete・${props.totalProgress}%</span>`
           : null
         }
       </div>
     </div>
   `
+}
 
-  return statusBar
+// ${!props.autoProceed && props.newFileCount > 0
+//   ? startUpload(props)
+//   : null
+// }
 
-  // return cachedElement(statusBar, 1000)
+// const startUpload = (props) => {
+//   return html`<button type="button" onclick=${props.startUpload}>
+//     Upload
+//     <sup class="UppyDashboard-uploadCountf"
+//          title="${props.i18n('numberOfSelectedFiles')}"
+//          aria-label="${props.i18n('numberOfSelectedFiles')}">
+//       ${props.newFileCount}
+//     </sup>
+//   </button>`
+// }
+
+const pauseResumeButtons = (props) => {
+  return html`<button class="UppyDashboard-statusBarAction" type="button" onclick=${() => togglePauseResume(props)}>
+    ${props.isAllPaused
+      ? html`<svg class="UppyIcon" width="15" height="17" viewBox="0 0 11 13">
+        <path d="M1.26 12.534a.67.67 0 0 1-.674.012.67.67 0 0 1-.336-.583v-11C.25.724.38.5.586.382a.658.658 0 0 1 .673.012l9.165 5.5a.66.66 0 0 1 .325.57.66.66 0 0 1-.325.573l-9.166 5.5z" />
+      </svg>`
+      : html`<svg class="UppyIcon" width="16" height="17" viewBox="0 0 12 13">
+        <path d="M4.888.81v11.38c0 .446-.324.81-.722.81H2.722C2.324 13 2 12.636 2 12.19V.81c0-.446.324-.81.722-.81h1.444c.398 0 .722.364.722.81zM9.888.81v11.38c0 .446-.324.81-.722.81H7.722C7.324 13 7 12.636 7 12.19V.81c0-.446.324-.81.722-.81h1.444c.398 0 .722.364.722.81z"/>
+      </svg>`
+    }
+  </button>`
+}
+
+const togglePauseResume = (props) => {
+  if (props.isAllComplete) return
+
+  if (props.isAllPaused) {
+    return props.resumeAll()
+  }
+
+  return props.pauseAll()
 }

src/plugins/Dashboard/index.js

@@ -168,14 +168,14 @@ export default class DashboardUI extends Plugin {
       })
     })
 
-    bus.on('core:success', (uploadedCount) => {
-      bus.emit(
-        'informer',
-        `${this.core.i18n('files', {'smart_count': uploadedCount})} successfully uploaded, Sir!`,
-        'info',
-        6000
-      )
-    })
+    // bus.on('core:success', (uploadedCount) => {
+    //   bus.emit(
+    //     'informer',
+    //     `${this.core.i18n('files', {'smart_count': uploadedCount})} successfully uploaded, Sir!`,
+    //     'info',
+    //     6000
+    //   )
+    // })
   }
 
   handleDrop (files) {
@@ -244,16 +244,13 @@ export default class DashboardUI extends Plugin {
     const totalETA = prettyETA(this.getTotalETA(inProgressFilesArray))
 
     const isAllComplete = state.totalProgress === 100
-    const isAllPaused = inProgressFiles.length === 0 && !isAllComplete
+    const isAllPaused = inProgressFiles.length === 0 && !isAllComplete && uploadStartedFiles.length > 0
+    const isUploadStarted = uploadStartedFiles.length > 0
 
     const acquirers = state.modal.targets.filter((target) => {
       return target.type === 'acquirer'
     })
 
-    // let activeAcquirer = acquirers.filter((acquirer) => {
-    //   return !acquirer.isHidden
-    // })[0]
-
     const progressindicators = state.modal.targets.filter((target) => {
       return target.type === 'progressindicator'
     })
@@ -293,7 +290,8 @@ export default class DashboardUI extends Plugin {
       newFiles: newFiles,
       files: files,
       totalFileCount: Object.keys(files).length,
-      uploadStartedFiles: uploadStartedFiles,
+      isUploadStarted: isUploadStarted,
+      inProgress: uploadStartedFiles.length,
       completeFiles: completeFiles,
       inProgressFiles: inProgressFiles,
       totalSpeed: totalSpeed,
@@ -324,6 +322,7 @@ export default class DashboardUI extends Plugin {
       removeFile: removeFile,
       info: info,
       metaFields: state.metaFields,
+      resumableUploads: this.core.getState().capabilities.resumableUploads || false,
       startUpload: startUpload,
       pauseUpload: pauseUpload,
       fileCardFor: state.modal.fileCardFor,

src/scss/_dashboard.scss

@@ -106,30 +106,34 @@
 }
 
 .UppyDashboardTabs {
-  // height: 22%;
-  // min-height: 100px;
-  padding-top: 15px;
+  min-height: 40px;
+  padding-top: 10px;
   padding-bottom: 10px;
-  // margin: 0 10px;
-  // border-bottom: 1px solid lighten($color-gray, 15%);
-  // border-bottom: 1px solid #E2E2E2;
+  border-bottom: 1px dashed lighten($color-gray, 15%);
+}
+
+.UppyDashboardTabs[aria-hidden=true] {
+  display: none;
 }
 
 .UppyDashboardTabs-title {
-  width: 100%;
-  font-size: 15px;
-  line-height: 1.6;
-  // text-transform: uppercase;
-  // letter-spacing: 2px;
+  font-size: 17px;
+  line-height: 40px;
   font-weight: 400;
   text-align: center;
   margin: 0;
   padding: 0;
   text-align: center;
-  margin-bottom: 8px;
+  // margin-bottom: 8px;
   color: $color-asphalt-gray;
 }
 
+.UppyDashboard-browse {
+  @include reset-button;
+  cursor: pointer;
+  color: $color-cornflower-blue;
+}
+
 .UppyDashboardTabs-list {
   list-style-type: none;
   margin: 0;
@@ -295,22 +299,23 @@
   }
 }
 
-
-.UppyDashboard-files {
-  // height: 78%;
-  // flex: 1;
-  // overflow: hidden;
+.UppyDashboard-filesContainer {
   @include clearfix;
   position: relative;
-  overflow-y: auto;
+  overflow-y: hidden;
   margin: 0;
-  // display: flex;
-  // flex-flow: row wrap;
-  padding: 10px 10px;
   flex: 1;
-  // border: 2px dashed rgba($color-gray, 0.2);
-  // border-radius: 10px;
-  border-top: 1px dashed lighten($color-gray, 15%);
+}
+
+.UppyDashboard-files {
+  margin: 0;
+  padding: 10px;
+  overflow-y: auto;
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
 }
 
 .UppyDashboard-files--noFiles {
@@ -329,6 +334,7 @@
 }
 
 .UppyDashboard-bgIcon {
+  width: 330px;
   max-width: 330px;
   position: absolute;
   top: 50%;
@@ -341,7 +347,6 @@
 .UppyDashboard-bgIcon .UppyIcon {
   width: 100%;
   height: 110px;
-  margin-bottom: 25px;
   fill: none;
   stroke: $color-asphalt-gray;
 }
@@ -357,6 +362,7 @@
   font-weight: normal;
   color: $color-asphalt-gray;
   margin: 0;
+  margin-top: 25px;
 }
 
 .UppyDashboardItem {
@@ -537,7 +543,7 @@
 .UppyIcon-progressCircle .bg {
   stroke: rgba($color-white, 0.4);
   opacity: 0;
-  transition: all 0.2s;
+  // transition: all 0.2s;
 }
 
 .UppyIcon-progressCircle .progress {
@@ -551,13 +557,19 @@
   fill: $color-white;
   opacity: 0;
   transition: all 0.2s;
+  display: none;
 }
 
-.UppyIcon-progressCircle .pause {
+.UppyDashboardItem .pause {
   stroke: $color-white;
   fill: $color-white;
   opacity: 0;
   transition: all 0.2s;
+  display: none;
+}
+
+.UppyDashboardItem.is-resumable {
+  .pause, .play { display: block; }
 }
 
 .UppyIcon-progressCircle .check {
@@ -599,6 +611,7 @@
     fill: $color-green;
     opacity: 1;
   }
+
   .check {
     opacity: 1;
   }
@@ -712,13 +725,9 @@
   right: 20px;
 }
 
-.UppyDashboard-actions button:nth-child(2) {
-  margin-top: 10px;
-}
-
-.UppyDashboard-actionsItem {
-  // margin-bottom: 15px;
-}
+// .UppyDashboard-actions button:nth-child(2) {
+//   margin-top: 10px;
+// }
 
 .UppyDashboard-pauseResume .UppyIcon {
   width: 100%;
@@ -845,50 +854,71 @@
 }
 
 .UppyDashboard-statusBar {
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  height: 35px;
-  line-height: 35px;
-  font-size: 13px;
+  // position: absolute;
+  // bottom: 0;
+  // left: 0;
+  // right: 0;
+  position: relative;
+  height: 40px;
+  line-height: 40px;
+  font-size: 14px;
   font-weight: 500;
   color: $color-white;
   background-color: rgba($color-black, 0.6);
   box-shadow: 1px 1px 4px 0 rgba($color-asphalt-gray, 0.3);
   overflow: hidden;
-  cursor: pointer;
+  z-index: $zIndex-2;
+  transition: height .35s;
 
   @media #{$screen-medium} {
-    left: 50%;
-    bottom: 20px;
-    margin-left: -200px;
-    width: 400px;
-    border-radius: 4px;
+    // left: 50%;
+    // bottom: 20px;
+    // margin-left: -200px;
+    // width: 400px;
+    // border-radius: 4px;
   }
 }
 
+.UppyDashboard-statusBar[aria-hidden=true] {
+  height: 0;
+}
+
+.UppyDashboard-statusBar.is-complete .UppyDashboard-statusBarProgress {
+  background-color: $color-green;
+}
+
+.UppyDashboard-statusBar.is-complete .UppyDashboard-statusBarContent {
+  text-align: center;
+}
+
 .UppyDashboard-statusBarProgress {
   background-color: $color-cornflower-blue;
   height: 100%;
   position: absolute;
   z-index: $zIndex-2;
-  // transition: width .3s ease-out;
+  transition: all .3s ease-out;
 }
 
-.UppyDashboard-statusBarText {
+.UppyDashboard-statusBarContent {
   font-weight: 600;
   position: relative;
   z-index: $zIndex-3;
-  padding-left: 40px;
+  padding-left: 15px;
   white-space: nowrap;
   text-overflow: ellipsis;
   overflow: hidden;
 }
 
+.UppyDashboard-statusBarContent .UppyIcon {
+  margin-right: 10px;
+}
+
 .UppyDashboard-statusBarAction {
-  position: absolute;
-  left: 14px;
-  top: 9px;
-  z-index: $zIndex-3;
+  @include reset-button;
+  // position: absolute;
+  // left: 14px;
+  // top: 12px;
+  // z-index: $zIndex-4;
+  color: $color-white;
+  cursor: pointer;
 }

src/scss/_informer.scss

@@ -16,7 +16,7 @@
 .UppyInformer {
   position: absolute;
   left: 15px;
-  bottom: 15px;
+  bottom: 50px;
   // width: 100%;
   // bottom: 0;
   // left: 0;