From ec5b66df1a8dd8efd33550f1a7e77f38083cde6b Mon Sep 17 00:00:00 2001 From: joshuaboud Date: Tue, 8 Jun 2021 14:00:44 -0300 Subject: [PATCH 01/10] add sort options to list view --- navigator/navigator.css | 22 ++++++++++ navigator/navigator.html | 11 ++--- navigator/navigator.js | 88 +++++++++++++++++++++++++++++++++++++++- 3 files changed, 115 insertions(+), 6 deletions(-) diff --git a/navigator/navigator.css b/navigator/navigator.css index aa6c666..b788032 100644 --- a/navigator/navigator.css +++ b/navigator/navigator.css @@ -275,6 +275,28 @@ input[type="text"] { .contents-view-list-header { background-color: var(--list-view-header); cursor: default !important; + position: sticky; + top: 0; + z-index: 10; +} + +.contents-view-list > .list-view-top-spacer { + height: 30px; +} + +.contents-view-grid > .list-view-top-spacer { + display: none; +} + +.contents-view-list-header > div { + cursor: pointer; + position: relative; +} + +.contents-view-list-header > div > i { + position: absolute; + right: 10px; + top: 0.25em; } .contents-view-list > .nav-item { diff --git a/navigator/navigator.html b/navigator/navigator.html index 4689cb3..b606fba 100644 --- a/navigator/navigator.html +++ b/navigator/navigator.html @@ -67,12 +67,13 @@ diff --git a/navigator/navigator.js b/navigator/navigator.js index 93ee088..b3fb845 100644 --- a/navigator/navigator.js +++ b/navigator/navigator.js @@ -1292,6 +1292,81 @@ class NavDragDrop { } } +class SortFunctions { + constructor() { + this.orders = { + name: "asc", + owner: "asc", + group: "asc", + size: "asc", + } + this.icons = {}; + for (let option of ["name", "owner", "group", "size"]) { + this.icons[option] = document.getElementById(`sort-${option}-icon`); + } + this.current_choice = "name"; + } + + get_func() { + return this[`${this.current_choice}_${this.orders[this.current_choice]}`]; + } + + set_func(option) { + if (this.current_choice === option) { + if (this.orders[this.current_choice] === "asc") { + this.orders[this.current_choice] = "desc"; + this.icons[this.current_choice].classList.remove("fa-chevron-up"); + this.icons[this.current_choice].classList.add("fa-chevron-down"); + } else { + this.orders[this.current_choice] = "asc"; + this.icons[this.current_choice].classList.remove("fa-chevron-down"); + this.icons[this.current_choice].classList.add("fa-chevron-up"); + } + } else { + this.icons[this.current_choice].classList.remove("fa-chevron-up", "fa-chevron-down"); + this.current_choice = option; + if (this.orders[this.current_choice] === "asc") { + this.icons[this.current_choice].classList.add("fa-chevron-up"); + } else { + this.icons[this.current_choice].classList.add("fa-chevron-down"); + } + } + + } + + name_asc(first, second) { + return first.filename().localeCompare(second.filename()); + } + + name_desc(first, second) { + return second.filename().localeCompare(first.filename()); + } + + owner_asc(first, second) { + return first.stat["owner"].localeCompare(second.stat["owner"]); + } + + owner_desc(first, second) { + return second.stat["owner"].localeCompare(first.stat["owner"]); + } + + group_asc(first, second) { + return first.stat["group"].localeCompare(second.stat["group"]); + } + + group_desc(first, second) { + return second.stat["group"].localeCompare(first.stat["group"]); + } + + size_asc(first, second) { + return first.stat["size"] - second.stat["size"]; + } + + size_desc(first, second) { + return second.stat["size"] - first.stat["size"]; + } +} + class NavWindow { constructor() { this.item_display = "grid"; @@ -1312,6 +1387,8 @@ class NavWindow { this.clip_board = []; this.uploader = new NavDragDrop(this.window, this); + + this.sort_function = new SortFunctions(); } /** @@ -1368,7 +1445,9 @@ class NavWindow { } files.sort((first, second) => { if (first.nav_type === second.nav_type) { - return first.filename().localeCompare(second.filename()); + return this.item_display === "list" + ? this.sort_function.get_func()(first, second) + : this.sort_function.name_asc(first, second); // default to sort by name in grid view } if (first.nav_type === "dir") return -1; @@ -2025,6 +2104,13 @@ function set_up_buttons() { document.getElementById("toggle-theme").addEventListener("change", switch_theme, false); document.getElementById("nav-show-hidden").addEventListener("change", nav_window.toggle_show_hidden.bind(nav_window)); document.getElementById("nav-item-display-btn").addEventListener("click", nav_window.switch_item_display.bind(nav_window)); + for (let option of ["name", "owner", "group", "size"]) { + var elem = document.getElementById("sort-" + option + "-btn"); + elem.addEventListener("click", (event) => { + nav_window.sort_function.set_func(option); + nav_window.refresh(); + }); + } } async function main() { From c1c473708bfac29c678e67ebf6065a15b4215736 Mon Sep 17 00:00:00 2001 From: joshuaboud Date: Tue, 8 Jun 2021 14:54:58 -0300 Subject: [PATCH 02/10] add search bar to filter items in directory --- navigator/navigator.css | 30 +++++++++++++++++++++--------- navigator/navigator.html | 6 ++++-- navigator/navigator.js | 28 ++++++++++++++++++++++++---- 3 files changed, 49 insertions(+), 15 deletions(-) diff --git a/navigator/navigator.css b/navigator/navigator.css index b788032..f36ba8a 100644 --- a/navigator/navigator.css +++ b/navigator/navigator.css @@ -180,13 +180,33 @@ body::-webkit-scrollbar-thumb { padding-bottom: 0; } +.nav-header { + align-items: baseline; +} + input[type="text"] { background-color: var(--container); color: inherit; - flex-grow: 1; padding: 0.25em 1em 0.25em 1em; border: 1px solid var(--border); border-radius: 4px; + min-width: 30px; +} + +.navigation-bar { + flex-basis: 0; + flex-grow: 5; +} + +.search-bar { + flex-basis: 0; + flex-grow: 2; +} + +.search-bar + i { + position: relative; + right: 30px; + width: 0; } .inner-container { @@ -280,14 +300,6 @@ input[type="text"] { z-index: 10; } -.contents-view-list > .list-view-top-spacer { - height: 30px; -} - -.contents-view-grid > .list-view-top-spacer { - display: none; -} - .contents-view-list-header > div { cursor: pointer; position: relative; diff --git a/navigator/navigator.html b/navigator/navigator.html index b606fba..5df2ad9 100644 --- a/navigator/navigator.html +++ b/navigator/navigator.html @@ -37,7 +37,7 @@
-
+