diff --git a/src/core/Core.js b/src/core/Core.js index b15fccc1d7..517dcf71fb 100644 --- a/src/core/Core.js +++ b/src/core/Core.js @@ -137,7 +137,6 @@ class Uppy { * @param {patch} object */ setState (patch) { - console.log('STATE') const prevState = Object.assign({}, this.state) const nextState = Object.assign({}, this.state, patch) diff --git a/src/plugins/DragDrop/index.js b/src/plugins/DragDrop/index.js index 40cea2dc44..a209c3109f 100644 --- a/src/plugins/DragDrop/index.js +++ b/src/plugins/DragDrop/index.js @@ -24,13 +24,12 @@ module.exports = class DragDrop extends Plugin { const defaultLocale = { strings: { - chooseFile: 'Choose a file', - orDragDrop: 'or drop it here', - upload: 'Upload', - selectedFiles: { - 0: '%{smart_count} file selected', - 1: '%{smart_count} files selected' - } + dropHereOr: 'Drop files here or', + browse: 'browse' + // selectedFiles: { + // 0: '%{smart_count} file selected', + // 1: '%{smart_count} files selected' + // } } } @@ -38,6 +37,9 @@ module.exports = class DragDrop extends Plugin { const defaultOpts = { target: null, getMetaFromForm: true, + width: '100%', + height: '100%', + note: '', locale: defaultLocale } @@ -84,7 +86,7 @@ module.exports = class DragDrop extends Plugin { } handleDrop (files) { - this.core.log('All right, someone dropped something...') + this.core.log('[DragDrop] Files dropped') files.forEach((file) => { this.core.addFile({ @@ -97,7 +99,7 @@ module.exports = class DragDrop extends Plugin { } handleInputChange (ev) { - this.core.log('All right, something selected through input...') + this.core.log('[DragDrop] Files selected through input') const files = toArray(ev.target.files) @@ -113,36 +115,41 @@ module.exports = class DragDrop extends Plugin { render (state) { const onSelect = (ev) => { - const input = this.target.querySelector('.UppyDragDrop-input') + const input = this.target.querySelector('.uppy-DragDrop-input') input.click() } - const selectedFilesCount = Object.keys(state.files).length + // const selectedFilesCount = Object.keys(state.files).length return html` -
-
ev.preventDefault()}> - + ev.preventDefault()}> + + -
` } + // ${selectedFilesCount > 0 + // ? html`
+ // ${this.i18n('selectedFiles', {'smart_count': selectedFilesCount})} + //
` + // : ''} + install () { const target = this.opts.target const plugin = this @@ -151,10 +158,14 @@ module.exports = class DragDrop extends Plugin { } } + uninstall () { + this.unmount() + } + mount (...args) { super.mount(...args) - const dndContainer = this.target.querySelector('.UppyDragDrop-container') + const dndContainer = this.target.querySelector('.uppy-DragDrop-container') this.removeDragDropListener = dragDrop(dndContainer, (files) => { this.handleDrop(files) this.core.log(files) @@ -166,8 +177,4 @@ module.exports = class DragDrop extends Plugin { super.unmount(...args) } - - uninstall () { - this.unmount() - } } diff --git a/src/scss/_dragdrop.scss b/src/scss/_dragdrop.scss index 034c9f39af..b71e913e1d 100644 --- a/src/scss/_dragdrop.scss +++ b/src/scss/_dragdrop.scss @@ -1,76 +1,76 @@ -// @import '_variables.scss'; -// @import '_utils.scss'; -// @import '_animation.scss'; -// @import '_common.scss'; +// .Uppy { -.UppyDragDrop-container { - min-height: 100px; - display: flex; - align-items: center; - justify-content: center; - border-radius: 10px; -} - -.UppyDragDrop-inner { - margin: 0; -} - - .UppyDragDrop-container.is-dragdrop-supported { - border: 2px dashed; - border-color: lighten($color-gray, 20%); + .uppy-DragDrop-container { + display: flex; + align-items: center; + justify-content: center; + border-radius: 7px; + background-color: $color-white; } - - .UppyDragDrop-container.is-dragdrop-supported .UppyDragDrop-dragText { - display: inline; + + .uppy-DragDrop-inner { + margin: 0; + text-align: center; + padding: 80px 0; } - - .UppyDragDrop-container.drag { - border-color: $color-gray; - // background-color: #dbf5f3; + + .uppy-DragDrop-arrow { + width: 60px; + height: 60px; + fill: lighten($color-gray, 30%); + margin-bottom: 20px; } + + .uppy-DragDrop-container.is-dragdrop-supported { + border: 2px dashed; + border-color: lighten($color-gray, 10%); + } + + // .uppy-DragDrop-container.is-dragdrop-supported .uppy-DragDrop-dragText { + // display: inline; + // } + + .uppy-DragDrop-container.drag { + border-color: $color-gray; + background-color: darken($color-white, 10%); + } -/* http://tympanus.net/codrops/2015/09/15/styling-customizing-file-inputs-smart-way/ */ -.UppyDragDrop-input { - width: 0.1px; - height: 0.1px; - opacity: 0; - overflow: hidden; - position: absolute; - z-index: -1; -} - -.UppyDragDrop-label { - display: block; - cursor: pointer; - font-size: 1.2em; -} - -.UppyDragDrop-selectedCount { - text-align: center; - font-size: 0.75em; - text-transform: uppercase; - letter-spacing: 1px; - margin-top: 10px; -} + .uppy-DragDrop-container.drag .uppy-DragDrop-arrow { + fill: $color-gray; + } + + /* http://tympanus.net/codrops/2015/09/15/styling-customizing-file-inputs-smart-way/ */ + .uppy-DragDrop-input { + width: 0.1px; + height: 0.1px; + opacity: 0; + overflow: hidden; + position: absolute; + z-index: -1; + } + + .uppy-DragDrop-label { + display: block; + cursor: pointer; + font-size: 1.15em; + margin-bottom: 10px; + } -.UppyDragDrop-dragText { - display: none; -} + .uppy-DragDrop-note { + font-size: 1em; + color: lighten($color-gray, 10%); + } + + // .uppy-DragDrop-selectedCount { + // text-align: center; + // font-size: 0.75em; + // text-transform: uppercase; + // letter-spacing: 1px; + // margin-top: 10px; + // } + + .uppy-DragDrop-dragText { + color: $color-cornflower-blue; + } -// .UppyDragDrop-uploadBtn { -// display: block; -// margin: auto; -// padding: 5px 15px; -// font-size: 12px; -// text-transform: uppercase; -// letter-spacing: 1px; -// border: 0; -// border: 1px solid $color-gray; -// background: none; -// cursor: pointer; -// margin-top: 15px; -// -// &:hover { -// background: $color-gray; -// } -// } +// } \ No newline at end of file diff --git a/test/acceptance/dragdrop.spec.js b/test/acceptance/dragdrop.spec.js index de2e21a2ce..a99b3a977c 100644 --- a/test/acceptance/dragdrop.spec.js +++ b/test/acceptance/dragdrop.spec.js @@ -26,11 +26,11 @@ module.exports = function (driver, platform, host) { } else { console.log('selecting a real file') // Make file input “visible” - driver.executeScript('document.querySelector(".UppyDragDrop-One .UppyDragDrop-input").style.opacity = 1') + driver.executeScript('document.querySelector(".UppyDragDrop-One .uppy-DragDrop-input").style.opacity = 1') // Find input by css selector & pass absolute image path to it driver - .findElement({css: '.UppyDragDrop-One .UppyDragDrop-input'}) + .findElement({css: '.UppyDragDrop-One .uppy-DragDrop-input'}) .sendKeys(path.join(__dirname, 'image.jpg')) } diff --git a/test/acceptance/i18n.spec.js b/test/acceptance/i18n.spec.js index 23e8aa69b9..d9ee97b064 100644 --- a/test/acceptance/i18n.spec.js +++ b/test/acceptance/i18n.spec.js @@ -2,7 +2,7 @@ var test = require('tape') var tools = require('./tools') module.exports = function (driver, platform, host) { - var testName = 'i18n: load with Russian language pack' + var testName = 'i18n: load DragDrop with Russian localization strings' test(tools.prettyTestName(testName, platform), function (t) { t.plan(1) @@ -13,7 +13,7 @@ module.exports = function (driver, platform, host) { tools.setSauceTestName(driver, testName) function findLabelTextElement () { - return driver.findElements({css: '.UppyDragDrop-label'}).then(function (result) { + return driver.findElements({css: '.uppy-DragDrop-label'}).then(function (result) { return result[0] }) } @@ -24,7 +24,7 @@ module.exports = function (driver, platform, host) { // why trim? Microsoft Edge: // expected: 'Выберите файл или перенесите его сюда' // actual: 'Выберите файл или перенесите его сюда ' - var expectedValue = 'Выберите файл или перенесите его сюда' + var expectedValue = 'Перенесите файлы сюда или выберите' console.log(value, '/', expectedValue) tools.testEqual(driver, t, value.trim() === expectedValue) driver.quit() diff --git a/website/src/examples/i18n/app.html b/website/src/examples/i18n/app.html index 7763cf3a7a..35a83ee84d 100644 --- a/website/src/examples/i18n/app.html +++ b/website/src/examples/i18n/app.html @@ -11,8 +11,8 @@ target: '.UppyDragDrop', locale: { strings: { - chooseFile: 'Выберите файл', - orDragDrop: 'или перенесите его сюда' + dropHereOr: 'Перенесите файлы сюда или', + browse: 'выберите' } } });