feat: shared item information

frontend/public/themes/dark.css

@@ -191,10 +191,11 @@ table th {
   }
 }
 
-.share__box, .share__box__header {
+.share__box {
   background: var(--surfacePrimary) !important;
   color: var(--textPrimary);
 }
-.share__box__header {
-  border-bottom-color: var(--divider);
+
+.share__box__element {
+  border-top-color: var(--divider);
 }

frontend/src/css/_share.css

@@ -20,37 +20,40 @@
 }
 
 .share__box__header {
-  width: 100%;
   padding: 1em;
-  cursor: pointer;
-  background: #ffffff;
-  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+  text-align: center;
 }
 
-.share__box__body {
-  padding: 2em 3em;
+.share__box__icon i {
+  font-size: 10em;
+  color: #40c4ff;
 }
 
-.share__box__title {
-  margin: 0 0 2em;
-  overflow: hidden;
-  text-overflow: ellipsis;
+.share__box__center {
+  text-align: center;
 }
 
 .share__box__info {
-  text-align: center;
   flex: 1 1 auto;
 }
 
+.share__box__element {
+  padding: 1em;
+  border-top: 1px solid rgba(0, 0, 0, 0.1);
+  word-break: break-all;
+}
+
 .share__box__items {
   text-align: left;
-  flex: 10 0 15em;
+  flex: 10 0 25em;
 }
 
 .share__box__items #listing.list .item {
   cursor: auto;
   border-left: 0;
   border-right: 0;
+  border-bottom: 0;
+  border-top: 1px solid rgba(0, 0, 0, 0.1);
 }
 
 .share__box__items #listing.list .item .name {

frontend/src/views/Share.vue

@@ -1,34 +1,37 @@
 <template>
   <div class="share" v-if="loaded">
     <div class="share__box share__box__info">
-      <a target="_blank" :href="link">
-        <div class="share__box__header" v-if="file.isDir">{{ $t('download.downloadFolder') }}</div>
-        <div class="share__box__header" v-else>{{ $t('download.downloadFile') }}</div>
-        <div class="share__box__body">
-          <svg v-if="file.isDir" fill="#40c4ff" height="150" viewBox="0 0 24 24" width="150" xmlns="http://www.w3.org/2000/svg">
-            <path d="M10 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2h-8l-2-2z"/>
-            <path d="M0 0h24v24H0z" fill="none"/>
-          </svg>
-          <svg v-else fill="#40c4ff" height="150" viewBox="0 0 24 24" width="150" xmlns="http://www.w3.org/2000/svg">
-            <path d="M6 2c-1.1 0-1.99.9-1.99 2L4 20c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6H6zm7 7V3.5L18.5 9H13z"/>
-            <path d="M0 0h24v24H0z" fill="none"/>
-          </svg>
-          <h1 class="share__box__title">{{ file.name }}</h1>
+        <div class="share__box__header">
+          {{ file.isDir ? $t('download.downloadFolder') : $t('download.downloadFile') }}
+        </div>
+        <div class="share__box__element share__box__center share__box__icon">
+          <i class="material-icons">{{ file.isDir ? 'folder' : 'insert_drive_file'}}</i>
+        </div>
+        <div class="share__box__element">
+          <strong>{{ $t('prompts.displayName') }}</strong> {{ file.name }}
+        </div>
+        <div class="share__box__element">
+          <strong>{{ $t('prompts.lastModified') }}:</strong> {{ humanTime }}
+        </div>
+        <div class="share__box__element">
+          <strong>{{ $t('prompts.size') }}:</strong> {{ humanSize }}
+        </div>
+        <div class="share__box__element share__box__center">
+          <a target="_blank" :href="link" class="button button--flat">{{ $t('buttons.download') }}</a>
+        </div>
+        <div class="share__box__element share__box__center">
           <qrcode-vue :value="fullLink" size="200" level="M"></qrcode-vue>
         </div>
-      </a>
     </div>
     <div v-if="file.isDir" class="share__box share__box__items">
-      <div class="share__box__header" v-if="file.isDir">{{ $t('files.files') }}</div>
-
+      <div class="share__box__header" v-if="file.isDir">
+        {{ $t('files.files') }}
+      </div>
       <div id="listing" class="list">
         <div class="item" v-for="(item) in file.items.slice(0, this.showLimit)" :key="base64(item.name)">
           <div>
-            <i v-if="item.isDir" class="material-icons">folder</i>
-            <i v-else-if="item.type==='image'" class="material-icons">insert_photo</i>
-            <i v-else class="material-icons">insert_drive_file</i>
+            <i class="material-icons">{{ item.isDir ? 'folder' : (item.type==='image') ? 'insert_photo' : 'insert_drive_file' }}</i>
           </div>
-
           <div>
             <p class="name">{{ item.name }}</p>
           </div>
@@ -46,6 +49,8 @@
 <script>
 import { share as api } from '@/api'
 import { baseURL } from '@/utils/constants'
+import filesize from 'filesize'
+import moment from 'moment'
 import QrcodeVue from 'qrcode.vue'
 
 export default {
@@ -75,6 +80,16 @@ export default {
     fullLink: function () {
       return window.location.origin + this.link
     },
+    humanSize: function () {
+      if (this.file.isDir) {
+        return this.file.items.length
+      }
+
+      return filesize(this.file.size)
+    },
+    humanTime: function () {
+      return moment(this.file.modified).fromNow()
+    }
   },
   methods: {
     base64: function (name) {