[BasicUI] Use colored buttons for widget controls for better contrast

Applied to colopicker, setpoint, switch/rollerblind and switch/mappings widgets. Related to openhab#1831 Signed-off-by: Laurent Garnier <[email protected]>
lolodomo · Apr 10, 2023 · ad77f27 · ad77f27
1 parent b5295ed
commit ad77f27
Show file tree

Hide file tree

Showing 4 changed files with 9 additions and 9 deletions.
diff --git a/bundles/org.openhab.ui.basic/src/main/resources/snippets/button.html b/bundles/org.openhab.ui.basic/src/main/resources/snippets/button.html
@@ -1,5 +1,5 @@
 <button 
-	class="mdl-button mdl-button--raised mdl-js-button mdl-js-ripple-effect %class%" 
+	class="mdl-button mdl-button--raised mdl-button--colored mdl-js-button mdl-js-ripple-effect %class%"
 	data-value="%cmd%"
 >
 	%label%

diff --git a/bundles/org.openhab.ui.basic/src/main/resources/snippets/colorpicker.html b/bundles/org.openhab.ui.basic/src/main/resources/snippets/colorpicker.html
@@ -12,15 +12,15 @@
 		data-value="%state%"
 		data-widget-id="%widget_id%"
 	>
-		<button class="mdl-button mdl-button--raised mdl-js-button mdl-js-ripple-effect mdl-form__colorpicker--up">
+		<button class="mdl-button mdl-button--raised mdl-button--colored mdl-js-button mdl-js-ripple-effect mdl-form__colorpicker--up">
 			<!-- keyboard_arrow_up -->
 			<i class="material-icons">&#xE316;</i>
 		</button>
-		<button class="mdl-button mdl-button--raised mdl-js-button mdl-js-ripple-effect mdl-form__colorpicker--pick">
+		<button class="mdl-button mdl-button--raised mdl-button--colored mdl-js-button mdl-js-ripple-effect mdl-form__colorpicker--pick">
 			<!-- color_lens -->
 			<i class="material-icons">&#xE3B7;</i>
 		</button>
-		<button class="mdl-button mdl-button--raised mdl-js-button mdl-js-ripple-effect mdl-form__colorpicker--down">
+		<button class="mdl-button mdl-button--raised mdl-button--colored mdl-js-button mdl-js-ripple-effect mdl-form__colorpicker--down">
 			<!-- keyboard_arrow_down -->
 			<i class="material-icons">&#xE313;</i>
 		</button>

diff --git a/bundles/org.openhab.ui.basic/src/main/resources/snippets/rollerblind.html b/bundles/org.openhab.ui.basic/src/main/resources/snippets/rollerblind.html
@@ -15,15 +15,15 @@
 		data-has-value="%has_value%"
 		data-widget-id="%widget_id%"
 	>
-		<button class="mdl-button mdl-button--raised mdl-js-button mdl-js-ripple-effect mdl-form__rollerblind--up">
+		<button class="mdl-button mdl-button--raised mdl-button--colored mdl-js-button mdl-js-ripple-effect mdl-form__rollerblind--up">
 			<!-- keyboard_arrow_up -->
 			<i class="material-icons">&#xE316;</i>
 		</button>
-		<button class="mdl-button mdl-button--raised mdl-js-button mdl-js-ripple-effect mdl-form__rollerblind--stop">
+		<button class="mdl-button mdl-button--raised mdl-button--colored mdl-js-button mdl-js-ripple-effect mdl-form__rollerblind--stop">
 			<!-- close -->
 			<i class="material-icons">&#xE5CD;</i>
 		</button>
-		<button class="mdl-button mdl-button--raised mdl-js-button mdl-js-ripple-effect mdl-form__rollerblind--down">
+		<button class="mdl-button mdl-button--raised mdl-button--colored mdl-js-button mdl-js-ripple-effect mdl-form__rollerblind--down">
 			<!-- keyboard_arrow_down -->
 			<i class="material-icons">&#xE313;</i>
 		</button>

diff --git a/bundles/org.openhab.ui.basic/src/main/resources/snippets/setpoint.html b/bundles/org.openhab.ui.basic/src/main/resources/snippets/setpoint.html
@@ -17,11 +17,11 @@
 		data-unit="%unit%"
 		data-widget-id="%widget_id%"
 	>
-		<button class="mdl-button mdl-button--raised mdl-js-button mdl-js-ripple-effect mdl-form__setpoint--up">
+		<button class="mdl-button mdl-button--raised mdl-button--colored mdl-js-button mdl-js-ripple-effect mdl-form__setpoint--up">
 			<!-- keyboard_arrow_up -->
 			<i class="material-icons">&#xE316;</i>
 		</button>
-		<button class="mdl-button mdl-button--raised mdl-js-button mdl-js-ripple-effect mdl-form__setpoint--down">
+		<button class="mdl-button mdl-button--raised mdl-button--colored mdl-js-button mdl-js-ripple-effect mdl-form__setpoint--down">
 			<!-- keyboard_arrow_down -->
 			<i class="material-icons">&#xE313;</i>
 		</button>