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

color scrollbar, add spinner, disable btns on edit

Browse Source
This commit is contained in:
joshuaboud 2021-05-27 14:57:35 -03:00
parent f04785d4d0
commit 827b138d57
No known key found for this signature in database
GPG Key ID: 17EFB59E2A8BF50E
3 changed files with 105 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

75
navigator/navigator.css
View File

@ -7,6 +7,10 @@
--selected: #fff;
--toggle-light: #151515;
--toggle-dark: #ccc;
--scrollbar-thumb: var(--border);
--scrollbar-bg: var(--navigation);
--scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-bg);
--loading-bg-color: rgba(255, 255, 255, 0.5);
}
[data-theme="dark"] {
@ -16,8 +20,79 @@
--navigation: #151515;
--font: #fff;
--selected: #191a1b;
--scrollbar-thumb: var(--container);
--scrollbar-bg: var(--navigation);
--scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-bg);
--loading-bg-color: rgba(33, 36, 39, 0.5);
}
.pf-c-button:disabled[data-theme="dark"] {
background-color: var(--border);
}
.nav-loader-container {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: var(--loading-bg-color);
z-index: 10;
}
.nav-loader-centerer {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 27%;
display: flex;
align-items: center;
align-content: center;
}
.nav-loader {
margin: auto;
border: 6px solid rgba(0,0,0,0);
border-radius: 50%;
border-top: 6px solid var(--border);
width: 100px;
height: 100px;
-webkit-animation: spin 2s linear infinite; /* Safari */
animation: spin 2s linear infinite;
}
/* Safari */
@-webkit-keyframes spin {
0% { -webkit-transform: rotate(0deg); }
100% { -webkit-transform: rotate(360deg); }
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
body::-webkit-scrollbar {
width: 11px;
}
body {
scrollbar-width: thin;
scrollbar-color: var(--scrollbar-color);
}
body::-webkit-scrollbar-track {
background: var(--scrollbar-bg);
}
body::-webkit-scrollbar-thumb {
background-color: var(--scrollbar-thumb) ;
border-radius: 6px;
border: 3px solid var(--scrollbar-bg);
}
.flex-row {
display: flex;
flex-direction: row;

9
navigator/navigator.html
View File

@ -30,6 +30,11 @@
<script defer src="navigator.js"></script>
</head>
<body>
<div class="nav-loader-container" id="nav-loader-container">
<div class="nav-loader-centerer">
<div class="nav-loader"></div>
</div>
</div>
<div class="flex-col outer-container">
<div class="flex-row">
<div class="nav-btn-group">
@ -61,9 +66,9 @@
<textarea id="nav-edit-contents-textarea"></textarea>
<div class="vertical-spacer"></div>
<div class="nav-btn-group">
<button class="pf-c-button pf-m-danger" id="nav-cancel-edit-contents-btn"><i class="fas fa-times"></i></button>
<button class="pf-c-button pf-m-danger editor-btn" id="nav-cancel-edit-contents-btn"><i class="fas fa-times"></i></button>
<div class="horizontal-spacer"></div>
<button class="pf-c-button pf-m-primary" id="nav-continue-edit-contents-btn"><i class="fas fa-save"></i></button>
<button class="pf-c-button pf-m-primary editor-btn" id="nav-continue-edit-contents-btn"><i class="fas fa-save"></i></button>
</div>
</div>
<div class="horizontal-spacer"></div>

23
navigator/navigator.js
View File

@ -227,6 +227,10 @@ class NavFile extends NavEntry {
await proc;
}
async show_edit_file_contents() {
for (let button of document.getElementsByTagName("button")) {
if (!button.classList.contains("editor-btn"))
button.disabled = true;
}
var proc_output = await cockpit.spawn(["file", "--mime-type", this.path_str()], {superuser: "try"});
var fields = proc_output.split(':');
var type = fields[1].trim();
@ -251,6 +255,9 @@ class NavFile extends NavEntry {
hide_edit_file_contents() {
document.getElementById("nav-edit-contents-view").style.display = "none";
document.getElementById("nav-contents-view").style.display = "flex";
for (let button of document.getElementsByTagName("button")) {
button.disabled = false;
}
}
}
@ -396,6 +403,7 @@ class NavWindow {
}
}
async refresh() {
this.start_load();
var files = await this.pwd().get_children(this);
while (this.entries.length) {
var entry = this.entries.pop();
@ -408,6 +416,7 @@ class NavWindow {
document.getElementById("pwd").value = this.pwd().path_str();
this.set_selected(this.pwd());
this.show_selected_properties();
this.stop_load();
}
pwd() {
return this.path_stack[this.path_stack_index];
@ -611,6 +620,20 @@ class NavWindow {
list.appendChild(option);
});
}
start_load() {
document.getElementById("nav-loader-container").hidden = false;
var buttons = document.getElementsByTagName("button");
for (let button of buttons) {
button.disabled = true;
}
}
stop_load() {
document.getElementById("nav-loader-container").hidden = true;
var buttons = document.getElementsByTagName("button");
for (let button of buttons) {
button.disabled = false;
}
}
}
let nav_window = new NavWindow();