close #29

_embed/public/css/styles.css

@@ -264,7 +264,7 @@ textarea {
 body {
     font-family: 'Roboto', sans-serif;
     padding-top: 5em;
-    background-color: #fcfcfc;
+    background-color: #ffffff;
     text-rendering: optimizespeed;
 }
 
@@ -473,6 +473,8 @@ header {
     z-index: 999;
     padding: 1.7em 0;
     background-color: #2196f3;
+    border-bottom: 1px solid rgba(0, 0, 0, 0.075);
+    box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
 }
 
 header h1 {
@@ -481,7 +483,9 @@ header h1 {
 }
 
 header a,
-header a:hover {
+header a:hover,
+#toolbar a,
+#toolbar a:hover {
     color: inherit;
 }
 
@@ -680,8 +684,7 @@ header .only-side {
     display: none;
 }
 
-header #prev:hover+.prev-links,
-header .prev-links:hover {
+.action:hover ul {
     display: flex;
 }
 
@@ -689,9 +692,9 @@ header .prev-links:hover {
     border-radius: 0;
 }
 
-header .prev-links {
+.action ul {
     position: absolute;
-    top: 4em;
+    top: 3.1em;
     left: 0;
     color: #7d7d7d;
     list-style: none;
@@ -703,37 +706,39 @@ header .prev-links {
     flex-direction: column-reverse;
     display: none;
     transition: .2s ease all;
-    min-width: 12em;
+    min-width: 3em;
+    z-index: 99999;
 }
 
-header .prev-links:before {
+.action ul:before {
     top: -16px;
     left: 1em;
     right: auto;
     border: 8px solid transparent;
-    border-bottom-color: #68efad;
+    border-bottom-color: #ffffff;
     content: '';
     position: absolute;
 }
 
-header .prev-links a {
-    padding: .5em;
+.action ul a {
+    padding: .3em .5em;
     border-bottom: 1px solid #f5f5f5;
     transition: .2s ease all;
+    text-align: left;
 }
 
-header .prev-links a:first-child {
+.action ul a:first-child {
     border: 0;
     border-bottom-right-radius: .2em;
     border-bottom-left-radius: .2em;
 }
 
-header .prev-links a:last-child {
+.action ul a:last-child {
     border-top-right-radius: .2em;
     border-top-left-radius: .2em;
 }
 
-header .prev-links a:hover {
+.action ul a:hover {
     background-color: #f5f5f5;
 }
 
@@ -1181,4 +1186,4 @@ i.spin {
         column-count: 1;
         column-gap: 0;
     }
-}
+}

_embed/public/js/application.js

@@ -151,22 +151,6 @@ var preventDefault = function(event) {
     event.preventDefault();
 }
 
-// Download file event
-var downloadEvent = function(event) {
-    if (this.classList.contains('disabled')) {
-        return false;
-    }
-    if (selectedItems.length) {
-        Array.from(selectedItems).forEach(item => {
-            window.open(item + "?download=true");
-        });
-        return false;
-    }
-
-    window.open(window.location + "?download=true");
-    return false;
-}
-
 // Remove the last directory of an url
 var RemoveLastDirectoryPartOf = function(url) {
     var arr = url.split('/');
@@ -466,6 +450,8 @@ document.addEventListener("changed-selected", function(event) {
             document.getElementById("rename").classList.remove("disabled");
         }
 
+        redefineDownloadURLs();
+
         return false;
     }
 
@@ -473,6 +459,22 @@ document.addEventListener("changed-selected", function(event) {
     return false;
 });
 
+var redefineDownloadURLs = function() {
+    let files = "";
+
+    for (let i = 0; i < selectedItems.length; i++) {
+        files += selectedItems[i].replace(window.location.pathname, "") + ",";
+    }
+
+    files = files.substring(0, files.length - 1);
+    files = encodeURIComponent(files);
+
+    let links = document.querySelectorAll("#download ul a");
+    Array.from(links).forEach(link => {
+        link.href = "?download=" + link.dataset.format + "&files=" + files;
+    });
+}
+
 var searchEvent = function(event) {
     let value = this.value;
     let box = document.querySelector('#search div');
@@ -891,7 +893,6 @@ document.addEventListener("DOMContentLoaded", function(event) {
         document.getElementById("delete").addEventListener("click", deleteEvent);
     }
 
-    document.getElementById("download").addEventListener("click", downloadEvent);
     document.getElementById("open-nav").addEventListener("click", event => {
         document.querySelector("header > div:nth-child(2)").classList.toggle("active");
     });
@@ -908,4 +909,4 @@ document.addEventListener("DOMContentLoaded", function(event) {
     }
 
     return false;
-});
+});