1786206980

dashboard/src/ha_ext.rs

@@ -37,7 +37,11 @@ impl From<&HassEntity> for LightData {
     fn from(value: &HassEntity) -> Self {
         Self {
             id: value.entity_id.clone().into(),
-            name: value.friendly_name().into(),
+            name: value
+                .friendly_name()
+                .replace(" Lights", "")
+                .replace(" Light", "")
+                .into(),
             available: value.available(),
             on: value.is_on(),
         }

dashboard/ui/main.slint

@@ -72,8 +72,8 @@ component Thermometer inherits Rectangle {
     in property <ThermometerData> thermometer;
     border-radius: 16px + 19px;
     border-width: 2px;
-    border-color: Palette.alternate-background;
-    background: Palette.alternate-background;
+    border-color: MaterialPalette.surface_container_low;
+    background: MaterialPalette.surface_container_low;
 
     VerticalLayout {
         alignment: center;
@@ -84,6 +84,7 @@ component Thermometer inherits Rectangle {
             text: thermometer.name;
             height: 16px;
             font-weight: 100;
+            color: MaterialPalette.primary;
         }
 
         Text {
@@ -91,6 +92,7 @@ component Thermometer inherits Rectangle {
             height: 19px;
             font-size: 19px;
             font-weight: 500;
+            color: MaterialPalette.primary;
         }
     }
 }
@@ -101,47 +103,19 @@ component LightTile inherits Rectangle {
 
     if light.on: FilledButton {
         width: 100%;
+        height: 100%;
         text: light.name;
         enabled: light.available;
-        // background: light.on;
         clicked => root.clicked();
     }
 
     if !light.on: ElevatedButton {
         width: 100%;
+        height: 100%;
         text: light.name;
         enabled: light.available;
-        // background: light.on;
         clicked => 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 {
@@ -202,8 +176,6 @@ export component AppWindow inherits Window {
                     if tab-bar.current-index == 2: Energy { }
 
                     Rectangle {
-                        height: 64px;
-
                         tab-bar := TabBar {
                             width: parent.width;
                             items: [
@@ -216,7 +188,9 @@ export component AppWindow inherits Window {
                 }
             }
 
-            VerticalBox {
+            VerticalLayout {
+                padding: MaterialStyleMetrics.spacing_8;
+                spacing: MaterialStyleMetrics.spacing_8;
                 preferred-width: root.width / 4;
                 for light[index] in root.lights: LightTile {
                     light: light;