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', () => {
cy.get("#rootGroup button").should('have.length', 6)
cy.get("#root-group button").should('have.length', 6)
})
it('Switcher navigation is visible', () => {
cy.get('#sectionSwitcher').then($el => {
cy.get('#section-switcher').then($el => {
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', () => {
cy.get('#sectionSwitcher').then($el => {
cy.get('#section-switcher').then($el => {
expect(Cypress.dom.isHidden($el)).to.be.true
})
})

14
webui/index.html
View File

@ -16,7 +16,7 @@
<body>
<main title = "main content">
<fieldset id = "sectionSwitcher" title = "Sections">
<fieldset id = "section-switcher" title = "Sections">
<button id = "showActions">Actions</button>
<button id = "showLogs">Logs</button>
</fieldset>
@ -35,7 +35,7 @@
</section>
<section id = "contentActions" title = "Actions" hidden >
<fieldset id = "rootGroup" title = "Dashboard of buttons">
<fieldset id = "root-group" title = "Dashboard of buttons">
</fieldset>
</section>
@ -50,12 +50,12 @@
<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> |
<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>
</footer>
<template id = "tplArgumentForm">
<form class = "actionArguments">
<form class = "action-arguments">
<div class = "wrapper">
<div>
<span class = "icon" role = "icon"></span>
@ -80,7 +80,7 @@
</template>
<template id = "tplLogRow">
<tr class = "logRow">
<tr class = "log-row">
<td class = "timestamp">?</td>
<td>
<span class = "icon" role = "icon"></span>
@ -101,7 +101,7 @@
</details>
</td>
<td class = "exitCode">?</td>
<td class = "exit-code">?</td>
</tr>
</template>
@ -119,7 +119,7 @@
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>"
document.getElementById('rootGroup').appendChild(domErr)
document.getElementById('root-group').appendChild(domErr)
}
</script>

14
webui/js/ActionButton.js
View File

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

2
webui/js/ArgumentForm.js
View File

@ -1,7 +1,7 @@
class ArgumentForm extends window.HTMLElement {
setup (json, callback) {
this.setAttribute('class', 'actionArguments')
this.setAttribute('class', 'action-arguments')
this.constructTemplate()
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.constructFromJson(jsonButton)
document.getElementById('rootGroup').appendChild(htmlButton)
document.getElementById('root-group').appendChild(htmlButton)
} else {
htmlButton.updateFromJson(jsonButton)
htmlButton.updateDom()
@ -55,7 +55,7 @@ export function marshalLogsJsonToHtml (json) {
row.querySelector('.icon').innerHTML = logEntry.actionIcon
row.querySelector('pre.stdout').innerText = logEntry.stdout
row.querySelector('pre.stderr').innerText = logEntry.stderr
row.querySelector('.exitCode').innerText = logTableExitCode
row.querySelector('.exit-code').innerText = logTableExitCode
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
if (settings.ShowNewVersions && settings.AvailableVersion !== 'none') {
document.querySelector('#availableVersion').innerText = 'New Version Available: ' + settings.AvailableVersion
document.querySelector('#availableVersion').hidden = false
document.querySelector('#available-version').innerText = 'New Version Available: ' + settings.AvailableVersion
document.querySelector('#available-version').hidden = false
}
document.querySelector('#sectionSwitcher').hidden = settings.HideNavigation
document.querySelector('#section-switcher').hidden = settings.HideNavigation
}
function main () {

54
webui/style.css
View File

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