From a5f26def08e100bf74e90d09298ad81e9224e249 Mon Sep 17 00:00:00 2001
From: Marvin Borner
Date: Sun, 21 Apr 2019 18:34:48 +0200
Subject: Added download button

Co-authored-by: LarsVomMars <lars@kroenner.eu>
---
 src/main/resources/css/files.css           | 32 ++++++++++++++++++++------
 src/main/resources/js/files.js             | 17 +++++++++++++-
 src/main/resources/views/files.rocker.html | 37 +++++++++++++++++++++++++-----
 3 files changed, 72 insertions(+), 14 deletions(-)

(limited to 'src/main/resources')

diff --git a/src/main/resources/css/files.css b/src/main/resources/css/files.css
index 5af9ec8..d0be48e 100644
--- a/src/main/resources/css/files.css
+++ b/src/main/resources/css/files.css
@@ -46,7 +46,7 @@ colgroup col:nth-child(1) {
 }
 
 colgroup col:nth-child(2) {
-    width: 35%;
+    width: 25%;
 }
 
 colgroup col:nth-child(3) {
@@ -65,13 +65,17 @@ colgroup col:nth-child(6) {
     width: 10%;
 }
 
+colgroup col:nth-child(7) {
+    width: 10%;
+}
+
 .drop {
     padding: 8px;
     min-height: calc(100vh - 16px);
     z-index: -1;
 }
 
-.delete {
+.share {
     font-size: 20px;
     background-color: inherit;
     border: 0;
@@ -79,20 +83,34 @@ colgroup col:nth-child(6) {
     cursor: pointer;
 }
 
-.delete:hover {
+.share:hover {
     transform: scale(1.3);
-    color: red;
+    color: dodgerblue;
 }
 
-.share {
+.download, .downloadButton {
     font-size: 20px;
+    color: inherit;
     background-color: inherit;
     border: 0;
     z-index: 100;
     cursor: pointer;
 }
 
-.share:hover {
+.downloadButton:hover {
     transform: scale(1.3);
-    color: dodgerblue;
+    color: green;
+}
+
+.delete {
+    font-size: 20px;
+    background-color: inherit;
+    border: 0;
+    z-index: 100;
+    cursor: pointer;
+}
+
+.delete:hover {
+    transform: scale(1.3);
+    color: red;
 }
diff --git a/src/main/resources/js/files.js b/src/main/resources/js/files.js
index 4ef5bcc..c3fa1b1 100644
--- a/src/main/resources/js/files.js
+++ b/src/main/resources/js/files.js
@@ -35,7 +35,8 @@ drop.addEventListener('drop', e => {
         row.insertCell(2).innerHTML = bytesToSize(file.size);
         row.insertCell(3).innerHTML = `${date.getMonth() + 1}/${date.getDate()}/${date.getFullYear()} ${date.getHours()}:${date.getMinutes()}:${date.getSeconds()}`;
         row.insertCell(4).innerHTML = "<td><button class='share'><i class='icon ion-md-share'></i></button></td>";
-        row.insertCell(5).innerHTML = "<td><button class='delete'><i class='icon ion-md-trash'></i></button></td>";
+        row.insertCell(5).innerHTML = "<button class='downloadButton'><a class='download' href='" + file.name + "' download='" + file.name + "'><i class='icon ion-md-download'></i></a></button>";
+        row.insertCell(6).innerHTML = "<td><button class='delete'><i class='icon ion-md-trash'></i></button></td>";
 
         setListeners();
 
@@ -180,6 +181,20 @@ function setListeners() {
         })
     });
 
+    // download button
+    document.querySelectorAll(".download").forEach(element => {
+        element.addEventListener("click", e => {
+            e.stopPropagation();
+        })
+    });
+    document.querySelectorAll(".downloadButton").forEach(element => {
+        element.addEventListener("click", e => {
+            console.log(e);
+            e.stopPropagation();
+            e.target.children[0].click()
+        })
+    });
+
     // share button
     document.querySelectorAll(".share").forEach(element => {
         element.addEventListener("click", e => {
diff --git a/src/main/resources/views/files.rocker.html b/src/main/resources/views/files.rocker.html
index f3f816a..56cfc88 100644
--- a/src/main/resources/views/files.rocker.html
+++ b/src/main/resources/views/files.rocker.html
@@ -31,6 +31,7 @@
             <col/>
             <col/>
             <col/>
+            <col/>
         </colgroup>
 
         <thead>
@@ -40,6 +41,7 @@
             <th data-asc="true">Size</th>
             <th data-asc="true">Last modified</th>
             <th data-asc="true">Share</th>
+            <th data-asc="true">Download</th>
             <th data-asc="true">Delete</th>
         </tr>
         <tr data-href="../">
@@ -49,6 +51,7 @@
             <td></td>
             <td></td>
             <td></td>
+            <td></td>
         </tr>
         </thead>
 
@@ -62,19 +65,41 @@
 
             <!-- TODO: Add more icons (more specific file types) -->
             @if (fileArray[4] == "true") {
-            <td><i class="icon ion-md-folder"></i></td>
+            <td>
+                <i class="icon ion-md-folder"></i>
+            </td>
             } else if (fileArray[3] == "false") {
-            <td><i class="icon ion-md-code"></i></td>
+            <td>
+                <i class="icon ion-md-code"></i>
+            </td>
             } else {
-            <td><i class="icon ion-md-document"></i></td>
+            <td>
+                <i class="icon ion-md-document"></i>
+            </td>
             }
 
-            <td>@fileArray[0]</td>
-            <td data-size="@fileArray[5]">@fileArray[1]</td>
-            <td data-date="@fileArray[6]">@fileArray[2]</td>
+            <td>
+                @fileArray[0]
+            </td>
+
+            <td data-size="@fileArray[5]">
+                @fileArray[1]
+            </td>
+
+            <td data-date="@fileArray[6]">
+                @fileArray[2]
+            </td>
+
             <td>
                 <button class="share"><i class="icon ion-md-share"></i></button>
             </td>
+
+            <td>
+                <button class="downloadButton">
+                    <a class="download" download="@fileArray[0]" href="@fileArray[0]?raw"><i class="icon ion-md-download"></i></a>
+                </button>
+            </td>
+
             <td>
                 <button class="delete"><i class="icon ion-md-trash"></i></button>
             </td>
-- 
cgit v1.2.3