From 81a37a377800eb7519ae913cc0394f9b2c9740f1 Mon Sep 17 00:00:00 2001 From: BlasenhauerJ Date: Fri, 28 Apr 2023 11:57:54 +0200 Subject: [PATCH 1/3] enhance actions btns --- src/ui/static/css/dashboard.css | 366 +++++++++++++++++++------ src/ui/static/js/services.js | 13 +- src/ui/static/js/utils/file.manager.js | 46 +++- src/ui/styles.css | 27 +- src/ui/templates/file_manager.html | 4 +- src/ui/templates/global_config.html | 2 +- src/ui/templates/instances.html | 10 +- src/ui/templates/jobs.html | 2 +- src/ui/templates/services.html | 2 +- src/ui/templates/services_modal.html | 15 +- 10 files changed, 365 insertions(+), 122 deletions(-) diff --git a/src/ui/static/css/dashboard.css b/src/ui/static/css/dashboard.css index 424721920..cf35f4699 100644 --- a/src/ui/static/css/dashboard.css +++ b/src/ui/static/css/dashboard.css @@ -1088,10 +1088,6 @@ h6 { margin-top: 2rem; } -.ml-0\.5 { - margin-left: 0.125rem; -} - .block { display: block; } @@ -1112,10 +1108,6 @@ h6 { display: grid; } -.\!hidden { - display: none !important; -} - .hidden { display: none; } @@ -1148,6 +1140,10 @@ h6 { height: 1rem; } +.h-4\.5 { + height: 1.125rem; +} + .h-40 { height: 10rem; } @@ -1192,10 +1188,6 @@ h6 { height: calc(100vh - 360px); } -.h-4\.5 { - height: 1.125rem; -} - .max-h-100 { max-height: 25rem; } @@ -1288,6 +1280,10 @@ h6 { width: 1rem; } +.w-4\.5 { + width: 1.125rem; +} + .w-40 { width: 10rem; } @@ -1336,10 +1332,6 @@ h6 { width: 100vw; } -.w-4\.5 { - width: 1.125rem; -} - .min-w-0 { min-width: 0px; } @@ -2320,11 +2312,19 @@ h6 { color: rgb(108 117 125 / var(--tw-text-opacity)); } +.text-gray-600\/90 { + color: rgb(108 117 125 / 0.9); +} + .text-gray-700 { --tw-text-opacity: 1; color: rgb(73 80 87 / var(--tw-text-opacity)); } +.text-gray-700\/80 { + color: rgb(73 80 87 / 0.8); +} + .text-green-500 { --tw-text-opacity: 1; color: rgb(34 197 94 / var(--tw-text-opacity)); @@ -2360,42 +2360,6 @@ h6 { color: rgb(251 177 64 / var(--tw-text-opacity)); } -.text-\[\#344767\] { - --tw-text-opacity: 1; - color: rgb(52 71 103 / var(--tw-text-opacity)); -} - -.text-black { - --tw-text-opacity: 1; - color: rgb(0 0 0 / var(--tw-text-opacity)); -} - -.text-gray-800 { - --tw-text-opacity: 1; - color: rgb(37 47 64 / var(--tw-text-opacity)); -} - -.text-gray-700\/80 { - color: rgb(73 80 87 / 0.8); -} - -.text-gray-800\/80 { - color: rgb(37 47 64 / 0.8); -} - -.text-gray-600\/80 { - color: rgb(108 117 125 / 0.8); -} - -.text-gray-600\/90 { - color: rgb(108 117 125 / 0.9); -} - -.text-gray-500 { - --tw-text-opacity: 1; - color: rgb(173 181 189 / var(--tw-text-opacity)); -} - .antialiased { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; @@ -2517,6 +2481,267 @@ h6 { flex-wrap: inherit; } +.close-btn { + display: inline-block; + cursor: pointer; + border-radius: 0.5rem; + border-width: 1px; + --tw-border-opacity: 1; + border-color: rgb(245 57 57 / var(--tw-border-opacity)); + --tw-bg-opacity: 1; + background-color: rgb(255 255 255 / var(--tw-bg-opacity)); + padding-left: 1.5rem; + padding-right: 1.5rem; + padding-top: 0.75rem; + padding-bottom: 0.75rem; + text-align: center; + vertical-align: middle; + font-weight: 700; + text-transform: uppercase; + line-height: 1.5; + letter-spacing: -0.025rem; + --tw-text-opacity: 1; + color: rgb(245 57 57 / var(--tw-text-opacity)); + --tw-shadow: 0 7px 14px rgba(50,50,93,.1),0 3px 6px rgba(0,0,0,.08); + --tw-shadow-colored: 0 7px 14px var(--tw-shadow-color), 0 3px 6px var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); + transition-property: all; + transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1); + transition-duration: 150ms; + transition-timing-function: cubic-bezier(0.42, 0, 1, 1); +} + +.close-btn:hover { + --tw-translate-y: -1px; + 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)); + background-color: rgb(255 255 255 / 0.8); + --tw-shadow: 0 4px 6px rgba(50,50,93,.1),0 1px 3px rgba(0,0,0,.08); + --tw-shadow-colored: 0 4px 6px var(--tw-shadow-color), 0 1px 3px var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); +} + +.close-btn:focus { + background-color: rgb(255 255 255 / 0.8); +} + +.close-btn:active { + opacity: 0.85; +} + +:is(.dark .close-btn) { + --tw-bg-opacity: 1; + background-color: rgb(233 236 239 / var(--tw-bg-opacity)); + --tw-brightness: brightness(.9); + 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); +} + +:is(.dark .close-btn: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); +} + +.valid-btn { + display: inline-block; + cursor: pointer; + border-radius: 0.5rem; + --tw-bg-opacity: 1; + background-color: rgb(34 197 94 / var(--tw-bg-opacity)); + padding-left: 1.5rem; + padding-right: 1.5rem; + padding-top: 0.75rem; + padding-bottom: 0.75rem; + text-align: center; + vertical-align: middle; + font-weight: 700; + text-transform: uppercase; + line-height: 1.5; + letter-spacing: 0.025em; + --tw-text-opacity: 1; + color: rgb(255 255 255 / var(--tw-text-opacity)); + --tw-shadow: 0 7px 14px rgba(50,50,93,.1),0 3px 6px rgba(0,0,0,.08); + --tw-shadow-colored: 0 7px 14px var(--tw-shadow-color), 0 3px 6px var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); + transition-property: all; + transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1); + transition-duration: 150ms; + transition-timing-function: cubic-bezier(0.42, 0, 1, 1); +} + +.valid-btn:hover { + --tw-translate-y: -1px; + 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)); + background-color: rgb(34 197 94 / 0.8); + --tw-shadow: 0 4px 6px rgba(50,50,93,.1),0 1px 3px rgba(0,0,0,.08); + --tw-shadow-colored: 0 4px 6px var(--tw-shadow-color), 0 1px 3px var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); +} + +.valid-btn:focus { + background-color: rgb(34 197 94 / 0.8); +} + +.valid-btn:active { + opacity: 0.85; +} + +:is(.dark .valid-btn) { + --tw-brightness: brightness(.9); + 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); +} + +.delete-btn { + display: inline-block; + cursor: pointer; + border-radius: 0.5rem; + --tw-bg-opacity: 1; + background-color: rgb(245 57 57 / var(--tw-bg-opacity)); + padding-left: 1.5rem; + padding-right: 1.5rem; + padding-top: 0.75rem; + padding-bottom: 0.75rem; + text-align: center; + vertical-align: middle; + font-weight: 700; + text-transform: uppercase; + line-height: 1.5; + letter-spacing: 0.025em; + --tw-text-opacity: 1; + color: rgb(255 255 255 / var(--tw-text-opacity)); + --tw-shadow: 0 7px 14px rgba(50,50,93,.1),0 3px 6px rgba(0,0,0,.08); + --tw-shadow-colored: 0 7px 14px var(--tw-shadow-color), 0 3px 6px var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); + transition-property: all; + transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1); + transition-duration: 150ms; + transition-timing-function: cubic-bezier(0.42, 0, 1, 1); +} + +.delete-btn:hover { + --tw-translate-y: -1px; + 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)); + background-color: rgb(245 57 57 / 0.8); + --tw-shadow: 0 4px 6px rgba(50,50,93,.1),0 1px 3px rgba(0,0,0,.08); + --tw-shadow-colored: 0 4px 6px var(--tw-shadow-color), 0 1px 3px var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); +} + +.delete-btn:focus { + background-color: rgb(245 57 57 / 0.8); +} + +.delete-btn:active { + opacity: 0.85; +} + +:is(.dark .delete-btn) { + --tw-brightness: brightness(.9); + 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); +} + +.edit-btn { + display: inline-block; + cursor: pointer; + border-radius: 0.5rem; + --tw-bg-opacity: 1; + background-color: rgb(251 177 64 / var(--tw-bg-opacity)); + padding-left: 1.5rem; + padding-right: 1.5rem; + padding-top: 0.75rem; + padding-bottom: 0.75rem; + text-align: center; + vertical-align: middle; + font-weight: 700; + text-transform: uppercase; + line-height: 1.5; + letter-spacing: 0.025em; + --tw-text-opacity: 1; + color: rgb(255 255 255 / var(--tw-text-opacity)); + --tw-shadow: 0 7px 14px rgba(50,50,93,.1),0 3px 6px rgba(0,0,0,.08); + --tw-shadow-colored: 0 7px 14px var(--tw-shadow-color), 0 3px 6px var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); + transition-property: all; + transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1); + transition-duration: 150ms; + transition-timing-function: cubic-bezier(0.42, 0, 1, 1); +} + +.edit-btn:hover { + --tw-translate-y: -1px; + 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)); + background-color: rgb(251 177 64 / 0.8); + --tw-shadow: 0 4px 6px rgba(50,50,93,.1),0 1px 3px rgba(0,0,0,.08); + --tw-shadow-colored: 0 4px 6px var(--tw-shadow-color), 0 1px 3px var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); +} + +.edit-btn:focus { + background-color: rgb(251 177 64 / 0.8); +} + +.edit-btn:active { + opacity: 0.85; +} + +:is(.dark .edit-btn) { + --tw-brightness: brightness(.9); + 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); +} + +.info-btn { + display: inline-block; + cursor: pointer; + border-radius: 0.5rem; + --tw-bg-opacity: 1; + background-color: rgb(14 165 233 / var(--tw-bg-opacity)); + padding-left: 1.5rem; + padding-right: 1.5rem; + padding-top: 0.75rem; + padding-bottom: 0.75rem; + text-align: center; + vertical-align: middle; + font-weight: 700; + text-transform: uppercase; + line-height: 1.5; + letter-spacing: 0.025em; + --tw-text-opacity: 1; + color: rgb(255 255 255 / var(--tw-text-opacity)); + --tw-shadow: 0 7px 14px rgba(50,50,93,.1),0 3px 6px rgba(0,0,0,.08); + --tw-shadow-colored: 0 7px 14px var(--tw-shadow-color), 0 3px 6px var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); + transition-property: all; + transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1); + transition-duration: 150ms; + transition-timing-function: cubic-bezier(0.42, 0, 1, 1); +} + +.info-btn:hover { + --tw-translate-y: -1px; + 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)); + background-color: rgb(14 165 233 / 0.8); + --tw-shadow: 0 4px 6px rgba(50,50,93,.1),0 1px 3px rgba(0,0,0,.08); + --tw-shadow-colored: 0 4px 6px var(--tw-shadow-color), 0 1px 3px var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); +} + +.info-btn:focus { + background-color: rgb(14 165 233 / 0.8); +} + +.info-btn:active { + opacity: 0.85; +} + +:is(.dark .info-btn) { + --tw-brightness: brightness(.9); + 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); +} + +/*----------------------------------------------*/ + +/*---------------SETTINGS_PLUGINS---------------*/ + +/*----------------------------------------------*/ + .checkbox { position: relative; z-index: 10; @@ -2604,12 +2829,6 @@ h6 { color: rgb(210 214 218 / var(--tw-text-opacity)); } -/*----------------------------------------------*/ - -/*---------------SETTINGS_PLUGINS---------------*/ - -/*----------------------------------------------*/ - .custom-select-btn { display: flex; width: 100%; @@ -3401,18 +3620,6 @@ h6 { color: rgb(108 117 125 / var(--tw-text-opacity)); } -.after\:text-gray-500::after { - content: var(--tw-content); - --tw-text-opacity: 1; - color: rgb(173 181 189 / var(--tw-text-opacity)); -} - -.after\:text-gray-700::after { - content: var(--tw-content); - --tw-text-opacity: 1; - color: rgb(73 80 87 / var(--tw-text-opacity)); -} - .after\:shadow-2xl::after { content: var(--tw-content); --tw-shadow: 0 .3125rem .625rem 0 rgba(0,0,0,.12); @@ -3742,10 +3949,6 @@ h6 { fill: #adb5bd; } -:is(.dark .dark\:fill-gray-700) { - fill: #495057; -} - :is(.dark .dark\:fill-gray-600) { fill: #6c757d; } @@ -3793,15 +3996,6 @@ h6 { color: rgb(255 255 255 / 0.8); } -:is(.dark .dark\:text-gray-600) { - --tw-text-opacity: 1; - color: rgb(108 117 125 / var(--tw-text-opacity)); -} - -:is(.dark .dark\:opacity-50) { - opacity: 0.5; -} - :is(.dark .dark\:opacity-60) { opacity: 0.6; } @@ -3861,12 +4055,6 @@ h6 { color: rgb(173 181 189 / var(--tw-text-opacity)); } -:is(.dark .dark\:after\:text-gray-600)::after { - content: var(--tw-content); - --tw-text-opacity: 1; - color: rgb(108 117 125 / var(--tw-text-opacity)); -} - :is(.dark .dark\:checked\:border-primary:checked) { --tw-border-opacity: 1; border-color: rgb(8 85 119 / var(--tw-border-opacity)); diff --git a/src/ui/static/js/services.js b/src/ui/static/js/services.js index 92f0281ae..0e9ca1744 100644 --- a/src/ui/static/js/services.js +++ b/src/ui/static/js/services.js @@ -75,7 +75,7 @@ class ServiceModal { this.updateModalData(obj); //show modal this.resetFilterInp(); - this.changeSubmitBtnName("EDIT"); + this.changeSubmitBtn("EDIT", "edit-btn"); this.openModal(); } } catch (err) {} @@ -98,7 +98,7 @@ class ServiceModal { //show modal this.resetFilterInp(); - this.changeSubmitBtnName("CREATE"); + this.changeSubmitBtn("CREATE", "valid-btn"); this.openModal(); } } catch (err) {} @@ -124,8 +124,15 @@ class ServiceModal { inpFilter.dispatchEvent(new Event("input")); } - changeSubmitBtnName(text) { + changeSubmitBtn(text, btnType) { this.submitBtn.textContent = text; + this.submitBtn.classList.remove( + "delete-btn", + "valid-btn", + "edit-btn", + "info-btn" + ); + this.submitBtn.classList.add(btnType); } setSettingsDefault() { diff --git a/src/ui/static/js/utils/file.manager.js b/src/ui/static/js/utils/file.manager.js index 85e130403..4ada55857 100644 --- a/src/ui/static/js/utils/file.manager.js +++ b/src/ui/static/js/utils/file.manager.js @@ -565,12 +565,46 @@ class FolderModal { //submit text depending action setSubmitTxt(action) { - if (action === "new") return (this.modalSubmit.textContent = "add"); - if (action === "view") return (this.modalSubmit.textContent = "ok"); - if (action === "edit") return (this.modalSubmit.textContent = "edit"); - if (action === "delete") return (this.modalSubmit.textContent = "delete"); - if (action === "download") - return (this.modalSubmit.textContent = "download"); + this.delSubmitBtnType(); + if (action === "new") { + this.modalSubmit.textContent = "add"; + this.setSubmitBtnType("valid-btn"); + return; + } + if (action === "view") { + this.modalSubmit.textContent = "ok"; + this.setSubmitBtnType("valid-btn"); + return; + } + if (action === "edit") { + this.setSubmitBtnType("edit-btn"); + this.modalSubmit.textContent = "edit"; + return; + } + + if (action === "delete") { + this.setSubmitBtnType("delete-btn"); + this.modalSubmit.textContent = "delete"; + return; + } + if (action === "download") { + this.setSubmitBtnType("info-btn"); + this.modalSubmit.textContent = "download"; + return; + } + } + + setSubmitBtnType(btnType) { + this.modalSubmit.classList.add(btnType); + } + + delSubmitBtnType() { + this.modalSubmit.classList.remove( + "delete-btn", + "valid-btn", + "edit-btn", + "info-btn" + ); } //show only if type file and display text diff --git a/src/ui/styles.css b/src/ui/styles.css index 8327c1aca..edc7ed9a0 100644 --- a/src/ui/styles.css +++ b/src/ui/styles.css @@ -2,6 +2,30 @@ @tailwind components; @tailwind utilities; +.close-btn { + @apply dark:brightness-90 inline-block px-6 py-3 font-bold text-center text-red-500 border border-red-500 uppercase align-middle transition-all rounded-lg cursor-pointer dark:bg-gray-200 dark:hover:brightness-75 bg-white hover:bg-white/80 focus:bg-white/80 leading-normal ease-in tracking-tight-rem shadow-xs hover:-translate-y-px active:opacity-85 hover:shadow-md; +} + +.valid-btn { + @apply tracking-wide dark:brightness-90 inline-block px-6 py-3 font-bold text-center text-white uppercase align-middle transition-all rounded-lg cursor-pointer bg-green-500 hover:bg-green-500/80 focus:bg-green-500/80 leading-normal ease-in shadow-xs hover:-translate-y-px active:opacity-85 hover:shadow-md; +} + +.delete-btn { + @apply tracking-wide dark:brightness-90 inline-block px-6 py-3 font-bold text-center text-white uppercase align-middle transition-all rounded-lg cursor-pointer bg-red-500 hover:bg-red-500/80 focus:bg-red-500/80 leading-normal ease-in shadow-xs hover:-translate-y-px active:opacity-85 hover:shadow-md; +} + +.edit-btn { + @apply tracking-wide dark:brightness-90 inline-block px-6 py-3 font-bold text-center text-white uppercase align-middle transition-all rounded-lg cursor-pointer bg-yellow-500 hover:bg-yellow-500/80 focus:bg-yellow-500/80 leading-normal ease-in shadow-xs hover:-translate-y-px active:opacity-85 hover:shadow-md; +} + +.info-btn { + @apply tracking-wide dark:brightness-90 inline-block px-6 py-3 font-bold text-center text-white uppercase align-middle transition-all rounded-lg cursor-pointer bg-sky-500 hover:bg-sky-500/80 focus:bg-sky-500/80 leading-normal ease-in shadow-xs hover:-translate-y-px active:opacity-85 hover:shadow-md; +} + +/*----------------------------------------------*/ +/*---------------SETTINGS_PLUGINS---------------*/ +/*----------------------------------------------*/ + .checkbox { @apply cursor-pointer disabled:cursor-default relative dark:border-slate-600 dark:bg-slate-700 z-10 aria-checked:z-0 w-5 h-5 @@ -18,9 +42,6 @@ dark:aria-checked:disabled:text-gray-300; } -/*----------------------------------------------*/ -/*---------------SETTINGS_PLUGINS---------------*/ -/*----------------------------------------------*/ .custom-select-btn { @apply disabled:opacity-75 dark:disabled:text-gray-300 disabled:text-gray-700 disabled:bg-gray-400 disabled:border-gray-400 dark:disabled:bg-gray-800 dark:disabled:border-gray-800 duration-300 ease-in-out dark:opacity-90 dark:border-slate-600 dark:bg-slate-700 dark:text-gray-300 focus:border-primary flex justify-between align-middle items-center text-left text-sm leading-5.6 w-full rounded-lg border border-solid border-gray-300 bg-white bg-clip-padding px-1.5 py-1 md:px-3 md:py-2 font-normal text-gray-700 transition-all placeholder:text-gray-500; } diff --git a/src/ui/templates/file_manager.html b/src/ui/templates/file_manager.html index b4de7ee85..d335be748 100644 --- a/src/ui/templates/file_manager.html +++ b/src/ui/templates/file_manager.html @@ -432,14 +432,14 @@ data-{{current_endpoint}}-modal diff --git a/src/ui/templates/global_config.html b/src/ui/templates/global_config.html index 535370db5..912a571cd 100644 --- a/src/ui/templates/global_config.html +++ b/src/ui/templates/global_config.html @@ -42,7 +42,7 @@
diff --git a/src/ui/templates/instances.html b/src/ui/templates/instances.html index 36e49a97b..b3a32fefc 100644 --- a/src/ui/templates/instances.html +++ b/src/ui/templates/instances.html @@ -70,7 +70,7 @@ instances_batched %} type="submit" name="operation" value="restart" - class="dark:brightness-90 z-20 mx-1 bg-yellow-500 hover:bg-yellow-500/80 focus:bg-yellow-500/80 inline-block px-6 py-3 font-bold text-center text-white uppercase align-middle transition-all rounded-lg cursor-pointer leading-normal text-xs ease-in tracking-tight-rem shadow-xs bg-150 bg-x-25 hover:-translate-y-px active:opacity-85 hover:shadow-md" + class="edit-btn mx-1 text-xs" > Restart @@ -78,7 +78,7 @@ instances_batched %} type="submit" name="operation" value="stop" - class="dark:brightness-90 z-20 mx-1 bg-red-500 hover:bg-red-500/80 focus:bg-red-500/80 inline-block px-6 py-3 font-bold text-center text-white uppercase align-middle transition-all rounded-lg cursor-pointer leading-normal text-xs ease-in tracking-tight-rem shadow-xs bg-150 bg-x-25 hover:-translate-y-px active:opacity-85 hover:shadow-md" + class="delete-btn mx-1 text-xs" > Stop @@ -88,7 +88,7 @@ instances_batched %} type="submit" name="operation" value="reload" - class="dark:brightness-90 z-20 mx-1 bg-yellow-500 hover:bg-yellow-500/80 focus:bg-yellow-500/80 inline-block px-6 py-3 font-bold text-center text-white uppercase align-middle transition-all rounded-lg cursor-pointer leading-normal text-xs ease-in tracking-tight-rem shadow-xs bg-150 bg-x-25 hover:-translate-y-px active:opacity-85 hover:shadow-md" + class="edit-btn mx-1 text-xs" > Reload @@ -96,7 +96,7 @@ instances_batched %} type="submit" name="operation" value="stop" - class="dark:brightness-90 z-20 mx-1 bg-red-500 hover:bg-red-500/80 focus:bg-red-500/80 inline-block px-6 py-3 font-bold text-center text-white uppercase align-middle transition-all rounded-lg cursor-pointer leading-normal text-xs ease-in tracking-tight-rem shadow-xs bg-150 bg-x-25 hover:-translate-y-px active:opacity-85 hover:shadow-md" + class="delete-btn mx-1 text-xs" > Stop @@ -107,7 +107,7 @@ instances_batched %} type="submit" name="operation" value="start" - class="dark:brightness-90 z-20 mx-1 bg-green-500 hover:bg-green-500/80 focus:bg-green-500/80 inline-block px-6 py-3 font-bold text-center text-white uppercase align-middle transition-all rounded-lg cursor-pointer leading-normal text-xs ease-in tracking-tight-rem shadow-xs bg-150 bg-x-25 hover:-translate-y-px active:opacity-85 hover:shadow-md" + class="valid-btn mx-1 text-xs" > Start diff --git a/src/ui/templates/jobs.html b/src/ui/templates/jobs.html index 54aa59850..8950d539c 100644 --- a/src/ui/templates/jobs.html +++ b/src/ui/templates/jobs.html @@ -360,7 +360,7 @@ url_for(request.endpoint)[1:].split("/")[-1].strip() %} > diff --git a/src/ui/templates/services.html b/src/ui/templates/services.html index d915054a0..a2a349a1b 100644 --- a/src/ui/templates/services.html +++ b/src/ui/templates/services.html @@ -343,7 +343,7 @@ type="button" data-services-name="{{service["SERVER_NAME"]['value']}}" - class="dark:brightness-90 z-20 mx-1 bg-blue-500 hover:bg-blue-500/80 focus:bg-yellow-500/80 inline-block p-3 font-bold text-center text-white uppercase align-middle transition-all rounded-lg cursor-pointer leading-normal text-xs ease-in tracking-tight-rem shadow-xs bg-150 bg-x-25 active:opacity-85 hover:shadow-md" + class="dark:brightness-90 z-20 mx-1 bg-yellow-500 hover:bg-yellow-500/80 focus:bg-yellow-500/80 inline-block p-3 font-bold text-center text-white uppercase align-middle transition-all rounded-lg cursor-pointer leading-normal text-xs ease-in tracking-tight-rem shadow-xs bg-150 bg-x-25 active:opacity-85 hover:shadow-md" > diff --git a/src/ui/templates/services_modal.html b/src/ui/templates/services_modal.html index 53e564da8..c4222bac5 100644 --- a/src/ui/templates/services_modal.html +++ b/src/ui/templates/services_modal.html @@ -71,15 +71,11 @@ -
@@ -108,14 +104,11 @@ - From 2f336be7702be386237782a77f391e8d3b990493 Mon Sep 17 00:00:00 2001 From: BlasenhauerJ Date: Fri, 28 Apr 2023 12:03:39 +0200 Subject: [PATCH 2/3] enhance file manager and jobs svg --- src/ui/templates/file_manager.html | 14 +++++++------- src/ui/templates/jobs.html | 13 ++++++++++--- 2 files changed, 17 insertions(+), 10 deletions(-) diff --git a/src/ui/templates/file_manager.html b/src/ui/templates/file_manager.html index d335be748..7151af771 100644 --- a/src/ui/templates/file_manager.html +++ b/src/ui/templates/file_manager.html @@ -233,7 +233,7 @@ url_for(request.endpoint)[1:].split("/")[-1].strip().replace('_', '-') %} > - - - + + + + - @@ -345,7 +345,7 @@ url_for(request.endpoint)[1:].split("/")[-1].strip().replace('_', '-') %} class="bg-white duration-300 border-gray-300 hover:brightness-90 text-white my-0 relative px-6 py-2 text-center align-middle transition-all rounded-none cursor-pointer leading-normal text-sm ease-in tracking-tight-rem dark:border-slate-600 dark:bg-slate-700 dark:text-gray-300 w-full border-b border-l border-r hover:bg-gray-100" > - diff --git a/src/ui/templates/jobs.html b/src/ui/templates/jobs.html index 8950d539c..db084c237 100644 --- a/src/ui/templates/jobs.html +++ b/src/ui/templates/jobs.html @@ -360,14 +360,21 @@ url_for(request.endpoint)[1:].split("/")[-1].strip() %} > + {{file['file_name']}} Date: Fri, 28 Apr 2023 12:16:46 +0200 Subject: [PATCH 3/3] harmonize all titles dark color --- src/ui/static/css/dashboard.css | 12 ++++++++++++ src/ui/templates/file_manager.html | 2 +- src/ui/templates/global_config.html | 2 +- src/ui/templates/home.html | 8 ++++---- src/ui/templates/instances.html | 2 +- src/ui/templates/jobs.html | 6 +++--- src/ui/templates/logs.html | 10 +++++----- src/ui/templates/plugins.html | 8 ++++---- src/ui/templates/services.html | 4 ++-- src/ui/templates/settings_plugins.html | 2 +- 10 files changed, 34 insertions(+), 22 deletions(-) diff --git a/src/ui/static/css/dashboard.css b/src/ui/static/css/dashboard.css index cf35f4699..1e3e668c8 100644 --- a/src/ui/static/css/dashboard.css +++ b/src/ui/static/css/dashboard.css @@ -2292,6 +2292,14 @@ h6 { letter-spacing: 0.025em; } +.tracking-wider { + letter-spacing: 0.05em; +} + +.tracking-widest { + letter-spacing: 0.1em; +} + .text-blue-500 { --tw-text-opacity: 1; color: rgb(94 114 228 / var(--tw-text-opacity)); @@ -3996,6 +4004,10 @@ h6 { color: rgb(255 255 255 / 0.8); } +:is(.dark .dark\:text-white\/90) { + color: rgb(255 255 255 / 0.9); +} + :is(.dark .dark\:opacity-60) { opacity: 0.6; } diff --git a/src/ui/templates/file_manager.html b/src/ui/templates/file_manager.html index 7151af771..07a55224f 100644 --- a/src/ui/templates/file_manager.html +++ b/src/ui/templates/file_manager.html @@ -7,7 +7,7 @@ url_for(request.endpoint)[1:].split("/")[-1].strip().replace('_', '-') %} >
-
+
{% if current_endpoint == "configs" %} SERVICE MANAGER {% else %} FILE MANAGER {% endif %}
diff --git a/src/ui/templates/global_config.html b/src/ui/templates/global_config.html index 912a571cd..b52806bfe 100644 --- a/src/ui/templates/global_config.html +++ b/src/ui/templates/global_config.html @@ -4,7 +4,7 @@
-
CONFIGS
+
CONFIGS
diff --git a/src/ui/templates/home.html b/src/ui/templates/home.html index 818a11c41..eb9b60671 100644 --- a/src/ui/templates/home.html +++ b/src/ui/templates/home.html @@ -13,7 +13,7 @@ Version

-
{{ version }}
+
{{ version }}

@@ -64,7 +64,7 @@ > Instances

-
{{ instances_number }}
+
{{ instances_number }}

{{instance_health_count}} / {{ instances_number }} Services

-
{{ services_number }}
+
{{ services_number }}

{{services_ui_count}} Plugins

-
+
{{ config["CONFIG"].get_plugins()|length }}

diff --git a/src/ui/templates/instances.html b/src/ui/templates/instances.html index b3a32fefc..32671b888 100644 --- a/src/ui/templates/instances.html +++ b/src/ui/templates/instances.html @@ -23,7 +23,7 @@ instances_batched %}

{% endif %}
{{ instance.name }}
diff --git a/src/ui/templates/jobs.html b/src/ui/templates/jobs.html index db084c237..47862fb03 100644 --- a/src/ui/templates/jobs.html +++ b/src/ui/templates/jobs.html @@ -4,7 +4,7 @@ url_for(request.endpoint)[1:].split("/")[-1].strip() %}
-
INFO
+
INFO

-

FILTER
+
FILTER
@@ -193,7 +193,7 @@ url_for(request.endpoint)[1:].split("/")[-1].strip() %}
-
JOBS
+
JOBS
diff --git a/src/ui/templates/logs.html b/src/ui/templates/logs.html index 26e1758be..5f4b6e755 100644 --- a/src/ui/templates/logs.html +++ b/src/ui/templates/logs.html @@ -6,7 +6,7 @@ url_for(request.endpoint)[1:].split("/")[-1].strip().replace('_', '-') %} data-{{current_endpoint}}-settings class="col-span-12 lg:col-span-8 p-4 relative flex flex-col min-w-0 break-words bg-white shadow-xl dark:bg-slate-850 dark:shadow-dark-xl rounded-2xl bg-clip-border" > -
SETTINGS
+
SETTINGS
Submit Date @@ -179,7 +179,7 @@ url_for(request.endpoint)[1:].split("/")[-1].strip().replace('_', '-') %} data-submit-live="no" type="button" id="submit-settings" - class="hidden tracking-wide dark:brightness-125 hover:brightness-75 inline-block px-6 py-3 font-bold text-center text-white uppercase align-middle transition-all rounded-lg cursor-pointer bg-gradient-to-tl bg-primary leading-normal text-xs ease-in shadow-xs bg-150 bg-x-25 hover:-translate-y-px active:opacity-85 hover:shadow-md" + class="hidden tracking-widest dark:brightness-125 hover:brightness-75 inline-block px-6 py-3 font-bold text-center text-white uppercase align-middle transition-all rounded-lg cursor-pointer bg-gradient-to-tl bg-primary leading-normal text-xs ease-in shadow-xs bg-150 bg-x-25 hover:-translate-y-px active:opacity-85 hover:shadow-md" > Go Live @@ -193,7 +193,7 @@ url_for(request.endpoint)[1:].split("/")[-1].strip().replace('_', '-') %} data-{{current_endpoint}}-filter class="col-span-12 lg:col-span-4 p-4 relative flex flex-col min-w-0 break-words bg-white shadow-xl dark:bg-slate-850 dark:shadow-dark-xl rounded-2xl bg-clip-border" > -
FILTERS
+
FILTERS
@@ -308,7 +308,7 @@ url_for(request.endpoint)[1:].split("/")[-1].strip().replace('_', '-') %}
-
LOGS
+
LOGS
diff --git a/src/ui/templates/plugins.html b/src/ui/templates/plugins.html index b16bd66dd..c43d794a3 100644 --- a/src/ui/templates/plugins.html +++ b/src/ui/templates/plugins.html @@ -6,7 +6,7 @@ include "plugins_modal.html" %}
-
INFO
+
INFO

-

UPLOAD / RELOAD
+
UPLOAD / RELOAD
@@ -115,7 +115,7 @@ include "plugins_modal.html" %} data-{{current_endpoint}}-filter class="p-4 col-span-12 2xl:col-span-4 relative min-w-0 break-words bg-white shadow-xl dark:bg-slate-850 dark:shadow-dark-xl rounded-2xl bg-clip-border" > -
FILTER
+
FILTER
@@ -206,7 +206,7 @@ include "plugins_modal.html" %}
-
LIST
+
LIST
{% for plugin in plugins %} {% if plugin['external'] %} diff --git a/src/ui/templates/services.html b/src/ui/templates/services.html index a2a349a1b..83132041b 100644 --- a/src/ui/templates/services.html +++ b/src/ui/templates/services.html @@ -32,10 +32,10 @@ class="dark:brightness-110 overflow-hidden hover:scale-102 transition col-span-12 lg:col-span-6 3xl:col-span-4 p-4 w-full shadow-md break-words bg-white dark:bg-slate-850 dark:shadow-dark-xl rounded-2xl bg-clip-border" > -
+
{{ service["SERVER_NAME"]['value'] }}
-
{{ service["SERVER_NAME"]['method'] }}
+
{{ service["SERVER_NAME"]['method'] }}
diff --git a/src/ui/templates/settings_plugins.html b/src/ui/templates/settings_plugins.html index 3fd6bb3d8..5ba21a795 100644 --- a/src/ui/templates/settings_plugins.html +++ b/src/ui/templates/settings_plugins.html @@ -13,7 +13,7 @@ data-plugin-item="{{plugin['id']}}"
{{plugin['name']}} {{plugin['version']}}