1786206156

dashboard/ui/main.slint

@@ -18,6 +18,8 @@ import {
     Switch,
     MaterialStyleMetrics,
     MaterialPalette,
+    ElevatedButton,
+    FilledButton,
 } from "material/material.slint";
 import { Icons } from "material/ui/icons/icons.slint";
 
@@ -97,32 +99,49 @@ component LightTile inherits Rectangle {
     in property <LightData> light;
     callback clicked();
 
-    TouchArea {
+    if light.on: FilledButton {
-        clicked => {
+        width: 100%;
-            clicked();
+        text: light.name;
-        }
+        enabled: light.available;
+        // background: light.on;
+        clicked => root.clicked();
     }
 
-    HorizontalLayout {
+    if !light.on: ElevatedButton {
-        spacing: MaterialStyleMetrics.padding_8;
+        width: 100%;
-        Text {
+        text: light.name;
-            text: light.name;
+        enabled: light.available;
-            height: 32px;
+        // background: light.on;
-            vertical-alignment: center;
+        clicked => root.clicked();
-            horizontal-alignment: right;
-            // font-weight: light.on ? 700 : 500;
-            color: light.on ? MaterialPalette.primary : MaterialPalette.secondary;
-            font-size: 18px;
-        }
-
-        sw := Switch {
-            width: 48px;
-            height: 32px;
-            enabled: light.available;
-            checked: light.on;
-            checked_state_changed(checked) => { root.clicked() }
-        }
     }
+
+    // HorizontalLayout {
+
+    //     TouchArea {
+    //         clicked => {
+    //             clicked();
+    //         }
+    //     }
+
+    //     spacing: MaterialStyleMetrics.padding_8;
+    //     Text {
+    //         text: light.name;
+    //         height: 32px;
+    //         vertical-alignment: center;
+    //         horizontal-alignment: right;
+    //         // font-weight: light.on ? 700 : 500;
+    //         color: light.on ? MaterialPalette.primary : MaterialPalette.secondary;
+    //         font-size: 18px;
+    //     }
+
+    //     sw := Switch {
+    //         width: 48px;
+    //         height: 32px;
+    //         enabled: light.available;
+    //         checked: light.on;
+    //         checked_state_changed(checked) => { root.clicked() }
+    //     }
+    // }
 }
 
 export component AppWindow inherits Window {