StatusBar refinements: move Upload button here, show upload + 1 when in progress, retry button (with Alex’s suggestions and mockups)

src/plugins/StatusBar/StatusBar.js

@@ -106,24 +106,58 @@ module.exports = (props) => {
   }
 
   const width = typeof progressValue === 'number' ? progressValue : 100
+  const isHidden = uploadState === STATE_WAITING && !props.newFiles > 0
 
   return html`
     <div class="UppyStatusBar is-${uploadState}"
-                aria-hidden="${uploadState === STATE_WAITING}"
-                title="">
-      <progress style="display: none;" min="0" max="100" value=${progressValue}></progress>
+         aria-hidden="${isHidden}">
       <div class="UppyStatusBar-progress ${progressMode ? `is-${progressMode}` : ''}"
-           style="width: ${width}%"></div>
+           style="width: ${width}%"
+           role="progressbar"
+           aria-valuemin="0"
+           aria-valuemax="100"
+           aria-valuenow="${progressValue}"></div>
       ${progressBarContent}
+      <div class="UppyStatusBar-actions">
+        ${props.newFiles ? UploadBtn(props) : ''}
+        ${props.error ? RetryBtn(props) : ''}
+      </div>
     </div>
   `
 }
 
+const UploadBtn = (props) => {
+  return html`<button type="button"
+                      class="UppyStatusBar-actionBtn UppyStatusBar-actionBtn--upload"
+                      aria-label="${props.i18n('uploadXFiles', { smart_count: props.newFiles })}"
+                      onclick=${props.startUpload}>
+                ${props.inProgress
+                  ? props.i18n('uploadXNewFiles', { smart_count: props.newFiles })
+                  : props.i18n('uploadXFiles', { smart_count: props.newFiles })
+                }
+              </button>`
+}
+
+const RetryBtn = (props) => {
+  return html`<button type="button"
+                      class="UppyStatusBar-actionBtn UppyStatusBar-actionBtn--retry"
+                      aria-label="${props.i18n('retryUpload')}"
+                      onclick=${props.retryAll}>
+                ${props.i18n('retry')}
+              </button>`
+}
+
 const ProgressBarProcessing = (props) => {
+  const value = Math.round(props.value * 100)
   return html`
     <div class="UppyStatusBar-content">
-      ${props.mode === 'determinate' ? `${Math.round(props.value * 100)}%・` : ''}
-      ${props.message}
+      <div role="progressbar"
+           aria-valuemin="0"
+           aria-valuemax="100"
+           aria-valuenow="${value}">
+        ${props.mode === 'determinate' ? `${value}%・` : ''}
+        ${props.message}
+      </div>
     </div>
   `
 }
@@ -136,16 +170,16 @@ const ProgressBarUploading = (props) => {
           ? html`<div title="Uploading">${pauseResumeButtons(props)} Uploading... ${throttledProgressDetails(props)}</div>`
           : html`<div title="Paused">${pauseResumeButtons(props)} Paused・${props.totalProgress}%</div>`
         : null
-        }
+      }
     </div>
   `
 }
 
 const ProgressBarComplete = ({ totalProgress, i18n }) => {
   return html`
-    <div class="UppyStatusBar-content">
+    <div class="UppyStatusBar-content" role="alert">
       <span title="Complete">
-        <svg aria-hidden="true" class="UppyStatusBar-action UppyIcon" width="18" height="17" viewBox="0 0 23 17">
+        <svg aria-hidden="true" class="UppyStatusBar-statusIndicator 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>
         ${i18n('uploadComplete')}・${totalProgress}%
@@ -156,23 +190,9 @@ const ProgressBarComplete = ({ totalProgress, i18n }) => {
 
 const ProgressBarError = ({ error, retryAll, i18n }) => {
   return html`
-    <div class="UppyStatusBar-content">
-        <button class="UppyStatusBar-action" 
-                title="${i18n('retryUpload')}" 
-                aria-label="${i18n('retryUpload')}" 
-                type="button" 
-                onclick=${retryAll}>
-            <svg class="UppyIcon" width="28" height="31" viewBox="0 0 16 19" xmlns="http://www.w3.org/2000/svg">
-              <path d="M16 11a8 8 0 1 1-8-8v2a6 6 0 1 0 6 6h2z"/>
-              <path d="M7.9 3H10v2H7.9z"/><path d="M8.536.5l3.535 3.536-1.414 1.414L7.12 1.914z"/><path d="M10.657 2.621l1.414 1.415L8.536 7.57 7.12 6.157z"/>
-            </svg></button>
-        ${i18n('uploadFailed')}. 
-        <button class="UppyStatusBar-retryBtn" 
-            title="${i18n('retryUpload')}" 
-            aria-label="${i18n('retryUpload')}" 
-            type="button" 
-            onclick=${retryAll}>
-          ${i18n('retry')}</button>
+    <div class="UppyStatusBar-content" role="alert">
+        <strong>${i18n('uploadFailed')}.</strong>
+        <span>${i18n('pleasePressRetry')}</span>
         <span class="UppyStatusBar-details" 
               data-balloon="${error}" 
               data-balloon-pos="up" 
@@ -189,7 +209,7 @@ const pauseResumeButtons = (props) => {
                   : i18n('pauseUpload')
                 : i18n('cancelUpload')
 
-  return html`<button title="${title}" class="UppyStatusBar-action" type="button" onclick=${() => togglePauseResume(props)}>
+  return html`<button title="${title}" class="UppyStatusBar-statusIndicator" type="button" onclick=${() => togglePauseResume(props)}>
     ${resumableUploads
       ? isAllPaused
         ? html`<svg aria-hidden="true" class="UppyIcon" width="15" height="17" viewBox="0 0 11 13">

src/plugins/StatusBar/index.js

@@ -21,6 +21,7 @@ module.exports = class StatusBarUI extends Plugin {
         uploading: 'Uploading',
         uploadComplete: 'Upload complete',
         uploadFailed: 'Upload failed',
+        pleasePressRetry: 'Please press Retry to upload again',
         paused: 'Paused',
         error: 'Error',
         retry: 'Retry',
@@ -28,7 +29,15 @@ module.exports = class StatusBarUI extends Plugin {
         retryUpload: 'Retry upload',
         resumeUpload: 'Resume upload',
         cancelUpload: 'Cancel upload',
-        pauseUpload: 'Pause upload'
+        pauseUpload: 'Pause upload',
+        uploadXFiles: {
+          0: 'Upload %{smart_count} file',
+          1: 'Upload %{smart_count} files'
+        },
+        uploadXNewFiles: {
+          0: 'Upload +%{smart_count} file',
+          1: 'Upload +%{smart_count} files'
+        }
       }
     }
 
@@ -79,6 +88,9 @@ module.exports = class StatusBarUI extends Plugin {
     const uploadStartedFiles = Object.keys(files).filter((file) => {
       return files[file].progress.uploadStarted
     })
+    const newFiles = Object.keys(files).filter((file) => {
+      return !files[file].progress.uploadStarted
+    })
     const completeFiles = Object.keys(files).filter((file) => {
       return files[file].progress.uploadComplete
     })
@@ -143,7 +155,9 @@ module.exports = class StatusBarUI extends Plugin {
       resumeAll: this.core.resumeAll,
       retryAll: this.core.retryAll,
       cancelAll: this.core.cancelAll,
+      startUpload: this.core.upload,
       complete: completeFiles.length,
+      newFiles: newFiles.length,
       inProgress: uploadStartedFiles.length,
       totalSpeed: totalSpeed,
       totalETA: totalETA,

src/scss/_statusbar.scss

@@ -29,6 +29,12 @@
   padding-left: 0;
 }
 
+.UppyStatusBar[aria-hidden=false].is-waiting {
+  background-color: $color-white;
+  height: 65px;
+  line-height: 65px;
+}
+
 .UppyStatusBar-progress {
   background-color: $color-cornflower-blue;
   height: 100%;
@@ -44,6 +50,10 @@
   }
 }
 
+.UppyStatusBar.is-waiting .UppyStatusBar-progress {
+  display: none;
+}
+
 @keyframes statusBarProgressStripes {
   from { background-position: 64px 0; }
   to { background-position: 0 0; }
@@ -60,34 +70,79 @@
   color: $color-white;
 }
 
-.UppyStatusBar-content .UppyIcon {
-  width: 15px;
-  height: 15px;
+// .UppyStatusBar-content .UppyIcon {
+//   width: 15px;
+//   height: 15px;
 
-  .UppyDashboard--wide & {
-    width: 17px;
-    height: 17px;
-  }
-}
+//   .UppyDashboard--wide & {
+//     width: 17px;
+//     height: 17px;
+//   }
+// }
 
-.UppyStatusBar-action {
+
+.UppyStatusBar-statusIndicator {
   color: $color-white;
   margin-right: 8px;
 }
 
-button.UppyStatusBar-action {
-  @include reset-button;
-  margin-right: 8px;
-  cursor: pointer;
+  button.UppyStatusBar-statusIndicator {
+    @include reset-button;
+    margin-right: 8px;
+    cursor: pointer;
+  }
+
+.UppyStatusBar-actions {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  right: 15px;
+  z-index: $zIndex-4;
 }
 
-.UppyStatusBar-retryBtn {
-  @include reset-button;
-  cursor: pointer;
-  border-bottom: 1px solid $color-white;
-  font-weight: 600;
+.UppyStatusBar.is-waiting .UppyStatusBar-actions {
+  left: 30px;
+  right: initial;
 }
 
+.UppyStatusBar-actionBtn {
+  @include reset-button;
+  font-size: 13px;
+  font-weight: bold;
+  padding: 7px 10px;
+  border-radius: 4px;
+  cursor: pointer;
+  transition: all 0.3s;
+}
+
+  .UppyStatusBar-actionBtn:not(:last-child) {
+    margin-right: 5px;
+  }
+
+  .UppyStatusBar.is-waiting .UppyStatusBar-actionBtn {
+    padding: 13px 30px;
+    font-size: 15px;
+  }
+
+  .UppyStatusBar-actionBtn--upload {
+    background-color: $color-white;
+    color: $color-cornflower-blue;
+  }
+
+    .UppyStatusBar.is-waiting .UppyStatusBar-actionBtn--upload {
+        background-color: $color-cornflower-blue;
+        color: $color-white;
+
+        &:hover { 
+          background-color: darken($color-cornflower-blue, 20%); 
+        }
+      }
+
+  .UppyStatusBar-actionBtn--retry {
+    background-color: $color-white;
+    color: $color-red;
+  }
+
 .UppyStatusBar-details {
   line-height: 12px;
   width: 13px;