From b91c0d7e45ccf96a117c1db458cd6e5194bf45eb Mon Sep 17 00:00:00 2001 From: James Read Date: Sat, 19 Jul 2025 12:51:19 +0100 Subject: [PATCH] feat: Style update for buttons, reduce style duplication (#621) --- webui.dev/index.html | 4 +- webui.dev/js/ArgumentForm.js | 10 +-- webui.dev/js/NavigationBar.js | 2 +- webui.dev/js/marshaller.js | 4 +- webui.dev/main.js | 2 +- webui.dev/package-lock.json | 14 ++-- webui.dev/style.css | 141 +++++++++++++++++----------------- 7 files changed, 91 insertions(+), 86 deletions(-) diff --git a/webui.dev/index.html b/webui.dev/index.html index e9db0a6..7031e98 100644 --- a/webui.dev/index.html +++ b/webui.dev/index.html @@ -207,8 +207,8 @@
- - + +
diff --git a/webui.dev/js/ArgumentForm.js b/webui.dev/js/ArgumentForm.js index f685254..24494a4 100644 --- a/webui.dev/js/ArgumentForm.js +++ b/webui.dev/js/ArgumentForm.js @@ -38,9 +38,9 @@ class ArgumentForm extends window.HTMLElement { for (const arg of this.argInputs) { if (arg.type === 'checkbox') { if (arg.checked) { - arg.value = "1" + arg.value = '1' } else { - arg.value = "0" + arg.value = '0' } } @@ -122,7 +122,7 @@ class ArgumentForm extends window.HTMLElement { createDomInput (arg) { let domEl = null - if (arg.choices.length > 0 && (arg.type == "select" || arg.type == "")) { + if (arg.choices.length > 0 && (arg.type === 'select' || arg.type === '')) { domEl = document.createElement('select') // select/choice elements don't get an onchange/validation because theoretically @@ -164,8 +164,8 @@ class ArgumentForm extends window.HTMLElement { domEl = document.createElement('input') domEl.setAttribute('type', 'checkbox') domEl.setAttribute('name', arg.name) - domEl.setAttribute('value', "1") - + domEl.setAttribute('value', '1') + break case 'password': case 'email': diff --git a/webui.dev/js/NavigationBar.js b/webui.dev/js/NavigationBar.js index d578a47..a976b0a 100644 --- a/webui.dev/js/NavigationBar.js +++ b/webui.dev/js/NavigationBar.js @@ -6,7 +6,7 @@ export class NavigationBar { } createLink (title, url, isSupplemental) { - let parent = (isSupplemental) ? this.supplementalLinks : this.mainLinks + const parent = (isSupplemental) ? this.supplementalLinks : this.mainLinks const existsAlready = Array.from(parent.querySelectorAll('li')).some(el => el.title === title) diff --git a/webui.dev/js/marshaller.js b/webui.dev/js/marshaller.js index 9be7375..e0b1018 100644 --- a/webui.dev/js/marshaller.js +++ b/webui.dev/js/marshaller.js @@ -128,9 +128,9 @@ export function marshalDashboardComponentsJsonToHtml (json) { marshalActionsJsonToHtml(json) marshalDashboardStructureToHtml(json) - window.navbar.refreshSectionPolicyLinks(json.effectivePolicy) + window.navbar.refreshSectionPolicyLinks(json.effectivePolicy) - refreshDiagnostics(json) + refreshDiagnostics(json) } document.body.setAttribute('initial-marshal-complete', 'true') diff --git a/webui.dev/main.js b/webui.dev/main.js index 4bbd01b..dd65777 100644 --- a/webui.dev/main.js +++ b/webui.dev/main.js @@ -5,7 +5,7 @@ import { setupSectionNavigation, marshalDashboardComponentsJsonToHtml, marshalLogsJsonToHtml, - refreshServerConnectionLabel, + refreshServerConnectionLabel } from './js/marshaller.js' import { checkWebsocketConnection } from './js/websocket.js' diff --git a/webui.dev/package-lock.json b/webui.dev/package-lock.json index 75c37fb..680827a 100644 --- a/webui.dev/package-lock.json +++ b/webui.dev/package-lock.json @@ -2507,10 +2507,11 @@ "dev": true }, "node_modules/brace-expansion": { - "version": "1.1.11", - "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz", - "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==", + "version": "1.1.12", + "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.12.tgz", + "integrity": "sha512-9T9UjW3r0UW5c1Q7GTwllptXwhvYmEzFhzMfZ9H7FQWt+uZePjZPjBP/W1ZEyZ1twGWom5/56TF4lPcqjnDHcg==", "dev": true, + "license": "MIT", "dependencies": { "balanced-match": "^1.0.0", "concat-map": "0.0.1" @@ -5311,9 +5312,9 @@ } }, "node_modules/nanoid": { - "version": "3.3.7", - "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.7.tgz", - "integrity": "sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==", + "version": "3.3.11", + "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.11.tgz", + "integrity": "sha512-N8SpfPUnUp1bK+PMYW8qSWdl9U+wwNWI4QKxOYDy9JAro3WMX7p2OeVRF9v+347pnakNevPmiHhNmZ2HbFA76w==", "dev": true, "funding": [ { @@ -5321,6 +5322,7 @@ "url": "https://github.com/sponsors/ai" } ], + "license": "MIT", "bin": { "nanoid": "bin/nanoid.cjs" }, diff --git a/webui.dev/style.css b/webui.dev/style.css index 544fd2d..f0cfad5 100644 --- a/webui.dev/style.css +++ b/webui.dev/style.css @@ -264,38 +264,71 @@ details { /* General Buttons */ -button, -input[type="submit"] -{ +button { + transition: none; + font-weight: bold; + border-radius: .7em; + box-shadow: none; + font-size: 1em; + padding: 0.6em 1em; + border: 1px solid #ccc; font-family: sans-serif; - padding: 1em; color: black; text-align: center; - border: 1px solid #999; background-color: white; - box-shadow: 0 0 6px 0 #aaa; user-select: none; - transition: background-color 1s ease, color .3s ease; } -input[type="checkbox"] { - justify-self: baseline; -} - -fieldset button { - border-radius: .7em; -} - -/* Action Buttons */ action-button { display: flex; flex-direction: column; } action-button button { + font-size: .85em; + font-weight: normal; flex-grow: 1; width: 100%; z-index: 1; + padding: 1em; + box-shadow: 0 0 6px 0 #aaa; + transition: background-color 1s ease, color .3s ease; +} + +execution-button button { + margin-top: 0.2em; + margin-bottom: 0.2em; +} + +button:focus { + outline: 1px solid black; +} + +button:hover { + background-color: #ececec; + color: black; + cursor: pointer; +} + +button:disabled { + color: #3c3c3c; + background-color: #cecece; + cursor: not-allowed; + text-decoration: line-through; +} + +button[name="cancel"]:hover { + background-color: salmon; + color: black; +} + +button[name="start"]:hover { + background-color: #aceaac; + color: black; +} + +action-button button:hover { + box-shadow: 0 0 10px 0 #666; } span.title { @@ -331,31 +364,6 @@ execution-button { margin-top: .2em; } -execution-button button { - margin-top: 0.2em; - margin-bottom: 0.2em; -} - -/* Button states */ - -button:hover, -input[type="submit"]:hover { - box-shadow: 0 0 10px 0 #666; - cursor: pointer; -} - -button:focus, -input[type="submit"]:focus { - outline: 1px solid black; -} - -button:disabled, -input[type="submit"]:disabled { - color: #3c3c3c; - background-color: #cecece; - cursor: not-allowed; -} - .action-status { padding: .4em; border-radius: .4em; @@ -427,27 +435,23 @@ header { input { font-family: sans-serif; padding: 0.6em; + border: 1px solid #ccc; + border-radius: .4em; } input:invalid { outline: 2px solid red; } +input[type="checkbox"] { + justify-self: baseline; +} + form .wrapper span.icon { display: inline-block; vertical-align: middle; } -button[name="cancel"]:hover { - background-color: salmon; - color: black; -} - -input[name="start"]:hover { - background-color: #aceaac; - color: black; -} - div.arguments { display: grid; grid-template-columns: max-content auto auto; /* We don't want the label or the description to wrap, and the input to take up the rest of the space */ @@ -605,12 +609,9 @@ label.input-with-icons button:disabled { } #content-login button { - display: block; width: 100%; grid-column: 1 / span 3; margin-bottom: 1em; - font-weight: bold; - background-color: #ced3d7; } #content-login button:last-child { @@ -695,21 +696,33 @@ label.input-with-icons button:disabled { input { background-color: #383838; color: white; + border: 1px solid #666; } - button, - input[type="submit"] { + button { border: 1px solid #666; background-color: #222; - box-shadow: 0 0 6px 0 #444; color: white; } - button:focus, - input[type="submit"]:focus { + action-button button { + box-shadow: 0 0 6px 0 #444; + } + + button:focus { outline: 2px solid #72B7F4; } + button:disabled { + background-color: black; + } + + button:hover { + background-color: #444; + color: white; + } + + footer { color: #bbb; } @@ -743,10 +756,6 @@ label.input-with-icons button:disabled { color: white; } - button:disabled { - background-color: black; - } - table, td, th { @@ -770,10 +779,4 @@ label.input-with-icons button:disabled { div.display { box-shadow: 0 0 6px 0 #444; } - - #content-login button { - background-color: #000; - border: 1px solid #666; - color: white; - } }