diff --git a/src/plugins/modal/FileItem.js b/src/plugins/modal/FileItem.js index dbb65ac21..71e9e3464 100644 --- a/src/plugins/modal/FileItem.js +++ b/src/plugins/modal/FileItem.js @@ -3,6 +3,7 @@ import { fileIcon, checkIcon, removeIcon } from './icons' export default function fileItem (bus, file) { const isUploaded = file.progress === 100 + const uploadInProgress = file.progress > 0 && file.progress const remove = (ev) => { bus.emit('file-remove', file.id) @@ -23,8 +24,8 @@ export default function fileItem (bus, file) {
${file.totalSize}
- ${file.progress > 0 && file.progress < 100 ? 'Uploading… ' + file.progress + '%' : ''} - ${file.progress === 100 ? 'Completed' : ''} + ${uploadInProgress ? 'Uploading… ' + file.progress + '%' : ''} + ${isUploaded ? 'Completed' : ''}
${isUploaded @@ -36,7 +37,7 @@ export default function fileItem (bus, file) { ` }
-
+
` diff --git a/src/plugins/modal/icons.js b/src/plugins/modal/icons.js index e26f45332..a4cb64805 100644 --- a/src/plugins/modal/icons.js +++ b/src/plugins/modal/icons.js @@ -3,9 +3,6 @@ import html from 'yo-yo' // https://css-tricks.com/creating-svg-icon-system-react/ export function defaultTabIcon () { - // return html` - // - // ` return html` @@ -54,14 +51,11 @@ export function uploadIcon () { } export function fileIcon (fileType) { - return html` - + return html` + diff --git a/src/scss/_dashboard.scss b/src/scss/_dashboard.scss index b9bca0e2c..915f34cd3 100644 --- a/src/scss/_dashboard.scss +++ b/src/scss/_dashboard.scss @@ -6,7 +6,7 @@ height: 100%; position: relative; padding: 0 20px; - padding-top: 40px; + padding-top: 50px; } .UppyDashboard-title { @@ -18,7 +18,7 @@ margin: 0; padding: 0; position: absolute; - top: 15px; + top: 18px; left: 0; width: 100%; text-align: center; @@ -33,18 +33,14 @@ padding: 0; overflow: scroll; height: 100%; - // position: absolute; - // top: 50px; - // bottom: 15px; - // right: 15px; - // left: 0; - // padding: 15px; } .UppyDashboardItem { list-style: none; margin: 0; width: 140px; + height: 200px; + overflow: hidden; float: left; padding-top: 20px; margin: 0 15px; @@ -53,13 +49,14 @@ } .UppyDashboardItem-icon { - width: 100px; - height: 100px; + width: 90px; + height: 90px; margin: auto; border-radius: 8px; overflow: hidden; - box-shadow: inset 0 0 0 1px rgba($color-black, 0.1); + // box-shadow: inset 0 0 0 1px rgba($color-black, 0.1); margin-bottom: 10px; + color: $color-orange; } .UppyDashboardItem-icon img { @@ -69,8 +66,8 @@ } .UppyDashboardItem-name { - font-size: 13px; - line-height: 1.4; + font-size: 12px; + line-height: 1.35; font-weight: bold; margin: 0; padding: 0; @@ -89,12 +86,13 @@ line-height: 1.45; font-weight: normal; color: $color-gray; + text-transform: uppercase; } .UppyDashboardItem-action { position: absolute; top: 10px; - right: -6px; + right: 0; } .UppyDashboardItem-remove { @@ -106,15 +104,18 @@ width: 85px; height: 4px; margin: auto; - background-color: lighten($color-cornflower-blue, 50%); position: absolute; - top: 100px; + top: 90px; left: 0; right: 0; border-radius: 8px; overflow: hidden; } +.UppyDashboardItem-progress.is-active { + background-color: lighten($color-cornflower-blue, 50%); +} + .UppyDashboardItem-progressInner { height: 4px; background-color: $color-cornflower-blue; diff --git a/src/scss/_modal.scss b/src/scss/_modal.scss index ddd3b843c..2f32e4ec5 100644 --- a/src/scss/_modal.scss +++ b/src/scss/_modal.scss @@ -39,7 +39,7 @@ .UppyModal-close { position: absolute; - top: 10px; + top: 15px; right: 15px; padding: 0; border: 0; @@ -136,14 +136,14 @@ position: absolute; top: 0; left: 0; - height: 40px; + height: 50px; width: 100%; border-bottom: 1px solid rgba($color-gray, 0.3); } .UppyModalContent-title { position: absolute; - top: 10px; + top: 15px; left: 0; right: 0; text-align: center; @@ -155,7 +155,7 @@ .UppyModalContent-back { @include reset-button; position: absolute; - top: 12px; + top: 17px; left: 15px; font-size: 14px; cursor: pointer; @@ -172,8 +172,8 @@ bottom: 0; left: 0; right: 0; - transform: translate3d(0, -105%, 0); - transition: all 0.5s; + transform: translateY(-105%); + transition: all 0.5s ease-in-out; background-color: darken($color-white, 4%); box-shadow: 0 0 10px 5px rgba($color-black, 0.15); padding: 15px; @@ -182,7 +182,7 @@ } .UppyModalContent-panel[aria-hidden=false] { - transform: translate3d(0, 0, 0); + transform: translateY(0); } // Progress bar placeholder diff --git a/src/scss/_variables.scss b/src/scss/_variables.scss index 4e31e0036..f35f375ba 100644 --- a/src/scss/_variables.scss +++ b/src/scss/_variables.scss @@ -5,6 +5,7 @@ $color-black: #000; $color-gray: #939393; $color-pink: #e02177; $color-green: #7AC824; +$color-orange: #F6A623; $color-white: #fff; $color-cornflower-blue: #4A90E2; $color-asphalt-gray: #525252;