mirror of
https://github.com/45Drives/cockpit-navigator.git
synced 2025-07-31 01:24:37 +02:00
color scrollbar, add spinner, disable btns on edit
This commit is contained in:
joshuaboud
parent
f04785d4d0
commit
827b138d57
@ -7,6 +7,10 @@
|
|||||||
--selected: #fff;
|
--selected: #fff;
|
||||||
--toggle-light: #151515;
|
--toggle-light: #151515;
|
||||||
--toggle-dark: #ccc;
|
--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"] {
|
[data-theme="dark"] {
|
||||||
@ -16,8 +20,79 @@
|
|||||||
--navigation: #151515;
|
--navigation: #151515;
|
||||||
--font: #fff;
|
--font: #fff;
|
||||||
--selected: #191a1b;
|
--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 {
|
.flex-row {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
|
|||||||
@ -30,6 +30,11 @@
|
|||||||
<script defer src="navigator.js"></script>
|
<script defer src="navigator.js"></script>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<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-col outer-container">
|
||||||
<div class="flex-row">
|
<div class="flex-row">
|
||||||
<div class="nav-btn-group">
|
<div class="nav-btn-group">
|
||||||
@ -61,9 +66,9 @@
|
|||||||
<textarea id="nav-edit-contents-textarea"></textarea>
|
<textarea id="nav-edit-contents-textarea"></textarea>
|
||||||
<div class="vertical-spacer"></div>
|
<div class="vertical-spacer"></div>
|
||||||
<div class="nav-btn-group">
|
<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>
|
<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>
|
</div>
|
||||||
<div class="horizontal-spacer"></div>
|
<div class="horizontal-spacer"></div>
|
||||||
|
|||||||
@ -227,6 +227,10 @@ class NavFile extends NavEntry {
|
|||||||
await proc;
|
await proc;
|
||||||
}
|
}
|
||||||
async show_edit_file_contents() {
|
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 proc_output = await cockpit.spawn(["file", "--mime-type", this.path_str()], {superuser: "try"});
|
||||||
var fields = proc_output.split(':');
|
var fields = proc_output.split(':');
|
||||||
var type = fields[1].trim();
|
var type = fields[1].trim();
|
||||||
@ -251,6 +255,9 @@ class NavFile extends NavEntry {
|
|||||||
hide_edit_file_contents() {
|
hide_edit_file_contents() {
|
||||||
document.getElementById("nav-edit-contents-view").style.display = "none";
|
document.getElementById("nav-edit-contents-view").style.display = "none";
|
||||||
document.getElementById("nav-contents-view").style.display = "flex";
|
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() {
|
async refresh() {
|
||||||
|
this.start_load();
|
||||||
var files = await this.pwd().get_children(this);
|
var files = await this.pwd().get_children(this);
|
||||||
while (this.entries.length) {
|
while (this.entries.length) {
|
||||||
var entry = this.entries.pop();
|
var entry = this.entries.pop();
|
||||||
@ -408,6 +416,7 @@ class NavWindow {
|
|||||||
document.getElementById("pwd").value = this.pwd().path_str();
|
document.getElementById("pwd").value = this.pwd().path_str();
|
||||||
this.set_selected(this.pwd());
|
this.set_selected(this.pwd());
|
||||||
this.show_selected_properties();
|
this.show_selected_properties();
|
||||||
|
this.stop_load();
|
||||||
}
|
}
|
||||||
pwd() {
|
pwd() {
|
||||||
return this.path_stack[this.path_stack_index];
|
return this.path_stack[this.path_stack_index];
|
||||||
@ -611,6 +620,20 @@ class NavWindow {
|
|||||||
list.appendChild(option);
|
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();
|
let nav_window = new NavWindow();
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user