diff --git a/examples/bundled-example/index.html b/examples/bundled-example/index.html index 50df14205f..87fd452b0b 100644 --- a/examples/bundled-example/index.html +++ b/examples/bundled-example/index.html @@ -16,7 +16,7 @@

Uppy is here

- + diff --git a/examples/bundled-example/main.js b/examples/bundled-example/main.js index a77b7ee577..60804ba9dd 100644 --- a/examples/bundled-example/main.js +++ b/examples/bundled-example/main.js @@ -1,14 +1,14 @@ const Uppy = require('../../src/core/Core.js') -const Dashboard = require('../../src/plugins/Dashboard') -const GoogleDrive = require('../../src/plugins/GoogleDrive') -const Dropbox = require('../../src/plugins/Dropbox') -const Webcam = require('../../src/plugins/Webcam') +// const Dashboard = require('../../src/plugins/Dashboard') +// const GoogleDrive = require('../../src/plugins/GoogleDrive') +// const Dropbox = require('../../src/plugins/Dropbox') +// const Webcam = require('../../src/plugins/Webcam') const Tus10 = require('../../src/plugins/Tus10') // const Multipart = require('../../src/plugins/Multipart') const MetaData = require('../../src/plugins/MetaData') // const Informer = require('../../src/plugins/Informer') // const StatusBar = require('../../src/plugins/StatusBar') -// const DragDrop = require('../../src/plugins/DragDrop') +const DragDrop = require('../../src/plugins/DragDrop') const PROTOCOL = location.protocol === 'https:' ? 'https' : 'http' const TUS_ENDPOINT = PROTOCOL + '://master.tus.io/files/' @@ -18,29 +18,32 @@ const TUS_ENDPOINT = PROTOCOL + '://master.tus.io/files/' // import PersistentState from '../../src/plugins/PersistentState' const uppy = Uppy({debug: true, autoProceed: false}) - .use(Dashboard, { - trigger: '#uppyModalOpener', - // maxWidth: 350, - // maxHeight: 400, - // inline: false, - // disableStatusBar: true, - // disableInformer: true, + // .use(Dashboard, { + // trigger: '#uppyModalOpener', + // // maxWidth: 350, + // // maxHeight: 400, + // // inline: false, + // // disableStatusBar: true, + // // disableInformer: true, + // target: 'body', + // locale: { + // strings: {browse: 'wow'} + // } + // }) + // .use(GoogleDrive, {target: Dashboard, host: 'http://localhost:3020'}) + // .use(Dropbox, {target: Dashboard, host: 'http://localhost:3020'}) + // .use(FileInput, {target: '.Uppy', locale: { + // strings: {selectToUpload: 'Выберите файл для загрузки'} + // }}) + .use(DragDrop, { target: 'body', locale: { - strings: {browse: 'wow'} + strings: {chooseFile: 'Выберите файл'} } }) - .use(GoogleDrive, {target: Dashboard, host: 'http://localhost:3020'}) - .use(Dropbox, {target: Dashboard, host: 'http://localhost:3020'}) - // .use(FileInput, {target: '.Uppy', locale: { - // strings: {selectToUpload: 'Выберите файл для загрузки'} - // }}) - // .use(DragDrop, {target: 'body', locale: { - // strings: {chooseFile: 'Выберите файл'} - // }}) // .use(ProgressBar, {target: 'body'}) // .use(dummy) - .use(Webcam, {target: Dashboard}) + // .use(Webcam, {target: Dashboard}) // .use(Multipart, {endpoint: '//api2.transloadit.com'}) .use(Tus10, {endpoint: TUS_ENDPOINT, resume: true}) // .use(Informer, {target: Dashboard}) diff --git a/package-lock.json b/package-lock.json index 03b27d9e12..b07256e875 100644 --- a/package-lock.json +++ b/package-lock.json @@ -4164,6 +4164,11 @@ "integrity": "sha1-HvK/1jUE3wvHV4X/+MLEHfEvB34=", "dev": true }, + "insert-css": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/insert-css/-/insert-css-2.0.0.tgz", + "integrity": "sha1-610Ql7dUL0x56jBg067gfQU4gPQ=" + }, "insert-module-globals": { "version": "7.0.1", "resolved": "https://registry.npmjs.org/insert-module-globals/-/insert-module-globals-7.0.1.tgz", @@ -7703,6 +7708,9 @@ "integrity": "sha1-jk0qJWwOIYXGsYrWlK7JaLg8sdE=", "dev": true }, + "template-css": { + "version": "github:arturi/template-css#1827158e3acbc3c8d34181e350d68271646b9a82" + }, "text-table": { "version": "0.2.0", "resolved": "https://registry.npmjs.org/text-table/-/text-table-0.2.0.tgz", diff --git a/package.json b/package.json index 5a0fec935b..7120803e05 100644 --- a/package.json +++ b/package.json @@ -82,6 +82,7 @@ "on-load": "3.2.0", "prettier-bytes": "1.0.4", "socket.io-client": "2.0.1", + "template-css": "github:arturi/template-css", "tus-js-client": "1.4.3", "url-parse": "1.1.9", "whatwg-fetch": "2.0.3", diff --git a/src/plugins/DragDrop/index.js b/src/plugins/DragDrop/index.js index 38078f0383..9c2e08bc8e 100644 --- a/src/plugins/DragDrop/index.js +++ b/src/plugins/DragDrop/index.js @@ -3,6 +3,7 @@ const Translator = require('../../core/Translator') const { toArray } = require('../../core/Utils') const dragDrop = require('drag-drop') const html = require('yo-yo') +const css = require('template-css') /** * Drag & Drop plugin @@ -110,6 +111,74 @@ module.exports = class DragDrop extends Plugin { }) } + style () { + // these will be global styles variables, + // with an option to override them to support themes + const settings = { + fontSizes: { + normal: '1.2em' + }, + colors: { + gray: '#ccc' + } + } + + css` + .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: ${settings.colors.gray}; + } + + .UppyDragDrop-container.is-dragdrop-supported .UppyDragDrop-dragText { + display: inline; + } + + .UppyDragDrop-container.drag { + border-color: ${settings.colors.gray}; + } + + /* 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: ${settings.fontSizes.normal}; + } + + .UppyDragDrop-selectedCount { + text-align: center; + font-size: 0.75em; + text-transform: uppercase; + letter-spacing: 1px; + margin-top: 10px; + } + + .UppyDragDrop-dragText { + display: none; + } + ` + } + render (state) { const onSelect = (ev) => { const input = this.target.querySelector('.UppyDragDrop-input') @@ -143,6 +212,8 @@ module.exports = class DragDrop extends Plugin { } install () { + this.style() + const target = this.opts.target const plugin = this this.target = this.mount(target, plugin) diff --git a/src/scss/_dragdrop.scss b/src/scss/_dragdrop.scss index 034c9f39af..e312faee81 100644 --- a/src/scss/_dragdrop.scss +++ b/src/scss/_dragdrop.scss @@ -56,21 +56,3 @@ .UppyDragDrop-dragText { display: none; } - -// .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; -// } -// } diff --git a/src/scss/uppy.scss b/src/scss/uppy.scss index 20e519fb6e..b7c2376add 100644 --- a/src/scss/uppy.scss +++ b/src/scss/uppy.scss @@ -11,7 +11,7 @@ @import '_fileinput.scss'; @import '_informer.scss'; @import '_dashboard.scss'; -@import '_dragdrop.scss'; +// @import '_dragdrop.scss'; @import '_provider.scss'; @import '_progressbar.scss'; @import '_statusbar.scss';