hook multifile to ui

app/templates/file/file.css

@@ -1,26 +1,94 @@
-.fileData {
-  font-size: 15px;
-  vertical-align: top;
-  color: var(--lightTextColor);
-  padding: 17px 19px 0;
-  line-height: 23px;
-  position: relative;
-}
-
-.fileData--overflow {
-  text-overflow: ellipsis;
-  max-width: 0;
+.fileToast {
+  margin: 13px 0 0;
   overflow: hidden;
+  font-size: 11px;
+  line-height: 18px;
+  color: var(--lightTextColor);
+  background-color: var(--pageBGColor);
+  position: relative;
+  box-shadow: 0 0 0 3px rgba(12, 12, 12, 0.2);
+  box-sizing: border-box;
+  height: 53px;
+  border-radius: 4px;
+}
+
+.fileToast__content {
+  position: relative;
+  z-index: 2;
+}
+
+.fileToast::after {
+  position: absolute;
+  z-index: 1;
+  content: '';
+  transition: all 0.25s;
+  top: 0;
+  left: 50%;
+  width: 0;
+  height: 100%;
+  background-color: var(--primaryControlBGColor);
+}
+
+.fileToast:hover {
+  background-color: #eee;
+}
+
+.fileToast--active {
+  color: var(--primaryControlFGColor);
+}
+
+.fileToast--active::after {
+  left: 0%;
+  width: 100%;
+}
+
+.fileData {
+  margin: 8px 16px 8px 44px;
+  overflow: hidden;
+}
+
+.fileName {
+  margin: 0;
+  font-size: 13px;
+  font-weight: 500;
   white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
 }
 
-.fileData--center {
-  text-align: center;
+.fileInfo {
+  margin: 0;
 }
 
-@media (max-device-width: 520px), (max-width: 520px) {
+.fileToast .fileIcon {
+  margin: 2px 8px;
+}
+
+@media (max-device-width: 750px), (max-width: 750px) {
+  .fileToast {
+    height: 32px;
+    width: 400px;
+  }
+
+  .fileToast__content {
+    display: flex;
+  }
+
   .fileData {
-    font-size: 13px;
-    padding: 17px 5px 0;
+    flex: auto;
+    display: flex;
+    flex-wrap: nowrap;
+    margin-left: 8px;
+  }
+
+  .fileInfo {
+    flex-shrink: 0;
+    margin-left: auto;
+  }
+
+  .fileToast .fileIcon {
+    margin: 0;
+    transform: scale(0.5);
+    color: transparent;
   }
 }

app/templates/file/index.js

@@ -1,73 +1,50 @@
 const html = require('choo/html');
-const assets = require('../../../common/assets');
 const number = require('../../utils').number;
-const deletePopup = require('../popup');
+const bytes = require('../../utils').bytes;
+const fileIcon = require('../fileIcon');
 
-module.exports = function(file, state, emit) {
+module.exports = function(file, state) {
   const ttl = file.expiresAt - Date.now();
   const remainingTime =
     timeLeft(ttl, state) || state.translate('linkExpiredAlt');
   const downloadLimit = file.dlimit || 1;
   const totalDownloads = file.dtotal || 0;
+
+  const multiFiles = file.manifest.files;
+  const fileName =
+    multiFiles.length > 1
+      ? `${multiFiles[0].name} + ${state.translate('fileCount', {
+          num: multiFiles.length - 1
+        })}`
+      : file.name;
+
+  const activeClass = isOnSharePage() ? 'fileToast--active' : '';
   return html`
-  <tr id="${file.id}">
-    <td class="fileData fileData--overflow" title="${file.name}">
-      <a class="link" href="/share/${file.id}">${file.name}</a>
-    </td>
-    <td class="fileData fileData--center">
-      <img
-        onclick=${copyClick}
-        src="${assets.get('copy-16.svg')}"
-        class="cursor--pointer"
-        title="${state.translate('copyUrlHover')}"
-        tabindex="0">
-      <span hidden="true">
-        ${state.translate('copiedUrl')}
-      </span>
-    </td>
-    <td class="fileData fileData--overflow">${remainingTime}</td>
-    <td class="fileData fileData--center">${number(totalDownloads)} / ${number(
-    downloadLimit
-  )}</td>
-    <td class="fileData fileData--center">
-      <img
-        onclick=${showPopup}
-        src="${assets.get('close-16.svg')}"
-        class="cursor--pointer"
-        title="${state.translate('deleteButtonHover')}"
-        tabindex="0">
-      ${deletePopup(
-        state.translate('deletePopupText'),
-        state.translate('deletePopupYes'),
-        state.translate('deletePopupCancel'),
-        deleteFile
-      )}
-    </td>
-  </tr>
+  <a href=${toastClick()}>
+    <li class="fileToast ${activeClass}" id="${file.id}">
+      <div class="fileToast__content">
+        ${fileIcon(file.name, file._hasPassword)}
+        <div class="fileData">
+          <p class="fileName">${fileName}</p>
+          <p class="fileInfo">
+            <span>${bytes(file.size)}</span> · 
+            <span>${state.translate('downloadCount', {
+              num: `${number(totalDownloads)} / ${number(downloadLimit)}`
+            })}</span>
+            <span>${remainingTime}</span>
+          </p>
+        </div>
+      </div>
+    </li>
+  </a>
   `;
 
-  function copyClick(e) {
-    emit('copy', { url: file.url, location: 'upload-list' });
-    const icon = e.target;
-    const text = e.target.nextSibling;
-    icon.hidden = true;
-    text.hidden = false;
-    setTimeout(() => {
-      icon.hidden = false;
-      text.hidden = true;
-    }, 500);
+  function toastClick() {
+    return isOnSharePage() ? '/' : `/share/${file.id}`;
   }
 
-  function showPopup() {
-    const tr = document.getElementById(file.id);
-    const popup = tr.querySelector('.popup');
-    popup.classList.add('popup--show');
-    popup.focus();
-  }
-
-  function deleteFile() {
-    emit('delete', { file, location: 'upload-list' });
-    emit('render');
+  function isOnSharePage() {
+    return state.href.includes('/share/') && state.params.id === file.id;
   }
 };