From 9d4f34337583d9995431abf2a1240923c83de9ab Mon Sep 17 00:00:00 2001 From: Henrique Dias Date: Wed, 15 Jun 2016 08:47:33 +0100 Subject: [PATCH] view list/modules --- assets/public/css/styles.css | 26 ++++++---- assets/public/js/application.js | 89 ++++++++++++++++++++++----------- assets/templates/listing.tmpl | 16 +++--- 3 files changed, 87 insertions(+), 44 deletions(-) diff --git a/assets/public/css/styles.css b/assets/public/css/styles.css index 70edc721..a9f5de64 100644 --- a/assets/public/css/styles.css +++ b/assets/public/css/styles.css @@ -509,6 +509,7 @@ footer { font-size: .6em; text-align: center; color: grey; + margin: 1em 0; } footer a, footer a:hover { @@ -572,7 +573,7 @@ pre { /* HEADER */ header { - background-color: #2196F3; + background-color: #2196f3; padding: 1.7em 0; } header h1 { @@ -588,7 +589,7 @@ header p { } header p i { font-size: 1em !important; - color: rgba(0, 0, 0, 0.21); + color: rgba(255, 255, 255, 0.31); } header p i { vertical-align: middle; @@ -597,7 +598,7 @@ header form { display: inline-block; background-color: #1E88E5; padding: .75em; - color: #212121; + color: #fff; border-radius: .3em; height: 100%; vertical-align: middle; @@ -607,7 +608,7 @@ header form input, header form i { } header form i { margin-right: .3em; - color: rgba(0, 0, 0, 0.5) + color: rgba(255,255,255, 0.5) } header form input { border: 0; @@ -617,21 +618,21 @@ header form input { } ::-webkit-input-placeholder { /* WebKit, Blink, Edge */ - color: rgba(0, 0, 0, 0.5); + color: rgba(255,255,255, 0.5); } :-moz-placeholder { /* Mozilla Firefox 4 to 18 */ - color: rgba(0, 0, 0, 0.5); + color: rgba(255,255,255, 0.5); opacity: 1; } ::-moz-placeholder { /* Mozilla Firefox 19+ */ - color: rgba(0, 0, 0, 0.5); + color: rgba(255,255,255, 0.5); opacity: 1; } :-ms-input-placeholder { /* Internet Explorer 10-11 */ - color: rgba(0, 0, 0, 0.5); + color: rgba(255,255,255, 0.5); } header, #toolbar { position: fixed; @@ -640,6 +641,7 @@ header, #toolbar { left: 0; padding: .5em; display: flex; + color: #fff; } #toolbar div, header div { flex-grow: 1; @@ -696,6 +698,9 @@ header, #toolbar { justify-content: space-between; padding: 0 .5em; } +#listing.list { + flex-direction: column; +} #listing .item { background-color: #fff; border-radius: .2em; @@ -729,7 +734,10 @@ header, #toolbar { font-size: 4em; margin-right: .1em; } - +.item a:hover, +.item a { + color: #6f6f6f; +} /* ANIMATIONS */ i.spin { animation: 1s spin linear infinite; diff --git a/assets/public/js/application.js b/assets/public/js/application.js index 2f6765de..0c15dbf1 100644 --- a/assets/public/js/application.js +++ b/assets/public/js/application.js @@ -9,39 +9,40 @@ Array.prototype.removeElement = function(element) { } } -document.addEventListener("DOMContentLoaded", function(event) { - var items = document.getElementsByClassName('item'); - Array.from(items).forEach(link => { - link.addEventListener('click', function(event) { - var url = link.getElementsByTagName('a')[0].getAttribute('href'); - if (selectedItems.indexOf(url) == -1) { - link.classList.add('selected'); - selectedItems.push(url); - } else { - link.classList.remove('selected'); - selectedItems.removeElement(url); - } +var viewEvent = function(event) { + var cookie = getCookie("view-list"); + var listing = document.getElementById("listing"); - var event = new CustomEvent('changed-selected'); - document.dispatchEvent(event); - return false; - }); - }); - - document.getElementById("open").addEventListener("click", openEvent); - if (document.getElementById("back")) { - document.getElementById("back").addEventListener("click", backEvent) - }; - document.getElementById("delete").addEventListener("click", deleteEvent); - document.getElementById("download").addEventListener("click", downloadEvent); - return false; -}); - -var changeView = function(event) { + if (cookie != "true") { + document.cookie = "view-list=true"; + } else { + document.cookie = "view-list=false"; + } + handleViewType(getCookie("view-list")); return false; } +var handleViewType = function(viewList) { + var listing = document.getElementById("listing"); + var button = document.getElementById("view"); + + if (viewList == "true") { + listing.classList.add("list"); + button.innerHTML = "view_module"; + return false; + } + + button.innerHTML = "view_list"; + listing.classList.remove("list"); + return false; +} + +var getCookie = function(name) { + var re = new RegExp("(?:(?:^|.*;\\s*)" + name + "\\s*\\=\\s*([^;]*).*$)|^.*$"); + return document.cookie.replace(re, "$1"); +} + var changeToLoading = function(element) { var originalText = element.innerHTML; element.style.opacity = 0; @@ -184,3 +185,35 @@ document.addEventListener("changed-selected", function(event) { toolbar.classList.remove("enabled"); return false; }); + +document.addEventListener("DOMContentLoaded", function(event) { + var items = document.getElementsByClassName('item'); + Array.from(items).forEach(link => { + link.addEventListener('click', function(event) { + var url = link.getElementsByTagName('a')[0].getAttribute('href'); + if (selectedItems.indexOf(url) == -1) { + link.classList.add('selected'); + selectedItems.push(url); + } else { + link.classList.remove('selected'); + selectedItems.removeElement(url); + } + + var event = new CustomEvent('changed-selected'); + document.dispatchEvent(event); + return false; + }); + }); + + document.getElementById("open").addEventListener("click", openEvent); + if (document.getElementById("back")) { + document.getElementById("back").addEventListener("click", backEvent) + }; + if (document.getElementById("view")) { + handleViewType(getCookie("view-list")); + document.getElementById("view").addEventListener("click", viewEvent) + }; + document.getElementById("delete").addEventListener("click", deleteEvent); + document.getElementById("download").addEventListener("click", downloadEvent); + return false; +}); diff --git a/assets/templates/listing.tmpl b/assets/templates/listing.tmpl index 89a98f46..b29a9296 100644 --- a/assets/templates/listing.tmpl +++ b/assets/templates/listing.tmpl @@ -13,13 +13,15 @@
- {{.Name}} - {{- if .IsDir}} -

—

- {{- else}} -

{{.HumanSize}}

- {{- end}} -

+ + {{.Name}} + {{- if .IsDir}} +

—

+ {{- else}} +

{{.HumanSize}}

+ {{- end}} +

+
{{- end}}