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

[perso/Immae/Projets/Nodejs/Surfer.git] / frontend / index.html

diff --git a/frontend/index.html b/frontend/index.html
index 206a23cc02e2b43f34c79087f6832932fe278e35..41b474957716cef80e1d03cc5dce2f04fbe85c3c 100644 (file)
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -99,7 +99,7 @@
         <el-table :data="entries" style="max-width: 1280px;width: 100%" height="100%" empty-text="Folder is emtpy" :default-sort="{ prop: 'filePath', order: 'descending' }" @row-click="open">
           <el-table-column prop="previewUrl" label="Type" width="100px" sortable>
             <template slot-scope="scope">
-              <img v-bind:src="scope.row.previewUrl" class="list-icon" height="32px" width="32px" style="object-fit: cover;"/>
+              <el-image v-bind:src="scope.row.previewUrl" class="list-icon" style="width: 32px; height: 32px" fit="cover"></el-image>
             </template>
           </el-table-column>
           <el-table-column prop="filePath" label="Name" sortable>
@@ -121,6 +121,18 @@
       </center>
     </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-footer v-show="uploadStatus.busy">
     <el-row v-if="uploadStatus.uploadListCount">