From b6a7d78ce695a0f5cdf2a8a20fc4f5ab5ccf927c Mon Sep 17 00:00:00 2001 From: Henrique Dias Date: Thu, 29 Dec 2016 22:50:36 +0000 Subject: [PATCH] updates Former-commit-id: ebbe370ebbb3b076d945a7e68d60a7e426460914 --- _embed/public/css/styles.css | 249 +++++++------------------------- _embed/public/js/application.js | 137 ++++++++---------- _embed/templates/actions.tmpl | 33 ----- _embed/templates/base.tmpl | 156 ++++++++++---------- _embed/templates/listing.tmpl | 2 +- _embed/templates/single.tmpl | 2 +- handlers/download.go | 9 +- page/page.go | 8 +- 8 files changed, 202 insertions(+), 394 deletions(-) delete mode 100644 _embed/templates/actions.tmpl diff --git a/_embed/public/css/styles.css b/_embed/public/css/styles.css index 6414ff3f..ecc4f346 100644 --- a/_embed/public/css/styles.css +++ b/_embed/public/css/styles.css @@ -395,7 +395,7 @@ textarea { body { font-family: 'Roboto', sans-serif; - padding-top: 5em; + padding-top: 9em; background-color: #f8f8f8; text-rendering: optimizespeed; } @@ -602,11 +602,15 @@ pre { /* HEADER */ header { - z-index: 999; - padding: 1.7em 0; + z-index: 1000; background-color: #fff; border-bottom: 1px solid rgba(0, 0, 0, 0.075); box-shadow: 0 0 5px rgba(0, 0, 0, 0.1); + position: fixed; + top: 0; + left: 0; + width: 100%; + padding: 0; } header h1 { @@ -621,10 +625,7 @@ header a:hover, color: inherit; } -header p { - font-size: 1.5em; - max-width: calc(100% - 3em); -} +header p {} header p i { font-size: 1em !important; @@ -632,14 +633,10 @@ header p i { } header #logout { - background-color: rgba(0, 0, 0, 0.05); + /* background-color: rgba(0, 0, 0, 0.05); */ border-radius: 0; - margin: -0.5em -0.5em -0.5em 0; - padding: .5em; -} - -header p i { - vertical-align: middle; + margin: 0 0 0 auto; + padding: .2em; } #search { @@ -771,29 +768,46 @@ header p i { color: rgba(255, 255, 255, .5); } -#toolbar, -header { - position: fixed; - top: 0; - left: 0; - display: -webkit-box; - display: -ms-flexbox; +header>div { display: flex; width: 100%; - padding: 0.5em; - max-height: 4em; + padding: 0.5em 0.5em 0.5em 1em; } -#toolbar div, -header div { +header>div:first-child>div:nth-child(1) { + margin-right: 2em; + font-weight: 500; + font-size: 1.5em; + line-height: 2; +} + +header>div:last-child { + background-color: #fafafa; + border-top: 1px solid rgba(0, 0, 0, 0.075); + border-bottom: 1px solid rgba(0, 0, 0, 0.075); +} + +header>div div { vertical-align: middle; - -webkit-box-flex: 1; - -ms-flex-positive: 1; - flex-grow: 1; position: relative; } -#toolbar p, +header .actions { + margin-left: auto; +} + +header #file-only { + display: inline-block; + border-right: 1px solid rgba(0, 0, 0, 0.075); + padding-right: .3em; + margin-right: .3em; + transition: .2s ease all; +} + +#file-only.disabled { + opacity: 0; +} + header p { display: inline-block; margin: 0; @@ -804,49 +818,12 @@ header #open-nav { display: none; } -#toolbar p a, -#toolbar p a:hover, header p a, header p a:hover { color: inherit; } -#toolbar { - z-index: 1000; - top: -4em; - -webkit-transition: 0.2s ease-in-out all; - transition: 0.2s ease-in-out all; - opacity: 0; - color: #fff; - background-color: #2196f3; -} - -#toolbar.enabled { - top: 0; - opacity: 1; -} - -#toolbar div:nth-child(2), -header div:nth-child(2) { - text-align: right; -} - -header #overlay { - visibility: hidden; - opacity: 0; - position: fixed; - left: 0; - top: 0; - width: 100%; - height: 100%; - z-index: 999; - transition: .2s ease all; - background-color: rgba(0, 0, 0, 0.35); -} - -header .only-side { - display: none; -} +header>div div:nth-child(2) {} .action:hover ul { display: flex; @@ -908,11 +885,12 @@ header .only-side { .action { display: inline-block; - margin: 0 0.2em; cursor: pointer; -webkit-transition: 0.2s ease all; transition: 0.2s ease all; border: 0; + margin: 0; + color: #546E7A; border-radius: 50%; } @@ -922,7 +900,7 @@ header .only-side { } .action i { - padding: 0.5em; + padding: 0.4em; -webkit-transition: 0.2s ease-in-out all; transition: 0.2s ease-in-out all; border-radius: 50%; @@ -932,7 +910,6 @@ header .only-side { background-color: rgba(0, 0, 0, .1); } -#toolbar .action span, header .action span { display: none; } @@ -983,8 +960,6 @@ header .action span { justify-content: flex-start; max-width: calc(100% - 2.2em); width: 100%; - opacity: 0; - transition: .1s ease all; } #listing.list { @@ -1000,7 +975,7 @@ header .action span { border: 0; box-shadow: none; border-radius: 0; - border-bottom: 1px solid rgba(0,0,0,0.1); + border-bottom: 1px solid rgba(0, 0, 0, 0.1); padding: 1em; } @@ -1053,7 +1028,6 @@ header .action span { vertical-align: bottom; } - #listing.list .item div:first-of-type { width: 3em; } @@ -1066,6 +1040,7 @@ header .action span { width: calc(100% - 3em); } + /* ANIMATIONS */ i.spin { @@ -1237,130 +1212,4 @@ i.spin { display: inline-block; text-align: right; float: right; -} - -@media screen and (max-width: 1024px) { - header .only-side { - display: block; - padding: .5em; - background-color: #2196f3; - color: #fff; - max-height: 4em; - } - header>div:first-child #prev { - display: none; - } - header #open-nav { - display: inline-block; - } - /* SIDEBAR */ - header>div:nth-child(2) { - position: fixed; - top: 0; - z-index: 999999; - background-color: #fff; - height: 100%; - width: 95%; - max-width: 20em; - text-align: left; - color: #212121; - left: -100%; - transition: .2s ease-in-out all; - } - header>div:nth-child(2).active { - left: 0; - } - header>div:nth-child(2).active+#overlay { - opacity: 1; - visibility: visible; - } - header #search { - height: auto; - background-color: transparent; - color: #212121; - border-bottom: 1px solid #eee; - border-radius: 0; - display: block; - width: 100%; - padding: .5em 0; - text-align: left; - } - header #search input { - color: #212121; - display: inline-block; - width: auto; - min-width: 16em; - } - header #search i { - color: #6f6f6f; - display: inline-block; - padding: .5em; - margin: 0; - } - header>div:nth-child(2)>div { - display: block; - } - header>div:nth-child(2) .action { - border-radius: 0 !important; - padding: .5em 0 !important; - margin: 0 !important; - text-align: left; - background-color: transparent !important; - } - header>div:nth-child(2) #prev { - border-radius: 50% !important; - padding: 0 !important; - } - header>div:nth-child(2) #prev i { - color: #fff; - } - header>div:nth-child(2) .action:hover { - background-color: rgba(0, 0, 0, .1) !important; - } - header>div:nth-child(2) .action:hover i { - background-color: transparent; - } - header>div:nth-child(2) .action i { - border-radius: 0; - color: #6f6f6f; - } - header>div:nth-child(2) .action span {} - header>div:nth-child(2) .action i, - header>div:nth-child(2) .action span { - vertical-align: middle; - display: inline-block; - } -} - -@media screen and (max-width: 800px) { - #listing .item { - width: calc(50% - 1em); - } -} - -@media screen and (max-width: 700px) { - header>div:first-child p a, - header>div:first-child p i { - display: none !important; - } - header>div:first-child p { - font-size: 1em; - } - #editor .frontmatter { - column-count: 1; - column-gap: 0; - } -} - -@media screen and (max-width: 650px) { - #listing .item { - width: 100%; - margin: 0 0 1em; - } -} - -@media screen and (max-width: 450px) { - #toolbar p { - display: none; - } } \ No newline at end of file diff --git a/_embed/public/js/application.js b/_embed/public/js/application.js index e4bd5533..6f46e43f 100644 --- a/_embed/public/js/application.js +++ b/_embed/public/js/application.js @@ -85,6 +85,21 @@ Element.prototype.changeToDone = function(error, html) { return false; } +function getCSSRule(ruleName) { + ruleName = ruleName.toLowerCase(); + var result = null; + var find = Array.prototype.find; + + find.call(document.styleSheets, styleSheet => { + result = find.call(styleSheet.cssRules, cssRule => { + return cssRule instanceof CSSStyleRule && + cssRule.selectorText.toLowerCase() == ruleName; + }); + return result != null; + }); + return result; +} + var toWebDavURL = function(url) { url = url.replace(baseURL + "/", webdavURL + "/"); return window.location.origin + url @@ -171,8 +186,7 @@ var reloadListing = function(callback) { if (request.status == 200) { document.querySelector('body main').innerHTML = request.responseText; addNewDirEvents(); - document.getElementById("listing").style.opacity = 1; - + if (typeof callback == 'function') { callback(); } @@ -193,23 +207,24 @@ var renameEvent = function(event) { location.refresh(); } - let link = selectedItems[0]; - let item = document.getElementById(link); - let span = item.getElementsByTagName('span')[0]; - let name = span.innerHTML; + let item = document.getElementById(selectedItems[0]), + link = item.dataset.url, + span = item.getElementsByTagName('span')[0], + name = span.innerHTML; span.setAttribute('contenteditable', 'true'); span.focus(); let keyDownEvent = (event) => { if (event.keyCode == 13) { - let newName = span.innerHTML; - let newLink = toWebDavURL(link).replace(name, newName) - let html = document.getElementById('rename').changeToLoading(); - let request = new XMLHttpRequest(); + let newName = span.innerHTML, + newLink = RemoveLastDirectoryPartOf(toWebDavURL(link)) + newName, + html = document.getElementById('rename').changeToLoading(), + request = new XMLHttpRequest(); + request.open('MOVE', toWebDavURL(link)); request.setRequestHeader('Destination', newLink); - + request.setRequestHeader('Content-type', 'text/plain; charset=utf-8'); request.send(); request.onreadystatechange = function() { // TODO: redirect if it's moved to another folder @@ -221,11 +236,10 @@ var renameEvent = function(event) { let newLink = encodeURI(link.replace(name, newName)); console.log(request.body) reloadListing(() => { - let newLink = encodeURI(link.replace(name, newName)); - selectedItems = [newLink]; - document.getElementById(newLink).classList.add("selected") - var event = new CustomEvent('changed-selected'); - document.dispatchEvent(event); + newName = btoa(newName); + selectedItems = [newName]; + document.getElementById(newName).setAttribute("aria-selected", true); + document.sendCostumEvent('changed-selected'); }); } @@ -376,12 +390,13 @@ var newDirEvent = function(event) { // Handles the event when there is change on selected elements document.addEventListener("changed-selected", function(event) { - var toolbar = document.getElementById("toolbar"); - var selectedNumber = selectedItems.length; - document.getElementById("selected-number").innerHTML = selectedNumber; + redefineDownloadURLs(); + + let selectedNumber = selectedItems.length, + fileAction = document.getElementById("file-only"); if (selectedNumber) { - toolbar.classList.add("enabled"); + fileAction.classList.remove("disabled"); if (selectedNumber > 1) { document.getElementById("open").classList.add("disabled"); @@ -393,12 +408,10 @@ document.addEventListener("changed-selected", function(event) { document.getElementById("rename").classList.remove("disabled"); } - redefineDownloadURLs(); - return false; } - toolbar.classList.remove("enabled"); + fileAction.classList.add("disabled"); return false; }); @@ -406,7 +419,8 @@ var redefineDownloadURLs = function() { let files = ""; for (let i = 0; i < selectedItems.length; i++) { - files += selectedItems[i].replace(window.location.pathname, "") + ","; + let url = document.getElementById(selectedItems[i]).dataset.url; + files += url.replace(window.location.pathname, "") + ","; } files = files.substring(0, files.length - 1); @@ -484,13 +498,26 @@ var searchEvent = function(event) { } } + + document.addEventListener('listing', event => { // Handles the current view mode and adds the event to the button handleViewType(document.getCookie("view-list")); document.getElementById("view").addEventListener("click", viewEvent); + let updateColumns = () => { + let columns = Math.floor(document.getElementById('listing').offsetWidth / 300), + itens = getCSSRule('#listing .item'); + + itens.style.width = `calc(${100/columns}% - 1em)`; + } + + updateColumns(); + window.addEventListener("resize", () => { + updateColumns(); + }); + // Add event to back button and executes back event on ESC - document.getElementById("back").addEventListener("click", backEvent) document.addEventListener('keydown', (event) => { if (event.keyCode == 27) { backEvent(event); @@ -628,6 +655,7 @@ function itemDrop(e) { let el = e.target, id = e.dataTransfer.getData("id"), name = e.dataTransfer.getData("name"); + if (id == "" || name == "") return; for (let i = 0; i < 5; i++) { @@ -638,10 +666,10 @@ function itemDrop(e) { if (el.id === id) return; - let oldLink = toWebDavURL(id); - let newLink = toWebDavURL(el.id + name); + let oldLink = toWebDavURL(document.getElementById(id).dataset.url), + newLink = toWebDavURL(el.dataset.url + name), + request = new XMLHttpRequest(); - let request = new XMLHttpRequest(); request.open('MOVE', oldLink); request.setRequestHeader('Destination', newLink); request.send(); @@ -660,20 +688,18 @@ function openItem(event) { } function selectItem(event) { - let el = event.currentTarget, - url = el.dataset.url; + let el = event.currentTarget; if (selectedItems.length != 0) event.preventDefault(); - if (selectedItems.indexOf(url) == -1) { + if (selectedItems.indexOf(el.id) == -1) { el.setAttribute("aria-selected", true); - selectedItems.push(url); + selectedItems.push(el.id); } else { el.setAttribute("aria-selected", false); - selectedItems.removeElement(url); + selectedItems.removeElement(el.id); } - var event = new CustomEvent('changed-selected'); - document.dispatchEvent(event); + document.sendCostumEvent("changed-selected"); return false; } @@ -969,13 +995,6 @@ document.addEventListener("DOMContentLoaded", function(event) { document.getElementById("delete").addEventListener("click", deleteEvent); } - document.getElementById("open-nav").addEventListener("click", event => { - document.querySelector("header > div:nth-child(2)").classList.toggle("active"); - }); - document.getElementById("overlay").addEventListener("click", event => { - document.querySelector("header > div:nth-child(2)").classList.toggle("active"); - }); - if (document.getElementById('listing')) { document.sendCostumEvent('listing'); } @@ -985,36 +1004,4 @@ document.addEventListener("DOMContentLoaded", function(event) { } return false; -}); - - -(function() { - let columns = Math.floor(document.getElementById('listing').offsetWidth / 300); - var header = getCSSRule('#listing .item'); - header.style.width = `calc(${100/columns}% - 1em)`; - - document.getElementById("listing").style.opacity = 1; -}()); - - -window.addEventListener("resize", () => { - let columns = Math.floor(document.getElementById('listing').offsetWidth / 300); - var itens = getCSSRule('#listing .item'); - itens.style.width = `calc(${100/columns}% - 1em)`; -}); - - -function getCSSRule(ruleName) { - ruleName = ruleName.toLowerCase(); - var result = null; - var find = Array.prototype.find; - - find.call(document.styleSheets, styleSheet => { - result = find.call(styleSheet.cssRules, cssRule => { - return cssRule instanceof CSSStyleRule && - cssRule.selectorText.toLowerCase() == ruleName; - }); - return result != null; - }); - return result; -} \ No newline at end of file +}); \ No newline at end of file diff --git a/_embed/templates/actions.tmpl b/_embed/templates/actions.tmpl deleted file mode 100644 index 5c272ea9..00000000 --- a/_embed/templates/actions.tmpl +++ /dev/null @@ -1,33 +0,0 @@ -{{ define "actions" }} -
- open_in_new See raw -
-{{ if and .IsDir .User.AllowEdit }} -
- mode_edit -
-{{ end }} - -
- - file_download Download - - {{ if .IsDir }} - - {{ end }} -
-{{ if .User.AllowEdit }} -
- delete Delete -
-{{ end }} -{{ end }} diff --git a/_embed/templates/base.tmpl b/_embed/templates/base.tmpl index 525942f9..b2f39ea0 100644 --- a/_embed/templates/base.tmpl +++ b/_embed/templates/base.tmpl @@ -4,6 +4,7 @@ {{.Name}} + {{ if ne .User.StyleSheet "" }} @@ -19,103 +20,96 @@
+
- {{ $lnk := .PreviousLink }} - - -
-
- {{ $lnk := .PreviousLink }} - {{ if ne $lnk ""}}{{ end }} - - {{ if ne $lnk ""}}{{ end }} - -

File Manager

-
- - {{ if .IsDir}} - {{ if .User.AllowCommands }} - - {{ end }} - -
- view_headline Switch view -
- - {{ if .User.AllowNew }} -
- file_upload Upload -
- {{ end }} - -
- - file_download Download - - -
- {{ else }} - {{ template "actions" . }} {{ end }}
exit_to_app Logout
-
-
- - {{ if .IsDir }} -
+ +
-
- arrow_back +
+ {{ $lnk := .PreviousLink }} + + + {{ if ne .Name "/"}}

{{ .Name }}

{{ end }} +
+ + +
+
+
+ open_in_new See raw +
+ {{ if and .IsDir .User.AllowEdit }} +
+ mode_edit +
+ {{ end }} + + {{ if .User.AllowEdit }} +
+ delete Delete +
+ {{ end }} +
+ + {{ if and (.User.AllowNew) (.IsDir) }} +
+ file_upload Upload +
+ {{ end }} + +
+ + file_download Download + + {{ if .IsDir }} + + {{ end }} +
+ + {{ if .IsDir }} +
+ view_headline Switch view +
+ {{ end }}
-

0 selected.

-
- {{ template "actions" . }} -
-
- {{ end }} +
{{ template "content" . }}
- - diff --git a/_embed/templates/listing.tmpl b/_embed/templates/listing.tmpl index c6abbc88..80635123 100644 --- a/_embed/templates/listing.tmpl +++ b/_embed/templates/listing.tmpl @@ -12,7 +12,7 @@ ondblclick="openItem(event)" data-dir="{{ .IsDir }}" data-url="{{ .URL }}" - id="{{.URL}}"> + id="{{ EncodeBase64 .Name }}">
{{- if .IsDir}} folder diff --git a/_embed/templates/single.tmpl b/_embed/templates/single.tmpl index e070dcd8..b22bb7a5 100644 --- a/_embed/templates/single.tmpl +++ b/_embed/templates/single.tmpl @@ -4,7 +4,7 @@ {{ if eq .Type "image" }} {{ else if eq .Type "audio" }} - + {{ else if eq .Type "video" }}