ソースを参照

For now: remove upload button from Modal itself,, don’t use Presenter, Dummy and ProgressBar. Update styles

Artur Paikin 9 年 前
コミット
53e39cc201

+ 1 - 1
src/plugins/DragDrop.js

@@ -146,7 +146,7 @@ export default class DragDrop extends Plugin {
       acquiredFiles: newFiles
       acquiredFiles: newFiles
     })
     })
 
 
-    this.core.emitter.emit('new-next')
+    // this.core.emitter.emit('next')
     //
     //
     // newFiles.forEach((newFile) => {
     // newFiles.forEach((newFile) => {
     //   this.files.push(newFile)
     //   this.files.push(newFile)

+ 10 - 22
src/plugins/Modal.js

@@ -102,7 +102,6 @@ export default class Modal extends Plugin {
           <div class="UppyModalContent">
           <div class="UppyModalContent">
             <div class="UppyModal-presenter"></div>
             <div class="UppyModal-presenter"></div>
             <div class="UppyModal-progress">
             <div class="UppyModal-progress">
-              <button class="UppyModal-next js-UppyModal-next">${this.core.i18n('upload')}</button>
               <div class="UppyModal-progressBarContainer"></div>
               <div class="UppyModal-progressBarContainer"></div>
             </div>
             </div>
           </div>
           </div>
@@ -140,32 +139,21 @@ export default class Modal extends Plugin {
 
 
     this.core.log(pluginName)
     this.core.log(pluginName)
     this.core.getPlugin(pluginName).focus()
     this.core.getPlugin(pluginName).focus()
-
-    // Remove `next` buttons provided by plugins, since Modal has its own
-    // document.querySelector('.UppyNextBtn').remove()
   }
   }
 
 
   events () {
   events () {
     // Listen for allDone event to close all tabs
     // Listen for allDone event to close all tabs
     this.core.emitter.on('allDone', () => this.allDone())
     this.core.emitter.on('allDone', () => this.allDone())
 
 
-    this.core.emitter.on('file-add', (data) => {
-      this.nextButton.classList.add('is-active')
-
-      const files = Object.keys(data.acquiredFiles)
-      const selectedCount = files.length
-
-        // How many files have been selected totally
-      this.core.totalFilesSelectedCount = this.core.totalFilesSelectedCount + selectedCount
-
-      this.nextButton.innerHTML = this.core.i18n('uploadFiles', {'smart_count': this.core.totalFilesSelectedCount})
-
-      files.forEach((file) => {
-        this.core.log(`These files have been selected: ${data.acquiredFiles[file]}`)
-      })
-    })
+    // this.core.emitter.on('file-add', (data) => {
+    //   this.nextButton.classList.add('is-active')
+    //
+    //   const files = Object.keys(this.core.state.selectedFiles)
+    //   const selectedFileCount = files.length
+    //   this.nextButton.innerHTML = this.core.i18n('uploadFiles', {'smart_count': selectedFileCount})
+    // })
 
 
-    this.core.emitter.on('reset', () => this.nextButton.classList.remove('is-active'))
+    // this.core.emitter.on('reset', () => this.nextButton.classList.remove('is-active'))
 
 
     // Close the Modal on esc key press
     // Close the Modal on esc key press
     document.body.addEventListener('keyup', (event) => {
     document.body.addEventListener('keyup', (event) => {
@@ -215,8 +203,8 @@ export default class Modal extends Plugin {
 
 
     // When `next` (upload) button is clicked, emit `next` event,
     // When `next` (upload) button is clicked, emit `next` event,
     // so that plugins can proceed to the next stage
     // so that plugins can proceed to the next stage
-    this.nextButton = document.querySelector('.UppyModal-next')
-    this.nextButton.addEventListener('click', () => this.core.emitter.emit('next'))
+    // this.nextButton = document.querySelector('.UppyModal-next')
+    // this.nextButton.addEventListener('click', () => this.core.emitter.emit('next'))
 
 
     this.events()
     this.events()
   }
   }

+ 2 - 1
src/scss/_modal.scss

@@ -126,7 +126,8 @@
 }
 }
 
 
 .UppyModalContent-panel {
 .UppyModalContent-panel {
-  height: 88%;
+  // height: 88%;
+  height: 100%;
 }
 }
 
 
 .UppyModalContent-panel[aria-hidden] {
 .UppyModalContent-panel[aria-hidden] {

+ 1 - 0
src/scss/_progressdrawer.scss

@@ -120,6 +120,7 @@
   height: 40px;
   height: 40px;
   transition: background-color 0.5s;
   transition: background-color 0.5s;
   color: $color-black;
   color: $color-black;
+  font-size: 13px;
   font-weight: bold;
   font-weight: bold;
   // border-top: 1px solid $color-asphalt-gray;
   // border-top: 1px solid $color-asphalt-gray;
   cursor: pointer;
   cursor: pointer;

+ 3 - 3
website/src/examples/modal/app.es6

@@ -5,11 +5,11 @@ import ProgressDrawer from '../../../../src/plugins/ProgressDrawer.js'
 const uppy = new Uppy({debug: true})
 const uppy = new Uppy({debug: true})
 uppy
 uppy
   .use(Modal, {trigger: '#uppyModalOpener'})
   .use(Modal, {trigger: '#uppyModalOpener'})
-  .use(ProgressBar, {target: Modal})
+  // .use(ProgressBar, {target: Modal})
   .use(DragDrop, {target: Modal})
   .use(DragDrop, {target: Modal})
   .use(GoogleDrive, {target: Modal})
   .use(GoogleDrive, {target: Modal})
-  .use(Dummy, {target: Modal})
-  .use(Present, {target: Modal})
+  // .use(Dummy, {target: Modal})
+  // .use(Present, {target: Modal})
   .use(Tus10, {endpoint: 'http://master.tus.io:8080/files/'})
   .use(Tus10, {endpoint: 'http://master.tus.io:8080/files/'})
   .use(ProgressDrawer, {target: Modal})
   .use(ProgressDrawer, {target: Modal})
   .run()
   .run()