Fix detail pane after material 3 migration, add additional previews

home-assistant · Oct 6, 2023 · d69c47b · d69c47b
1 parent d7a08d3
commit d69c47b
Show file tree

Hide file tree

Showing 3 changed files with 95 additions and 19 deletions.
diff --git a/wear/src/main/java/io/homeassistant/companion/android/home/views/DetailsPanelView.kt b/wear/src/main/java/io/homeassistant/companion/android/home/views/DetailsPanelView.kt
@@ -16,13 +16,13 @@ import androidx.compose.ui.platform.LocalHapticFeedback
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
-import androidx.wear.compose.material.ToggleButton
-import androidx.wear.compose.material.ToggleButtonDefaults
 import androidx.wear.compose.material3.ExperimentalWearMaterial3Api
+import androidx.wear.compose.material3.IconButtonDefaults
+import androidx.wear.compose.material3.IconToggleButton
 import androidx.wear.compose.material3.InlineSlider
 import androidx.wear.compose.material3.InlineSliderDefaults
-import androidx.wear.compose.material3.MaterialTheme
 import androidx.wear.compose.material3.Text
+import androidx.wear.compose.material3.touchTargetAwareSize
 import androidx.wear.tooling.preview.devices.WearDevices
 import com.mikepenz.iconics.compose.Image
 import com.mikepenz.iconics.typeface.library.community.material.CommunityMaterial
@@ -40,11 +40,14 @@ import io.homeassistant.companion.android.common.data.integration.supportsFanSet
 import io.homeassistant.companion.android.common.data.integration.supportsLightBrightness
 import io.homeassistant.companion.android.common.data.integration.supportsLightColorTemperature
 import io.homeassistant.companion.android.theme.WearAppTheme
+import io.homeassistant.companion.android.theme.getInlineSliderDefaultColors
 import io.homeassistant.companion.android.theme.wearColorScheme
 import io.homeassistant.companion.android.util.getColorTemperature
 import io.homeassistant.companion.android.util.onEntityClickedFeedback
 import io.homeassistant.companion.android.util.onEntityFeedback
 import io.homeassistant.companion.android.util.previewEntity1
+import io.homeassistant.companion.android.util.previewEntity2
+import io.homeassistant.companion.android.util.previewEntity4
 import io.homeassistant.companion.android.views.ListHeader
 import io.homeassistant.companion.android.views.ThemeLazyColumn
 import java.text.DateFormat
@@ -70,7 +73,7 @@ fun DetailsPanelView(
                 // Style similar to icon on frontend tile card
                 val isChecked = entity.isActive()
                 if (entity.domain in EntityExt.DOMAINS_TOGGLE) {
-                    ToggleButton(
+                    IconToggleButton(
                         checked = isChecked,
                         onCheckedChange = {
                             onEntityToggled(entity.entityId, entity.state)
@@ -82,15 +85,19 @@ fun DetailsPanelView(
                                 haptic
                             )
                         },
-                        colors = ToggleButtonDefaults.toggleButtonColors(checkedBackgroundColor = MaterialTheme.colorScheme.tertiary.copy(alpha = 0.2f)),
-                        modifier = Modifier.size(ToggleButtonDefaults.SmallToggleButtonSize)
+                        colors = IconButtonDefaults.iconToggleButtonColors(
+                            checkedContainerColor = wearColorScheme.tertiary.copy(alpha = 0.2f),
+                            uncheckedContainerColor = wearColorScheme.surfaceDim
+                        ),
+                        modifier = Modifier.touchTargetAwareSize(IconButtonDefaults.SmallButtonSize)
                     ) {
                         Image(
                             asset = entity.getIcon(LocalContext.current),
                             colorFilter = ColorFilter.tint(
-                                if (isChecked) MaterialTheme.colorScheme.tertiary else wearColorScheme.onSurface
+                                if (isChecked) wearColorScheme.tertiary else wearColorScheme.onSurface
                             ),
-                            contentDescription = stringResource(if (isChecked) R.string.enabled else R.string.disabled)
+                            contentDescription = stringResource(if (isChecked) R.string.enabled else R.string.disabled),
+                            modifier = Modifier.size(IconButtonDefaults.iconSizeFor(IconButtonDefaults.SmallButtonSize))
                         )
                     }
                 } else {
@@ -204,16 +211,19 @@ fun FanSpeedSlider(
             decreaseIcon = {
                 Image(
                     asset = CommunityMaterial.Icon2.cmd_fan_minus,
-                    colorFilter = ColorFilter.tint(Color.White)
+                    colorFilter = ColorFilter.tint(Color.White),
+                    modifier = Modifier.size(IconButtonDefaults.iconSizeFor(IconButtonDefaults.ExtraSmallButtonSize))
                 )
             },
             increaseIcon = {
                 Image(
                     asset = CommunityMaterial.Icon2.cmd_fan_plus,
-                    colorFilter = ColorFilter.tint(Color.White)
+                    colorFilter = ColorFilter.tint(Color.White),
+                    modifier = Modifier.size(IconButtonDefaults.iconSizeFor(IconButtonDefaults.ExtraSmallButtonSize))
                 )
             },
-            modifier = Modifier.padding(bottom = 8.dp, top = 2.dp)
+            modifier = Modifier.padding(bottom = 8.dp, top = 2.dp),
+            colors = getInlineSliderDefaultColors()
         )
     }
 }
@@ -255,16 +265,19 @@ fun BrightnessSlider(
             decreaseIcon = {
                 Image(
                     asset = CommunityMaterial.Icon.cmd_brightness_4,
-                    colorFilter = ColorFilter.tint(Color.White)
+                    colorFilter = ColorFilter.tint(Color.White),
+                    modifier = Modifier.size(IconButtonDefaults.iconSizeFor(IconButtonDefaults.ExtraSmallButtonSize))
                 )
             },
             increaseIcon = {
                 Image(
                     asset = CommunityMaterial.Icon.cmd_brightness_7,
-                    colorFilter = ColorFilter.tint(Color.White)
+                    colorFilter = ColorFilter.tint(Color.White),
+                    modifier = Modifier.size(IconButtonDefaults.iconSizeFor(IconButtonDefaults.ExtraSmallButtonSize))
                 )
             },
-            modifier = Modifier.padding(bottom = 8.dp, top = 2.dp)
+            modifier = Modifier.padding(bottom = 8.dp, top = 2.dp),
+            colors = getInlineSliderDefaultColors()
         )
     }
 }
@@ -320,20 +333,23 @@ fun ColorTempSlider(
             decreaseIcon = {
                 Image(
                     asset = CommunityMaterial.Icon3.cmd_thermometer_minus,
-                    colorFilter = ColorFilter.tint(Color.White)
+                    colorFilter = ColorFilter.tint(Color.White),
+                    modifier = Modifier.size(IconButtonDefaults.iconSizeFor(IconButtonDefaults.ExtraSmallButtonSize))
                 )
             },
             increaseIcon = {
                 Image(
                     asset = CommunityMaterial.Icon3.cmd_thermometer_plus,
-                    colorFilter = ColorFilter.tint(Color.White)
+                    colorFilter = ColorFilter.tint(Color.White),
+                    modifier = Modifier.size(IconButtonDefaults.iconSizeFor(IconButtonDefaults.ExtraSmallButtonSize))
                 )
             },
             colors = InlineSliderDefaults.colors(
                 selectedBarColor = getColorTemperature(
                     ratio = (currentValue - minValue).toDouble() / (maxValue - minValue).toDouble(),
                     isKelvin = useKelvin
-                )
+                ),
+                containerColor = wearColorScheme.surfaceDim
             ),
             modifier = Modifier.padding(bottom = 8.dp)
         )
@@ -365,7 +381,23 @@ private fun onSliderChangedFeedback(
 
 @Preview(device = WearDevices.LARGE_ROUND)
 @Composable
-private fun PreviewDetailsPaneView() {
+private fun PreviewDetailsPaneViewEntityFanOn() {
+    CompositionLocalProvider {
+        DetailsPanelView(
+            entity = previewEntity4,
+            onEntityToggled = { _, _ -> },
+            onFanSpeedChanged = {},
+            onBrightnessChanged = {},
+            onColorTempChanged = { _, _ -> },
+            isToastEnabled = false,
+            isHapticEnabled = false
+        )
+    }
+}
+
+@Preview(device = WearDevices.LARGE_ROUND)
+@Composable
+private fun PreviewDetailsPaneViewEntityLightOn() {
     CompositionLocalProvider {
         DetailsPanelView(
             entity = previewEntity1,
@@ -378,3 +410,19 @@ private fun PreviewDetailsPaneView() {
         )
     }
 }
+
+@Preview(device = WearDevices.LARGE_ROUND)
+@Composable
+private fun PreviewDetailsPaneViewEntityLightOff() {
+    CompositionLocalProvider {
+        DetailsPanelView(
+            entity = previewEntity2,
+            onEntityToggled = { _, _ -> },
+            onFanSpeedChanged = {},
+            onBrightnessChanged = {},
+            onColorTempChanged = { _, _ -> },
+            isToastEnabled = false,
+            isHapticEnabled = false
+        )
+    }
+}
diff --git a/wear/src/main/java/io/homeassistant/companion/android/theme/Color.kt b/wear/src/main/java/io/homeassistant/companion/android/theme/Color.kt
@@ -1,7 +1,10 @@
 package io.homeassistant.companion.android.theme
 
+import androidx.compose.runtime.Composable
 import androidx.compose.ui.graphics.Color
 import androidx.wear.compose.material3.ColorScheme
+import androidx.wear.compose.material3.ExperimentalWearMaterial3Api
+import androidx.wear.compose.material3.InlineSliderDefaults
 
 val md_theme_dark_primary = Color(0xFF03A9F4)
 val md_theme_dark_onPrimary = Color(0xFF00344F)
@@ -44,3 +47,9 @@ internal val wearColorScheme: ColorScheme = ColorScheme(
     outline = md_theme_dark_outline,
     outlineVariant = md_theme_dark_outlineVariant
 )
+
+@OptIn(ExperimentalWearMaterial3Api::class)
+@Composable
+fun getInlineSliderDefaultColors() = InlineSliderDefaults.colors(
+    containerColor = wearColorScheme.surfaceDim
+)
diff --git a/wear/src/main/java/io/homeassistant/companion/android/util/PreviewData.kt b/wear/src/main/java/io/homeassistant/companion/android/util/PreviewData.kt
@@ -10,11 +10,30 @@ val attributes: Map<*, *> = mapOf(
     "icon" to "mdi:cellphone"
 )
 
+val lightAttributes: Map<*, *> = mapOf(
+    "friendly_name" to "Light",
+    "icon" to "mdi:light-bulb",
+    "supported_color_modes" to listOf("color_temp", "hs"),
+    "supported_features" to 36,
+    "brightness" to 160,
+    "min_mireds" to 153,
+    "max_mireds" to 526,
+    "color_temp" to 300,
+    "color_mode" to "color_temp"
+)
+
+val fanAttributes: Map<*, *> = mapOf(
+    "friendly_name" to "Fan",
+    "icon" to "mdi:fan",
+    "supported_features" to 1,
+    "percentage" to 20
+)
 private val calendar: Calendar = Calendar.getInstance()
 
-val previewEntity1 = Entity("light.first", "on", attributes, calendar, calendar, mapOf())
+val previewEntity1 = Entity("light.first", "on", lightAttributes, calendar, calendar, mapOf())
 val previewEntity2 = Entity("light.second", "off", attributes, calendar, calendar, mapOf())
 val previewEntity3 = Entity("scene.first", "on", attributes, calendar, calendar, mapOf())
+val previewEntity4 = Entity("fan.first", "on", fanAttributes, calendar, calendar, mapOf())
 
 val previewEntityList = mapOf(
     previewEntity1.entityId to previewEntity1,