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

show and stylize properties

Browse Source
This commit is contained in:
joshuaboud 2021-05-25 14:37:59 -03:00
parent 0d12a2d4b9
commit d5e3e6ad47
No known key found for this signature in database
GPG Key ID: 17EFB59E2A8BF50E
2 changed files with 60 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
navigator/navigator.css
View File

@ -40,7 +40,7 @@
.contents-view { .contents-view {
height: 100%; height: 100%;
flex-basis: 0; flex-basis: 0;
flex-grow: 4; flex-grow: 8;
background-color: #151515; background-color: #151515;
border: 1px solid #3c3f42; border: 1px solid #3c3f42;
border-radius: 4px; border-radius: 4px;
@ -112,8 +112,35 @@
.info-column { .info-column {
background-color: #212427; background-color: #212427;
flex-basis: 0; flex-basis: 0;
flex-grow: 1; flex-grow: 3;
padding: 1em; padding: 1em;
border: 1px solid #3c3f42; border: 1px solid #3c3f42;
border-radius: 4px; border-radius: 4px;
} }
.nav-info-column-filename {
margin: 0 12px 0 12px;
font-weight: bolder;
font-size: 150%;
}
.nav-property-pair {
margin: 0 12px 0 12px;
display: flex;
flex-flow: row nowrap;
align-items: baseline;
}
.nav-property-pair-key {
font-weight: bold;
flex-basis: 0;
flex: 2;
padding-right: 5px;
}
.nav-property-pair-value {
font-family:'Courier New', Courier, monospace;
font-size: 85%;
flex-basis: 0;
flex: 3;
}

37
navigator/navigator.js
View File

@ -1,5 +1,27 @@
function property_entry_html(key, value) {
var html = '<div class="nav-property-pair">';
html += '<span class="nav-property-pair-key">' + key + '</span>'
html += '<span class="nav-property-pair-value">' + value + '</span>'
html += '</div>'
return html;
}
function format_bytes(bytes) {
var units = [" B", " KiB", " MiB", " GiB", " TiB", " PiB"];
var index = Math.min(Math.floor(Math.log(bytes) / Math.log(1024)), units.length - 1)
var pow = Math.pow(1024, index);
var formatted = bytes / pow;
return formatted.toFixed(2).toString() + units[index];
}
function format_time(timestamp) {
var date = new Date(timestamp * 1000);
console.log(date);
return date.toLocaleString();
}
class NavEntry { class NavEntry {
constructor(/*string or array*/ path, /*dict*/ stat) { constructor(/*string or array*/ path, /*dict*/ stat) {
if(typeof path == 'string') if(typeof path == 'string')
@ -15,7 +37,7 @@ class NavEntry {
this.dom_element.appendChild(icon); this.dom_element.appendChild(icon);
this.dom_element.appendChild(title); this.dom_element.appendChild(title);
this.stat = stat; this.stat = stat;
this.dom_element.nav_item_icon.addEventListener("click", this) this.dom_element.addEventListener("click", this)
} }
destroy() { destroy() {
while(this.dom_element.firstChild){ while(this.dom_element.firstChild){
@ -40,11 +62,14 @@ class NavEntry {
return this.stat; return this.stat;
} }
show_properties(){ show_properties(){
var html = '<div class="nav-info-column-filename">' + this.filename() + '</div>\n'; var html = '<div class="nav-info-column-filename">' + this.filename() + '</div>';
html += '<div class="nav-property-pair">'; html += property_entry_html("Mode", this.stat["mode-str"]);
html += '<span class="nav-property-pair-key">Mode: </span>' html += property_entry_html("Owner", this.stat["owner"] + " (" + this.stat["uid"] + ")");
html += '<span class="nav-property-pair-value">' + this.stat["mode-str"] + '</span>' html += property_entry_html("Group", this.stat["group"] + " (" + this.stat["gid"] + ")");
html += '</div>' html += property_entry_html("Size", format_bytes(this.stat["size"]));
html += property_entry_html("Accessed", format_time(this.stat["atime"]));
html += property_entry_html("Modified", format_time(this.stat["mtime"]));
html += property_entry_html("Created", format_time(this.stat["ctime"]));
document.getElementById("nav-info-column").innerHTML = html; document.getElementById("nav-info-column").innerHTML = html;
} }
} }