feat: download shared subdirectory (#1184)

Co-authored-by: Oleg Lobanov <oleg@lobanov.me>

frontend/src/components/Header.vue

@@ -8,8 +8,8 @@
       <search v-if="isLogged"></search>
     </div>
     <div>
-      <template v-if="isLogged">
-        <button @click="openSearch" :aria-label="$t('buttons.search')" :title="$t('buttons.search')" class="search-button action">
+      <template v-if="isLogged || isSharing">
+        <button v-show="!isSharing" @click="openSearch" :aria-label="$t('buttons.search')" :title="$t('buttons.search')" class="search-button action">
           <i class="material-icons">search</i>
         </button>
 
@@ -18,7 +18,7 @@
         </button>
 
         <!-- Menu that shows on listing AND mobile when there are files selected -->
-        <div id="file-selection" v-if="isMobile && isListing">
+        <div id="file-selection" v-if="isMobile && isListing && !isSharing">
           <span v-if="selectedCount > 0">{{ selectedCount }} selected</span>
           <share-button v-show="showShareButton"></share-button>
           <rename-button v-show="showRenameButton"></rename-button>
@@ -37,13 +37,13 @@
             <delete-button v-show="showDeleteButton"></delete-button>
           </div>
 
-          <shell-button v-if="isExecEnabled && user.perm.execute" />
+          <shell-button v-if="isExecEnabled && !isSharing && user.perm.execute" />
           <switch-button v-show="isListing"></switch-button>
           <download-button v-show="showDownloadButton"></download-button>
           <upload-button v-show="showUpload"></upload-button>
           <info-button v-show="isFiles"></info-button>
 
-          <button v-show="isListing" @click="toggleMultipleSelection" :aria-label="$t('buttons.selectMultiple')" :title="$t('buttons.selectMultiple')" class="action" >
+          <button v-show="isListing || (isSharing && req.isDir)" @click="toggleMultipleSelection" :aria-label="$t('buttons.selectMultiple')" :title="$t('buttons.selectMultiple')" class="action" >
             <i class="material-icons">check_circle</i>
             <span>{{ $t('buttons.select') }}</span>
           </button>
@@ -110,7 +110,8 @@ export default {
       'isEditor',
       'isPreview',
       'isListing',
-      'isLogged'
+      'isLogged',
+      'isSharing'
     ]),
     ...mapState([
       'req',
@@ -128,7 +129,7 @@ export default {
       return this.isListing && this.user.perm.create
     },
     showDownloadButton () {
-      return this.isFiles && this.user.perm.download
+      return (this.isFiles && this.user.perm.download) || (this.isSharing && this.selectedCount > 0)
     },
     showDeleteButton () {
       return this.isFiles && (this.isListing
@@ -156,7 +157,7 @@ export default {
         : this.user.perm.create)
     },
     showMore () {
-      return this.isFiles && this.$store.state.show === 'more'
+      return (this.isFiles || this.isSharing) && this.$store.state.show === 'more'
     },
     showOverlay () {
       return this.showMore

frontend/src/components/buttons/Download.vue

@@ -14,11 +14,11 @@ export default {
   name: 'download-button',
   computed: {
     ...mapState(['req', 'selected']),
-    ...mapGetters(['isListing', 'selectedCount'])
+    ...mapGetters(['isListing', 'selectedCount', 'isSharing'])
   },
   methods: {
     download: function () {
-      if (!this.isListing) {
+      if (!this.isListing && !this.isSharing) {
         api.download(null, this.$route.path)
         return
       }

frontend/src/components/files/ListingItem.vue

@@ -13,7 +13,7 @@
   :aria-label="name"
   :aria-selected="isSelected">
     <div>
-      <img v-if="type==='image' && isThumbsEnabled" v-lazy="thumbnailUrl">
+      <img v-if="type==='image' && isThumbsEnabled && !isSharing" v-lazy="thumbnailUrl">
       <i v-else class="material-icons">{{ icon }}</i>
     </div>
 
@@ -47,8 +47,12 @@ export default {
   },
   props: ['name', 'isDir', 'url', 'type', 'size', 'modified', 'index'],
   computed: {
-    ...mapState(['user', 'selected', 'req', 'user', 'jwt']),
-    ...mapGetters(['selectedCount']),
+    ...mapState(['user', 'selected', 'req', 'jwt']),
+    ...mapGetters(['selectedCount', 'isSharing']),
+    singleClick () {
+      if (this.isSharing) return false
+      return this.user.singleClick
+    },
     isSelected () {
       return (this.selected.indexOf(this.index) !== -1)
     },
@@ -60,10 +64,10 @@ export default {
       return 'insert_drive_file'
     },
     isDraggable () {
-      return this.user.perm.rename
+      return !this.isSharing && this.user.perm.rename
     },
     canDrop () {
-      if (!this.isDir) return false
+      if (!this.isDir || this.isSharing) return false
 
       for (let i of this.selected) {
         if (this.req.items[i].url === this.url) {
@@ -171,11 +175,11 @@ export default {
       action(overwrite, rename)
     },
     itemClick: function(event) {
-      if (this.user.singleClick && !this.$store.state.multiple) this.open()
+      if (this.singleClick && !this.$store.state.multiple) this.open()
       else this.click(event)
     },
     click: function (event) {
-      if (!this.user.singleClick && this.selectedCount !== 0) event.preventDefault()
+      if (!this.singleClick && this.selectedCount !== 0) event.preventDefault()
       if (this.$store.state.selected.indexOf(this.index) !== -1) {
         this.removeSelected(this.index)
         return
@@ -202,11 +206,11 @@ export default {
         return
       }
 
-      if (!this.user.singleClick && !event.ctrlKey && !event.metaKey && !this.$store.state.multiple) this.resetSelected()
+      if (!this.singleClick && !event.ctrlKey && !event.metaKey && !this.$store.state.multiple) this.resetSelected()
       this.addSelected(this.index)
     },
     dblclick: function () {
-      if (!this.user.singleClick) this.open()
+      if (!this.singleClick) this.open()
     },
     touchstart () {
       setTimeout(() => {