Status bar error state improvements

examples/dev/Dashboard.html

@@ -16,24 +16,13 @@
         margin: auto;
       }
 
-      button,
-      input {
-        color: green;
-        font-size: 30px;
-        text-align: right;
-        border: 2px solid purple;
-      }
-
       /* css to make sure that Dashboard's css overrides page css */
       ul {
         margin: 60px;
       }
       li {
         margin: 60px;
       }
-      a {
-        color: purple;
-      }
     </style>
   </head>
 

packages/@uppy/dashboard/src/components/FileItem/FileInfo/index.js

@@ -91,22 +91,25 @@ const ErrorButton = ({ file, onClick }) => {
 }
 
 module.exports = function FileInfo (props) {
+  const { file } = props
   return (
     <div
       className="uppy-Dashboard-Item-fileInfo"
-      data-uppy-file-source={props.file.source}
+      data-uppy-file-source={file.source}
     >
-      {renderFileName(props)}
-      <div className="uppy-Dashboard-Item-status">
-        {renderAuthor(props)}
-        {renderFileSize(props)}
-        {ReSelectButton(props)}
+      <div className="uppy-Dashboard-Item-fileName">
+        {renderFileName(props)}
         <ErrorButton
-          file={props.file}
+          file={file}
           // eslint-disable-next-line no-alert
           onClick={() => alert(props.file.error)} // TODO: move to a custom alert implementation
         />
       </div>
+      <div className="uppy-Dashboard-Item-status">
+        {renderAuthor(props)}
+        {renderFileSize(props)}
+        {ReSelectButton(props)}
+      </div>
     </div>
   )
 }

packages/@uppy/dashboard/src/components/FileItem/FileInfo/index.scss

@@ -17,6 +17,15 @@
   }
 }
 
+.uppy-Dashboard-Item-fileName {
+  display: flex;
+  align-items: baseline;
+
+  button {
+    margin-left: 5px;
+  }
+}
+
 .uppy-Dashboard-Item-author {
   color: $gray-600;
   vertical-align: bottom;

packages/@uppy/dashboard/src/components/FileItem/index.scss

@@ -143,21 +143,22 @@
 
 .uppy-Dashboard-Item-errorDetails {
   position: relative;
-  top: -1px;
+  top: 0;
   display: inline-block;
-  width: 12px;
-  height: 12px;
+  width: 13px;
+  height: 13px;
   color: $white;
   font-weight: 600;
-  font-size: 8px;
+  font-size: 10px;
   line-height: 12px;
   text-align: center;
   vertical-align: middle;
   background-color: $gray-500;
   border-radius: 50%;
+  border: none;
   cursor: help;
   appearance: none;
-  inset-inline-start: 6px;
+  inset-inline-start: 2px;
 }
 
 .uppy-Dashboard-Item-errorDetails::after {

packages/@uppy/status-bar/src/Components.js

@@ -247,7 +247,7 @@ function ProgressDetails (props) {
   )
 }
 
-function UnknownProgressDetails (props) {
+function FileUploadCount (props) {
   const { i18n, complete, numUploads } = props
 
   return (
@@ -328,7 +328,7 @@ function ProgressBarUploading (props) {
         )
       }
       return (
-        <UnknownProgressDetails
+        <FileUploadCount
           i18n={i18n}
           complete={complete}
           numUploads={numUploads}
@@ -389,7 +389,7 @@ function ProgressBarComplete (props) {
 }
 
 function ProgressBarError (props) {
-  const { error, i18n } = props
+  const { error, i18n, complete, numUploads } = props
 
   function displayErrorAlert () {
     const errorMessage = `${i18n('uploadFailed')} \n\n ${error}`
@@ -403,7 +403,7 @@ function ProgressBarError (props) {
       role="alert"
       title={i18n('uploadFailed')}
     >
-      <div className="uppy-StatusBar-status">
+      <div className="uppy-StatusBar-status uppy-StatusBar-status--error">
         <div className="uppy-StatusBar-statusPrimary">
           <svg
             aria-hidden="true"
@@ -415,19 +415,23 @@ function ProgressBarError (props) {
           >
             <path d="M4.278 5.5L0 1.222 1.222 0 5.5 4.278 9.778 0 11 1.222 6.722 5.5 11 9.778 9.778 11 5.5 6.722 1.222 11 0 9.778z" />
           </svg>
+
           {i18n('uploadFailed')}
+
+          <button
+            className="uppy-StatusBar-details"
+            aria-label={i18n('showErrorDetails')}
+            data-microtip-position="top-right"
+            data-microtip-size="medium"
+            onClick={displayErrorAlert}
+            type="button"
+          >
+            ?
+          </button>
         </div>
+
+        <FileUploadCount i18n={i18n} complete={complete} numUploads={numUploads} />
       </div>
-      <button
-        className="uppy-StatusBar-details"
-        aria-label={error}
-        data-microtip-position="top-right"
-        data-microtip-size="medium"
-        onClick={displayErrorAlert}
-        type="button"
-      >
-        ?
-      </button>
     </div>
   )
 }

packages/@uppy/status-bar/src/StatusBar.js

@@ -133,16 +133,12 @@ function StatusBar (props) {
     && !hideUploadButton
 
   const showCancelBtn
-    = !hideCancelButton
-    && uploadState !== STATE_WAITING
-    && uploadState !== STATE_COMPLETE
+    = !hideCancelButton && uploadState !== STATE_WAITING && uploadState !== STATE_COMPLETE
 
   const showPauseResumeBtn
-    = resumableUploads
-    && !hidePauseResumeButton
-    && uploadState === STATE_UPLOADING
+    = resumableUploads && !hidePauseResumeButton && uploadState === STATE_UPLOADING
 
-  const showRetryBtn = error && !hideRetryButton
+  const showRetryBtn = error && !isAllComplete && !hideRetryButton
 
   const showDoneBtn = doneButtonHandler && uploadState === STATE_COMPLETE
 
@@ -174,15 +170,18 @@ function StatusBar (props) {
         switch (uploadState) {
           case STATE_PREPROCESSING:
           case STATE_POSTPROCESSING:
-            return (
-              <ProgressBarProcessing
-                progress={calculateProcessingProgress(files)}
-              />
-            )
+            return <ProgressBarProcessing progress={calculateProcessingProgress(files)} />
           case STATE_COMPLETE:
             return <ProgressBarComplete i18n={i18n} />
           case STATE_ERROR:
-            return <ProgressBarError error={error} i18n={i18n} />
+            return (
+              <ProgressBarError
+                error={error}
+                i18n={i18n}
+                numUploads={numUploads}
+                complete={complete}
+              />
+            )
           case STATE_UPLOADING:
             return (
               <ProgressBarUploading
@@ -208,7 +207,7 @@ function StatusBar (props) {
       })()}
 
       <div className="uppy-StatusBar-actions">
-        {(recoveredState || showUploadBtn) ? (
+        {recoveredState || showUploadBtn ? (
           <UploadBtn
             newFiles={newFiles}
             isUploadStarted={isUploadStarted}

packages/@uppy/status-bar/src/index.js

@@ -28,6 +28,7 @@ module.exports = class StatusBar extends UIPlugin {
         paused: 'Paused',
         retry: 'Retry',
         retryUpload: 'Retry upload',
+        showErrorDetails: 'Show error details',
         cancel: 'Cancel',
         pause: 'Pause',
         resume: 'Resume',
@@ -131,7 +132,7 @@ module.exports = class StatusBar extends UIPlugin {
     return StatusBarUI({
       error,
       uploadState: getUploadingState(
-        isAllErrored,
+        error,
         isAllComplete,
         recoveredState,
         state.files || {}
@@ -210,8 +211,8 @@ function getTotalETA (files) {
   return Math.round((totalBytesRemaining / totalSpeed) * 10) / 10
 }
 
-function getUploadingState (isAllErrored, isAllComplete, recoveredState, files) {
-  if (isAllErrored) {
+function getUploadingState (error, isAllComplete, recoveredState, files) {
+  if (error && !isAllComplete) {
     return statusBarStates.STATE_ERROR
   }
 

packages/@uppy/status-bar/src/style.scss

@@ -124,6 +124,18 @@
   font-weight: normal;
   line-height: 1.4;
   padding-inline-end: 0.3em;
+
+  &.uppy-StatusBar-status--error .uppy-StatusBar-statusPrimary {
+    display: flex;
+    align-items: center;
+
+    button.uppy-StatusBar-details {
+      margin-left: 6px;
+    }
+  }
+  &.uppy-StatusBar-status--error .uppy-StatusBar-statusSecondary {
+    margin-left: 18px;
+  }
 }
 
 .uppy-StatusBar-statusPrimary {
@@ -399,6 +411,7 @@
   vertical-align: middle;
   background-color: $gray-500;
   border-radius: 50%;
+  border: none;
   cursor: help;
   appearance: none;
   inset-inline-start: 2px;