diff --git a/src/core/html.js b/src/core/html.js new file mode 100644 index 000000000..624f851d4 --- /dev/null +++ b/src/core/html.js @@ -0,0 +1,2 @@ +import yo from 'yo-yo' +export default yo diff --git a/src/plugins/Modal/FileItem.js b/src/plugins/Modal/FileItem.js index 452e36616..0b549795d 100644 --- a/src/plugins/Modal/FileItem.js +++ b/src/plugins/Modal/FileItem.js @@ -1,6 +1,7 @@ import html from 'yo-yo' import Utils from '../../core/Utils' -import { checkIcon, removeIcon, iconText, iconFile, iconAudio, iconEdit } from './icons' +import FileItemProgress from './FileItemProgress' +import { removeIcon, iconText, iconFile, iconAudio, iconEdit } from './icons' function getIconByMime (fileTypeGeneral) { switch (fileTypeGeneral) { @@ -16,40 +17,47 @@ function getIconByMime (fileTypeGeneral) { export default function fileItem (file, bus) { const isUploaded = file.progress === 100 const uploadInProgressOrComplete = file.progress > 0 + const uploadInProgress = file.progress > 0 && file.progress < 100 + const isPaused = file.isPaused || false const fileName = Utils.getFileNameAndExtension(file.meta.name)[0] - const truncatedFileName = Utils.truncateString(fileName, 30) + const truncatedFileName = Utils.truncateString(fileName, 20) function remove (ev) { - const el = document.querySelector(`#uppy_${file.id}`) - el.classList.add('UppyAnimation-zoomOutLeft') + // const el = document.querySelector(`#uppy_${file.id}`) + // el.classList.add('UppyAnimation-zoomOutLeft') // this seems to be working in latest Chrome, Firefox and Safari, // but might not be 100% cross-browser, needs testing // https://davidwalsh.name/css-animation-callback - el.addEventListener('animationend', () => { - bus.emit('file-remove', file.id) - }) - // bus.emit('file-remove', file.id) - } - - function openFileCard (fileId) { - bus.emit('file-card-open', fileId) + // el.addEventListener('animationend', () => { + // bus.emit('file-remove', file.id) + // }) + bus.emit('file-remove', file.id) } //
${file.extension ? '.' + file.extension : '?'}
+ //
${file.progress}%
+ //
- return html`
  • - ${file.previewEl - ? file.previewEl - : html`
    ${getIconByMime(file.type.general)}
    ` + ${file.preview + ? html`${file.name}` + : getIconByMime(file.type.general) } -
    -
    ${file.progress}%
    -
    +
    +
    @@ -64,18 +72,18 @@ export default function fileItem (file, bus) {
    ${!uploadInProgressOrComplete ? html`` + onclick=${(e) => bus.emit('file-card-open', file.id)}>${iconEdit()}` : null }
    - ${isUploaded - ? checkIcon() - : html`` + : null }
    • ` diff --git a/src/plugins/Modal/FileItemProgress.js b/src/plugins/Modal/FileItemProgress.js new file mode 100644 index 000000000..49ce3f637 --- /dev/null +++ b/src/plugins/Modal/FileItemProgress.js @@ -0,0 +1,22 @@ +import html from '../../core/html' + +// http://codepen.io/Harkko/pen/rVxvNM +// https://gist.github.com/eswak/ad4ea57bcd5ff7aa5d42 + +export default function (props, bus) { + const progress = props.progress + + return html` + + + + + + + + + + + + ` +} diff --git a/src/plugins/Modal/icons.js b/src/plugins/Modal/icons.js index ecc1aada9..55af2cfb3 100644 --- a/src/plugins/Modal/icons.js +++ b/src/plugins/Modal/icons.js @@ -1,4 +1,4 @@ -import html from 'yo-yo' +import html from '../../core/html' // https://css-tricks.com/creating-svg-icon-system-react/ @@ -35,14 +35,14 @@ export function closeIcon () { } export function pluginIcon () { - return html` + return html` ` } export function checkIcon () { - return html` + return html` ` @@ -70,8 +70,7 @@ export function removeIcon () { return html ` - - ` + ` } export function uploadIcon () { @@ -81,20 +80,6 @@ export function uploadIcon () { ` } -export function fileIcon (fileType) { - return html` - - - ${fileType.specific ? fileType.specific.toUpperCase() : '?'} - - ` -} - export function dashboardBgIcon () { return html`MP3PDFJPG` } diff --git a/src/scss/_dashboard.scss b/src/scss/_dashboard.scss index 13ec9405b..4bb9e4cfa 100644 --- a/src/scss/_dashboard.scss +++ b/src/scss/_dashboard.scss @@ -23,7 +23,7 @@ .UppyDashboard-inner { background-color: darken($color-white, 5%); - padding: 20px; + padding: 15px; max-width: 100%; max-height: 100%; width: 750px; @@ -291,7 +291,7 @@ margin: 0; } -.UppyModal.drag .UppyDashboard-fileContainer { +.UppyDashboard.drag .UppyDashboard-files { border-color: lighten($color-gray, 5%); background-color: darken($color-white, 5%) } @@ -317,7 +317,7 @@ width: 250px; } - .UppyModal.drag .UppyDashboard-bgIcon { + .UppyDashboard.drag .UppyDashboard-bgIcon { opacity: 1; } @@ -330,14 +330,14 @@ position: relative; border-radius: 6px; background-color: $color-white; - // border: 1px solid rgba($color-gray, 0.3); + border: 1px solid rgba($color-gray, 0.2); } .UppyDashboardItem-preview { border-top-left-radius: 6px; border-top-right-radius: 6px; overflow: hidden; - border-bottom: 1px solid rgba($color-gray, 0.3); + border-bottom: 1px solid rgba($color-gray, 0.2); height: 100px; display: flex; align-items: center; @@ -346,6 +346,21 @@ position: relative; } + .UppyDashboardItem-preview:after { + content: ''; + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + background-color: rgba($color-black, 0.2); + display: none; + } + +// .UppyDashboardItem-preview .UppyIcon { +// height: 50px; +// } + .UppyDashboardItem-preview img { width: 100%; height: 100%; @@ -353,32 +368,12 @@ } .UppyDashboardItem-previewIcon { - height: 75px; - display: flex; - justify-content: center; - align-items: center; + // height: 75px; + // display: flex; + // justify-content: center; + // align-items: center; } -.UppyDashboardItem-previewIcon .UppyIcon { - width: 35px; - max-height: 80%; -} - -// .UppyDashboardItem-previewType { -// margin: 0; -// padding: 0; -// width: 100%; -// text-align: center; -// font-size: 11px; -// background-color: $color-pink; -// height: 25px; -// line-height: 25px; -// padding: 0 15px; -// overflow: hidden; -// text-overflow: ellipsis; -// color: $color-white; -// } - .UppyDashboardItem-info { padding: 8px 32px 8px 10px; height: 60px; @@ -388,13 +383,13 @@ .UppyDashboardItem-name { font-size: 11px; line-height: 1.35; - // font-weight: bold; font-weight: 500; margin: 0; padding: 0; max-height: 28px; overflow: hidden; margin-bottom: 5px; + word-wrap: break-word; } .UppyDashboardItem-name a { @@ -441,6 +436,7 @@ cursor: pointer; opacity: 0.75; transition: all 0.2s; + transform: translateZ(0); color: $color-black; } @@ -449,25 +445,95 @@ opacity: 1; } -.UppyDashboardItem-progress { - width: 100%; - height: 15px; - font-size: 10px; - text-align: center; - line-height: 15px; - color: $color-white; - margin: auto; +.UppyDashboardItem-progress {} + +.UppyDashboardItem-progressBtn { + @include reset-button; + width: 60px; + height: 60px; position: absolute; - bottom: 0; - left: 0; - overflow: hidden; - display: none; - opacity: 0.8; + top: 50%; + left: 50%; + margin-left: -30px; + margin-top: -30px; + opacity: 0.9; + cursor: pointer; + z-index: $zIndex-2; } -.UppyDashboardItem-progress.is-active { - display: block; - background-color: lighten($color-cornflower-blue, 15%); +.UppyIcon-progressCircle { + width: 100%; + height: 100%; +} + +.UppyIcon-progressCircle .bg { + stroke: $color-asphalt-gray; + opacity: 0; + transition: all 0.2s; +} + +.UppyIcon-progressCircle .progress { + stroke: $color-white; + transition: stroke-dashoffset .5s ease-out; + opacity: 0; +} + +.UppyIcon-progressCircle .play { + stroke: $color-white; + fill: $color-white; + opacity: 0; + transition: all 0.2s; +} + +.UppyIcon-progressCircle .pause { + stroke: $color-white; + fill: $color-white; + opacity: 0; + transition: all 0.2s; +} + +.UppyIcon-progressCircle .check { + opacity: 0; + fill: $color-white; + transition: all 0.2s; +} + +.UppyDashboardItem.is-inprogress { + .bg, .progress, .pause { + opacity: 1; + } + + .UppyDashboardItem-preview:after { + display: block; + } +} + +.UppyDashboardItem.is-paused { + .pause { + opacity: 0; + } + .play { + opacity: 1; + } +} + +.UppyDashboardItem.is-complete { + .UppyDashboardItem-progressBtn { + cursor: default; + } + + .UppyDashboardItem-preview:after { + display: block; + } + + .progress { + stroke: $color-green; + fill: $color-green; + opacity: 1; + } + .check { + opacity: 1; + } } .UppyDashboardItem-progressNum { @@ -545,22 +611,8 @@ transform: translateY(-105%); } -.UppyDashboardFileCard { - // width: 500px; - // height: 400px; - // max-width: 100%; - // max-height: 100%; - // width: 100%; - // height: 100%; - // z-index: $zIndex-4; - // position: absolute; - // top: 0; - // left: 0; - // top: 50%; - // left: 50%; - // transform: translate(-50%, -50%); - // transform: translateY(-105%); - // transition: all 0.5s ease-in-out; +.UppyDashboardFileCard-inner { + height: 100%; } .UppyDashboardFileCard-preview {