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,
+.action:hover ul {
-header .prev-links:hover {
     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 {
+.action ul a {
-    padding: .5em;
+    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;
 }
 

_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");
     });

_embed/templates/actions.tmpl

@@ -8,7 +8,17 @@
 </div>
 {{ end }}
 <div class="action" id="download">
+    <a href="?download=true">
         <i class="material-icons" title="Download">file_download</i> <span>Download</span>
+    </a>
+    {{ if .IsDir }}
+    <ul class="prev-links">
+        <a data-format="tarbz2" href="?download=tarbz2"><li>tar.bz2</li></a>
+        <a data-format="targz" href="?download=targz"><li>tar.gz</li></a>
+        <a data-format="tar" href="?download=tar"><li>tar</li></a>
+        <a data-format="zip" href="?download=zip"><li>zip</li></a>
+    </ul>
+    {{ end }}
 </div>
 {{ if .User.AllowEdit }}
 <div class="action" id="delete">

_embed/templates/base.tmpl

@@ -1,78 +1,52 @@
-{{ $absURL := .Config.AbsoluteURL }}
-
 <!DOCTYPE html>
 <html>
+{{ $absURL := .Config.AbsoluteURL }}
 <head>
     <title>{{.Name}}</title>
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
     <link href='https://fonts.googleapis.com/css?family=Roboto:400,500' rel='stylesheet' type='text/css'>
     <link rel="stylesheet" href="{{ .Config.AbsoluteURL }}/_filemanagerinternal/css/styles.css">
-
     {{ if ne .User.StyleSheet "" }}
-   <style>
+    <style>{{ CSS .User.StyleSheet }}</style>
-    {{ CSS .User.StyleSheet }}
-   </style>
     {{ end }}
 </head>
 <body>
     <header>
         <div>
             {{ $lnk := .PreviousLink }}
-
             <div class="action{{ if eq $lnk ""}} disabled{{ end }}" id="prev">
-         {{ if ne $lnk ""}}
+                {{ if ne $lnk ""}}<a href="{{ $lnk }}">{{ end }}
-          <a href="{{ $lnk }}">
-          {{ end }}
                     <i class="material-icons" title="Previous">subdirectory_arrow_left</i>
-      {{ if ne $lnk ""}}
+                {{ if ne $lnk ""}}</a>{{ end }}
-      </a>
-      {{ end }}
-
-    </div>
 
                 {{ if ne $lnk ""}}
                     <ul class="prev-links">
-     {{ range $link, $name := .BreadcrumbMap }}
+                    {{ range $link, $name := .BreadcrumbMap }}<a href="{{ $absURL }}{{ $link }}"><li>{{ $name }}</li></a>{{ end }}
-        <a href="{{ $absURL }}{{ $link }}"><li>{{ $name }}</li></a>
-     {{ end }}
                     </ul>
                 {{ end }}
+            </div>
 
             <div class="action" id="open-nav">
                 <i class="material-icons" title="Menu">menu</i>
             </div>
 
-    <p>
+            {{ if ne .Name "/"}}<p>{{ .Name }}</p>{{ end }}
-     {{ if ne .Name "/"}}
-      {{ .Name }}
-     </p>
-    {{ end }}
         </div>
 
         <div>
             <div class="only-side">
                 {{ $lnk := .PreviousLink }}
-           {{ if ne $lnk ""}}
+                {{ if ne $lnk ""}}<a href="{{ $lnk }}">{{ end }}
-            <a href="{{ $lnk }}">
-            {{ end }}
                     <div class="action{{ if eq $lnk ""}} disabled{{ end }}" id="prev">
                         <i class="material-icons" title="Previous">subdirectory_arrow_left</i>
                     </div>
+                {{ if ne $lnk ""}}</a>{{ end }}
 
-            {{ if ne $lnk ""}}
+                <p><a href="{{ if eq .Config.AbsoluteURL "" }}/{{ else }}{{ .Config.AbsoluteURL }}{{ end }}">File Manager</a></p>
-            </a>
-           {{ end }}
-
-           <p>
-            <a href="{{ if eq .Config.AbsoluteURL "" }}/{{ else }}{{ .Config.AbsoluteURL }}{{ end }}">
-             File Manager
-            </a>
-            </p>
             </div>
 
             {{ if .IsDir}}
-
                 {{ if .User.AllowCommands }}
                 <div id="search">
                     <i class="material-icons" title="Storage">storage</i>
@@ -84,11 +58,24 @@
                 <div class="action" id="view">
                     <i class="material-icons" title="Switch view">view_headline</i> <span>Switch view</span>
                 </div>
+
                 {{ if .User.AllowNew }}
                 <div class="action" id="upload">
                     <i class="material-icons" title="Upload">file_upload</i> <span>Upload</span>
                 </div>
                 {{ end }}
+
+                <div class="action">
+                    <a href="?download=true">
+                        <i class="material-icons" title="Download">file_download</i> <span>Download</span>
+                    </a>
+                    <ul class="prev-links">
+                        <a href="?download=tarbz2"><li>tar.bz2</li></a>
+                        <a href="?download=targz"><li>tar.gz</li></a>
+                        <a href="?download=tar"><li>tar</li></a>
+                        <a href="?download=zip"><li>zip</li></a>
+                    </ul>
+                </div>
             {{ else }}
             {{ template "actions" . }}
             {{ end }}