瀏覽代碼

Select and Cancel buttons

Renée Kooi 7 年之前
父節點
當前提交
02e2d4df2f
共有 3 個文件被更改,包括 32 次插入6 次删除
  1. 13 0
      src/scss/_provider.scss
  2. 8 4
      src/views/ProviderView/Browser.js
  3. 11 2
      src/views/ProviderView/index.js

+ 13 - 0
src/scss/_provider.scss

@@ -392,6 +392,19 @@
   outline: rgb(59, 153, 252) auto 5px;
 }
 
+.uppy-ProviderBrowser-footer {
+  display: flex;
+  align-items: center;
+  background: $color-white;
+  height: 65px;
+  border-top: 1px solid rgba($color-gray, 0.3);
+  padding: 0 15px;
+
+  & button {
+    margin-right: 10px;
+  }
+}
+
 .uppy-ProviderBrowser-doneBtn {
   position: absolute;
   bottom: 16px;

+ 8 - 4
src/views/ProviderView/Browser.js

@@ -49,6 +49,14 @@ module.exports = (props) => {
         getItemId: props.getItemId,
         i18n: props.i18n
       })}
+      <div class="uppy-ProviderBrowser-footer">
+        <button class="uppy-u-reset uppy-c-btn uppy-c-btn-primary" onclick={props.done}>
+          Select
+        </button>
+        <button class="uppy-u-reset uppy-c-btn uppy-c-btn-link" onclick={props.cancel}>
+          Cancel
+        </button>
+      </div>
       <button class="UppyButton--circular UppyButton--blue uppy-ProviderBrowser-doneBtn"
         type="button"
         aria-label="Done picking files"
@@ -61,7 +69,3 @@ module.exports = (props) => {
     </div>
   )
 }
-
-// <div class="uppy-Dashboard-actions">
-//  <button class="uppy-u-reset uppy-c-btn uppy-c-btn-primary uppy-Dashboard-actionsBtn" type="button">Select</button>
-// </div>

+ 11 - 2
src/views/ProviderView/index.js

@@ -82,6 +82,7 @@ module.exports = class ProviderView {
     this.handleError = this.handleError.bind(this)
     this.handleScroll = this.handleScroll.bind(this)
     this.donePicking = this.donePicking.bind(this)
+    this.cancelPicking = this.cancelPicking.bind(this)
 
     // Visual
     this.render = this.render.bind(this)
@@ -494,14 +495,21 @@ module.exports = class ProviderView {
       }
     })
 
-    this.plugin.setPluginState({ currentSelection: [] })
-
     this._loaderWrapper(Promise.all(promises), () => {
+      this.plugin.setPluginState({ currentSelection: [] })
+
       const dashboard = this.plugin.uppy.getPlugin('Dashboard')
       if (dashboard) dashboard.hideAllPanels()
     }, () => {})
   }
 
+  cancelPicking () {
+    this.plugin.setPluginState({ currentSelection: [] })
+
+    const dashboard = this.plugin.uppy.getPlugin('Dashboard')
+    if (dashboard) dashboard.hideAllPanels()
+  }
+
   // displays loader view while asynchronous request is being made.
   _loaderWrapper (promise, then, catch_) {
     promise
@@ -548,6 +556,7 @@ module.exports = class ProviderView {
       getItemIcon: this.plugin.getItemIcon,
       handleScroll: this.handleScroll,
       done: this.donePicking,
+      cancel: this.cancelPicking,
       title: this.plugin.title,
       viewType: this.opts.viewType,
       showTitles: this.opts.showTitles,