diff --git a/static/manifest-gui.css b/static/manifest-gui.css index 9f60420..1f88ee5 100644 --- a/static/manifest-gui.css +++ b/static/manifest-gui.css @@ -261,6 +261,14 @@ button#reset-to-default:active::before { content: "♻️♻️♻️♻️♻️"; } +button#remove.disabled { + background-color: #303030; + color: #808080; + cursor: not-allowed; + opacity: 0.5; + pointer-events: none; +} + button#remove::before { content: "−"; } diff --git a/static/scripts/rendering/config-editor.ts b/static/scripts/rendering/config-editor.ts index 9b85b49..1561070 100644 --- a/static/scripts/rendering/config-editor.ts +++ b/static/scripts/rendering/config-editor.ts @@ -47,15 +47,23 @@ export function renderConfigEditor(renderer: ManifestRenderer, pluginManifest: M }); } - const add = document.getElementById("add"); - const remove = document.getElementById("remove"); + const add = document.getElementById("add") as HTMLButtonElement; + const remove = document.getElementById("remove") as HTMLButtonElement; if (!add || !remove) { throw new Error("Add or remove button not found"); } add.addEventListener("click", writeNewConfig.bind(null, renderer, "add")); - remove.addEventListener("click", () => writeNewConfig.bind(null, renderer, "remove")); - const resetToDefaultButton = document.getElementById("reset-to-default"); + if (plugin) { + remove.disabled = false; + remove.classList.remove("disabled"); + remove.addEventListener("click", () => writeNewConfig.bind(null, renderer, "remove")); + } else { + remove.disabled = true; + remove.classList.add("disabled"); + } + + const resetToDefaultButton = document.getElementById("reset-to-default") as HTMLButtonElement; if (!resetToDefaultButton) { throw new Error("Reset to default button not found"); }