medlogic
/
olivetin
3
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fmt: css ids/classes to use kebab-case

This commit is contained in:
jamesread 2022-02-23 15:29:56 +00:00
parent 10e380a03b
commit 420105ec99
8 changed files with 50 additions and 50 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
integration-tests/cypress/integration/general/defaultHomepageRender.spec.js
View File

@ -8,11 +8,11 @@ describe('Homepage rendering', () => {
}) })
it('Default buttons are rendered', () => { it('Default buttons are rendered', () => {
cy.get("#rootGroup button").should('have.length', 6) cy.get("#root-group button").should('have.length', 6)
}) })
it('Switcher navigation is visible', () => { it('Switcher navigation is visible', () => {
cy.get('#sectionSwitcher').then($el => { cy.get('#section-switcher').then($el => {
expect(Cypress.dom.isHidden($el)).to.be.false expect(Cypress.dom.isHidden($el)).to.be.false
}) })
}) })

2
integration-tests/cypress/integration/hiddenNav/hiddenNav.spec.js
View File

@ -9,7 +9,7 @@ describe('Hidden Nav', () => {
}) })
it('Switcher navigation is hidden', () => { it('Switcher navigation is hidden', () => {
cy.get('#sectionSwitcher').then($el => { cy.get('#section-switcher').then($el => {
expect(Cypress.dom.isHidden($el)).to.be.true expect(Cypress.dom.isHidden($el)).to.be.true
}) })
}) })

14
webui/index.html
View File

@ -16,7 +16,7 @@
<body> <body>
<main title = "main content"> <main title = "main content">
<fieldset id = "sectionSwitcher" title = "Sections"> <fieldset id = "section-switcher" title = "Sections">
<button id = "showActions">Actions</button> <button id = "showActions">Actions</button>
<button id = "showLogs">Logs</button> <button id = "showLogs">Logs</button>
</fieldset> </fieldset>
@ -35,7 +35,7 @@
</section> </section>
<section id = "contentActions" title = "Actions" hidden > <section id = "contentActions" title = "Actions" hidden >
<fieldset id = "rootGroup" title = "Dashboard of buttons"> <fieldset id = "root-group" title = "Dashboard of buttons">
</fieldset> </fieldset>
</section> </section>
@ -50,12 +50,12 @@
<a href = "https://docs.olivetin.app" target = "_new">Documentation</a> | <a href = "https://docs.olivetin.app" target = "_new">Documentation</a> |
<a href = "https://github.com/OliveTin/OliveTin/issues/new/choose" target = "_new">Raise an issue on GitHub</a> | <a href = "https://github.com/OliveTin/OliveTin/issues/new/choose" target = "_new">Raise an issue on GitHub</a> |
<span id = "currentVersion">Version: ?</p> <span id = "currentVersion">Version: ?</p>
<a id = "availableVersion" href = "http://olivetin.app" target = "_blank" hidden>?</a> <a id = "available-version" href = "http://olivetin.app" target = "_blank" hidden>?</a>
</p> </p>
</footer> </footer>
<template id = "tplArgumentForm"> <template id = "tplArgumentForm">
<form class = "actionArguments"> <form class = "action-arguments">
<div class = "wrapper"> <div class = "wrapper">
<div> <div>
<span class = "icon" role = "icon"></span> <span class = "icon" role = "icon"></span>
@ -80,7 +80,7 @@
</template> </template>
<template id = "tplLogRow"> <template id = "tplLogRow">
<tr class = "logRow"> <tr class = "log-row">
<td class = "timestamp">?</td> <td class = "timestamp">?</td>
<td> <td>
<span class = "icon" role = "icon"></span> <span class = "icon" role = "icon"></span>
@ -101,7 +101,7 @@
</details> </details>
</td> </td>
<td class = "exitCode">?</td> <td class = "exit-code">?</td>
</tr> </tr>
</template> </template>
@ -119,7 +119,7 @@
domErr.classList.add('error') domErr.classList.add('error')
domErr.innerHTML = '<h1>Error ' + friendlyType + '</h1><p>' + message + "</p><p><a href = 'http://docs.olivetin.app/troubleshooting.html' target = 'blank'/>OliveTin Documentation</a></p>" domErr.innerHTML = '<h1>Error ' + friendlyType + '</h1><p>' + message + "</p><p><a href = 'http://docs.olivetin.app/troubleshooting.html' target = 'blank'/>OliveTin Documentation</a></p>"
document.getElementById('rootGroup').appendChild(domErr) document.getElementById('root-group').appendChild(domErr)
} }
</script> </script>

14
webui/js/ActionButton.js
View File

@ -84,13 +84,13 @@ class ActionButton extends window.HTMLElement {
marshalLogsJsonToHtml({ logs: [json.logEntry] }) marshalLogsJsonToHtml({ logs: [json.logEntry] })
if (json.logEntry.timedOut) { if (json.logEntry.timedOut) {
this.onActionResult('actionTimeout', 'Timed out') this.onActionResult('action-timeout', 'Timed out')
} else if (json.logEntry.exitCode === -1337) { } else if (json.logEntry.exitCode === -1337) {
this.onActionError('Error') this.onActionError('Error')
} else if (json.logEntry.exitCode !== 0) { } else if (json.logEntry.exitCode !== 0) {
this.onActionResult('actionNonZeroExit', 'Exit code ' + json.logEntry.exitCode) this.onActionResult('action-nonzero-exit', 'Exit code ' + json.logEntry.exitCode)
} else { } else {
this.onActionResult('actionSuccess', 'Success!') this.onActionResult('action-success', 'Success!')
} }
}).catch(err => { }).catch(err => {
this.onActionError(err) this.onActionError(err)
@ -113,10 +113,10 @@ class ActionButton extends window.HTMLElement {
this.btn.disabled = false this.btn.disabled = false
this.isWaiting = false this.isWaiting = false
this.updateDom() this.updateDom()
this.btn.classList.add('actionFailed') this.btn.classList.add('action-failed')
setTimeout(() => { setTimeout(() => {
this.btn.classList.remove('actionFailed') this.btn.classList.remove('action-failed')
}, 1000) }, 1000)
} }
@ -139,13 +139,13 @@ class ActionButton extends window.HTMLElement {
updateDom () { updateDom () {
if (this.temporaryStatusMessage != null) { if (this.temporaryStatusMessage != null) {
this.domTitle.innerText = this.temporaryStatusMessage this.domTitle.innerText = this.temporaryStatusMessage
this.domTitle.classList.add('temporaryStatusMessage') this.domTitle.classList.add('temporary-status-message')
this.isWaiting = false this.isWaiting = false
this.disabled = false this.disabled = false
setTimeout(() => { setTimeout(() => {
this.temporaryStatusMessage = null this.temporaryStatusMessage = null
this.domTitle.classList.remove('temporaryStatusMessage') this.domTitle.classList.remove('temporary-status-message')
this.updateDom() this.updateDom()
}, 2000) }, 2000)
} else if (this.isWaiting) { } else if (this.isWaiting) {

2
webui/js/ArgumentForm.js
View File

@ -1,7 +1,7 @@
class ArgumentForm extends window.HTMLElement { class ArgumentForm extends window.HTMLElement {
setup (json, callback) { setup (json, callback) {
this.setAttribute('class', 'actionArguments') this.setAttribute('class', 'action-arguments')
this.constructTemplate() this.constructTemplate()
this.domTitle.innerText = json.title this.domTitle.innerText = json.title

4
webui/js/marshaller.js
View File

@ -10,7 +10,7 @@ export function marshalActionButtonsJsonToHtml (json) {
htmlButton = document.createElement('action-button') htmlButton = document.createElement('action-button')
htmlButton.constructFromJson(jsonButton) htmlButton.constructFromJson(jsonButton)
document.getElementById('rootGroup').appendChild(htmlButton) document.getElementById('root-group').appendChild(htmlButton)
} else { } else {
htmlButton.updateFromJson(jsonButton) htmlButton.updateFromJson(jsonButton)
htmlButton.updateDom() htmlButton.updateDom()
@ -55,7 +55,7 @@ export function marshalLogsJsonToHtml (json) {
row.querySelector('.icon').innerHTML = logEntry.actionIcon row.querySelector('.icon').innerHTML = logEntry.actionIcon
row.querySelector('pre.stdout').innerText = logEntry.stdout row.querySelector('pre.stdout').innerText = logEntry.stdout
row.querySelector('pre.stderr').innerText = logEntry.stderr row.querySelector('pre.stderr').innerText = logEntry.stderr
row.querySelector('.exitCode').innerText = logTableExitCode row.querySelector('.exit-code').innerText = logTableExitCode
document.querySelector('#logTableBody').prepend(row) document.querySelector('#logTableBody').prepend(row)
} }

6
webui/main.js
View File

@ -58,11 +58,11 @@ function processWebuiSettingsJson (settings) {
document.querySelector('#currentVersion').innerText = 'Version: ' + settings.CurrentVersion document.querySelector('#currentVersion').innerText = 'Version: ' + settings.CurrentVersion
if (settings.ShowNewVersions && settings.AvailableVersion !== 'none') { if (settings.ShowNewVersions && settings.AvailableVersion !== 'none') {
document.querySelector('#availableVersion').innerText = 'New Version Available: ' + settings.AvailableVersion document.querySelector('#available-version').innerText = 'New Version Available: ' + settings.AvailableVersion
document.querySelector('#availableVersion').hidden = false document.querySelector('#available-version').hidden = false
} }
document.querySelector('#sectionSwitcher').hidden = settings.HideNavigation document.querySelector('#section-switcher').hidden = settings.HideNavigation
} }
function main () { function main () {

54
webui/style.css
View File

@ -11,7 +11,7 @@ fieldset {
padding: 0; padding: 0;
} }
fieldset#rootGroup { fieldset#root-group {
display: grid; display: grid;
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
grid-template-rows: auto auto auto auto; grid-template-rows: auto auto auto auto;
@ -53,7 +53,7 @@ span[role="icon"] {
} }
form span[role="icon"], form span[role="icon"],
tr.logRow span[role="icon"] { tr.log-row span[role="icon"] {
display: inline-block; display: inline-block;
padding-right: 0.2em; padding-right: 0.2em;
} }
@ -63,7 +63,7 @@ tr.logRow span[role="icon"] {
padding: 1em; padding: 1em;
} }
.title.temporaryStatusMessage { .title.temporary-status-message {
color: gray; color: gray;
} }
@ -117,13 +117,13 @@ input[type="submit"]:disabled {
cursor: not-allowed; cursor: not-allowed;
} }
fieldset#sectionSwitcher { fieldset#section-switcher {
border: 0; border: 0;
text-align: right; text-align: right;
margin-bottom: 1em; margin-bottom: 1em;
} }
fieldset#sectionSwitcher button { fieldset#section-switcher button {
padding: 1em; padding: 1em;
color: black; color: black;
display: table-cell; display: table-cell;
@ -135,60 +135,60 @@ fieldset#sectionSwitcher button {
cursor: pointer; cursor: pointer;
} }
fieldset#rootGroup action-button button { fieldset#root-group action-button button {
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
fieldset#sectionSwitcher button:first-child { fieldset#section-switcher button:first-child {
border-radius: 1em 0 0 1em; border-radius: 1em 0 0 1em;
} }
fieldset#sectionSwitcher button:last-child { fieldset#section-switcher button:last-child {
border-radius: 0 1em 1em 0; border-radius: 0 1em 1em 0;
} }
button.activeSection { button.active-section {
font-weight: bold; font-weight: bold;
} }
/* Button animations */ /* Button animations */
.actionFailed { .action-failed {
animation: kfActionFailed 1s; animation: kf-action-failed 1s;
} }
@keyframes kfActionFailed { @keyframes kf-action-failed {
0% { background-color: black; } 0% { background-color: black; }
20% { background-color: red; } 20% { background-color: red; }
0% { background-color: inherit; } 0% { background-color: inherit; }
} }
.actionSuccess { .action-success {
animation: kfActionSuccess 1s; animation: kf-action-success 1s;
} }
@keyframes kfActionSuccess { @keyframes kf-action-success {
0% { background-color: black; } 0% { background-color: black; }
20% { background-color: limegreen; } 20% { background-color: limegreen; }
0% { background-color: inherit; } 0% { background-color: inherit; }
} }
.actionNonZeroExit { .action-nonzero-exit {
animation: kfActionNonZeroExit 1s; animation: kf-action-nonzero-exit 1s;
} }
@keyframes kfActionNonZeroExit { @keyframes kf-action-nonzero-exit {
0% { background-color: black; } 0% { background-color: black; }
20% { background-color: orange; } 20% { background-color: orange; }
0% { background-color: inherit; } 0% { background-color: inherit; }
} }
.actionTimeout { .action-timeout {
animation: kfActionTimeout 1s; animation: kf-action-timeout 1s;
} }
@keyframes kfActionTimeout { @keyframes kf-action-timeout {
0% { background-color: black; } 0% { background-color: black; }
20% { background-color: cyan; } 20% { background-color: cyan; }
0% { background-color: inherit; } 0% { background-color: inherit; }
@ -230,7 +230,7 @@ details[open] {
display: block; display: block;
} }
form.actionArguments { form.action-arguments {
position: absolute; position: absolute;
top: 0; top: 0;
bottom: 0; bottom: 0;
@ -274,11 +274,11 @@ form input[type="submit"]:first-child {
margin-right: 1em; margin-right: 1em;
} }
button[name=cancel]:hover { button[name="cancel"]:hover {
background-color: salmon; background-color: salmon;
} }
input[name=start]:hover { input[name="start"]:hover {
background-color: #aceaac; background-color: #aceaac;
} }
@ -292,7 +292,7 @@ pre {
min-height: 1em; min-height: 1em;
} }
td.exitCode { td.exit-code {
text-align: center; text-align: center;
} }
@ -300,7 +300,7 @@ input.invalid {
background-color: salmon; background-color: salmon;
} }
#availableVersion { #available-version {
background-color: #aceaac; background-color: #aceaac;
padding: 0.2em; padding: 0.2em;
border-radius: 1em; border-radius: 1em;
@ -312,7 +312,7 @@ input.invalid {
color: white; color: white;
} }
form.actionArguments { form.action-arguments {
background-color: #333; background-color: #333;
} }