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

View File

@ -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

View File

@ -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`
<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`
<div class="page">
${titleSection(state)}
@ -16,10 +30,14 @@ module.exports = function(state, emit) {
<div class="description">${state.translate('downloadMessage2')}</div>
${downloadButton(state, emit)}
<a class="link link--action" href="/">
${state.translate('sendYourFilesLink')}
</a>
${bottomLink}
</div>
`;
function cancel() {
if (state.transfer.state === 'downloading') {
emit('cancel');
}
}
};

View File

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

View File

@ -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 {

View File

@ -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}
</button>
<button class="btn--cancel uploadCancel ${cancelVisible}"
onclick=${cancel}>
${state.translate('uploadingPageCancel')}
</button>
</div>
`;
@ -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;

View File

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

View File

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

View File

@ -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 });
}
}