mirror of
https://github.com/bunkerity/bunkerweb
synced 2026-05-24 09:28:37 +00:00
Update readonly UI
* Disabled 'disabled by' on settings when readonly * Force readonly on editor even if action button is disabled * Add disabled style for deletable plugins in plugin page * Instances action not disabled on readonly * Add global config multiple settings readonly
This commit is contained in:
parent
b29e1c99a5
commit
6549f90dc9
8 changed files with 42 additions and 14 deletions
File diff suppressed because one or more lines are too long
|
|
@ -13,6 +13,12 @@ class Multiple {
|
|||
constructor(prefix) {
|
||||
this.prefix = prefix;
|
||||
this.container = document.querySelector("main");
|
||||
this.isReadonly =
|
||||
document
|
||||
.querySelector("[data-global-is-readonly]")
|
||||
.getAttribute("data-global-is-readonly") === "true"
|
||||
? true
|
||||
: false;
|
||||
this.init();
|
||||
}
|
||||
|
||||
|
|
@ -185,7 +191,9 @@ class Multiple {
|
|||
? true
|
||||
: false;
|
||||
|
||||
return proDisabled;
|
||||
if (proDisabled || this.isReadonly) return true;
|
||||
|
||||
return false;
|
||||
}
|
||||
|
||||
sortMultipleByContainerAndSuffixe(obj) {
|
||||
|
|
@ -543,6 +551,7 @@ class Multiple {
|
|||
//for already existing global config multiples
|
||||
//global is check
|
||||
setDisabledMultServ(inp, method, global) {
|
||||
if (o) return inp.setAttribute("disabled", "");
|
||||
// Check if pro
|
||||
const proDisabled = inp
|
||||
.closest("[data-plugin-item]")
|
||||
|
|
|
|||
|
|
@ -291,6 +291,12 @@ class FolderDropdown {
|
|||
|
||||
class FolderEditor {
|
||||
constructor() {
|
||||
this.isReadonly =
|
||||
document
|
||||
.querySelector(`[data-global-is-readonly]`)
|
||||
.getAttribute(`data-global-is-readonly`) === "true"
|
||||
? true
|
||||
: false;
|
||||
this.editor = ace.edit("editor");
|
||||
this.darkMode = document.querySelector("[data-dark-toggle]");
|
||||
this.initEditor();
|
||||
|
|
@ -300,6 +306,7 @@ class FolderEditor {
|
|||
initEditor() {
|
||||
//editor options
|
||||
this.editor.setShowPrintMargin(false);
|
||||
this.editor.setReadOnly(this.isReadonly);
|
||||
this.setDarkMode();
|
||||
}
|
||||
|
||||
|
|
@ -324,10 +331,6 @@ class FolderEditor {
|
|||
? this.editor.setTheme("ace/theme/dracula")
|
||||
: this.editor.setTheme("ace/theme/dawn");
|
||||
}
|
||||
|
||||
readOnlyBool(bool) {
|
||||
this.editor.setReadOnly(bool);
|
||||
}
|
||||
}
|
||||
|
||||
class FolderModal {
|
||||
|
|
@ -666,8 +669,10 @@ class FolderModal {
|
|||
|
||||
//UTILS
|
||||
disabledDOMInpt(bool) {
|
||||
this.modalPathName.disabled = bool;
|
||||
ace.edit("editor").setReadOnly(bool);
|
||||
if (this.isReadonly) ace.edit("editor").setReadOnly(true);
|
||||
if (this.isReadonly) this.modalPathName.disabled = true;
|
||||
if (!this.isReadonly) this.modalPathName.disabled = bool;
|
||||
if (!this.isReadonly) ace.edit("editor").setReadOnly(bool);
|
||||
}
|
||||
|
||||
closeModal() {
|
||||
|
|
|
|||
|
|
@ -268,11 +268,18 @@ class Password {
|
|||
|
||||
class DisabledPop {
|
||||
constructor() {
|
||||
this.isReadonly =
|
||||
document
|
||||
.querySelector("[data-global-is-readonly]")
|
||||
.getAttribute("data-global-is-readonly") === "true"
|
||||
? true
|
||||
: false;
|
||||
this.init();
|
||||
}
|
||||
|
||||
init() {
|
||||
window.addEventListener("pointerover", (e) => {
|
||||
if (this.isReadonly) return;
|
||||
//for checkbox and regular inputs
|
||||
if (
|
||||
e.target.tagName === "INPUT" &&
|
||||
|
|
@ -292,6 +299,8 @@ class DisabledPop {
|
|||
});
|
||||
|
||||
window.addEventListener("pointerout", (e) => {
|
||||
if (this.isReadonly) return;
|
||||
|
||||
try {
|
||||
const popupEl = e.target
|
||||
.closest("div")
|
||||
|
|
|
|||
|
|
@ -666,13 +666,17 @@
|
|||
}
|
||||
|
||||
.plugins-list-items-delete {
|
||||
@apply z-20 mx-2 inline-block font-bold text-left text-white uppercase align-middle transition-all cursor-pointer text-xs ease-in tracking-tight-rem hover:-translate-y-px;
|
||||
@apply z-20 mx-2 inline-block font-bold text-left text-white uppercase align-middle transition-all cursor-pointer text-xs ease-in tracking-tight-rem hover:-translate-y-px disabled:cursor-not-allowed;
|
||||
}
|
||||
|
||||
.plugins-list-items-delete-svg {
|
||||
@apply h-5 w-5 fill-red-500 dark:brightness-90;
|
||||
}
|
||||
|
||||
.readonly.plugins-list-items-delete-svg {
|
||||
@apply cursor-not-allowed opacity-[0.5];
|
||||
}
|
||||
|
||||
.plugins-list-items-link {
|
||||
@apply hover:-translate-y-px mx-1;
|
||||
}
|
||||
|
|
|
|||
1
src/ui/templates/base.html
vendored
1
src/ui/templates/base.html
vendored
|
|
@ -22,6 +22,7 @@
|
|||
<!-- info -->
|
||||
<main class="xl:pl-75 w-full px-2 sm:px-6 pb-0 pt-20 sm:pt-3 min-h-[85vh] flex flex-col justify-between">
|
||||
<div class="max-w-[1920px] grid gap-y-4 gap-3 sm:gap-4 lg:gap-6 grid-cols-12 w-full">
|
||||
<div class="hidden" data-global-is-readonly="{%if is_readonly%}true{% else%}false{%endif%}"></div>
|
||||
{% block content %}{% endblock %}
|
||||
</div>
|
||||
{% include "footer.html" %}
|
||||
|
|
|
|||
8
src/ui/templates/instances.html
vendored
8
src/ui/templates/instances.html
vendored
|
|
@ -40,7 +40,7 @@
|
|||
<!-- button list-->
|
||||
<div class="relative w-full flex justify-center sm:justify-end">
|
||||
{% if instance._type == "local" and instance.health %}
|
||||
<button {% if is_readonly%}disabled{% endif %} type="submit"
|
||||
<button type="submit"
|
||||
name="operation"
|
||||
value="restart"
|
||||
class="edit-btn mx-1 text-xs">Restart</button>
|
||||
|
|
@ -50,18 +50,18 @@
|
|||
class="delete-btn mx-1 text-xs">Stop</button>
|
||||
{% endif %}
|
||||
{% if not instance._type == "local" and instance.health %}
|
||||
<button {% if is_readonly%}disabled{% endif %} type="submit"
|
||||
<button type="submit"
|
||||
name="operation"
|
||||
value="reload"
|
||||
class="edit-btn mx-1 text-xs">Reload</button>
|
||||
<button {% if is_readonly%}disabled{% endif %} type="submit"
|
||||
<button type="submit"
|
||||
name="operation"
|
||||
value="stop"
|
||||
class="delete-btn mx-1 text-xs">Stop</button>
|
||||
{% endif %}
|
||||
{% if instance._type == "local" and not instance.health or not
|
||||
instance._type == "local" and not instance.health %}
|
||||
<button {% if is_readonly%}disabled{% endif %} type="submit"
|
||||
<button type="submit"
|
||||
name="operation"
|
||||
value="start"
|
||||
class="valid-btn mx-1 text-xs">Start</button>
|
||||
|
|
|
|||
2
src/ui/templates/plugins.html
vendored
2
src/ui/templates/plugins.html
vendored
|
|
@ -111,7 +111,7 @@
|
|||
name="{{ plugin['id'] }}"
|
||||
aria-label="delete plugin"
|
||||
class="plugins-list-items-delete">
|
||||
<svg class="plugins-list-items-delete-svg"
|
||||
<svg class="plugins-list-items-delete-svg {% if is_readonly%}readonly{% endif %}"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 448 512">
|
||||
<path d="M135.2 17.7L128 32H32C14.3 32 0 46.3 0 64S14.3 96 32 96H416c17.7 0 32-14.3 32-32s-14.3-32-32-32H320l-7.2-14.3C307.4 6.8 296.3 0 284.2 0H163.8c-12.1 0-23.2 6.8-28.6 17.7zM416 128H32L53.2 467c1.6 25.3 22.6 45 47.9 45H346.9c25.3 0 46.3-19.7 47.9-45L416 128z" />
|
||||
|
|
|
|||
Loading…
Reference in a new issue