From 8ee4d63622cb8ca70b1e77b582d9ae255c2ce43c Mon Sep 17 00:00:00 2001
From: kouassives <kouassives@gmail.com>
Date: Fri, 1 Dec 2023 11:41:46 +0100
Subject: [PATCH] Open file preview in new windows

---
 frontend/src/components/files/ListingItem.vue | 70 ++++++++++---------
 frontend/src/views/files/Preview.vue          |  5 +-
 2 files changed, 39 insertions(+), 36 deletions(-)

diff --git a/frontend/src/components/files/ListingItem.vue b/frontend/src/components/files/ListingItem.vue
index 71813bcf..42a39896 100644
--- a/frontend/src/components/files/ListingItem.vue
+++ b/frontend/src/components/files/ListingItem.vue
@@ -1,37 +1,37 @@
 <template>
-  <div
-    class="item"
-    role="button"
-    tabindex="0"
-    :draggable="isDraggable"
-    @dragstart="dragStart"
-    @dragover="dragOver"
-    @drop="drop"
-    @click="itemClick"
-    :data-dir="isDir"
-    :data-type="type"
-    :aria-label="name"
-    :aria-selected="isSelected"
-  >
-    <div>
-      <img
-        v-if="readOnly == undefined && type === 'image' && isThumbsEnabled"
-        v-lazy="thumbnailUrl"
-      />
-      <i v-else class="material-icons"></i>
+    <div
+      class="item"
+      role="button"
+      tabindex="0"
+      :draggable="isDraggable"
+      @dragstart="dragStart"
+      @dragover="dragOver"
+      @drop="drop"
+      @click="itemClick"
+      :data-dir="isDir"
+      :data-type="type"
+      :aria-label="name"
+      :aria-selected="isSelected"
+    >
+      <div>
+        <img
+          v-if="readOnly == undefined && type === 'image' && isThumbsEnabled"
+          v-lazy="thumbnailUrl"
+        />
+        <i v-else class="material-icons"></i>
+      </div>
+
+      <div>
+        <p class="name">{{ name }}</p>
+
+        <p v-if="isDir" class="size" data-order="-1">&mdash;</p>
+        <p v-else class="size" :data-order="humanSize()">{{ humanSize() }}</p>
+
+        <p class="modified">
+          <time :datetime="modified">{{ humanTime() }}</time>
+        </p>
+      </div>
     </div>
-
-    <div>
-      <p class="name">{{ name }}</p>
-
-      <p v-if="isDir" class="size" data-order="-1">&mdash;</p>
-      <p v-else class="size" :data-order="humanSize()">{{ humanSize() }}</p>
-
-      <p class="modified">
-        <time :datetime="modified">{{ humanTime() }}</time>
-      </p>
-    </div>
-  </div>
 </template>
 
 <script>
@@ -242,8 +242,10 @@ export default {
       this.addSelected(this.index);
     },
     open: function () {
-      this.$router.push({ path: this.url });
-    },
+      // this.$router.push({ path: this.url });
+      const routeData = this.$router.resolve({ path: this.url });
+      window.open(routeData.href);
+    }
   },
 };
 </script>
diff --git a/frontend/src/views/files/Preview.vue b/frontend/src/views/files/Preview.vue
index 6422ac5a..b3eb5af1 100644
--- a/frontend/src/views/files/Preview.vue
+++ b/frontend/src/views/files/Preview.vue
@@ -344,8 +344,9 @@ export default {
     close() {
       this.$store.commit("updateRequest", {});
 
-      let uri = url.removeLastDir(this.$route.path) + "/";
-      this.$router.push({ path: uri });
+      // let uri = url.removeLastDir(this.$route.path) + "/";
+      // this.$router.push({ path: uri });
+      window.close();
     },
     download() {
       window.open(this.downloadUrl);