Turn Pause/Resume into text buttons, add spinner for uploading and processing — different colors

Colors experimental

packages/@uppy/core/src/_variables.scss

@@ -6,7 +6,6 @@ $font-family-base: system-ui, -apple-system, BLinkMacSystemFont, Segoe UI, Robot
 
 $color-black: #000 !default;
 $color-gray: #939393 !default;
-$color-pink: #e02177 !default;
 $color-red: #D32F2F !default;
 $color-green: #1BB240 !default;
 $color-orange: #F6A623 !default;

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

@@ -50,6 +50,13 @@ function togglePauseResume (props) {
 module.exports = (props) => {
   props = props || {}
 
+  const { resumableUploads,
+    newFiles,
+    error,
+    hideUploadButton,
+    hideRetryButton,
+    hidePauseResumeCancelButtons } = props
+
   const uploadState = props.uploadState
 
   let progressValue = props.totalProgress
@@ -98,9 +105,13 @@ module.exports = (props) => {
         aria-valuenow={progressValue} />
       {progressBarContent}
       <div class="uppy-StatusBar-actions">
-        { props.newFiles && !props.hideUploadButton ? <UploadBtn {...props} uploadState={uploadState} /> : null }
-        { props.error && !props.hideRetryButton ? <RetryBtn {...props} /> : null }
-        { !props.hidePauseResumeCancelButtons && uploadState !== statusBarStates.STATE_WAITING && uploadState !== statusBarStates.STATE_COMPLETE
+        { newFiles && !hideUploadButton ? <UploadBtn {...props} uploadState={uploadState} /> : null }
+        { !hidePauseResumeCancelButtons && resumableUploads && uploadState !== statusBarStates.STATE_WAITING && uploadState !== statusBarStates.STATE_COMPLETE
+          ? <PauseResumeButtons {...props} />
+          : null
+        }
+        { error && !hideRetryButton ? <RetryBtn {...props} /> : null }
+        { !hidePauseResumeCancelButtons && uploadState !== statusBarStates.STATE_WAITING && uploadState !== statusBarStates.STATE_COMPLETE
           ? <CancelBtn {...props} />
           : null
         }
@@ -147,30 +158,43 @@ const PauseResumeButtons = (props) => {
   const { resumableUploads, isAllPaused, i18n } = props
   const title = resumableUploads
                 ? isAllPaused
-                  ? i18n('resumeUpload')
-                  : i18n('pauseUpload')
-                : i18n('cancelUpload')
-
-  return <button title={title} class="uppy-u-reset uppy-StatusBar-statusIndicator" type="button" onclick={() => togglePauseResume(props)}>
-    {resumableUploads
-      ? isAllPaused
-        ? <svg aria-hidden="true" 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>
-        : <svg aria-hidden="true" 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>
-      : <svg aria-hidden="true" class="UppyIcon" width="16px" height="16px" viewBox="0 0 19 19">
-        <path d="M17.318 17.232L9.94 9.854 9.586 9.5l-.354.354-7.378 7.378h.707l-.62-.62v.706L9.318 9.94l.354-.354-.354-.354L1.94 1.854v.707l.62-.62h-.706l7.378 7.378.354.354.354-.354 7.378-7.378h-.707l.622.62v-.706L9.854 9.232l-.354.354.354.354 7.378 7.378.708-.707-7.38-7.378v.708l7.38-7.38.353-.353-.353-.353-.622-.622-.353-.353-.354.352-7.378 7.38h.708L2.56 1.23 2.208.88l-.353.353-.622.62-.353.355.352.353 7.38 7.38v-.708l-7.38 7.38-.353.353.352.353.622.622.353.353.354-.353 7.38-7.38h-.708l7.38 7.38z" />
-      </svg>
-    }
+                  ? i18n('resume')
+                  : i18n('pause')
+                : i18n('cancel')
+
+  return <button class="uppy-u-reset uppy-c-btn uppy-StatusBar-actionBtn uppy-StatusBar-actionBtn--pauseResume"
+    type="button"
+    onclick={() => togglePauseResume(props)}>
+    {title}
   </button>
+
+  // return <button title={title} class="uppy-u-reset uppy-StatusBar-statusIndicator" type="button" onclick={() => togglePauseResume(props)}>
+  //   {resumableUploads
+  //     ? isAllPaused
+  //       ? <svg aria-hidden="true" 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>
+  //       : <svg aria-hidden="true" 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>
+  //     : <svg aria-hidden="true" class="UppyIcon" width="16px" height="16px" viewBox="0 0 19 19">
+  //       <path d="M17.318 17.232L9.94 9.854 9.586 9.5l-.354.354-7.378 7.378h.707l-.62-.62v.706L9.318 9.94l.354-.354-.354-.354L1.94 1.854v.707l.62-.62h-.706l7.378 7.378.354.354.354-.354 7.378-7.378h-.707l.622.62v-.706L9.854 9.232l-.354.354.354.354 7.378 7.378.708-.707-7.38-7.378v.708l7.38-7.38.353-.353-.353-.353-.622-.622-.353-.353-.354.352-7.378 7.38h.708L2.56 1.23 2.208.88l-.353.353-.622.62-.353.355.352.353 7.38 7.38v-.708l-7.38 7.38-.353.353.352.353.622.622.353.353.354-.353 7.38-7.38h-.708l7.38 7.38z" />
+  //     </svg>
+  //   }
+  // </button>
+}
+
+const LoadingSpinner = (props) => {
+  return <svg class="uppy-StatusBar-spinner" width="14" height="14" xmlns="http://www.w3.org/2000/svg">
+    <path d="M13.983 6.547c-.12-2.509-1.64-4.893-3.939-5.936-2.48-1.127-5.488-.656-7.556 1.094C.524 3.367-.398 6.048.162 8.562c.556 2.495 2.46 4.52 4.94 5.183 2.932.784 5.61-.602 7.256-3.015-1.493 1.993-3.745 3.309-6.298 2.868-2.514-.434-4.578-2.349-5.153-4.84a6.226 6.226 0 0 1 2.98-6.778C6.34.586 9.74 1.1 11.373 3.493c.407.596.693 1.282.842 1.988.127.598.073 1.197.161 1.794.078.525.543 1.257 1.15.864.525-.341.49-1.05.456-1.592-.007-.15.02.3 0 0" fill-rule="evenodd" />
+  </svg>
 }
 
 const ProgressBarProcessing = (props) => {
   const value = Math.round(props.value * 100)
 
   return <div class="uppy-StatusBar-content">
+    <LoadingSpinner {...props} />
     {props.mode === 'determinate' ? `${value}% \u00B7 ` : ''}
     {props.message}
   </div>
@@ -195,10 +219,10 @@ const ProgressBarUploading = (props) => {
 
   return (
     <div class="uppy-StatusBar-content" aria-label={title} title={title}>
-      <svg class="uppy-StatusBar-spinner" width="14" height="14" xmlns="http://www.w3.org/2000/svg">
-        <path d="M13.983 6.547c-.12-2.509-1.64-4.893-3.939-5.936-2.48-1.127-5.488-.656-7.556 1.094C.524 3.367-.398 6.048.162 8.562c.556 2.495 2.46 4.52 4.94 5.183 2.932.784 5.61-.602 7.256-3.015-1.493 1.993-3.745 3.309-6.298 2.868-2.514-.434-4.578-2.349-5.153-4.84a6.226 6.226 0 0 1 2.98-6.778C6.34.586 9.74 1.1 11.373 3.493c.407.596.693 1.282.842 1.988.127.598.073 1.197.161 1.794.078.525.543 1.257 1.15.864.525-.341.49-1.05.456-1.592-.007-.15.02.3 0 0" fill="#2275D7" fill-rule="evenodd" />
-      </svg>
-      { !props.hidePauseResumeCancelButtons && <PauseResumeButtons {...props} /> }
+      { !props.isAllPaused
+        ? <LoadingSpinner {...props} />
+        : null
+      }
       <div class="uppy-StatusBar-status">
         <div class="uppy-StatusBar-statusPrimary">{title}: {props.totalProgress}%</div>
         { !props.isAllPaused && <ThrottledProgressDetails {...props} /> }

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

@@ -28,11 +28,13 @@ module.exports = class StatusBar extends Plugin {
         error: 'Error',
         retry: 'Retry',
         cancel: 'Cancel',
+        pause: 'Pause',
+        resume: 'Resume',
         pressToRetry: 'Press to retry',
-        retryUpload: 'Retry upload',
-        resumeUpload: 'Resume upload',
-        cancelUpload: 'Cancel upload',
-        pauseUpload: 'Pause upload',
+        // retryUpload: 'Retry upload',
+        // resumeUpload: 'Resume upload',
+        // cancelUpload: 'Cancel upload',
+        // pauseUpload: 'Pause upload',
         filesUploadedOfTotal: {
           0: '%{complete} of %{smart_count} file uploaded',
           1: '%{complete} of %{smart_count} files uploaded'

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

@@ -70,22 +70,23 @@
   transition: background-color, width .3s ease-out;
 
   &.is-indeterminate {
-    $stripe-color: darken($color-cornflower-blue, 10%);
+    background-color: $color-orange;
+    $stripe-color: darken($color-orange, 10%);
     background-size: 64px 64px;
     background-image: linear-gradient(45deg, $stripe-color 25%, transparent 25%, transparent 50%, $stripe-color 50%, $stripe-color 75%, transparent 75%, transparent);
-    animation: statusBarProgressStripes 1s linear infinite;
+    animation: uppy-StatusBar-ProgressStripes 1s linear infinite;
   }
 }
 
+  @keyframes uppy-StatusBar-ProgressStripes {
+    from { background-position: 0 0; }
+    to { background-position: 64px 0; }
+  }
+
 .uppy-StatusBar.is-waiting .uppy-StatusBar-progress {
   display: none;
 }
 
-@keyframes statusBarProgressStripes {
-  from { background-position: 64px 0; }
-  to { background-position: 0 0; }
-}
-
 .uppy-StatusBar-content {
   display: flex;
   align-items: center;
@@ -113,6 +114,7 @@
 
 .uppy-StatusBar-statusPrimary {
   font-size: 13px;
+  font-weight: 400;
 }
 
 .uppy-StatusBar-statusSecondary {
@@ -167,13 +169,13 @@
 
 .uppy-StatusBar-actionBtn {
   font-size: 12px;
-  padding: 6px;
+  padding: 4px;
   // border-radius: 4px;
   color: $color-cornflower-blue;
 }
 
   .uppy-size--md .uppy-StatusBar-actionBtn {
-    padding: 3px 5px;
+    padding: 2px 4px;
   }
 
   .uppy-StatusBar.is-waiting .uppy-StatusBar-actionBtn--upload {
@@ -248,13 +250,21 @@
   animation-duration: 1s;
   animation-iteration-count: infinite;
   animation-timing-function: linear;
+  margin-right: 10px;
+  fill: $color-cornflower-blue;
 }
 
-@keyframes uppy-StatusBar-spinnerAnimation {
-  0% {
-    transform: rotate(0deg);
+  .uppy-StatusBar.is-preprocessing .uppy-StatusBar-spinner,
+  .uppy-StatusBar.is-postprocessing .uppy-StatusBar-spinner {
+    fill: $color-orange;
   }
-  100% {
-    transform: rotate(360deg);
+
+
+  @keyframes uppy-StatusBar-spinnerAnimation {
+    0% {
+      transform: rotate(0deg);
+    }
+    100% {
+      transform: rotate(360deg);
+    }
   }
-}