Strona główna Odkrywaj Pomoc
Zaloguj się
LBP
/
OliveTin
kopia lustrzana https://github.com/OliveTin/OliveTin.git
4
0
Forkuj 0
Pliki Problemy 0 Wiki
Przeglądaj źródła

fmt: css ids/classes to use kebab-case

jamesread 4 lat temu
rodzic
10e380a03b
commit
420105ec99
8 zmienionych plików z 50 dodań i 50 usunięć
Zunifikowany widok Pokaż statystyki zmian
  1. 2 2
      integration-tests/cypress/integration/general/defaultHomepageRender.spec.js
  2. 1 1
      integration-tests/cypress/integration/hiddenNav/hiddenNav.spec.js
  3. 7 7
      webui/index.html
  4. 7 7
      webui/js/ActionButton.js
  5. 1 1
      webui/js/ArgumentForm.js
  6. 2 2
      webui/js/marshaller.js
  7. 3 3
      webui/main.js
  8. 27 27
      webui/style.css

+ 2 - 2
integration-tests/cypress/integration/general/defaultHomepageRender.spec.js
Wyświetl plik 

@@ -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
 
     })
 
     })
 
   })
 
   })

+ 1 - 1
integration-tests/cypress/integration/hiddenNav/hiddenNav.spec.js
Wyświetl plik 

@@ -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
 
     })
 
     })
 
   })
 
   })

+ 7 - 7
webui/index.html
Wyświetl plik 

@@ -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>

+ 7 - 7
webui/js/ActionButton.js
Wyświetl plik 

@@ -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) {

+ 1 - 1
webui/js/ArgumentForm.js
Wyświetl plik 

@@ -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

+ 2 - 2
webui/js/marshaller.js
Wyświetl plik 

@@ -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)
 
   }
 
   }

+ 3 - 3
webui/main.js
Wyświetl plik 

@@ -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('#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 () {
 
 function main () {

+ 27 - 27
webui/style.css
Wyświetl plik 

@@ -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 {
 
-  animation: kfActionFailed 1s;
 
+.action-failed {
 
+  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 {
 
-  animation: kfActionSuccess 1s;
 
+.action-success {
 
+  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 {
 
-  animation: kfActionNonZeroExit 1s;
 
+.action-nonzero-exit {
 
+  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 {
 
-  animation: kfActionTimeout 1s;
 
+.action-timeout {
 
+  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;
 
   }
 
   }