hook multifile to ui

app/templates/uploadedFile/index.js

@@ -0,0 +1,64 @@
+const html = require('choo/html');
+const assets = require('../../../common/assets');
+const bytes = require('../../utils').bytes;
+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' : '';
+
+  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 === '/') {
+      emit('removeUpload', { file });
+    }
+  }
+
+  //const percent = share ? 100 : Math.floor(progressRatio * 100);
+  /*
+    style="
+    background: linear-gradient(to right, 
+    #e8f2fe 0%, 
+    #e8f2fe ${percent}%,
+    #fff ${percent}%,
+    #fff 100%);"
+  */
+
+  return html`
+    <li class="uploadedFile ${complete}" id="${file.id}" 
+    >
+
+      ${fileIcon(file.name, file._hasPassword)}
+
+      <div class="uploadedFile__cancel ${cancelVisible}"
+      onclick=${cancel}>
+        <img
+        src="${assets.get('close-16.svg')}"
+        alt="cancel"/>
+      </div>
+
+      <div class="uploadedFile__fileData">
+        <p class="uploadedFile__fileName">${file.name}</p>
+        <p class="uploadedFile__fileInfo">
+          <span>${bytes(file.size)}</span>
+        </p>
+      </div>
+
+      <img src="${assets.get('sent-done.svg')}"
+           class="uploadedFile__stamp ${stampClass}"/> 
+    </li>
+  `;
+};

app/templates/uploadedFile/uploadedFile.css

@@ -0,0 +1,70 @@
+.uploadedFile {
+  margin: 11px;
+  list-style-type: none;
+  font-size: 11px;
+  line-height: 18px;
+  text-align: initial;
+  color: var(--lightTextColor);
+  background-color: var(--pageBGColor);
+  border: 1px solid #cececf;
+  box-sizing: border-box;
+  height: 53px;
+  border-radius: 4px;
+  position: relative;
+}
+
+.uploadedFile--completed {
+  background-color: #e8f2fe;
+}
+
+.uploadedFile__fileData {
+  margin: 8px 16px 8px 44px;
+}
+
+.uploadedFile__fileName {
+  margin: 0;
+  font-size: 13px;
+  font-weight: 500;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+}
+
+.uploadedFile__fileInfo {
+  margin: 0;
+}
+
+.uploadedFile__cancel {
+  float: right;
+  margin: 6px;
+  visibility: hidden;
+}
+
+.uploadedFile:hover .uploadedFile__cancel--visible {
+  visibility: visible;
+}
+
+.uploadedFile__stamp {
+  position: absolute;
+  top: -4px;
+  right: -8px;
+  visibility: hidden;
+  opacity: 0;
+}
+
+.uploadedFile__stamp--visible {
+  visibility: visible;
+  opacity: 1;
+  animation: stampDown 0.2s linear;
+}
+
+@keyframes stampDown {
+  0% {
+    opacity: 0;
+    transform: scale(1.5);
+  }
+
+  100% {
+    opacity: 1;
+  }
+}