feat: Style update for buttons, reduce style duplication (#621)
This commit is contained in:
James Read
GitHub
parent
e922baa2e0
commit
b91c0d7e45
|
|
@ -207,8 +207,8 @@
|
|||
<div class = "arguments"></div>
|
||||
|
||||
<div class = "buttons">
|
||||
<input name = "start" type = "submit" value = "Start">
|
||||
<button name = "cancel" title = "Cancel">Cancel</button>
|
||||
<button name = "start" type = "submit">Start</button>
|
||||
<button name = "cancel" title = "Cancel" type = "button">Cancel</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
|
|
|
|||
|
|
@ -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':
|
||||
|
|
|
|||
|
|
@ -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)
|
||||
|
||||
|
|
|
|||
|
|
@ -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')
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@ import {
|
|||
setupSectionNavigation,
|
||||
marshalDashboardComponentsJsonToHtml,
|
||||
marshalLogsJsonToHtml,
|
||||
refreshServerConnectionLabel,
|
||||
refreshServerConnectionLabel
|
||||
} from './js/marshaller.js'
|
||||
import { checkWebsocketConnection } from './js/websocket.js'
|
||||
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
},
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue