Merge pull request #485 from wilkoklak/master

Add option to hide progress bar after upload finish #464

src/plugins/Dashboard/index.js

@@ -75,6 +75,7 @@ module.exports = class Dashboard extends Plugin {
       defaultTabIcon: defaultTabIcon,
       showProgressDetails: false,
       hideUploadButton: false,
+      hideProgressAfterFinish: false,
       note: null,
       closeModalOnClickOutside: false,
       locale: defaultLocale,
@@ -497,7 +498,8 @@ module.exports = class Dashboard extends Plugin {
     if (!this.opts.disableStatusBar) {
       this.uppy.use(StatusBar, {
         target: this,
-        hideUploadButton: this.opts.hideUploadButton
+        hideUploadButton: this.opts.hideUploadButton,
+        hideAfterFinish: this.opts.hideProgressAfterFinish
       })
     }
 

src/plugins/ProgressBar.js

@@ -16,7 +16,8 @@ module.exports = class ProgressBar extends Plugin {
     const defaultOptions = {
       target: 'body',
       replaceTargetContent: false,
-      fixed: false
+      fixed: false,
+      hideAfterFinish: true
     }
 
     // merge default options with the ones set by user
@@ -27,8 +28,8 @@ module.exports = class ProgressBar extends Plugin {
 
   render (state) {
     const progress = state.totalProgress || 0
-
-    return <div class="uppy uppy-ProgressBar" style={{ position: this.opts.fixed ? 'fixed' : 'initial' }}>
+    const isHidden = progress === 100 && this.opts.hideAfterFinish
+    return <div class="uppy uppy-ProgressBar" style={{ position: this.opts.fixed ? 'fixed' : 'initial' }} aria-hidden={isHidden}>
       <div class="uppy-ProgressBar-inner" style={{ width: progress + '%' }} />
       <div class="uppy-ProgressBar-percentage">{progress}</div>
     </div>

src/plugins/StatusBar/StatusBar.js

@@ -117,9 +117,10 @@ module.exports = (props) => {
 
   const width = typeof progressValue === 'number' ? progressValue : 100
   const isHidden = (uploadState === STATE_WAITING && props.hideUploadButton) ||
-    (uploadState === STATE_WAITING && !props.newFiles > 0)
+    (uploadState === STATE_WAITING && !props.newFiles > 0) ||
+    (uploadState === STATE_COMPLETE && props.hideAfterFinish)
 
-  const progressClasses = `uppy-StatusBar-progress 
+  const progressClasses = `uppy-StatusBar-progress
                            ${progressMode ? 'is-' + progressMode : ''}`
 
   return (

src/plugins/StatusBar/index.js

@@ -46,7 +46,8 @@ module.exports = class StatusBar extends Plugin {
       target: 'body',
       hideUploadButton: false,
       showProgressDetails: false,
-      locale: defaultLocale
+      locale: defaultLocale,
+      hideAfterFinish: true
     }
 
     // merge default options with the ones set by user
@@ -164,7 +165,8 @@ module.exports = class StatusBar extends Plugin {
       totalETA: totalETA,
       files: state.files,
       resumableUploads: resumableUploads,
-      hideUploadButton: this.opts.hideUploadButton
+      hideUploadButton: this.opts.hideUploadButton,
+      hideAfterFinish: this.opts.hideAfterFinish
     })
   }
 

src/scss/_progressbar.scss

@@ -10,6 +10,11 @@
   width: 100%;
   height: 3px;
   z-index: 10000;
+  transition: height .2s;
+}
+
+.uppy-ProgressBar[aria-hidden=true] {
+  height: 0;
 }
 
 .uppy-ProgressBar-inner {

src/scss/_statusbar.scss

@@ -134,8 +134,8 @@
         background-color: $color-cornflower-blue;
         color: $color-white;
 
-        &:hover { 
-          background-color: darken($color-cornflower-blue, 20%); 
+        &:hover {
+          background-color: darken($color-cornflower-blue, 20%);
         }
       }
 

website/src/docs/dashboard.md

@@ -27,6 +27,7 @@ uppy.use(Dashboard, {
   semiTransparent: false,
   showProgressDetails: false,
   hideUploadButton: false,
+  hideProgressAfterFinish: false,
   note: null,
   metaFields: [],
   closeModalOnClickOutside: false,
@@ -94,6 +95,10 @@ Show progress bars for the uploads.
 
 Hide the upload button. Use this if you are providing a custom upload button somewhere on the page using the `uppy.upload()` API.
 
+### `hideProgressAfterFinish: false`
+
+Hide StatusBar after upload finish
+
 ### `note: null`
 
 Optionally specify a string of text that explains something about the upload for the user. This is a place to explain `restrictions` that are put in place. For example: `'Images and video only, 2–3 files, up to 1 MB'`.

website/src/docs/progressbar.md

@@ -14,7 +14,8 @@ ProgressBar is a minimalist plugin that shows the current upload progress in a t
 ```js
 uppy.use(ProgressBar, {
   target: '.UploadForm',
-  fixed: false
+  fixed: false,
+  hideAfterFinish: true
 })
 ```
 
@@ -32,3 +33,7 @@ uppy.use(ProgressBar, {
   fixed: true
 })
 ```
+
+### `hideAfterFinish: true`
+
+When true, progress bar hides after the uplaod has finished. If true, it remains visible

website/src/docs/statusbar.md

@@ -16,5 +16,9 @@ Best used together with a simple file source plugin, such as [FileInput][] or [D
 
 DOM element, CSS selector, or plugin to mount the StatusBar into.
 
+### `hideAfterFinish: true`
+
+Hide StatusBar after upload finish
+
 [FileInput]: https://github.com/transloadit/uppy/blob/master/src/plugins/FileInput.js
 [DragDrop]: /docs/dragdrop