feat: shared folder file listing

frontend/public/themes/dark.css

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

frontend/src/css/_share.css

@@ -1,29 +1,58 @@
-.share__box {
-  text-align: center;
-  box-shadow: rgba(0, 0, 0, 0.06) 0px 1px 3px, rgba(0, 0, 0, 0.12) 0px 1px 2px;
-  background: #fff;
-  display: block;
-  border-radius: 0.2em;
-  width: 90%;
-  max-width: 25em;
-  margin: 6em auto;
+.share {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  align-items: flex-start;
 }
 
-.share__box__download {
+@media (max-width: 736px) {
+  .share {
+    display: block;
+  }
+}
+
+.share__box {
+  box-shadow: rgba(0, 0, 0, 0.06) 0px 1px 3px, rgba(0, 0, 0, 0.12) 0px 1px 2px;
+  background: #fff;
+  border-radius: 0.2em;
+  margin: 5px;
+  overflow: hidden;
+}
+
+.share__box__header {
   width: 100%;
   padding: 1em;
   cursor: pointer;
   background: #ffffff;
-  color: rgba(0, 0, 0, 0.5);
-  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
+  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
 }
 
-.share__box__info {
+.share__box__body {
   padding: 2em 3em;
 }
 
 .share__box__title {
-  margin-top: .2em;
+  margin: 0 0 2em;
   overflow: hidden;
   text-overflow: ellipsis;
 }
+
+.share__box__info {
+  text-align: center;
+  flex: 1 1 auto;
+}
+
+.share__box__items {
+  text-align: left;
+  flex: 10 0 15em;
+}
+
+.share__box__items #listing.list .item {
+  cursor: auto;
+  border-left: 0;
+  border-right: 0;
+}
+
+.share__box__items #listing.list .item .name {
+  width: auto;
+}

frontend/src/views/Share.vue

@@ -1,10 +1,10 @@
 <template>
   <div class="share" v-if="loaded">
-    <a target="_blank" :href="link">
-      <div class="share__box">
-        <div class="share__box__download" v-if="file.isDir">{{ $t('download.downloadFolder') }}</div>
-        <div class="share__box__download" v-else>{{ $t('download.downloadFile') }}</div>
-        <div class="share__box__info">
+    <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"/>
@@ -16,8 +16,30 @@
           <h1 class="share__box__title">{{ file.name }}</h1>
           <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 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>
+          </div>
+
+          <div>
+            <p class="name">{{ item.name }}</p>
+          </div>
+        </div>
+        <div v-if="file.items.length > showLimit" class="item">
+          <div>
+            <p class="name"> + {{ file.items.length - showLimit }} </p>
+          </div>
+        </div>
       </div>
-    </a>
+    </div>
   </div>
 </template>
 
@@ -34,7 +56,8 @@ export default {
   data: () => ({
     loaded: false,
     notFound: false,
-    file: null
+    file: null,
+    showLimit: 500
   }),
   watch: {
     '$route': 'fetchData'
@@ -54,6 +77,9 @@ export default {
     },
   },
   methods: {
+    base64: function (name) {
+      return window.btoa(unescape(encodeURIComponent(name)))
+    },
     fetchData: async function () {
       try {
         this.file = await api.getHash(this.hash)

http/public.go

@@ -28,7 +28,7 @@ var withHashFile = func(fn handleFunc) handleFunc {
 			Fs:      d.user.Fs,
 			Path:    link.Path,
 			Modify:  d.user.Perm.Modify,
-			Expand:  false,
+			Expand:  true,
 			Checker: d,
 		})
 		if err != nil {
@@ -54,7 +54,15 @@ func ifPathWithName(r *http.Request) string {
 }
 
 var publicShareHandler = withHashFile(func(w http.ResponseWriter, r *http.Request, d *data) (int, error) {
-	return renderJSON(w, r, d.raw)
+	file := d.raw.(*files.FileInfo)
+
+	if file.IsDir {
+		file.Listing.Sorting = files.Sorting{By: "name", Asc: false}
+		file.Listing.ApplySort()
+		return renderJSON(w, r, file)
+	}
+
+	return renderJSON(w, r, file)
 })
 
 var publicDlHandler = withHashFile(func(w http.ResponseWriter, r *http.Request, d *data) (int, error) {