add cancel buttons

This commit is contained in:
Emily 2018-07-31 15:19:18 -07:00
parent c9ae76b209
commit 4c64593262
9 changed files with 72 additions and 31 deletions

View File

@ -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 { .input {
border: 1px solid var(--lightBorderColor); border: 1px solid var(--lightBorderColor);
font-size: 20px; font-size: 20px;

View File

@ -228,7 +228,6 @@ export default function(state, emitter) {
state.storage.totalDownloads += 1; state.storage.totalDownloads += 1;
state.transfer.reset(); state.transfer.reset();
metrics.completedDownload({ size, time, speed }); metrics.completedDownload({ size, time, speed });
//emitter.emit('pushState', '/completed');
} catch (err) { } catch (err) {
if (err.message === '0') { if (err.message === '0') {
// download cancelled // download cancelled

View File

@ -5,9 +5,23 @@ const downloadedFiles = require('../../templates/uploadedFileList');
module.exports = function(state, emit) { module.exports = function(state, emit) {
const storageFile = state.storage.getFileById(state.params.id); const storageFile = state.storage.getFileById(state.params.id);
const multifiles = Array.from(storageFile.manifest.files); const multifiles = Array.from(storageFile.manifest.files);
const trySendLink = html`
<a class="link link--action" href="/">
${state.translate('sendYourFilesLink')}
</a>`;
const cancelButton = html`
<button class="btn--cancel"
onclick=${cancel}
>
${state.translate('downloadCancel')}
</button>
`;
const bottomLink =
state.transfer.state === 'downloading' ? cancelButton : trySendLink;
return html` return html`
<div class="page"> <div class="page">
${titleSection(state)} ${titleSection(state)}
@ -16,10 +30,14 @@ module.exports = function(state, emit) {
<div class="description">${state.translate('downloadMessage2')}</div> <div class="description">${state.translate('downloadMessage2')}</div>
${downloadButton(state, emit)} ${downloadButton(state, emit)}
<a class="link link--action" href="/"> ${bottomLink}
${state.translate('sendYourFilesLink')}
</a>
</div> </div>
`; `;
function cancel() {
if (state.transfer.state === 'downloading') {
emit('cancel');
}
}
}; };

View File

@ -57,11 +57,11 @@ module.exports = function(state, emit) {
)} )}
</div> </div>
<a <button
class="error btn--delete" class="btn--cancel btn--delete"
title="${state.translate('deleteFileButton')}" title="${state.translate('deleteFileButton')}"
onclick=${showPopup}>${state.translate('deleteFileButton')} onclick=${showPopup}>${state.translate('deleteFileButton')}
</a> </button>
</div> </div>

View File

@ -58,15 +58,10 @@
border-color: var(--successControlBGColor); border-color: var(--successControlBGColor);
} }
.copyBtn {
transition: background 0.5s;
}
.copyBtn--copied, .copyBtn--copied,
.copyBtn--copied:hover { .copyBtn--copied:hover {
background: var(--successControlBGColor); background: var(--successControlBGColor);
color: var(--successControlFGColor); color: var(--successControlFGColor);
transition: background 0s;
} }
.btn--delete { .btn--delete {

View File

@ -13,6 +13,7 @@ module.exports = function(state, emit) {
const optionClass = state.uploading ? 'uploadOptions--faded' : ''; const optionClass = state.uploading ? 'uploadOptions--faded' : '';
const btnUploading = state.uploading ? 'btn--stripes' : ''; const btnUploading = state.uploading ? 'btn--stripes' : '';
const cancelVisible = state.uploading ? '' : 'noDisplay';
const faded = files.length > 0 ? 'uploadArea--faded' : ''; const faded = files.length > 0 ? 'uploadArea--faded' : '';
const selectFileClass = files.length > 0 ? 'btn--hidden' : ''; const selectFileClass = files.length > 0 ? 'btn--hidden' : '';
const sendFileClass = files.length > 0 ? '' : 'btn--hidden'; const sendFileClass = files.length > 0 ? '' : 'btn--hidden';
@ -81,6 +82,11 @@ module.exports = function(state, emit) {
${btnText} ${btnText}
</button> </button>
<button class="btn--cancel uploadCancel ${cancelVisible}"
onclick=${cancel}>
${state.translate('uploadingPageCancel')}
</button>
</div> </div>
`; `;
@ -102,6 +108,14 @@ module.exports = function(state, emit) {
event.target.classList.remove('inputFile--focused'); 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) { async function addFiles(event) {
event.preventDefault(); event.preventDefault();
const target = event.target; const target = event.target;

View File

@ -87,3 +87,7 @@
opacity: 0.5; opacity: 0.5;
pointer-events: none; pointer-events: none;
} }
.uploadCancel {
margin: 6px 0 0;
}

View File

@ -4,14 +4,6 @@ const assets = require('../../../common/assets');
module.exports = function(state) { module.exports = function(state) {
const footer = html`<footer class="footer"> const footer = html`<footer class="footer">
<div class="legalSection"> <div class="legalSection">
<a
href="https://www.mozilla.org"
class="legalSection__link">
<img
class="legalSection__mozLogo"
src="${assets.get('mozilla-logo.svg')}"
alt="mozilla"/>
</a>
<a <a
href="https://www.mozilla.org/about/legal" href="https://www.mozilla.org/about/legal"
class="legalSection__link"> class="legalSection__link">
@ -38,6 +30,16 @@ module.exports = function(state) {
class="legalSection__link"> class="legalSection__link">
${state.translate('reportIPInfringement')} ${state.translate('reportIPInfringement')}
</a> </a>
<a
href="https://www.mozilla.org"
class="legalSection__link">
<img
class="legalSection__mozLogo"
src="${assets.get('mozilla-logo.svg')}"
alt="mozilla"/>
</a>
<a <a
href="https://github.com/mozilla/send" href="https://github.com/mozilla/send"
class="socialSection__link"> class="socialSection__link">
@ -50,9 +52,9 @@ module.exports = function(state) {
href="https://twitter.com/FxTestPilot" href="https://twitter.com/FxTestPilot"
class="socialSection__link"> class="socialSection__link">
<img <img
class="legalSection__mozLogo" class="socialSection__icon"
src="${assets.get('mozilla-logo.svg')}" src="${assets.get('twitter-icon.svg')}"
alt="mozilla"/> alt="twitter"/>
</a> </a>
</div> </div>
</footer>`; </footer>`;

View File

@ -6,23 +6,20 @@ const fileIcon = require('../fileIcon');
module.exports = function(file, state, emit) { module.exports = function(file, state, emit) {
const transfer = state.transfer; const transfer = state.transfer;
const transferState = transfer ? transfer.state : null; const transferState = transfer ? transfer.state : null;
const transferring = state.uploading || state.downloading;
const share = state.route.includes('share/'); const share = state.route.includes('share/');
const complete = share ? 'uploadedFile--completed' : ''; const complete = share ? 'uploadedFile--completed' : '';
const cancelVisible = const cancelVisible =
transferring || state.route === '/' ? 'uploadedFile__cancel--visible' : ''; state.route === '/' && !state.uploading
? 'uploadedFile__cancel--visible'
: '';
const stampClass = const stampClass =
share || transferState === 'complete' ? 'uploadedFile__stamp--visible' : ''; share || transferState === 'complete' ? 'uploadedFile__stamp--visible' : '';
function cancel(event) { function cancel(event) {
event.preventDefault(); event.preventDefault();
const btn = document.querySelector('.uploadedFile__cancel'); if (state.route === '/') {
btn.disabled = true;
if (transferring) {
emit('cancel');
} else if (state.route === '/') {
emit('removeUpload', { file }); emit('removeUpload', { file });
} }
} }