Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix detail pane after material 3 migration, add additional previews #3920

Merged
merged 1 commit into from
Oct 6, 2023
Merged

Fix detail pane after material 3 migration, add additional previews #3920

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
84 changes: 66 additions & 18 deletions wear/src/main/java/io/homeassistant/companion/android/home/views/DetailsPanelView.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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
Expand All @@ -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)
Expand All @@ -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 {
Expand Down Expand Up @@ -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()
)
}
}
Expand Down Expand Up @@ -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()
)
}
}
Expand Down Expand Up @@ -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)
)
Expand Down Expand Up @@ -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,
Expand All @@ -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
)
}
}
8 changes: 8 additions & 0 deletions wear/src/main/java/io/homeassistant/companion/android/theme/Color.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down Expand Up @@ -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
)
21 changes: 20 additions & 1 deletion wear/src/main/java/io/homeassistant/companion/android/util/PreviewData.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down