add edit properties window and implement filling current values

This commit is contained in:
joshuaboud 2021-05-25 17:54:21 -03:00
parent 5338ddac07
commit 498cc6f3ad
No known key found for this signature in database
GPG Key ID: 17EFB59E2A8BF50E
3 changed files with 87 additions and 7 deletions

View File

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

View File

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

View File

@ -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() {