tyler.durden/cockpit-navigator
1
0
Fork 0
mirror of https://github.com/45Drives/cockpit-navigator.git synced 2025-07-29 08:34:50 +02:00
Code Issues Packages Projects Releases Wiki Activity

add search bar to filter items in directory

Browse Source
This commit is contained in:
joshuaboud 2021-06-08 14:54:58 -03:00
parent ec5b66df1a
commit c1c473708b
No known key found for this signature in database
GPG Key ID: 17EFB59E2A8BF50E
3 changed files with 49 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
navigator/navigator.css
View File

@ -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;

6
navigator/navigator.html
View File

@ -37,7 +37,7 @@
</div>
</div>
<div class="flex-col outer-container">
<div class="flex-row">
<div class="flex-row nav-header">
<div class="nav-btn-group">
<button class="pf-c-button pf-m-secondary" id="nav-back-btn" title="Back"><i class="fas fa-arrow-left"></i></button>
<div class="horizontal-spacer"></div>
@ -54,6 +54,9 @@
</select>
</datalist>
<div class="horizontal-spacer"></div>
<input type="text" autocomplete="off" class="search-bar" id="search-bar" title="Search in Directory" placeholder="Search in Directory"></input>
<i class="fas fa-search"></i>
<div class="horizontal-spacer"></div>
<div class="nav-btn-group">
<button class="pf-c-button pf-m-primary" id="nav-mkdir-btn" title="New Directory"><i class="fas fa-folder-plus"></i></button>
<div class="horizontal-spacer"></div>
@ -73,7 +76,6 @@
<div id="sort-group-btn">Group<i class="sort-arrow fas" id="sort-group-icon"></i></div>
<div id="sort-size-btn">Size<i class="sort-arrow fas" id="sort-size-icon"></i></div>
</div>
<div class="nav-item list-view-top-spacer"></div>
<div class="nav-notifications" id="nav-notifications">
</div>
</div>

28
navigator/navigator.js
View File

@ -309,7 +309,11 @@ class NavEntry {
}
show() {
document.getElementById("nav-contents-view").appendChild(this.dom_element);
this.dom_element.style.display = "flex";
}
hide() {
this.dom_element.style.display = "none";
}
/**
@ -1460,9 +1464,10 @@ class NavWindow {
num_files++;
bytes_sum += file.stat["size"];
}
if(!file.is_hidden_file || this.show_hidden)
file.show();
this.entries.push(file);
if(!file.is_hidden_file || this.show_hidden) {
this.window.appendChild(file.dom_element);
this.entries.push(file);
}
file.context_menu_ref = this.context_menu;
});
document.getElementById("pwd").value = this.pwd().path_str();
@ -2078,6 +2083,16 @@ class NavWindow {
localStorage.setItem("item-display", this.item_display);
}
search_filter(event) {
var search_name = event.target.value;
this.entries.forEach((entry) => {
if (entry.filename().toLowerCase().startsWith(search_name.toLowerCase()))
entry.show();
else
entry.hide();
});
}
}
let nav_window = new NavWindow();
@ -2111,6 +2126,11 @@ function set_up_buttons() {
nav_window.refresh();
});
}
document.getElementById("search-bar").addEventListener("input", nav_window.search_filter.bind(nav_window));
document.getElementById("search-bar").addEventListener("keydown", (e) => {
if (e.keyCode === 13)
nav_window.search_filter(e);
});
}
async function main() {