diff --git a/integration-tests/cypress/integration/general/defaultHomepageRender.spec.js b/integration-tests/cypress/integration/general/defaultHomepageRender.spec.js index 7e998bb..8c54410 100644 --- a/integration-tests/cypress/integration/general/defaultHomepageRender.spec.js +++ b/integration-tests/cypress/integration/general/defaultHomepageRender.spec.js @@ -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 }) }) diff --git a/integration-tests/cypress/integration/hiddenNav/hiddenNav.spec.js b/integration-tests/cypress/integration/hiddenNav/hiddenNav.spec.js index 5714ab5..387bf20 100644 --- a/integration-tests/cypress/integration/hiddenNav/hiddenNav.spec.js +++ b/integration-tests/cypress/integration/hiddenNav/hiddenNav.spec.js @@ -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 }) }) diff --git a/webui/index.html b/webui/index.html index c64fbe4..1d2f8d0 100644 --- a/webui/index.html +++ b/webui/index.html @@ -16,7 +16,7 @@
-
+
@@ -35,7 +35,7 @@ @@ -50,12 +50,12 @@ Documentation | Raise an issue on GitHub | Version: ?

- +

@@ -119,7 +119,7 @@ domErr.classList.add('error') domErr.innerHTML = '

Error ' + friendlyType + '

' + message + "

OliveTin Documentation

" - document.getElementById('rootGroup').appendChild(domErr) + document.getElementById('root-group').appendChild(domErr) } diff --git a/webui/js/ActionButton.js b/webui/js/ActionButton.js index 03e6ca1..3dd073d 100644 --- a/webui/js/ActionButton.js +++ b/webui/js/ActionButton.js @@ -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) { diff --git a/webui/js/ArgumentForm.js b/webui/js/ArgumentForm.js index 8e793e0..107b30f 100644 --- a/webui/js/ArgumentForm.js +++ b/webui/js/ArgumentForm.js @@ -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 diff --git a/webui/js/marshaller.js b/webui/js/marshaller.js index b2a9d82..0c327c7 100644 --- a/webui/js/marshaller.js +++ b/webui/js/marshaller.js @@ -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) } diff --git a/webui/main.js b/webui/main.js index a28ef52..1184c8a 100644 --- a/webui/main.js +++ b/webui/main.js @@ -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 () { diff --git a/webui/style.css b/webui/style.css index 7549c0d..a74e1ab 100644 --- a/webui/style.css +++ b/webui/style.css @@ -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; }