diff --git a/navigator/navigator.css b/navigator/navigator.css index 0339a72..559f749 100644 --- a/navigator/navigator.css +++ b/navigator/navigator.css @@ -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; diff --git a/navigator/navigator.html b/navigator/navigator.html index fc71317..4ad9451 100644 --- a/navigator/navigator.html +++ b/navigator/navigator.html @@ -30,6 +30,11 @@ +
@@ -61,9 +66,9 @@
- +
- +
diff --git a/navigator/navigator.js b/navigator/navigator.js index 998a8fe..4c4c7f8 100644 --- a/navigator/navigator.js +++ b/navigator/navigator.js @@ -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();