mirror of
https://github.com/45Drives/cockpit-navigator.git
synced 2025-07-31 01:24:37 +02:00
add edit properties window and implement filling current values
This commit is contained in:
parent
5338ddac07
commit
498cc6f3ad
@ -20,6 +20,10 @@
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
.nav-hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.outer-container {
|
||||
height: 100%;
|
||||
background-color: #212427;
|
||||
@ -104,7 +108,7 @@
|
||||
}
|
||||
|
||||
.nav-property-pair {
|
||||
margin: 0 12px 0 12px;
|
||||
margin: 2px 12px 2px 12px;
|
||||
display: flex;
|
||||
flex-flow: row nowrap;
|
||||
align-items: baseline;
|
||||
@ -122,4 +126,15 @@
|
||||
font-size: 85%;
|
||||
flex-basis: 0;
|
||||
flex: 3;
|
||||
}
|
||||
|
||||
.grid-container {
|
||||
margin: 0 0 2px 42px;
|
||||
display: grid;
|
||||
grid-template-columns: auto auto auto auto;
|
||||
justify-content: space-evenly;
|
||||
}
|
||||
|
||||
.grid-label {
|
||||
font-weight: bold;
|
||||
}
|
@ -45,11 +45,49 @@
|
||||
<div class="contents-view" id="nav-contents-view"></div>
|
||||
<div class="horizontal-spacer"></div>
|
||||
<div class="nav-info-column" id="nav-info-column">
|
||||
<div class="flex-row space-between">
|
||||
<div class="nav-info-column-filename" id="nav-info-column-filename"></div>
|
||||
<button class="pf-c-button pf-m-primary"><i class="fas fa-edit"></i></button>
|
||||
<div id="nav-show-properties">
|
||||
<div class="flex-row space-between">
|
||||
<div class="nav-info-column-filename"></div>
|
||||
<button class="pf-c-button pf-m-primary" id="nav-edit-properties-btn"><i class="fas fa-edit"></i></button>
|
||||
</div>
|
||||
<div class="nav-info-column-properties" id="nav-info-column-properties"></div>
|
||||
</div>
|
||||
<div class="nav-hidden" id="nav-edit-properties">
|
||||
<div class="nav-info-column-filename"></div>
|
||||
<div class="nav-property-pair">
|
||||
<span class="nav-property-pair-key">Name</span>
|
||||
<input type="text" class="nav-property-pair-value" id="nav-edit-filename"></input>
|
||||
</div>
|
||||
<div class="nav-property-pair">
|
||||
<div class="nav-property-pair-key">Mode</div>
|
||||
</div>
|
||||
<div class="grid-container">
|
||||
<div></div>
|
||||
<div class="grid-label">Read</div>
|
||||
<div class="grid-label">Write</div>
|
||||
<div class="grid-label">Execute</div>
|
||||
<div class="grid-label">Owner</div>
|
||||
<input type="checkbox" id="owner-read"></input>
|
||||
<input type="checkbox" id="owner-write"></input>
|
||||
<input type="checkbox" id="owner-exec"></input>
|
||||
<div class="grid-label">Group</div>
|
||||
<input type="checkbox" id="group-read"></input>
|
||||
<input type="checkbox" id="group-write"></input>
|
||||
<input type="checkbox" id="group-exec"></input>
|
||||
<div class="grid-label">Other</div>
|
||||
<input type="checkbox" id="other-read"></input>
|
||||
<input type="checkbox" id="other-write"></input>
|
||||
<input type="checkbox" id="other-exec"></input>
|
||||
</div>
|
||||
<div class="nav-property-pair">
|
||||
<span class="nav-property-pair-key">Owner</span>
|
||||
<input type="text" class="nav-property-pair-value" id="nav-edit-owner"></input>
|
||||
</div>
|
||||
<div class="nav-property-pair">
|
||||
<span class="nav-property-pair-key">Group</span>
|
||||
<input type="text" class="nav-property-pair-value" id="nav-edit-group"></input>
|
||||
</div>
|
||||
</div>
|
||||
<div class="nav-info-column-properties" id="nav-info-column-properties"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
@ -73,8 +73,11 @@ class NavEntry {
|
||||
get_properties() {
|
||||
return this.stat;
|
||||
}
|
||||
show_properties(){
|
||||
document.getElementById("nav-info-column-filename").innerText = this.filename();
|
||||
show_properties() {
|
||||
var selected_name_fields = document.getElementsByClassName("nav-info-column-filename");
|
||||
for(let elem of selected_name_fields){
|
||||
elem.innerText = this.filename();
|
||||
}
|
||||
var html = "";
|
||||
html += property_entry_html("Mode", this.stat["mode-str"]);
|
||||
html += property_entry_html("Owner", this.stat["owner"] + " (" + this.stat["uid"] + ")");
|
||||
@ -85,6 +88,19 @@ class NavEntry {
|
||||
html += property_entry_html("Created", format_time(this.stat["ctime"]));
|
||||
document.getElementById("nav-info-column-properties").innerHTML = html;
|
||||
}
|
||||
populate_edit_fields() {
|
||||
document.getElementById("nav-edit-filename").value = this.filename();
|
||||
var mode_bits = ["other-exec", "other-write", "other-read",
|
||||
"group-exec", "group-write", "group-read",
|
||||
"owner-exec", "owner-write", "owner-read"];
|
||||
for(let i = 0; i < mode_bits.length; i++){
|
||||
var bit_check = (1 << i);
|
||||
var result = this.stat["mode"] & bit_check;
|
||||
document.getElementById(mode_bits[i]).checked = (result != 0);
|
||||
}
|
||||
document.getElementById("nav-edit-owner").value = this.stat["owner"];
|
||||
document.getElementById("nav-edit-group").value = this.stat["group"];
|
||||
}
|
||||
}
|
||||
|
||||
class NavFile extends NavEntry {
|
||||
@ -199,6 +215,7 @@ class NavWindow {
|
||||
this.selected_entry.show_properties();
|
||||
}
|
||||
set_selected(/*NavEntry*/ entry) {
|
||||
this.hide_edit_selected();
|
||||
this.selected_entry.dom_element.classList.remove("nav-item-selected");
|
||||
if(this.selected_entry.nav_type === "dir"){
|
||||
this.selected_entry.dom_element.nav_item_icon.classList.remove("fa-folder-open");
|
||||
@ -211,12 +228,22 @@ class NavWindow {
|
||||
this.selected_entry.dom_element.nav_item_icon.classList.add("fa-folder-open");
|
||||
}
|
||||
}
|
||||
show_edit_selected() {
|
||||
this.selected_entry.populate_edit_fields();
|
||||
document.getElementById("nav-edit-properties").style.display = "block";
|
||||
document.getElementById("nav-show-properties").style.display = "none";
|
||||
}
|
||||
hide_edit_selected() {
|
||||
document.getElementById("nav-show-properties").style.display = "block";
|
||||
document.getElementById("nav-edit-properties").style.display = "none";
|
||||
}
|
||||
}
|
||||
|
||||
let nav_window = new NavWindow();
|
||||
|
||||
function set_up_buttons() {
|
||||
document.getElementById("nav-up-dir-btn").addEventListener("click", nav_window.up.bind(nav_window));
|
||||
document.getElementById("nav-edit-properties-btn").addEventListener("click", nav_window.show_edit_selected.bind(nav_window));
|
||||
}
|
||||
|
||||
async function main() {
|
||||
|
Loading…
x
Reference in New Issue
Block a user