From 2a597602f18f7ee3d4c396ed76ff02997a3841bf Mon Sep 17 00:00:00 2001 From: Daniel Shokouhi Date: Fri, 6 Oct 2023 09:56:48 -0700 Subject: [PATCH] Fix detail pane after material 3 migration, add additional previews (#3920) --- .../android/home/views/DetailsPanelView.kt | 84 +++++++++++++++---- .../companion/android/theme/Color.kt | 8 ++ .../companion/android/util/PreviewData.kt | 21 ++++- 3 files changed, 94 insertions(+), 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 index 4e1a09c8308..ca21440b34c 100644 --- 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 index bd95b8b2332..af6f1a65893 100644 --- a/wear/src/main/java/io/homeassistant/companion/android/theme/Color.kt +++ b/wear/src/main/java/io/homeassistant/companion/android/theme/Color.kt @@ -6,6 +6,8 @@ import androidx.wear.compose.material3.ButtonDefaults import androidx.wear.compose.material3.CheckboxDefaults import androidx.wear.compose.material3.ColorScheme import androidx.wear.compose.material3.ContentAlpha +import androidx.wear.compose.material3.ExperimentalWearMaterial3Api +import androidx.wear.compose.material3.InlineSliderDefaults import androidx.wear.compose.material3.SwitchDefaults import androidx.wear.compose.material3.ToggleButtonDefaults @@ -79,3 +81,9 @@ fun getCheckboxColors() = CheckboxDefaults.colors( checkedBoxColor = wearColorScheme.onTertiary, checkedCheckmarkColor = wearColorScheme.tertiary ) + +@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 index 46fc1dc475f..2e894458bfd 100755 --- 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,