diff --git a/src/plugins/DragDrop.js b/src/plugins/DragDrop.js index 47bf24ff7..028959629 100644 --- a/src/plugins/DragDrop.js +++ b/src/plugins/DragDrop.js @@ -36,6 +36,8 @@ export default class DragDrop extends Plugin { } render () { + // Another way not to render next/upload button — if Modal is used as a target + const target = this.opts.target.name return `
${this.core.i18n('chooseFile')} ${this.core.i18n('orDragDrop')}. - ${!this.core.opts.autoProceed - ? `` + ${!this.core.opts.autoProceed && target !== 'Modal' + ? `` : ''}
` } @@ -140,6 +142,10 @@ export default class DragDrop extends Plugin { return resolve(result) } + this.core.emitter.on('next', () => { + return resolve(result) + }) + this.dropzone.addEventListener('submit', (e) => { e.preventDefault() return resolve(result) diff --git a/src/plugins/Modal.js b/src/plugins/Modal.js index 6332a9ec9..311f553bb 100644 --- a/src/plugins/Modal.js +++ b/src/plugins/Modal.js @@ -133,6 +133,9 @@ export default class Modal extends Plugin { showTabPanel (id) { const tabPanel = document.querySelector(`.${id}`) tabPanel.style.display = 'block' + + // Remove `next` buttons provided by plugins, since Modal has it’s own + // document.querySelector('.UppyNextBtn').remove() } initEvents () { @@ -179,6 +182,11 @@ export default class Modal extends Plugin { hideModalTrigger.forEach(trigger => trigger.addEventListener('click', this.hideModal)) showModalTrigger.addEventListener('click', this.showModal) + // When `next` (upload) button is clicked, emit `next` event, + // so that plugins can proceed to the next stage + const nextButton = document.querySelector('.UppyModal-next') + nextButton.addEventListener('click', () => this.core.emitter.emit('next')) + this.initEvents() } } diff --git a/src/plugins/Tus10.js b/src/plugins/Tus10.js index 2e9fb2212..a410c343a 100644 --- a/src/plugins/Tus10.js +++ b/src/plugins/Tus10.js @@ -57,7 +57,7 @@ export default class Tus10 extends Plugin { } }) // Start the upload - upload.start() + return upload.start() } /** diff --git a/src/scss/_modal.scss b/src/scss/_modal.scss index 45508076b..adde4a890 100644 --- a/src/scss/_modal.scss +++ b/src/scss/_modal.scss @@ -122,6 +122,7 @@ .UppyModalContent-panel { display: none; + height: 88%; } // Progress bar placeholder @@ -131,12 +132,16 @@ bottom: 0; left: 0; width: 100%; - height: 30px; + height: 12%; } .UppyModal-progressBarContainer.is-active { z-index: $zIndex-4; - position: relative; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; } .UppyModal-next { @@ -158,6 +163,7 @@ line-height: 1; padding: 0; margin: 0; + outline: none; &:hover { background-color: darken($color-cornflower-blue, 20%); diff --git a/src/scss/_present.scss b/src/scss/_present.scss new file mode 100644 index 000000000..0ee4c1381 --- /dev/null +++ b/src/scss/_present.scss @@ -0,0 +1,4 @@ +.UppyPresenter { + font-size: 25px; + text-align: center; +} diff --git a/src/scss/_progressbar.scss b/src/scss/_progressbar.scss index bfb7ee9c6..8a454ecbb 100644 --- a/src/scss/_progressbar.scss +++ b/src/scss/_progressbar.scss @@ -1,5 +1,5 @@ .UppyProgressBar { - height: 30px; + height: 100%; margin: 0 auto; background-color: lighten($color-pink, 30%); } @@ -12,10 +12,13 @@ .UppyProgressBar-percentage { text-align: center; - position: relative; - bottom: 30px; - font-size: 12px; - line-height: 30px; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + // bottom: 30px; + // font-size: 12px; + // line-height: 30px; color: $color-white; // &:after { diff --git a/src/scss/uppy.scss b/src/scss/uppy.scss index 544405dfa..a8a03c8d8 100644 --- a/src/scss/uppy.scss +++ b/src/scss/uppy.scss @@ -8,3 +8,4 @@ @import '_progressbar.scss'; @import '_spinner.scss'; @import '_modal.scss'; +@import '_present.scss';