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:
Jordan Blasenhauer 2024-05-22 10:56:02 +02:00
parent b29e1c99a5
commit 6549f90dc9
8 changed files with 42 additions and 14 deletions

File diff suppressed because one or more lines are too long

View file

@ -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]")

View file

@ -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() {

View file

@ -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")

View file

@ -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;
}

View file

@ -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" %}

View file

@ -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>

View file

@ -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" />