Update Chip and ToggleChip to Button and ToggleButton except for WearToggleChip (#3917)

* Update complication config screen to m3 components

* Clean up some code so its resuable

* Review comments and bump library

* Migrate more screens

* Review comments

* Tweak some colors

* Use consistent button container color

* Remove unnecessary font color

* Tweak Button disabled color to match ToggleButton

* Update a couple more chips and a preview

* Use in app color default
This commit is contained in:
Daniel Shokouhi 2023-10-06 08:37:17 -07:00 committed by GitHub
parent d7a08d3b08
commit f23a6cb046
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
19 changed files with 245 additions and 339 deletions

View file

@ -59,7 +59,7 @@ sentry-android = "6.30.0"
watchfaceComplicationsDataSourceKtx = "1.1.1"
wear = "1.3.0"
wear-compose-foundation = "1.2.0"
wear-compose-material = "1.0.0-alpha12"
wear-compose-material = "1.0.0-alpha13"
wear-protolayout = "1.0.0"
wear-tiles = "1.2.0"
wear-tooling = "1.0.0-alpha01"

View file

@ -9,16 +9,12 @@ import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.ColorFilter
import androidx.compose.ui.platform.LocalContext
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import androidx.wear.compose.material.Chip
import androidx.wear.compose.material.ChipDefaults
import androidx.wear.compose.material.ToggleChip
import androidx.wear.compose.material.ToggleChipDefaults
import androidx.wear.compose.material3.Button
import androidx.wear.compose.material3.Icon
import androidx.wear.compose.material3.Text
import androidx.wear.compose.material3.ToggleButton
import androidx.wear.compose.navigation.SwipeDismissableNavHost
import androidx.wear.compose.navigation.composable
import androidx.wear.compose.navigation.rememberSwipeDismissableNavController
@ -28,7 +24,10 @@ import io.homeassistant.companion.android.common.R
import io.homeassistant.companion.android.complications.ComplicationConfigViewModel
import io.homeassistant.companion.android.data.SimplifiedEntity
import io.homeassistant.companion.android.theme.WearAppTheme
import io.homeassistant.companion.android.theme.getFilledTonalButtonColors
import io.homeassistant.companion.android.theme.getToggleButtonColors
import io.homeassistant.companion.android.theme.wearColorScheme
import io.homeassistant.companion.android.util.ToggleSwitch
import io.homeassistant.companion.android.util.getIcon
import io.homeassistant.companion.android.util.simplifiedEntity
import io.homeassistant.companion.android.views.ChooseEntityView
@ -103,7 +102,7 @@ fun MainConfigView(
entity?.domain ?: "light",
LocalContext.current
)
Chip(
Button(
modifier = Modifier.fillMaxWidth(),
icon = {
Image(
@ -111,13 +110,8 @@ fun MainConfigView(
colorFilter = ColorFilter.tint(wearColorScheme.onSurface)
)
},
colors = ChipDefaults.secondaryChipColors(),
label = {
Text(
text = stringResource(id = R.string.choose_entity),
fontWeight = FontWeight.Bold
)
},
colors = getFilledTonalButtonColors(),
label = { Text(stringResource(id = R.string.choose_entity)) },
secondaryLabel = {
Text(
if (loaded) {
@ -133,54 +127,26 @@ fun MainConfigView(
}
item {
val isChecked = !loaded || showTitle
ToggleChip(
ToggleButton(
checked = isChecked,
onCheckedChange = onShowTitleClicked,
label = {
Text(
stringResource(R.string.show_entity_title),
fontWeight = FontWeight.Bold
)
},
toggleControl = {
Icon(
imageVector = ToggleChipDefaults.switchIcon(isChecked),
contentDescription = if (isChecked) {
stringResource(R.string.enabled)
} else {
stringResource(R.string.disabled)
},
tint = if (isChecked) wearColorScheme.tertiary else wearColorScheme.onSurface
)
},
label = { Text(stringResource(R.string.show_entity_title)) },
selectionControl = { ToggleSwitch(isChecked) },
modifier = Modifier.fillMaxWidth(),
enabled = loaded && entity != null
enabled = loaded && entity != null,
colors = getToggleButtonColors()
)
}
item {
val isChecked = !loaded || showUnit
ToggleChip(
ToggleButton(
checked = isChecked,
onCheckedChange = onShowUnitClicked,
label = {
Text(
stringResource(R.string.show_unit_title),
fontWeight = FontWeight.Bold
)
},
toggleControl = {
Icon(
imageVector = ToggleChipDefaults.switchIcon(isChecked),
contentDescription = if (isChecked) {
stringResource(R.string.enabled)
} else {
stringResource(R.string.disabled)
},
tint = if (isChecked) wearColorScheme.tertiary else wearColorScheme.onSurface
)
},
label = { Text(stringResource(R.string.show_unit_title)) },
selectionControl = { ToggleSwitch(isChecked) },
modifier = Modifier.fillMaxWidth(),
enabled = loaded && entity != null
enabled = loaded && entity != null,
colors = getToggleButtonColors()
)
}
@ -206,7 +172,7 @@ fun PreviewMainConfigView() {
MainConfigView(
entity = simplifiedEntity,
showTitle = true,
showUnit = true,
showUnit = false,
loadingState = ComplicationConfigViewModel.LoadingState.READY,
onChooseEntityClicked = {},
onShowTitleClicked = {},

View file

@ -39,8 +39,6 @@ import androidx.compose.ui.unit.sp
import androidx.wear.compose.foundation.lazy.ScalingLazyColumn
import androidx.wear.compose.foundation.lazy.items
import androidx.wear.compose.foundation.lazy.rememberScalingLazyListState
import androidx.wear.compose.material.Chip
import androidx.wear.compose.material.ChipDefaults
import androidx.wear.compose.material3.Button
import androidx.wear.compose.material3.ButtonDefaults
import androidx.wear.compose.material3.Icon
@ -57,6 +55,7 @@ import io.homeassistant.companion.android.common.assist.AssistViewModelBase
import io.homeassistant.companion.android.common.data.websocket.impl.entities.AssistPipelineResponse
import io.homeassistant.companion.android.conversation.ConversationViewModel
import io.homeassistant.companion.android.theme.WearAppTheme
import io.homeassistant.companion.android.theme.getFilledTonalButtonColors
import io.homeassistant.companion.android.util.KeepScreenOn
import io.homeassistant.companion.android.views.ListHeader
import io.homeassistant.companion.android.views.ThemeLazyColumn
@ -187,7 +186,10 @@ fun ConversationResultView(
modifier = Modifier
.size(48.dp)
.scale(scale)
.background(color = colorResource(R.color.colorSpeechText), shape = CircleShape)
.background(
color = colorResource(R.color.colorSpeechText),
shape = CircleShape
)
.clip(CircleShape)
)
}
@ -268,11 +270,11 @@ fun ConversationPipelinesView(
ListHeader(stringResource(R.string.assist_change_pipeline))
}
items(items = pipelines, key = { it.id }) {
Chip(
Button(
modifier = Modifier.fillMaxWidth(),
label = { Text(it.name) },
onClick = { onSelectPipeline(it.id) },
colors = ChipDefaults.secondaryChipColors()
colors = getFilledTonalButtonColors()
)
}
}

View file

@ -6,12 +6,12 @@ import androidx.compose.ui.res.stringResource
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.tooling.preview.Preview
import androidx.wear.compose.foundation.lazy.items
import androidx.wear.compose.material.Chip
import androidx.wear.compose.material.ChipDefaults
import androidx.wear.compose.material3.Button
import androidx.wear.compose.material3.Text
import androidx.wear.tooling.preview.devices.WearDevices
import io.homeassistant.companion.android.common.data.integration.Entity
import io.homeassistant.companion.android.theme.WearAppTheme
import io.homeassistant.companion.android.theme.getPrimaryButtonColors
import io.homeassistant.companion.android.util.playPreviewEntityScene1
import io.homeassistant.companion.android.util.playPreviewEntityScene2
import io.homeassistant.companion.android.util.playPreviewEntityScene3
@ -66,7 +66,7 @@ fun EntityViewList(
if (filtered.isEmpty()) {
item {
Column {
Chip(
Button(
label = {
Text(
text = stringResource(commonR.string.loading_entities),
@ -74,7 +74,7 @@ fun EntityViewList(
)
},
onClick = { /* No op */ },
colors = ChipDefaults.primaryChipColors()
colors = getPrimaryButtonColors()
)
}
}
@ -86,7 +86,7 @@ fun EntityViewList(
}
}
@Preview
@Preview(device = WearDevices.LARGE_ROUND)
@Composable
private fun PreviewEntityListView() {
EntityViewList(
@ -113,3 +113,17 @@ private fun PreviewEntityListScenes() {
isToastEnabled = false
)
}
@Preview(device = WearDevices.LARGE_ROUND)
@Composable
private fun PreviewEntityListEmpty() {
EntityViewList(
entityLists = mapOf(stringResource(commonR.string.scenes) to listOf(playPreviewEntityScene1)),
entityListsOrder = listOf(stringResource(commonR.string.scenes)),
entityListFilter = { false },
onEntityClicked = { _, _ -> },
onEntityLongClicked = { },
isHapticEnabled = false,
isToastEnabled = false
)
}

View file

@ -12,10 +12,9 @@ import androidx.compose.ui.platform.LocalHapticFeedback
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.text.style.TextOverflow
import androidx.compose.ui.tooling.preview.Preview
import androidx.wear.compose.material.Chip
import androidx.wear.compose.material.ChipDefaults
import androidx.wear.compose.material.ToggleChip
import androidx.wear.compose.material.ToggleChipDefaults
import androidx.wear.compose.material3.Button
import androidx.wear.compose.material3.Icon
import androidx.wear.compose.material3.Text
import androidx.wear.tooling.preview.devices.WearDevices
@ -27,6 +26,7 @@ import io.homeassistant.companion.android.common.data.integration.domain
import io.homeassistant.companion.android.common.data.integration.getIcon
import io.homeassistant.companion.android.common.data.integration.isActive
import io.homeassistant.companion.android.common.util.STATE_UNAVAILABLE
import io.homeassistant.companion.android.theme.getFilledTonalButtonColors
import io.homeassistant.companion.android.theme.wearColorScheme
import io.homeassistant.companion.android.util.WearToggleChip
import io.homeassistant.companion.android.util.onEntityClickedFeedback
@ -102,7 +102,7 @@ fun EntityUi(
colors = WearToggleChip.entityToggleChipBackgroundColors(entity, isChecked)
)
} else {
Chip(
Button(
modifier = Modifier
.fillMaxWidth(),
icon = {
@ -140,7 +140,7 @@ fun EntityUi(
onEntityClicked(entity.entityId, entity.state)
onEntityClickedFeedback(isToastEnabled, isHapticEnabled, context, friendlyName, haptic)
},
colors = ChipDefaults.secondaryChipColors()
colors = getFilledTonalButtonColors()
)
}
}

View file

@ -21,13 +21,12 @@ import androidx.compose.ui.platform.LocalConfiguration
import androidx.compose.ui.platform.LocalContext
import androidx.compose.ui.platform.LocalHapticFeedback
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.text.style.TextOverflow
import androidx.compose.ui.unit.dp
import androidx.wear.compose.material.Chip
import androidx.wear.compose.material.ChipDefaults
import androidx.wear.compose.material.CircularProgressIndicator
import androidx.wear.compose.material3.Button
import androidx.wear.compose.material3.ButtonDefaults
import androidx.wear.compose.material3.MaterialTheme
import androidx.wear.compose.material3.Text
import com.mikepenz.iconics.compose.Image
@ -36,6 +35,8 @@ import io.homeassistant.companion.android.common.data.integration.Entity
import io.homeassistant.companion.android.common.util.STATE_UNKNOWN
import io.homeassistant.companion.android.home.MainViewModel
import io.homeassistant.companion.android.theme.WearAppTheme
import io.homeassistant.companion.android.theme.getFilledTonalButtonColors
import io.homeassistant.companion.android.theme.getPrimaryButtonColors
import io.homeassistant.companion.android.theme.wearColorScheme
import io.homeassistant.companion.android.util.getIcon
import io.homeassistant.companion.android.util.onEntityClickedFeedback
@ -77,7 +78,7 @@ fun MainView(
if (mainViewModel.entities.isEmpty()) {
// when we don't have the state of the entity, create a Chip from cache as we don't have the state yet
val cached = mainViewModel.getCachedEntity(favoriteEntityID)
Chip(
Button(
modifier = Modifier
.fillMaxWidth(),
icon = {
@ -90,15 +91,14 @@ fun MainView(
Text(
text = cached?.friendlyName ?: favoriteEntityID,
maxLines = 2,
overflow = TextOverflow.Ellipsis,
fontWeight = FontWeight.Bold
overflow = TextOverflow.Ellipsis
)
},
onClick = {
onEntityClicked(favoriteEntityID, STATE_UNKNOWN)
onEntityClickedFeedback(isToastEnabled, isHapticEnabled, context, favoriteEntityID, haptic)
},
colors = ChipDefaults.secondaryChipColors()
colors = getFilledTonalButtonColors()
)
} else {
mainViewModel.entities.values.toList()
@ -151,17 +151,16 @@ fun MainView(
verticalArrangement = Arrangement.Center
) {
ListHeader(id = commonR.string.error_loading_entities)
Chip(
Button(
label = {
Text(
text = stringResource(commonR.string.retry),
textAlign = TextAlign.Center,
modifier = Modifier.fillMaxWidth(),
fontWeight = FontWeight.Bold
modifier = Modifier.fillMaxWidth()
)
},
onClick = onRetryLoadEntitiesClicked,
colors = ChipDefaults.primaryChipColors()
colors = ButtonDefaults.buttonColors()
)
Spacer(modifier = Modifier.height(32.dp))
}
@ -179,14 +178,16 @@ fun MainView(
text = stringResource(commonR.string.no_supported_entities),
textAlign = TextAlign.Center,
style = MaterialTheme.typography.titleMedium,
modifier = Modifier.fillMaxWidth()
modifier = Modifier
.fillMaxWidth()
.padding(top = 32.dp)
)
Text(
text = stringResource(commonR.string.no_supported_entities_summary),
textAlign = TextAlign.Center,
style = MaterialTheme.typography.bodyMedium,
modifier = Modifier.fillMaxWidth()
modifier = Modifier
.fillMaxWidth()
.padding(top = 8.dp)
)
}
@ -213,15 +214,9 @@ fun MainView(
if (!entitiesToShow.isNullOrEmpty()) {
val area = mainViewModel.areas.first { it.areaId == id }
item {
Chip(
Button(
modifier = Modifier.fillMaxWidth(),
label = {
Text(
text = area.name,
color = Color.Black,
fontWeight = FontWeight.Bold
)
},
label = { Text(area.name) },
onClick = {
onNavigationClicked(
mapOf(area.name to entities),
@ -233,7 +228,7 @@ fun MainView(
) == null
}
},
colors = ChipDefaults.primaryChipColors(backgroundColor = wearColorScheme.primary)
colors = getPrimaryButtonColors()
)
}
}
@ -258,7 +253,7 @@ fun MainView(
domainEntities.filter(domainEntitiesFilter)
if (domainEntitiesToShow.isNotEmpty()) {
item {
Chip(
Button(
modifier = Modifier.fillMaxWidth(),
icon = {
getIcon(
@ -267,13 +262,7 @@ fun MainView(
context
).let { Image(asset = it) }
},
label = {
Text(
text = mainViewModel.stringForDomain(domain)!!,
color = Color.Black,
fontWeight = FontWeight.Bold
)
},
label = { Text(mainViewModel.stringForDomain(domain)!!) },
onClick = {
onNavigationClicked(
mapOf(
@ -283,7 +272,7 @@ fun MainView(
domainEntitiesFilter
)
},
colors = ChipDefaults.primaryChipColors(backgroundColor = wearColorScheme.primary)
colors = getPrimaryButtonColors()
)
}
}
@ -295,7 +284,7 @@ fun MainView(
// All entities regardless of area
if (mainViewModel.entities.isNotEmpty()) {
item {
Chip(
Button(
modifier = Modifier
.fillMaxWidth(),
icon = {
@ -321,7 +310,7 @@ fun MainView(
}.sorted()
) { true }
},
colors = ChipDefaults.secondaryChipColors()
colors = getFilledTonalButtonColors()
)
}
}
@ -337,7 +326,7 @@ fun MainView(
// Settings
item {
Chip(
Button(
modifier = Modifier
.fillMaxWidth(),
icon = {
@ -346,14 +335,9 @@ fun MainView(
colorFilter = ColorFilter.tint(Color.White)
)
},
label = {
Text(
text = stringResource(id = commonR.string.settings),
fontWeight = FontWeight.Bold
)
},
label = { Text(stringResource(commonR.string.settings)) },
onClick = onSettingsClicked,
colors = ChipDefaults.secondaryChipColors()
colors = getFilledTonalButtonColors()
)
}
}

View file

@ -4,16 +4,15 @@ import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.tooling.preview.Preview
import androidx.wear.compose.foundation.lazy.itemsIndexed
import androidx.wear.compose.material.Chip
import androidx.wear.compose.material.ChipDefaults
import androidx.wear.compose.material3.Button
import androidx.wear.compose.material3.Text
import androidx.wear.tooling.preview.devices.WearDevices
import io.homeassistant.companion.android.database.wear.CameraTile
import io.homeassistant.companion.android.theme.WearAppTheme
import io.homeassistant.companion.android.theme.getFilledTonalButtonColors
import io.homeassistant.companion.android.views.ListHeader
import io.homeassistant.companion.android.views.ThemeLazyColumn
import io.homeassistant.companion.android.common.R as commonR
@ -37,21 +36,16 @@ fun SelectCameraTileView(
}
} else {
itemsIndexed(tiles, key = { _, item -> "tile.${item.id}" }) { index, tile ->
Chip(
Button(
modifier = Modifier.fillMaxWidth(),
label = {
Text(
stringResource(commonR.string.camera_tile_n, index + 1),
fontWeight = FontWeight.Bold
)
},
label = { Text(stringResource(commonR.string.camera_tile_n, index + 1)) },
secondaryLabel = if (tile.entityId != null) {
{ Text(tile.entityId!!) }
} else {
null
},
onClick = { onSelectTile(tile.id) },
colors = ChipDefaults.secondaryChipColors()
colors = getFilledTonalButtonColors()
)
}
}

View file

@ -6,20 +6,19 @@ import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.ColorFilter
import androidx.compose.ui.res.pluralStringResource
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.tooling.preview.Preview
import androidx.wear.compose.foundation.lazy.itemsIndexed
import androidx.wear.compose.material.Chip
import androidx.wear.compose.material.ChipDefaults
import androidx.wear.compose.material.ToggleChip
import androidx.wear.compose.material.ToggleChipDefaults
import androidx.wear.compose.material3.Icon
import androidx.wear.compose.material3.Button
import androidx.wear.compose.material3.Text
import androidx.wear.compose.material3.ToggleButton
import androidx.wear.tooling.preview.devices.WearDevices
import com.mikepenz.iconics.compose.Image
import com.mikepenz.iconics.typeface.library.community.material.CommunityMaterial
import io.homeassistant.companion.android.theme.WearAppTheme
import io.homeassistant.companion.android.theme.getFilledTonalButtonColors
import io.homeassistant.companion.android.theme.getToggleButtonColors
import io.homeassistant.companion.android.theme.wearColorScheme
import io.homeassistant.companion.android.util.ToggleCheckbox
import io.homeassistant.companion.android.views.ListHeader
import io.homeassistant.companion.android.views.ThemeLazyColumn
import io.homeassistant.companion.android.common.R as commonR
@ -37,17 +36,12 @@ fun SelectShortcutsTileView(
ListHeader(id = commonR.string.shortcut_tiles)
}
item {
ToggleChip(
ToggleButton(
modifier = Modifier.fillMaxWidth(),
checked = isShowShortcutTextEnabled,
onCheckedChange = { onShowShortcutTextEnabled(it) },
label = {
Text(
stringResource(commonR.string.shortcuts_tile_text_setting),
fontWeight = FontWeight.Bold
)
},
appIcon = {
label = { Text(stringResource(commonR.string.shortcuts_tile_text_setting)) },
icon = {
Image(
asset =
if (isShowShortcutTextEnabled) {
@ -58,17 +52,8 @@ fun SelectShortcutsTileView(
colorFilter = ColorFilter.tint(wearColorScheme.onSurface)
)
},
toggleControl = {
Icon(
imageVector = ToggleChipDefaults.checkboxIcon(isShowShortcutTextEnabled),
contentDescription = if (isShowShortcutTextEnabled) {
stringResource(commonR.string.show)
} else {
stringResource(commonR.string.hide)
},
tint = if (isShowShortcutTextEnabled) wearColorScheme.tertiary else wearColorScheme.onSurface
)
}
selectionControl = { ToggleCheckbox(isShowShortcutTextEnabled) },
colors = getToggleButtonColors()
)
}
item {
@ -80,15 +65,10 @@ fun SelectShortcutsTileView(
}
} else {
itemsIndexed(shortcutTileEntitiesCountById.keys.toList()) { index, shortcutsTileId ->
Chip(
Button(
modifier = Modifier
.fillMaxWidth(),
label = {
Text(
stringResource(commonR.string.shortcuts_tile_n, index + 1),
fontWeight = FontWeight.Bold
)
},
label = { Text(stringResource(commonR.string.shortcuts_tile_n, index + 1)) },
secondaryLabel = {
val entityCount = shortcutTileEntitiesCountById[shortcutsTileId] ?: 0
if (entityCount > 0) {
@ -96,7 +76,7 @@ fun SelectShortcutsTileView(
}
},
onClick = { onSelectShortcutsTile(shortcutsTileId) },
colors = ChipDefaults.secondaryChipColors()
colors = getFilledTonalButtonColors()
)
}
}

View file

@ -11,18 +11,15 @@ import androidx.compose.runtime.CompositionLocalProvider
import androidx.compose.ui.Modifier
import androidx.compose.ui.platform.LocalContext
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.text.style.TextOverflow
import androidx.compose.ui.tooling.preview.Preview
import androidx.wear.compose.material.ToggleChip
import androidx.wear.compose.material.ToggleChipDefaults
import androidx.wear.compose.material3.Icon
import androidx.wear.compose.material3.Text
import androidx.wear.compose.material3.ToggleButton
import androidx.wear.tooling.preview.devices.WearDevices
import io.homeassistant.companion.android.common.R
import io.homeassistant.companion.android.common.sensors.SensorManager
import io.homeassistant.companion.android.database.sensor.Sensor
import io.homeassistant.companion.android.theme.wearColorScheme
import io.homeassistant.companion.android.theme.getToggleButtonColors
import io.homeassistant.companion.android.util.ToggleSwitch
import io.homeassistant.companion.android.util.batterySensorManager
import kotlinx.coroutines.runBlocking
@ -34,8 +31,6 @@ fun SensorUi(
basicSensor: SensorManager.BasicSensor,
onSensorClicked: (String, Boolean) -> Unit
) {
val checked = sensor?.enabled == true
val backgroundRequest =
rememberLauncherForActivityResult(ActivityResultContracts.RequestPermission()) {
onSensorClicked(basicSensor.id, it)
@ -62,9 +57,10 @@ fun SensorUi(
}
val perm = manager.checkPermission(LocalContext.current, basicSensor.id)
ToggleChip(
checked = (sensor == null && basicSensor.enabledByDefault) ||
(sensor?.enabled == true && perm),
val isChecked = (sensor == null && basicSensor.enabledByDefault) ||
(sensor?.enabled == true && perm)
ToggleButton(
checked = isChecked,
onCheckedChange = { enabled ->
val permissions = manager.requiredPermissions(basicSensor.id)
if (perm || !enabled) {
@ -86,21 +82,11 @@ fun SensorUi(
Text(
text = stringResource(basicSensor.name),
maxLines = 2,
overflow = TextOverflow.Ellipsis,
fontWeight = FontWeight.Bold
overflow = TextOverflow.Ellipsis
)
},
toggleControl = {
Icon(
imageVector = ToggleChipDefaults.switchIcon(checked),
contentDescription = if (checked) {
stringResource(R.string.enabled)
} else {
stringResource(R.string.disabled)
},
tint = if (checked) wearColorScheme.tertiary else wearColorScheme.onSurface
)
}
selectionControl = { ToggleSwitch(isChecked) },
colors = getToggleButtonColors()
)
}

View file

@ -7,15 +7,14 @@ import androidx.compose.runtime.CompositionLocalProvider
import androidx.compose.ui.Modifier
import androidx.compose.ui.platform.LocalContext
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.tooling.preview.Preview
import androidx.wear.compose.material.Chip
import androidx.wear.compose.material.ChipDefaults
import androidx.wear.compose.material3.Button
import androidx.wear.compose.material3.Text
import androidx.wear.tooling.preview.devices.WearDevices
import io.homeassistant.companion.android.common.sensors.SensorManager
import io.homeassistant.companion.android.sensors.SensorReceiver
import io.homeassistant.companion.android.theme.WearAppTheme
import io.homeassistant.companion.android.theme.getFilledTonalButtonColors
import io.homeassistant.companion.android.views.ListHeader
import io.homeassistant.companion.android.views.ThemeLazyColumn
import io.homeassistant.companion.android.common.R as commonR
@ -33,16 +32,11 @@ fun SensorsView(
items(sensorManagers.size, { sensorManagers[it].name }) { index ->
val manager = sensorManagers[index]
Row {
Chip(
Button(
modifier = Modifier
.fillMaxWidth(),
colors = ChipDefaults.secondaryChipColors(),
label = {
Text(
text = stringResource(manager.name),
fontWeight = FontWeight.Bold
)
},
colors = getFilledTonalButtonColors(),
label = { Text(stringResource(manager.name)) },
onClick = { onClickSensorManager(manager) }
)
}

View file

@ -6,8 +6,7 @@ import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.ColorFilter
import androidx.compose.ui.platform.LocalContext
import androidx.compose.ui.res.stringResource
import androidx.wear.compose.material.Chip
import androidx.wear.compose.material.ChipDefaults
import androidx.wear.compose.material3.Button
import androidx.wear.compose.material3.Text
import com.mikepenz.iconics.compose.Image
import com.mikepenz.iconics.typeface.library.community.material.CommunityMaterial
@ -17,6 +16,7 @@ import io.homeassistant.companion.android.common.data.integration.friendlyName
import io.homeassistant.companion.android.common.data.integration.getIcon
import io.homeassistant.companion.android.database.wear.CameraTile
import io.homeassistant.companion.android.theme.WearAppTheme
import io.homeassistant.companion.android.theme.getFilledTonalButtonColors
import io.homeassistant.companion.android.theme.wearColorScheme
import io.homeassistant.companion.android.tiles.CameraTile.Companion.DEFAULT_REFRESH_INTERVAL
import io.homeassistant.companion.android.util.intervalToString
@ -41,7 +41,7 @@ fun SetCameraTileView(
entities?.firstOrNull { it.entityId == tileEntityId }
}
val icon = entity?.getIcon(LocalContext.current) ?: CommunityMaterial.Icon3.cmd_video
Chip(
Button(
modifier = Modifier.fillMaxWidth(),
icon = {
Image(
@ -49,7 +49,7 @@ fun SetCameraTileView(
colorFilter = ColorFilter.tint(wearColorScheme.onSurface)
)
},
colors = ChipDefaults.secondaryChipColors(),
colors = getFilledTonalButtonColors(),
label = {
Text(
text = stringResource(id = R.string.choose_entity)
@ -63,7 +63,7 @@ fun SetCameraTileView(
}
item {
Chip(
Button(
modifier = Modifier.fillMaxWidth(),
icon = {
Image(
@ -71,7 +71,7 @@ fun SetCameraTileView(
colorFilter = ColorFilter.tint(wearColorScheme.onSurface)
)
},
colors = ChipDefaults.secondaryChipColors(),
colors = getFilledTonalButtonColors(),
label = {
Text(
text = stringResource(id = R.string.refresh_interval)

View file

@ -5,20 +5,18 @@ import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.ColorFilter
import androidx.compose.ui.platform.LocalContext
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.text.style.TextOverflow
import androidx.wear.compose.foundation.lazy.items
import androidx.wear.compose.material.ToggleChip
import androidx.wear.compose.material.ToggleChipDefaults
import androidx.wear.compose.material3.Icon
import androidx.wear.compose.material3.Text
import androidx.wear.compose.material3.ToggleButton
import com.mikepenz.iconics.compose.Image
import io.homeassistant.companion.android.common.data.integration.Entity
import io.homeassistant.companion.android.common.data.integration.getIcon
import io.homeassistant.companion.android.home.MainViewModel
import io.homeassistant.companion.android.theme.WearAppTheme
import io.homeassistant.companion.android.theme.getToggleButtonColors
import io.homeassistant.companion.android.theme.wearColorScheme
import io.homeassistant.companion.android.util.ToggleSwitch
import io.homeassistant.companion.android.views.ExpandableListHeader
import io.homeassistant.companion.android.views.ListHeader
import io.homeassistant.companion.android.views.ThemeLazyColumn
@ -75,14 +73,14 @@ private fun FavoriteToggleChip(
val entityId = entity.entityId
val checked = favoriteEntityIds.contains(entityId)
ToggleChip(
ToggleButton(
checked = checked,
onCheckedChange = {
onFavoriteSelected(entityId, it)
},
modifier = Modifier
.fillMaxWidth(),
appIcon = {
icon = {
Image(
asset = iconBitmap,
colorFilter = ColorFilter.tint(wearColorScheme.onSurface)
@ -92,20 +90,10 @@ private fun FavoriteToggleChip(
Text(
text = attributes["friendly_name"].toString(),
maxLines = 2,
overflow = TextOverflow.Ellipsis,
fontWeight = FontWeight.Bold
overflow = TextOverflow.Ellipsis
)
},
toggleControl = {
Icon(
imageVector = ToggleChipDefaults.switchIcon(checked),
contentDescription = if (checked) {
stringResource(commonR.string.enabled)
} else {
stringResource(commonR.string.disabled)
},
tint = if (checked) wearColorScheme.tertiary else wearColorScheme.onSurface
)
}
selectionControl = { ToggleSwitch(checked) },
colors = getToggleButtonColors()
)
}

View file

@ -13,8 +13,6 @@ import androidx.compose.ui.res.stringResource
import androidx.compose.ui.text.style.TextOverflow
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import androidx.wear.compose.material.Chip
import androidx.wear.compose.material.ChipDefaults
import androidx.wear.compose.material3.Button
import androidx.wear.compose.material3.ButtonDefaults
import androidx.wear.compose.material3.Icon
@ -23,6 +21,7 @@ import androidx.wear.tooling.preview.devices.WearDevices
import com.mikepenz.iconics.compose.Image
import io.homeassistant.companion.android.data.SimplifiedEntity
import io.homeassistant.companion.android.theme.WearAppTheme
import io.homeassistant.companion.android.theme.getFilledTonalButtonColors
import io.homeassistant.companion.android.util.getIcon
import io.homeassistant.companion.android.util.simplifiedEntity
import io.homeassistant.companion.android.views.ListHeader
@ -47,7 +46,7 @@ fun SetShortcutsTileView(
LocalContext.current
)
Chip(
Button(
modifier = Modifier
.fillMaxWidth(),
icon = {
@ -69,7 +68,7 @@ fun SetShortcutsTileView(
)
},
onClick = { onShortcutEntitySelectionChange(index) },
colors = ChipDefaults.secondaryChipColors()
colors = getFilledTonalButtonColors()
)
}
if (shortcutEntities.size < 7) {

View file

@ -8,14 +8,11 @@ import androidx.compose.ui.graphics.ColorFilter
import androidx.compose.ui.hapticfeedback.HapticFeedbackType
import androidx.compose.ui.platform.LocalHapticFeedback
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.tooling.preview.Preview
import androidx.wear.compose.material.Chip
import androidx.wear.compose.material.ChipDefaults
import androidx.wear.compose.material.ToggleChip
import androidx.wear.compose.material.ToggleChipDefaults
import androidx.wear.compose.material3.Icon
import androidx.wear.compose.material3.Button
import androidx.wear.compose.material3.ButtonDefaults
import androidx.wear.compose.material3.Text
import androidx.wear.compose.material3.ToggleButton
import androidx.wear.tooling.preview.devices.WearDevices
import com.mikepenz.iconics.compose.Image
import com.mikepenz.iconics.typeface.IIcon
@ -23,7 +20,10 @@ import com.mikepenz.iconics.typeface.library.community.material.CommunityMateria
import io.homeassistant.companion.android.common.BuildConfig
import io.homeassistant.companion.android.home.MainViewModel
import io.homeassistant.companion.android.theme.WearAppTheme
import io.homeassistant.companion.android.theme.getFilledTonalButtonColors
import io.homeassistant.companion.android.theme.getToggleButtonColors
import io.homeassistant.companion.android.theme.wearColorScheme
import io.homeassistant.companion.android.util.ToggleSwitch
import io.homeassistant.companion.android.util.previewFavoritesList
import io.homeassistant.companion.android.views.ListHeader
import io.homeassistant.companion.android.views.ThemeLazyColumn
@ -37,7 +37,7 @@ fun SecondarySettingsChip(
enabled: Boolean = true,
onClick: () -> Unit
) {
Chip(
Button(
modifier = Modifier.fillMaxWidth(),
icon = {
Image(
@ -45,13 +45,8 @@ fun SecondarySettingsChip(
colorFilter = ColorFilter.tint(wearColorScheme.onSurface)
)
},
colors = ChipDefaults.secondaryChipColors(),
label = {
Text(
text = label,
fontWeight = FontWeight.Bold
)
},
colors = getFilledTonalButtonColors(),
label = { Text(label) },
secondaryLabel = secondaryLabel?.let {
{ Text(text = secondaryLabel) }
},
@ -103,34 +98,20 @@ fun SettingsView(
)
}
item {
ToggleChip(
ToggleButton(
modifier = Modifier.fillMaxWidth(),
checked = isFavoritesOnly,
onCheckedChange = { setFavoritesOnly(it) },
label = {
Text(
stringResource(commonR.string.only_favorites),
fontWeight = FontWeight.Bold
)
},
label = { Text(stringResource(commonR.string.only_favorites)) },
enabled = favorites.isNotEmpty(),
toggleControl = {
Icon(
imageVector = ToggleChipDefaults.switchIcon(isFavoritesOnly),
contentDescription = if (isFavoritesOnly) {
stringResource(commonR.string.enabled)
} else {
stringResource(commonR.string.disabled)
},
tint = if (isFavoritesOnly) wearColorScheme.tertiary else wearColorScheme.onSurface
)
},
appIcon = {
selectionControl = { ToggleSwitch(isFavoritesOnly) },
icon = {
Image(
asset = CommunityMaterial.Icon2.cmd_home_heart,
colorFilter = ColorFilter.tint(wearColorScheme.onSurface)
)
}
},
colors = getToggleButtonColors()
)
}
item {
@ -140,20 +121,15 @@ fun SettingsView(
}
item {
val haptic = LocalHapticFeedback.current
ToggleChip(
ToggleButton(
modifier = Modifier.fillMaxWidth(),
checked = isHapticEnabled,
onCheckedChange = {
onHapticEnabled(it)
haptic.performHapticFeedback(HapticFeedbackType.LongPress)
},
label = {
Text(
stringResource(commonR.string.setting_haptic_label),
fontWeight = FontWeight.Bold
)
},
appIcon = {
label = { Text(stringResource(commonR.string.setting_haptic_label)) },
icon = {
Image(
asset =
if (isHapticEnabled) {
@ -164,31 +140,17 @@ fun SettingsView(
colorFilter = ColorFilter.tint(wearColorScheme.onSurface)
)
},
toggleControl = {
Icon(
imageVector = ToggleChipDefaults.switchIcon(isHapticEnabled),
contentDescription = if (isHapticEnabled) {
stringResource(commonR.string.enabled)
} else {
stringResource(commonR.string.disabled)
},
tint = if (isHapticEnabled) wearColorScheme.tertiary else wearColorScheme.onSurface
)
}
selectionControl = { ToggleSwitch(isHapticEnabled) },
colors = getToggleButtonColors()
)
}
item {
ToggleChip(
ToggleButton(
modifier = Modifier.fillMaxWidth(),
checked = isToastEnabled,
onCheckedChange = onToastEnabled,
label = {
Text(
stringResource(commonR.string.setting_toast_label),
fontWeight = FontWeight.Bold
)
},
appIcon = {
label = { Text(stringResource(commonR.string.setting_toast_label)) },
icon = {
Image(
asset =
if (isToastEnabled) {
@ -199,17 +161,8 @@ fun SettingsView(
colorFilter = ColorFilter.tint(wearColorScheme.onSurface)
)
},
toggleControl = {
Icon(
imageVector = ToggleChipDefaults.switchIcon(isToastEnabled),
contentDescription = if (isToastEnabled) {
stringResource(commonR.string.enabled)
} else {
stringResource(commonR.string.disabled)
},
tint = if (isToastEnabled) wearColorScheme.tertiary else wearColorScheme.onSurface
)
}
selectionControl = { ToggleSwitch(isToastEnabled) },
colors = getToggleButtonColors()
)
}
@ -257,33 +210,19 @@ fun SettingsView(
)
}
item {
ToggleChip(
ToggleButton(
modifier = Modifier.fillMaxWidth(),
checked = isAssistantAppAllowed,
onCheckedChange = onAssistantAppAllowed,
label = {
Text(
stringResource(commonR.string.available_as_assistant_app),
fontWeight = FontWeight.Bold
)
},
appIcon = {
label = { Text(stringResource(commonR.string.available_as_assistant_app)) },
icon = {
Image(
asset = CommunityMaterial.Icon.cmd_comment_processing_outline,
colorFilter = ColorFilter.tint(wearColorScheme.onSurface)
)
},
toggleControl = {
Icon(
imageVector = ToggleChipDefaults.switchIcon(isAssistantAppAllowed),
contentDescription = if (isAssistantAppAllowed) {
stringResource(commonR.string.enabled)
} else {
stringResource(commonR.string.disabled)
},
tint = if (isAssistantAppAllowed) wearColorScheme.tertiary else wearColorScheme.onSurface
)
}
selectionControl = { ToggleSwitch(isAssistantAppAllowed) },
colors = getToggleButtonColors()
)
}
item {
@ -292,21 +231,13 @@ fun SettingsView(
)
}
item {
Chip(
Button(
modifier = Modifier.fillMaxWidth(),
icon = {
Image(asset = CommunityMaterial.Icon.cmd_exit_run)
},
label = {
Text(
text = stringResource(id = commonR.string.logout),
color = Color.Black,
fontWeight = FontWeight.Bold
)
},
icon = { Image(CommunityMaterial.Icon.cmd_exit_run) },
label = { Text(stringResource(commonR.string.logout)) },
onClick = onClickLogout,
colors = ChipDefaults.primaryChipColors(
backgroundColor = Color.Red,
colors = ButtonDefaults.buttonColors(
containerColor = Color.Red,
contentColor = Color.Black
)
)

View file

@ -9,14 +9,14 @@ import androidx.compose.ui.graphics.ColorFilter
import androidx.compose.ui.platform.LocalContext
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.tooling.preview.Preview
import androidx.wear.compose.material.Chip
import androidx.wear.compose.material.ChipDefaults
import androidx.wear.compose.material3.Button
import androidx.wear.compose.material3.Text
import androidx.wear.tooling.preview.devices.WearDevices
import com.mikepenz.iconics.compose.Image
import com.mikepenz.iconics.typeface.library.community.material.CommunityMaterial
import io.homeassistant.companion.android.common.R
import io.homeassistant.companion.android.theme.WearAppTheme
import io.homeassistant.companion.android.theme.getFilledTonalButtonColors
import io.homeassistant.companion.android.theme.wearColorScheme
import io.homeassistant.companion.android.util.intervalToString
import io.homeassistant.companion.android.views.ListHeader
@ -34,7 +34,7 @@ fun TemplateTileSettingsView(
ListHeader(id = R.string.template_tile)
}
item {
Chip(
Button(
modifier = Modifier
.fillMaxWidth(),
icon = {
@ -43,12 +43,8 @@ fun TemplateTileSettingsView(
colorFilter = ColorFilter.tint(wearColorScheme.onSurface)
)
},
colors = ChipDefaults.secondaryChipColors(),
label = {
Text(
text = stringResource(id = R.string.refresh_interval)
)
},
colors = getFilledTonalButtonColors(),
label = { Text(stringResource(R.string.refresh_interval)) },
secondaryLabel = { Text(intervalToString(LocalContext.current, refreshInterval)) },
onClick = onClickRefreshInterval
)

View file

@ -12,11 +12,11 @@ import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import androidx.wear.compose.material3.Button
import androidx.wear.compose.material3.ButtonDefaults
import androidx.wear.compose.material3.MaterialTheme
import androidx.wear.compose.material3.Text
import androidx.wear.tooling.preview.devices.WearDevices
import io.homeassistant.companion.android.R
import io.homeassistant.companion.android.theme.getFilledTonalButtonColors
import io.homeassistant.companion.android.views.ThemeLazyColumn
import io.homeassistant.companion.android.common.R as commonR
@ -61,7 +61,7 @@ fun PhoneInstallView(
Button(
onClick = onRefresh,
modifier = Modifier.fillMaxWidth(),
colors = ButtonDefaults.filledTonalButtonColors(),
colors = getFilledTonalButtonColors(),
label = {
Text(
stringResource(commonR.string.refresh),
@ -77,7 +77,7 @@ fun PhoneInstallView(
modifier = Modifier
.fillMaxWidth()
.padding(top = 16.dp),
colors = ButtonDefaults.filledTonalButtonColors(),
colors = getFilledTonalButtonColors(),
label = {
Text(
stringResource(commonR.string.advanced),

View file

@ -1,7 +1,13 @@
package io.homeassistant.companion.android.theme
import androidx.compose.runtime.Composable
import androidx.compose.ui.graphics.Color
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.SwitchDefaults
import androidx.wear.compose.material3.ToggleButtonDefaults
val md_theme_dark_primary = Color(0xFF03A9F4)
val md_theme_dark_onPrimary = Color(0xFF00344F)
@ -44,3 +50,32 @@ internal val wearColorScheme: ColorScheme = ColorScheme(
outline = md_theme_dark_outline,
outlineVariant = md_theme_dark_outlineVariant
)
@Composable
fun getSwitchColors() = SwitchDefaults.colors(
checkedThumbColor = wearColorScheme.tertiary,
checkedTrackColor = wearColorScheme.onTertiary,
checkedTrackBorderColor = wearColorScheme.tertiary,
checkedThumbIconColor = wearColorScheme.tertiary
)
@Composable
fun getToggleButtonColors() = ToggleButtonDefaults.toggleButtonColors(
checkedContainerColor = wearColorScheme.surfaceBright,
uncheckedContainerColor = wearColorScheme.surfaceDim
)
@Composable
fun getFilledTonalButtonColors() = ButtonDefaults.filledTonalButtonColors(
containerColor = wearColorScheme.surfaceDim,
disabledContainerColor = wearColorScheme.surfaceDim.copy(alpha = ContentAlpha.disabled)
)
@Composable
fun getPrimaryButtonColors() = ButtonDefaults.buttonColors(containerColor = wearColorScheme.primary)
@Composable
fun getCheckboxColors() = CheckboxDefaults.colors(
checkedBoxColor = wearColorScheme.onTertiary,
checkedCheckmarkColor = wearColorScheme.tertiary
)

View file

@ -0,0 +1,36 @@
package io.homeassistant.companion.android.util
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.semantics.contentDescription
import androidx.compose.ui.semantics.semantics
import androidx.wear.compose.material3.Checkbox
import androidx.wear.compose.material3.Switch
import io.homeassistant.companion.android.common.R
import io.homeassistant.companion.android.theme.getCheckboxColors
import io.homeassistant.companion.android.theme.getSwitchColors
@Composable
fun ToggleSwitch(isChecked: Boolean) {
val description = stringResource(if (isChecked)R.string.enabled else R.string.disabled)
Switch(
checked = isChecked,
modifier = Modifier.semantics {
this.contentDescription = description
},
colors = getSwitchColors()
)
}
@Composable
fun ToggleCheckbox(isChecked: Boolean) {
val description = stringResource(if (isChecked) R.string.show else R.string.hide)
Checkbox(
checked = isChecked,
modifier = Modifier.semantics {
this.contentDescription = description
},
colors = getCheckboxColors()
)
}

View file

@ -18,8 +18,8 @@ import androidx.compose.ui.res.stringResource
import androidx.compose.ui.text.style.TextOverflow
import androidx.compose.ui.unit.dp
import androidx.wear.compose.foundation.lazy.items
import androidx.wear.compose.material.Chip
import androidx.wear.compose.material.ChipDefaults
import androidx.wear.compose.material3.Button
import androidx.wear.compose.material3.ButtonDefaults
import androidx.wear.compose.material3.Text
import com.mikepenz.iconics.compose.Image
import com.mikepenz.iconics.typeface.library.community.material.CommunityMaterial
@ -28,6 +28,7 @@ import io.homeassistant.companion.android.common.data.integration.getIcon
import io.homeassistant.companion.android.common.util.capitalize
import io.homeassistant.companion.android.data.SimplifiedEntity
import io.homeassistant.companion.android.theme.WearAppTheme
import io.homeassistant.companion.android.theme.getFilledTonalButtonColors
import io.homeassistant.companion.android.util.stringForDomain
import java.util.Locale
import io.homeassistant.companion.android.common.R as commonR
@ -52,14 +53,14 @@ fun ChooseEntityView(
}
if (allowNone) {
item {
Chip(
Button(
modifier = Modifier
.fillMaxWidth()
.padding(bottom = 16.dp),
icon = { Image(asset = CommunityMaterial.Icon.cmd_delete) },
label = { Text(stringResource(id = commonR.string.none)) },
onClick = onNoneClicked,
colors = ChipDefaults.primaryChipColors(
colors = ButtonDefaults.buttonColors(
contentColor = Color.Black
)
)
@ -121,7 +122,7 @@ private fun ChooseEntityChip(
) {
val attributes = entity.attributes as Map<*, *>
val iconBitmap = entity.getIcon(LocalContext.current)
Chip(
Button(
modifier = Modifier
.fillMaxWidth(),
icon = {
@ -146,6 +147,6 @@ private fun ChooseEntityChip(
)
)
},
colors = ChipDefaults.secondaryChipColors()
colors = getFilledTonalButtonColors()
)
}