add list view
This commit is contained in:
joshuaboud
parent
c071cf4ad6
commit
977d6dc636
|
|
@ -22,7 +22,7 @@
|
|||
--border: #bebebe;
|
||||
--navigation: #fff;
|
||||
--font: #1c1c1c;
|
||||
--selected: #f8f8f8;
|
||||
--selected: #eeeeee;
|
||||
--toggle-light: #151515;
|
||||
--toggle-dark: #ccc;
|
||||
--scrollbar-thumb: var(--border);
|
||||
|
|
@ -200,17 +200,25 @@ input[type="text"] {
|
|||
background-color: var(--navigation);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--nav-border-radius);
|
||||
padding: 0.5em;
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
justify-content: flex-start;
|
||||
align-items: flex-start;
|
||||
align-content: flex-start;
|
||||
overflow: auto;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.nav-item {
|
||||
.contents-view-grid {
|
||||
flex-flow: row wrap;
|
||||
align-items: flex-start;
|
||||
padding: 0.5em;
|
||||
}
|
||||
|
||||
.contents-view-list {
|
||||
flex-flow: column nowrap;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.contents-view-grid > .nav-item {
|
||||
margin: 2px;
|
||||
padding: 3px;
|
||||
flex: 0;
|
||||
|
|
@ -221,20 +229,12 @@ input[type="text"] {
|
|||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.nav-item-selected {
|
||||
background-color: var(--selected);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--nav-border-radius);
|
||||
box-sizing: border-box;
|
||||
padding: 2px;
|
||||
}
|
||||
|
||||
.nav-item .nav-item-title {
|
||||
.contents-view-grid > .nav-item > .nav-item-title {
|
||||
text-align: center;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
|
||||
.nav-item .nav-item-icon {
|
||||
.contents-view-grid > .nav-item > .nav-item-icon {
|
||||
position: relative;
|
||||
text-align: center;
|
||||
width: 100px;
|
||||
|
|
@ -242,22 +242,102 @@ input[type="text"] {
|
|||
color: var(--nav-entry-color);
|
||||
}
|
||||
|
||||
.nav-item-symlink-symbol-dir {
|
||||
.contents-view-grid > .nav-item-selected {
|
||||
background-color: var(--selected);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--nav-border-radius);
|
||||
box-sizing: border-box;
|
||||
padding: 2px;
|
||||
}
|
||||
|
||||
.contents-view-grid > .nav-item > .nav-item-icon > .nav-item-symlink-symbol-dir {
|
||||
position: absolute;
|
||||
color: var(--symlink-symbol-color);
|
||||
font-size: 12pt;
|
||||
font-size: 20%;
|
||||
bottom: 19%;
|
||||
right: 15%;
|
||||
}
|
||||
|
||||
.nav-item-symlink-symbol-file {
|
||||
.contents-view-grid > .nav-item > .nav-item-icon > .nav-item-symlink-symbol-file {
|
||||
position: absolute;
|
||||
color: var(--symlink-symbol-color);
|
||||
font-size: 12pt;
|
||||
font-size: 20%;
|
||||
bottom: 6%;
|
||||
right: 25%;
|
||||
}
|
||||
|
||||
.contents-view-grid > .contents-view-list-header {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.contents-view-list-header {
|
||||
background-color: var(--container);
|
||||
}
|
||||
|
||||
.contents-view-list > .nav-item {
|
||||
padding: 3px;
|
||||
flex: 0;
|
||||
display: flex;
|
||||
flex: row nowrap;
|
||||
align-items: baseline;
|
||||
justify-content: flex-start;
|
||||
cursor: pointer;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.contents-view-list > .nav-item:nth-child(even) {
|
||||
background-color: var(--selected);
|
||||
}
|
||||
|
||||
.contents-view-list > .nav-item > .nav-item-title {
|
||||
margin-left: 5px;
|
||||
padding-right: 5px;
|
||||
}
|
||||
|
||||
.contents-view-list > .nav-item > .nav-item-icon {
|
||||
position: relative;
|
||||
text-align: center;
|
||||
width: 20px;
|
||||
color: var(--nav-entry-color);
|
||||
}
|
||||
|
||||
.contents-view-list > .nav-item-selected {
|
||||
background-color: var(--selected);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--nav-border-radius);
|
||||
box-sizing: border-box;
|
||||
padding: 2px;
|
||||
}
|
||||
|
||||
.contents-view-list > .nav-item > .nav-item-icon > .nav-item-symlink-symbol-dir {
|
||||
position: absolute;
|
||||
color: var(--symlink-symbol-color);
|
||||
font-size: 40%;
|
||||
bottom: 19%;
|
||||
right: 15%;
|
||||
}
|
||||
|
||||
.contents-view-list > .nav-item > .nav-item-icon > .nav-item-symlink-symbol-file {
|
||||
position: absolute;
|
||||
color: var(--symlink-symbol-color);
|
||||
font-size: 40%;
|
||||
bottom: 6%;
|
||||
right: 25%;
|
||||
}
|
||||
|
||||
.contents-view-list > .nav-item > div {
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
flex-basis: 0;
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.contents-view-list > .nav-item > div:first-of-type {
|
||||
flex-basis: 0;
|
||||
flex-grow: 2;
|
||||
}
|
||||
|
||||
.nav-info-column {
|
||||
background-color: var(--container);
|
||||
flex-basis: 0;
|
||||
|
|
@ -471,6 +551,10 @@ input:checked + .slider:before {
|
|||
left: -30%;
|
||||
}
|
||||
|
||||
.clickable {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.nav-context-menu {
|
||||
display: none;
|
||||
position: absolute;
|
||||
|
|
|
|||
|
|
@ -64,7 +64,15 @@
|
|||
</div>
|
||||
<div class="vertical-spacer"></div>
|
||||
<div class="flex-row inner-container">
|
||||
<div class="contents-view" id="nav-contents-view">
|
||||
<div class="contents-view contents-view-grid" id="nav-contents-view">
|
||||
<div class="contents-view-list-header nav-item">
|
||||
<i class="nav-item-icon"></i>
|
||||
<div class="nav-item-title">Name</div>
|
||||
<div>Mode</div>
|
||||
<div>Owner</div>
|
||||
<div>Group</div>
|
||||
<div>Size</div>
|
||||
</div>
|
||||
<div class="nav-notifications" id="nav-notifications">
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -157,6 +165,10 @@
|
|||
<img src="branding/logo-light.svg" id="logo-45d"><span class="logo-45">45</span><span class="logo-drives">Drives</span>
|
||||
</a>
|
||||
<div class="flex-grow"></div>
|
||||
<div id="nav-item-display-btn" class="clickable">
|
||||
<i class="fas fa-list" id="nav-item-display-icon"></i>
|
||||
</div>
|
||||
<div class="horizontal-spacer"></div>
|
||||
<div class="nav-toggle">
|
||||
<div class="nav-btn-group">
|
||||
<i class="fas fa-low-vision" id="nav-show-hidden-icon"></i>
|
||||
|
|
|
|||
|
|
@ -111,6 +111,18 @@ function load_hidden_file_state(nav_window) {
|
|||
}
|
||||
}
|
||||
|
||||
/**
|
||||
*
|
||||
* @param {NavWindow} nav_window
|
||||
*/
|
||||
function load_item_display_state(nav_window) {
|
||||
const state = localStorage.getItem('item-display');
|
||||
|
||||
if (state === 'list') {
|
||||
nav_window.switch_item_display();
|
||||
}
|
||||
}
|
||||
|
||||
function set_last_theme_state() {
|
||||
var toggle_switch = document.getElementById("toggle-theme");
|
||||
var state = localStorage.getItem("houston-theme-state");
|
||||
|
|
@ -226,6 +238,20 @@ class NavEntry {
|
|||
if (this.is_hidden_file)
|
||||
icon.style.opacity = 0.5;
|
||||
this.dom_element.title = this.filename();
|
||||
if (nav_window_ref && nav_window_ref.item_display === "list") {
|
||||
let mode = document.createElement("div");
|
||||
let owner = document.createElement("div");
|
||||
let group = document.createElement("div");
|
||||
let size = document.createElement("div");
|
||||
mode.title = mode.innerText = this.stat["mode-str"];
|
||||
owner.title = owner.innerText = this.stat["owner"];
|
||||
group.title = group.innerText = this.stat["group"];
|
||||
size.title = size.innerText = format_bytes(this.stat["size"]);
|
||||
this.dom_element.appendChild(mode);
|
||||
this.dom_element.appendChild(owner);
|
||||
this.dom_element.appendChild(group);
|
||||
this.dom_element.appendChild(size);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -550,6 +576,8 @@ class NavFileLink extends NavFile{
|
|||
this.double_click = false;
|
||||
this.link_target = link_target;
|
||||
this.dom_element.nav_item_title.style.fontStyle = "italic";
|
||||
if (nav_window_ref.item_display === "list")
|
||||
this.dom_element.nav_item_title.innerHTML += " → " + this.link_target;
|
||||
}
|
||||
|
||||
show_properties() {
|
||||
|
|
@ -825,6 +853,8 @@ class NavDirLink extends NavDir{
|
|||
this.double_click = false;
|
||||
this.link_target = link_target;
|
||||
this.dom_element.nav_item_title.style.fontStyle = "italic";
|
||||
if (nav_window_ref.item_display === "list")
|
||||
this.dom_element.nav_item_title.innerHTML += " → " + this.link_target;
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -1259,6 +1289,7 @@ class NavDragDrop {
|
|||
|
||||
class NavWindow {
|
||||
constructor() {
|
||||
this.item_display = "grid";
|
||||
this.path_stack = (localStorage.getItem('navigator-path') ?? '/').split('/');
|
||||
this.path_stack = this.path_stack.map((_, index) => new NavDir([...this.path_stack.slice(0, index + 1)].filter(part => part != ''), this));
|
||||
|
||||
|
|
@ -1942,6 +1973,27 @@ class NavWindow {
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
switch_item_display() {
|
||||
var button = document.getElementById("nav-item-display-icon");
|
||||
if (this.item_display === "grid") {
|
||||
this.item_display = "list";
|
||||
this.window.classList.remove("contents-view-grid");
|
||||
this.window.classList.add("contents-view-list");
|
||||
button.classList.remove("fa-list");
|
||||
button.classList.add("fa-th");
|
||||
} else {
|
||||
this.item_display = "grid";
|
||||
this.window.classList.remove("contents-view-list");
|
||||
this.window.classList.add("contents-view-grid");
|
||||
button.classList.remove("fa-th");
|
||||
button.classList.add("fa-list");
|
||||
}
|
||||
|
||||
localStorage.setItem("item-display", this.item_display);
|
||||
|
||||
this.refresh();
|
||||
}
|
||||
}
|
||||
|
||||
let nav_window = new NavWindow();
|
||||
|
|
@ -1967,11 +2019,13 @@ function set_up_buttons() {
|
|||
document.getElementById("pwd").addEventListener("keydown", nav_window.nav_bar_event_handler.bind(nav_window));
|
||||
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));
|
||||
}
|
||||
|
||||
async function main() {
|
||||
set_last_theme_state();
|
||||
load_hidden_file_state(nav_window);
|
||||
load_item_display_state(nav_window);
|
||||
var get_users = nav_window.get_system_users();
|
||||
var get_groups = nav_window.get_system_groups();
|
||||
var refresh = nav_window.refresh();
|
||||
|
|
|
|||
Loading…
Reference in New Issue