tyler.durden/cockpit-navigator
1
0
Fork 0
mirror of https://github.com/45Drives/cockpit-navigator.git synced 2025-07-30 00:55:30 +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; padding-bottom: 0;
} }
.nav-header {
align-items: baseline;
}
input[type="text"] { input[type="text"] {
background-color: var(--container); background-color: var(--container);
color: inherit; color: inherit;
flex-grow: 1;
padding: 0.25em 1em 0.25em 1em; padding: 0.25em 1em 0.25em 1em;
border: 1px solid var(--border); border: 1px solid var(--border);
border-radius: 4px; 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 { .inner-container {
@ -280,14 +300,6 @@ input[type="text"] {
z-index: 10; 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 { .contents-view-list-header > div {
cursor: pointer; cursor: pointer;
position: relative; position: relative;

6
navigator/navigator.html
View File

@ -37,7 +37,7 @@
</div> </div>
</div> </div>
<div class="flex-col outer-container"> <div class="flex-col outer-container">
<div class="flex-row"> <div class="flex-row nav-header">
<div class="nav-btn-group"> <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> <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> <div class="horizontal-spacer"></div>
@ -54,6 +54,9 @@
</select> </select>
</datalist> </datalist>
<div class="horizontal-spacer"></div> <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"> <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> <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> <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-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 id="sort-size-btn">Size<i class="sort-arrow fas" id="sort-size-icon"></i></div>
</div> </div>
<div class="nav-item list-view-top-spacer"></div>
<div class="nav-notifications" id="nav-notifications"> <div class="nav-notifications" id="nav-notifications">
</div> </div>
</div> </div>

28
navigator/navigator.js
View File

@ -309,7 +309,11 @@ class NavEntry {
} }
show() { 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++; num_files++;
bytes_sum += file.stat["size"]; bytes_sum += file.stat["size"];
} }
if(!file.is_hidden_file || this.show_hidden) if(!file.is_hidden_file || this.show_hidden) {
file.show(); this.window.appendChild(file.dom_element);
this.entries.push(file); this.entries.push(file);
}
file.context_menu_ref = this.context_menu; file.context_menu_ref = this.context_menu;
}); });
document.getElementById("pwd").value = this.pwd().path_str(); document.getElementById("pwd").value = this.pwd().path_str();
@ -2078,6 +2083,16 @@ class NavWindow {
localStorage.setItem("item-display", this.item_display); 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(); let nav_window = new NavWindow();
@ -2111,6 +2126,11 @@ function set_up_buttons() {
nav_window.refresh(); 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() { async function main() {