From bb7ca889ceb53952182e7cb40193b6359f3d8096 Mon Sep 17 00:00:00 2001 From: BlasenhauerJ Date: Tue, 13 Dec 2022 18:13:16 +0100 Subject: [PATCH] enhance darkmode + fix + factorisation => some title, button and text are now lighter for visibility => fix show/hide toggle gap between created multiples and existed ones => fix jinja error logic to display right svg depending type of element (folder, file, root...) => fix editor not following dark mode on page load => change job svg to differenciate it with valid info => replace actions btns on file manager => factorisation of services multiple class --- src/ui/static/css/dashboard.css | 123 +++++++++++ src/ui/static/js/services.js | 294 ++++++++++++++----------- src/ui/static/js/utils/file.manager.js | 14 +- src/ui/templates/file-manager.html | 57 ++--- src/ui/templates/flashs.html | 4 +- src/ui/templates/footer.html | 4 +- src/ui/templates/header.html | 4 +- src/ui/templates/logs.html | 2 +- src/ui/templates/menu.html | 8 +- src/ui/templates/news.html | 2 +- src/ui/templates/plugins.html | 14 +- src/ui/templates/services-modal.html | 2 +- src/ui/templates/services.html | 8 +- src/ui/templates/settings_tabs.html | 6 +- 14 files changed, 358 insertions(+), 184 deletions(-) diff --git a/src/ui/static/css/dashboard.css b/src/ui/static/css/dashboard.css index 2427c624f..8133fe8d5 100644 --- a/src/ui/static/css/dashboard.css +++ b/src/ui/static/css/dashboard.css @@ -1406,6 +1406,18 @@ h6 { min-width: 500px; } +.min-w-\[100px\] { + min-width: 100px; +} + +.min-w-\[200px\] { + min-width: 200px; +} + +.min-w-\[150px\] { + min-width: 150px; +} + .max-w-180 { max-width: 45rem; } @@ -1553,6 +1565,36 @@ h6 { transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } +.translate-x-2 { + --tw-translate-x: 0.5rem; + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); +} + +.-translate-x-1 { + --tw-translate-x: -0.25rem; + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); +} + +.-translate-x-2 { + --tw-translate-x: -0.5rem; + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); +} + +.-translate-x-5 { + --tw-translate-x: -1.25rem; + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); +} + +.translate-x-4 { + --tw-translate-x: 1rem; + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); +} + +.translate-x-3 { + --tw-translate-x: 0.75rem; + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); +} + .rotate-12 { --tw-rotate: 12deg; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); @@ -2091,6 +2133,14 @@ h6 { fill: #3a416f; } +.fill-green-700 { + fill: #15803d; +} + +.fill-emerald-600 { + fill: #059669; +} + .stroke-0 { stroke-width: 0; } @@ -2961,6 +3011,11 @@ h6 { filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); } +.hover\:brightness-95:hover { + --tw-brightness: brightness(.95); + filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); +} + .focus\:border-primary:focus { --tw-border-opacity: 1; border-color: rgb(8 85 119 / var(--tw-border-opacity)); @@ -3067,6 +3122,11 @@ h6 { border-color: rgb(73 80 87 / var(--tw-border-opacity)); } +.dark .dark\:border-slate-850 { + --tw-border-opacity: 1; + border-color: rgb(17 28 68 / var(--tw-border-opacity)); +} + .dark .dark\:bg-slate-900 { --tw-bg-opacity: 1; background-color: rgb(5 17 57 / var(--tw-bg-opacity)); @@ -3147,6 +3207,23 @@ h6 { background-color: rgb(5 17 57 / 0.3); } +.dark .dark\:bg-green-500\/90 { + background-color: rgb(34 197 94 / 0.9); +} + +.dark .dark .dark\:dark\:bg-green-500\/90 { + background-color: rgb(34 197 94 / 0.9); +} + +.dark .dark\:bg-blue-500\/90 { + background-color: rgb(94 114 228 / 0.9); +} + +.dark .dark\:bg-blue-600 { + --tw-bg-opacity: 1; + background-color: rgb(33 82 255 / var(--tw-bg-opacity)); +} + .dark .dark\:bg-opacity-70 { --tw-bg-opacity: 0.7; } @@ -3186,6 +3263,14 @@ h6 { fill: #adb5bd; } +.dark .dark\:fill-gray-600 { + fill: #6c757d; +} + +.dark .dark\:fill-emerald-600 { + fill: #059669; +} + .dark .dark\:text-white { --tw-text-opacity: 1; color: rgb(255 255 255 / var(--tw-text-opacity)); @@ -3211,6 +3296,11 @@ h6 { color: rgb(245 57 57 / var(--tw-text-opacity)); } +.dark .dark\:text-gray-200 { + --tw-text-opacity: 1; + color: rgb(233 236 239 / var(--tw-text-opacity)); +} + .dark .dark\:opacity-50 { opacity: 0.5; } @@ -3227,6 +3317,14 @@ h6 { opacity: 0.6; } +.dark .dark\:opacity-75 { + opacity: 0.75; +} + +.dark .dark\:opacity-95 { + opacity: 0.95; +} + .dark .dark\:shadow-dark-xl { --tw-shadow: 0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.2),0 1px 5px 0 rgba(0,0,0,.12); --tw-shadow-colored: 0 2px 2px 0 var(--tw-shadow-color), 0 3px 1px -2px var(--tw-shadow-color), 0 1px 5px 0 var(--tw-shadow-color); @@ -3259,6 +3357,16 @@ h6 { filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); } +.dark .dark\:brightness-95 { + --tw-brightness: brightness(.95); + filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); +} + +.dark .dark\:brightness-75 { + --tw-brightness: brightness(.75); + filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); +} + .dark .dark\:backdrop-brightness-110 { --tw-backdrop-brightness: brightness(1.1); -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia); @@ -3303,6 +3411,21 @@ h6 { filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); } +.dark .dark\:hover\:brightness-75:hover { + --tw-brightness: brightness(.75); + filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); +} + +.dark .dark\:hover\:brightness-110:hover { + --tw-brightness: brightness(1.1); + filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); +} + +.dark .dark\:hover\:brightness-105:hover { + --tw-brightness: brightness(1.05); + filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); +} + .dark .dark\:disabled\:border-gray-800:disabled { --tw-border-opacity: 1; border-color: rgb(37 47 64 / var(--tw-border-opacity)); diff --git a/src/ui/static/js/services.js b/src/ui/static/js/services.js index 1aaa96e7a..0c347087b 100644 --- a/src/ui/static/js/services.js +++ b/src/ui/static/js/services.js @@ -337,14 +337,15 @@ class Multiple { ) { //get plugin from btn const btn = e.target.closest("button"); - const serviceName = btn.getAttribute(`${this.prefix}-multiple-add`); + const attName = btn.getAttribute(`${this.prefix}-multiple-add`); //get all multiple groups const multipleEls = document.querySelectorAll( - `[${this.prefix}-settings-multiple*="${serviceName}"]` + `[${this.prefix}-settings-multiple*="${attName}"]` ); //case no schema if (multipleEls.length <= 0) return; - //check higher num + + //get the next container number logic let topNum = 0; multipleEls.forEach((container) => { @@ -354,19 +355,18 @@ class Multiple { const num = this.getSuffixNumOrFalse(ctnrName); if (!isNaN(num) && num > topNum) topNum = num; }); + //num is total - 1 or nothing if none + const setNum = `${multipleEls.length >= 2 ? topNum + 1 : topNum}`; //the default (schema) group is the last group const schema = document.querySelector( - `[${this.prefix}-settings-multiple="${serviceName}_SCHEMA"]` + `[${this.prefix}-settings-multiple="${attName}_SCHEMA"]` ); - //clone it and change name by total - 1 (schema is hidden) + //clone schema to create a group with new num const clone = schema.cloneNode(true); const name = clone .getAttribute("services-settings-multiple") - .replace( - `SCHEMA`, - `${multipleEls.length >= 2 ? topNum + 1 : topNum}` - ); + .replace(`SCHEMA`, `${setNum}`); clone.setAttribute("services-settings-multiple", name); this.showMultiple(clone); try { @@ -376,10 +376,7 @@ class Multiple { cloneContainer.forEach((ctnr) => { const newName = ctnr .getAttribute("setting-container") - .replace( - "SCHEMA", - `${multipleEls.length >= 2 ? topNum + 1 : topNum}` - ); + .replace("SCHEMA", `${setNum}`); ctnr.setAttribute("setting-container", newName); }); } catch (err) {} @@ -397,15 +394,14 @@ class Multiple { setNameID.forEach((name) => { try { - this.setNameIDloop( - clone.querySelectorAll(name), - multipleEls.length >= 2 ? topNum + 1 : topNum - ); + this.setNameIDloop(clone.querySelectorAll(name), setNum); } catch (err) {} }); //insert new group before first one schema.insertAdjacentElement("afterend", clone); + //show all groups + this.showMultByAtt(attName); } } catch (err) {} @@ -419,17 +415,7 @@ class Multiple { const att = e.target .closest("button") .getAttribute(`${this.prefix}-multiple-toggle`); - const multContainers = document.querySelectorAll( - `[services-settings-multiple^=${att}]` - ); - multContainers.forEach((container) => { - if ( - !container - .getAttribute("services-settings-multiple") - .includes("SCHEMA") - ) - container.classList.toggle("hidden"); - }); + this.toggleMultByAtt(att); } //remove last child } catch (err) {} @@ -451,6 +437,30 @@ class Multiple { }); } + showMultByAtt(att) { + const multContainers = document.querySelectorAll( + `[services-settings-multiple^=${att}]` + ); + multContainers.forEach((container) => { + if ( + !container.getAttribute("services-settings-multiple").includes("SCHEMA") + ) + container.classList.remove("hidden"); + }); + } + + toggleMultByAtt(att) { + const multContainers = document.querySelectorAll( + `[services-settings-multiple^=${att}]` + ); + multContainers.forEach((container) => { + if ( + !container.getAttribute("services-settings-multiple").includes("SCHEMA") + ) + container.classList.toggle("hidden"); + }); + } + updateModalMultiples(settings) { //keep only multiple settings value const multipleSettings = this.getMultiplesOnly(settings); @@ -489,10 +499,7 @@ class Multiple { `[setting-container$="SCHEMA"]` ); schemaSettings.forEach((schema) => { - const schemaName = schema - .getAttribute("setting-container") - .replace("_SCHEMA", "") - .trim(); + const schemaName = this.getSchemaName(schema); //add all custom settings to DOM on schema container for (const [key, data] of Object.entries(multiples)) { //get num if exists or false @@ -503,45 +510,7 @@ class Multiple { cloneSetting.setAttribute("setting-container", `${key}`); const title = cloneSetting.querySelector("h5"); title.textContent = `${title.textContent} ${num ? `#${num}` : ``}`; - - //replace input info - try { - const inp = cloneSetting.querySelector("input"); - this.setNameID(inp, key); - - if (inp.getAttribute("type") === "checkbox") { - if (data["value"] === "yes") inp.setAttribute("checked", ""); - if (data["value"] === "no") inp.removeAttribute("checked"); - inp.setAttribute("default-method", data["method"]); - } - - if (inp.getAttribute("type") !== "checkbox") { - inp.setAttribute("value", data["value"]); - inp.setAttribute("default-method", data["method"]); - } - } catch (err) {} - //or select - try { - const select = cloneSetting.querySelector("select"); - this.setNameID(select, key); - const name = select.getAttribute("services-setting-select-default"); - const selTxt = document.querySelector( - `[services-setting-select-text='${name}']` - ); - - selTxt.textContent = data["value"]; - selTxt.setAttribute("value", data["value"]); - const options = select.options; - - for (let i = 0; i < options.length; i++) { - const option = options[i]; - option.value === data["value"] - ? option.setAttribute("selected") - : option.removeAttribute("selected"); - } - inp.setAttribute("default-method", data["method"]); - } catch (err) {} - + this.setInpInfo(cloneSetting, key, data); //get the num, check if a container with this num exist //if not create new container and replace schema data by the one //if already exist, just change schema value by new one @@ -552,7 +521,7 @@ class Multiple { .getAttribute("services-settings-multiple") .replace("_SCHEMA", ""); - //case no container + //case no container, create one if ( !document.querySelector( `[services-settings-multiple="${containerName}${ @@ -560,65 +529,21 @@ class Multiple { }"]` ) ) { - const cloneSchemaCtnr = schemaContainer.cloneNode(true); - cloneSchemaCtnr.setAttribute( - "services-settings-multiple", - `${containerName}${num ? `_${num}` : ""}` + this.createContainer( + schemaContainer, + schemaName, + cloneSetting, + containerName, + num ); - //get the schema setting clone element and replace it by custom setting - const cloneSchema = cloneSchemaCtnr.querySelector( - `[setting-container*=${schemaName}]` - ); - cloneSchema.insertAdjacentElement("beforebegin", cloneSetting); - cloneSchema.remove(); - //replace schema suffix by right suffix - const settings = cloneSchemaCtnr.querySelectorAll( - "[setting-container]" - ); - settings.forEach((setting) => { - //change title - const title = setting.querySelector("h5"); - title.textContent = title.textContent.includes( - `${num ? `#${num}` : ``}` - ) - ? title.textContent - : `${title.textContent} ${num ? `#${num}` : ``}`; - //change att - setting.setAttribute( - "setting-container", - setting - .getAttribute("setting-container") - .replace("_SCHEMA", `${num ? `_${num}` : ``}`) - ); - //replace name and id att too - const newName = setting.getAttribute("setting-container"); - //replace input info - try { - const inp = setting.querySelector("input"); - this.setNameID(inp, newName); - } catch (err) {} - //or select - try { - const select = setting.querySelector("select"); - this.setNameID(select, newName); - } catch (err) {} - try { - } catch (err) {} - }); - schemaContainer.insertAdjacentElement("afterend", cloneSchemaCtnr); - cloneSchemaCtnr.classList.remove("hidden"); - cloneSchemaCtnr.classList.add("grid"); } else { - const customContainer = document.querySelector( - `[services-settings-multiple="${containerName}${ - num ? `_${num}` : "" - }"]` + //case container, add setting only + this.addCustomToContainer( + schemaName, + containerName, + cloneSetting, + num ); - const cloneSchema = customContainer.querySelector( - `[setting-container*=${schemaName}]` - ); - cloneSchema.insertAdjacentElement("beforebegin", cloneSetting); - cloneSchema.remove(); } } } @@ -627,6 +552,110 @@ class Multiple { }); } + setInpInfo(cloneSetting, key, data) { + //replace input info + try { + const inp = cloneSetting.querySelector("input"); + this.setNameID(inp, key); + + if (inp.getAttribute("type") === "checkbox") { + if (data["value"] === "yes") inp.setAttribute("checked", ""); + if (data["value"] === "no") inp.removeAttribute("checked"); + inp.setAttribute("default-method", data["method"]); + } + + if (inp.getAttribute("type") !== "checkbox") { + inp.setAttribute("value", data["value"]); + inp.setAttribute("default-method", data["method"]); + } + } catch (err) {} + //or select + try { + const select = cloneSetting.querySelector("select"); + this.setNameID(select, key); + const name = select.getAttribute("services-setting-select-default"); + const selTxt = document.querySelector( + `[services-setting-select-text='${name}']` + ); + + selTxt.textContent = data["value"]; + selTxt.setAttribute("value", data["value"]); + const options = select.options; + + for (let i = 0; i < options.length; i++) { + const option = options[i]; + option.value === data["value"] + ? option.setAttribute("selected") + : option.removeAttribute("selected"); + } + inp.setAttribute("default-method", data["method"]); + } catch (err) {} + } + + addCustomToContainer(schemaName, containerName, cloneSetting, num) { + const customContainer = document.querySelector( + `[services-settings-multiple="${containerName}${num ? `_${num}` : ""}"]` + ); + const cloneSchema = customContainer.querySelector( + `[setting-container*=${schemaName}]` + ); + cloneSchema.insertAdjacentElement("beforebegin", cloneSetting); + cloneSchema.remove(); + } + + createContainer( + schemaContainer, + schemaName, + cloneSetting, + containerName, + num + ) { + const cloneSchemaCtnr = schemaContainer.cloneNode(true); + cloneSchemaCtnr.setAttribute( + "services-settings-multiple", + `${containerName}${num ? `_${num}` : ""}` + ); + //get the schema setting clone element and replace it by custom setting + const cloneSchema = cloneSchemaCtnr.querySelector( + `[setting-container*=${schemaName}]` + ); + cloneSchema.insertAdjacentElement("beforebegin", cloneSetting); + cloneSchema.remove(); + //replace schema suffix by right suffix + const settings = cloneSchemaCtnr.querySelectorAll("[setting-container]"); + settings.forEach((setting) => { + //change title + const title = setting.querySelector("h5"); + title.textContent = title.textContent.includes(`${num ? `#${num}` : ``}`) + ? title.textContent + : `${title.textContent} ${num ? `#${num}` : ``}`; + //change att + setting.setAttribute( + "setting-container", + setting + .getAttribute("setting-container") + .replace("_SCHEMA", `${num ? `_${num}` : ``}`) + ); + //replace name and id att too + const newName = setting.getAttribute("setting-container"); + //replace input info + try { + const inp = setting.querySelector("input"); + this.setNameID(inp, newName); + } catch (err) {} + //or select + try { + const select = setting.querySelector("select"); + this.setNameID(select, newName); + } catch (err) {} + try { + } catch (err) {} + }); + schemaContainer.insertAdjacentElement("afterend", cloneSchemaCtnr); + cloneSchemaCtnr.classList.remove("hidden"); + cloneSchemaCtnr.classList.add("grid"); + } + setDisabled() { const multipleCtnr = document.querySelectorAll( "[services-settings-multiple]" @@ -663,6 +692,8 @@ class Multiple { }); } + //UTILS + getSuffixNumOrFalse(name) { const num = !isNaN(Number(name.substring(name.lastIndexOf("_") + 1))) ? Number(name.substring(name.lastIndexOf("_") + 1)) @@ -670,7 +701,12 @@ class Multiple { return num; } - //UTILS + getSchemaName(schemaCtnr) { + return schemaCtnr + .getAttribute("setting-container") + .replace("_SCHEMA", "") + .trim(); + } hiddenIfNoMultiples() { //hide multiple btn if no multiple exist on a plugin diff --git a/src/ui/static/js/utils/file.manager.js b/src/ui/static/js/utils/file.manager.js index 0fe870323..34bf0143b 100644 --- a/src/ui/static/js/utils/file.manager.js +++ b/src/ui/static/js/utils/file.manager.js @@ -247,20 +247,26 @@ class FolderEditor { initEditor() { //editor options this.editor.setShowPrintMargin(false); - this.darkModeBool(false); + this.setDarkMode(); } //listen to dark toggle button to change theme listenDarkToggle() { this.darkMode.addEventListener("click", (e) => { this.darkMode.checked - ? this.darkModeBool(true) - : this.darkModeBool(false); + ? this.changeDarkMode(true) + : this.changeDarkMode(false); }); } + setDarkMode() { + document.querySelector("html").className.includes("dark") + ? this.editor.setTheme("ace/theme/twilight") + : this.editor.setTheme("ace/theme/cloud9_day"); + } + //change theme according to mode - darkModeBool(bool) { + changeDarkMode(bool) { bool ? this.editor.setTheme("ace/theme/twilight") : this.editor.setTheme("ace/theme/cloud9_day"); diff --git a/src/ui/templates/file-manager.html b/src/ui/templates/file-manager.html index 9adc5eb23..2e9f1e702 100644 --- a/src/ui/templates/file-manager.html +++ b/src/ui/templates/file-manager.html @@ -23,7 +23,7 @@ url_for(request.endpoint)[1:].split("/")[-1].strip().replace('_', '-') %} aria-current="page" > @@ -59,13 +59,13 @@ url_for(request.endpoint)[1:].split("/")[-1].strip().replace('_', '-') %} class="rounded transition hidden flex-col items-center mx-2 p-2 md:py-4 md:px-6 relative cursor-pointer hover:bg-gray-100 dark:hover:bg-slate-800" >

ADD SERVICE

@@ -77,14 +77,14 @@ url_for(request.endpoint)[1:].split("/")[-1].strip().replace('_', '-') %} >