Show preview drawer instead of directly opening files in a new tab

frontend/css/style.css

@@ -89,6 +89,10 @@ a:hover, a:focus {
     transition: background-color .1s ease;
     transition: background-color .1s ease;
 }
 }
 
 
+.el-drawer__header {
+    margin-bottom: 10px;
+}
+
 /* welcome and 404 page */
 /* welcome and 404 page */
 .container-center {
 .container-center {
     display: flex;
     display: flex;

frontend/index.html

@@ -121,6 +121,18 @@
       </center>
       </center>
     </div>
     </div>
 
 
+    <el-drawer :title="activeEntry.filePath":with-header="false" :visible.sync="previewDrawerVisible" direction="rtl" size="50%">
+      <div style="display: flex; flex-direction: column; height: 100%;">
+        <iframe :src="activeEntry.fullPath" style="width: 100%; height: 100%; border: none; margin: 10px;"></iframe>
+        <center>
+          <el-button size="small" icon="el-icon-download" style="margin: 10px;" @click.stop="onDownload(activeEntry)">Download</el-button>
+          <a :href="activeEntry.fullPath" target="_blank">
+            <el-button size="small" icon="el-icon-link" style="margin: 10px;">Open</el-button>
+          </a>
+        </center>
+      </div>
+    </el-drawer>
+
   </el-main>
   </el-main>
   <el-footer v-show="uploadStatus.busy">
   <el-footer v-show="uploadStatus.busy">
     <el-row v-if="uploadStatus.uploadListCount">
     <el-row v-if="uploadStatus.uploadListCount">

frontend/js/app.js

@@ -146,7 +146,11 @@ function open(row, column, event) {
         return;
         return;
     }
     }
 
 
-    window.open(encode(path));
+    app.activeEntry = row;
+    app.activeEntry.fullPath = encode(sanitize(app.path + '/' + row.filePath));
+    app.previewDrawerVisible = true
+
+    // window.open(encode(path));
 }
 }
 
 
 function uploadFiles(files) {
 function uploadFiles(files) {
@@ -280,6 +284,8 @@ var app = new Vue({
             password: '',
             password: '',
             busy: false
             busy: false
         },
         },
+        previewDrawerVisible: false,
+        activeEntry: {},
         entries: [],
         entries: [],
         accessTokens: [],
         accessTokens: [],
         accessTokensDialogVisible: false
         accessTokensDialogVisible: false