ctucx.git: mqtt-webui

add button css

diff --git a/src/webui.css b/src/webui.css
@@ -16,6 +16,8 @@
 		--switch-knob-active-color:        #693;
 		--slider-background-color:         #ccc;
 		--slider-knob-color:               #6c757d;
+		--button-background-color:         #ccc;
+		--button-active-background-color:  #693;
 	}
 }
 

@@ -37,6 +39,8 @@
 		--switch-knob-active-color:        #693;
 		--slider-background-color:         #ebebf52e;
 		--slider-knob-color:               #9b9aa3;
+		--button-background-color:         #ebebf52e;
+		--button-active-background-color:  #693;
 	}
 
 	section img {

@@ -254,6 +258,29 @@ section > div .title{
 }
 
 
+/* Button Styling*/
+
+.buttons > button:first-child {
+	border-top-left-radius: .5em;
+	border-bottom-left-radius: .5em;
+}
+
+.buttons > button:last-child {
+	border-top-right-radius: .5em;
+	border-bottom-right-radius: .5em;
+}
+
+.buttons > button {
+	background-color: var(--button-background-color);
+	color: var(--secondary-text-color);
+	padding: .5em .7em;
+}
+
+.buttons > .active {
+	background-color: var(--button-active-background-color);
+}
+
+
 .loader {
 	border: 4px solid #ccc;
 	border-top: 4px solid #6c757d;

@@ -267,27 +294,20 @@ section > div .title{
 
 
 .working {
-	background-color: lightgray;
 	animation-name: color;
 	animation-duration: 1.5s;
 	animation-iteration-count: infinite;
 }
 
 @keyframes spin {
-	0% { transform: rotate(0deg); }
+	0% {   transform: rotate(0deg);   }
 	100% { transform: rotate(360deg); }
 }
 
 @keyframes color {
-  0% {
-	background-color: lightgray;
-  }
-  50% {
-	background-color: darkgray;
-  }
-  100% {
-	background-color: lightgray;
-  }
+	0% {   filter: brightness(85%); }
+	50% {  filter: brightness(50%); }
+	100% { filter: brightness(85%); }
 }
 
 @media screen and (max-width: 700px) {

diff --git a/src/webui.js b/src/webui.js
@@ -85,10 +85,11 @@ const onMessage = (topic, message) => {
 				document.getElementById(element.id + '_loader').classList.remove('loader');
 				break;
 
-			// untested
 			case 'button':
 				if (typeof value === 'object') return;
 
+				element.classList.remove('working');
+
 				if (element.dataset.mqttValue === value) {
 					element.classList.add('active');
 				} else {

@@ -221,19 +222,20 @@ const renderItem = (itemData) => {
 				`;
 				break;
 
-			// untested
 			case 'button':
 				const buttonClickHandler = (event) => {
 					if (!client.connected)           return false;
 					if (itemData.topic.set === null) return false;
 
+					event.target.classList.add('working');
+
 					client.publish(itemData.topic.set, transformMessage(event.target.dataset.mqttValue, itemData), itemData.mqtt);
 					return false;
 				}
 
 				const buttonElement = (button) => html`<button class="button" type="button" @click="${buttonClickHandler}" data-type="${itemData.type}" data-mqtt-value="${button.value}" data-mqtt-topic="${itemData.topic.get}" data-transform="${ifDefined(transform)}">${button.label}</button>`;
 
-				element = html`<div class="btn-group" role="group">${map(itemData.buttons, buttonElement)}</div>`;
+				element = html`<div class="buttons">${map(itemData.buttons, buttonElement)}</div>`;
 				break;
 
 			// untested

diff --git a/www/sw.js b/www/sw.js
@@ -50,7 +50,7 @@ let preCache = [
 	'./icons/weather.png'
 ];
 
-const CACHE = 'cache-v5';
+const CACHE = 'cache-v7';
 
 self.addEventListener('install', function (evt) {
 	self.skipWaiting();