add cancel buttons

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`
+    <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');
+    }
+  }
 };

app/pages/share/index.js

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

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 {

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}
     </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;

app/pages/welcome/welcome.css

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