From 4c64593262ae2e41509863dfa81d040525cd32bd Mon Sep 17 00:00:00 2001 From: Emily Date: Tue, 31 Jul 2018 15:19:18 -0700 Subject: [PATCH] add cancel buttons --- app/base.css | 12 ++++++++++++ app/fileManager.js | 1 - app/pages/preview/index.js | 26 ++++++++++++++++++++++---- app/pages/share/index.js | 6 +++--- app/pages/share/share.css | 5 ----- app/pages/welcome/index.js | 14 ++++++++++++++ app/pages/welcome/welcome.css | 4 ++++ app/templates/footer/index.js | 24 +++++++++++++----------- app/templates/uploadedFile/index.js | 11 ++++------- 9 files changed, 72 insertions(+), 31 deletions(-) diff --git a/app/base.css b/app/base.css index 8a41b893..7a1bed43 100644 --- a/app/base.css +++ b/app/base.css @@ -139,6 +139,18 @@ a { } } +.btn--cancel { + font-size: 13px; + font-weight: 700; + background: none; + color: var(--errorColor); + border: none; +} + +.uploadCancel:hover { + text-decoration: underline; +} + .input { border: 1px solid var(--lightBorderColor); font-size: 20px; diff --git a/app/fileManager.js b/app/fileManager.js index d8bfbfdb..e66269c1 100644 --- a/app/fileManager.js +++ b/app/fileManager.js @@ -228,7 +228,6 @@ export default function(state, emitter) { state.storage.totalDownloads += 1; state.transfer.reset(); metrics.completedDownload({ size, time, speed }); - //emitter.emit('pushState', '/completed'); } catch (err) { if (err.message === '0') { // download cancelled diff --git a/app/pages/preview/index.js b/app/pages/preview/index.js index d86fb1b1..15951cf8 100644 --- a/app/pages/preview/index.js +++ b/app/pages/preview/index.js @@ -5,9 +5,23 @@ const downloadedFiles = require('../../templates/uploadedFileList'); module.exports = function(state, emit) { const storageFile = state.storage.getFileById(state.params.id); - const multifiles = Array.from(storageFile.manifest.files); + const trySendLink = html` + + ${state.translate('sendYourFilesLink')} + `; + const cancelButton = html` + + `; + + const bottomLink = + state.transfer.state === 'downloading' ? cancelButton : trySendLink; + return html`
${titleSection(state)} @@ -16,10 +30,14 @@ module.exports = function(state, emit) {
${state.translate('downloadMessage2')}
${downloadButton(state, emit)} - - ${state.translate('sendYourFilesLink')} - + ${bottomLink}
`; + + function cancel() { + if (state.transfer.state === 'downloading') { + emit('cancel'); + } + } }; diff --git a/app/pages/share/index.js b/app/pages/share/index.js index ba9b8b71..96718ae8 100644 --- a/app/pages/share/index.js +++ b/app/pages/share/index.js @@ -57,11 +57,11 @@ module.exports = function(state, emit) { )} - ${state.translate('deleteFileButton')} - + diff --git a/app/pages/share/share.css b/app/pages/share/share.css index 7c03bcd5..2ad3f468 100644 --- a/app/pages/share/share.css +++ b/app/pages/share/share.css @@ -58,15 +58,10 @@ border-color: var(--successControlBGColor); } -.copyBtn { - transition: background 0.5s; -} - .copyBtn--copied, .copyBtn--copied:hover { background: var(--successControlBGColor); color: var(--successControlFGColor); - transition: background 0s; } .btn--delete { diff --git a/app/pages/welcome/index.js b/app/pages/welcome/index.js index 3f143ba5..2a9d98ad 100644 --- a/app/pages/welcome/index.js +++ b/app/pages/welcome/index.js @@ -13,6 +13,7 @@ module.exports = function(state, emit) { const optionClass = state.uploading ? 'uploadOptions--faded' : ''; const btnUploading = state.uploading ? 'btn--stripes' : ''; + const cancelVisible = state.uploading ? '' : 'noDisplay'; const faded = files.length > 0 ? 'uploadArea--faded' : ''; const selectFileClass = files.length > 0 ? 'btn--hidden' : ''; const sendFileClass = files.length > 0 ? '' : 'btn--hidden'; @@ -81,6 +82,11 @@ module.exports = function(state, emit) { ${btnText} + + `; @@ -102,6 +108,14 @@ module.exports = function(state, emit) { event.target.classList.remove('inputFile--focused'); } + function cancel(event) { + if (state.uploading) { + emit('cancel'); + const cancelBtn = document.querySelector('.uploadCancel'); + cancelBtn.innerHTML = state.translate('uploadCancelNotification'); + } + } + async function addFiles(event) { event.preventDefault(); const target = event.target; diff --git a/app/pages/welcome/welcome.css b/app/pages/welcome/welcome.css index 5e2b5ac3..5da03247 100644 --- a/app/pages/welcome/welcome.css +++ b/app/pages/welcome/welcome.css @@ -87,3 +87,7 @@ opacity: 0.5; pointer-events: none; } + +.uploadCancel { + margin: 6px 0 0; +} diff --git a/app/templates/footer/index.js b/app/templates/footer/index.js index e3170c46..6e70e63a 100644 --- a/app/templates/footer/index.js +++ b/app/templates/footer/index.js @@ -4,14 +4,6 @@ const assets = require('../../../common/assets'); module.exports = function(state) { const footer = html``; diff --git a/app/templates/uploadedFile/index.js b/app/templates/uploadedFile/index.js index 7fc65ccf..08618370 100644 --- a/app/templates/uploadedFile/index.js +++ b/app/templates/uploadedFile/index.js @@ -6,23 +6,20 @@ const fileIcon = require('../fileIcon'); module.exports = function(file, state, emit) { const transfer = state.transfer; const transferState = transfer ? transfer.state : null; - const transferring = state.uploading || state.downloading; const share = state.route.includes('share/'); const complete = share ? 'uploadedFile--completed' : ''; const cancelVisible = - transferring || state.route === '/' ? 'uploadedFile__cancel--visible' : ''; + state.route === '/' && !state.uploading + ? 'uploadedFile__cancel--visible' + : ''; const stampClass = share || transferState === 'complete' ? 'uploadedFile__stamp--visible' : ''; function cancel(event) { event.preventDefault(); - const btn = document.querySelector('.uploadedFile__cancel'); - btn.disabled = true; - if (transferring) { - emit('cancel'); - } else if (state.route === '/') { + if (state.route === '/') { emit('removeUpload', { file }); } }