From e8177af349d96e26b1989168b17bc4609e1770a3 Mon Sep 17 00:00:00 2001 From: Sergio Sancho Date: Tue, 6 Feb 2024 14:30:09 +0000 Subject: [PATCH 1/5] Make the buttons in a responsive dialog be responsive. * Buttons get wider after the 225.dp breakpoint * Added dialog activity as a sample to try different dialogs --- .../compose/material/ResponsiveDialog.kt | 54 +++- sample/src/main/AndroidManifest.xml | 13 +- .../horologist/scratch/DialogActivity.kt | 239 ++++++++++++++++++ .../horologist/scratch/ScratchActivity.kt | 1 + 4 files changed, 298 insertions(+), 9 deletions(-) create mode 100644 sample/src/main/java/com/google/android/horologist/scratch/DialogActivity.kt diff --git a/compose-material/src/main/java/com/google/android/horologist/compose/material/ResponsiveDialog.kt b/compose-material/src/main/java/com/google/android/horologist/compose/material/ResponsiveDialog.kt index 4e72e62db4..2390d3a9c8 100644 --- a/compose-material/src/main/java/com/google/android/horologist/compose/material/ResponsiveDialog.kt +++ b/compose-material/src/main/java/com/google/android/horologist/compose/material/ResponsiveDialog.kt @@ -20,12 +20,16 @@ import android.R import androidx.compose.foundation.layout.Arrangement import androidx.compose.foundation.layout.Arrangement.spacedBy import androidx.compose.foundation.layout.Box +import androidx.compose.foundation.layout.PaddingValues import androidx.compose.foundation.layout.Row import androidx.compose.foundation.layout.Spacer import androidx.compose.foundation.layout.fillMaxSize import androidx.compose.foundation.layout.fillMaxWidth import androidx.compose.foundation.layout.height import androidx.compose.foundation.layout.padding +import androidx.compose.foundation.layout.size +import androidx.compose.foundation.layout.width +import androidx.compose.foundation.shape.CircleShape import androidx.compose.material.icons.Icons import androidx.compose.material.icons.filled.Check import androidx.compose.material.icons.filled.Close @@ -33,10 +37,12 @@ import androidx.compose.runtime.Composable import androidx.compose.runtime.CompositionLocalProvider import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier +import androidx.compose.ui.platform.LocalConfiguration import androidx.compose.ui.res.stringResource import androidx.compose.ui.unit.dp import androidx.wear.compose.foundation.lazy.ScalingLazyListScope import androidx.wear.compose.material.ButtonDefaults +import androidx.wear.compose.material.ChipDefaults import androidx.wear.compose.material.LocalTextStyle import androidx.wear.compose.material.MaterialTheme import com.google.android.horologist.annotations.ExperimentalHorologistApi @@ -45,6 +51,7 @@ import com.google.android.horologist.compose.layout.ScalingLazyColumnDefaults.re import com.google.android.horologist.compose.layout.ScalingLazyColumnState import com.google.android.horologist.compose.layout.ScreenScaffold import com.google.android.horologist.compose.layout.rememberColumnState +import com.google.android.horologist.images.base.paintable.ImageVectorPaintable @ExperimentalHorologistApi @Composable @@ -115,6 +122,13 @@ public fun ResponsiveDialogContent( } if (onOk != null || onCancel != null) { item { + val width = LocalConfiguration.current.screenWidthDp + val buttonWidth = if (width < 225 || onOk == null || onCancel == null) { + ButtonDefaults.DefaultButtonSize + } else { + // 14.52% margin on the sides, 4.dp between. + ((width * (1f - 2 * 0.1452f) - 4) / 2).dp + } Row( Modifier .fillMaxWidth() @@ -128,18 +142,42 @@ public fun ResponsiveDialogContent( verticalAlignment = Alignment.CenterVertically, ) { onCancel?.let { - Button( - imageVector = Icons.Default.Close, - contentDescription = cancelButtonContentDescription, + androidx.wear.compose.material.Chip( + label = { + Box(Modifier.fillMaxWidth()) { + Icon( + paintable = ImageVectorPaintable(Icons.Default.Close), + contentDescription = cancelButtonContentDescription, + modifier = Modifier + .size(ButtonDefaults.DefaultIconSize) + .align(Alignment.Center) + ) + } + }, + shape = CircleShape, + contentPadding = PaddingValues(0.dp), onClick = it, - colors = ButtonDefaults.secondaryButtonColors(), + colors = ChipDefaults.secondaryChipColors(), + modifier = Modifier.width(buttonWidth) ) } onOk?.let { - Button( - imageVector = Icons.Default.Check, - contentDescription = okButtonContentDescription, - onClick = onOk, + androidx.wear.compose.material.Chip( + label = { + Box(Modifier.fillMaxWidth()) { + Icon( + paintable = ImageVectorPaintable(Icons.Default.Check), + contentDescription = okButtonContentDescription, + modifier = Modifier + .size(ButtonDefaults.DefaultIconSize) + .align(Alignment.Center) + ) + } + }, + contentPadding = PaddingValues(0.dp), + shape = CircleShape, + onClick = it, + modifier = Modifier.width(buttonWidth) ) } } diff --git a/sample/src/main/AndroidManifest.xml b/sample/src/main/AndroidManifest.xml index 1d167701f3..cd1d8e78e4 100644 --- a/sample/src/main/AndroidManifest.xml +++ b/sample/src/main/AndroidManifest.xml @@ -32,7 +32,7 @@ android:theme="@android:style/ThemeOverlay.Material.Dark"> + android:required="false" /> + + + + + + + items(10) { + Chip(onClick = { }, label = { + Text("Chip $it") + }) + } + 2 -> { + item { + Text( + "This is a text that may be long enough to span " + + "multiple rows, so it's left aligned.", + textAlign = TextAlign.Start, + modifier = Modifier.fillMaxWidth(1f - 2f * extraPadding) + ) + } + // Adding the spaces to previous and next items, this ends up as 12.dp + item { Spacer(Modifier.height(4.dp)) } + item { + Text( + "We have another not so long text here.", + textAlign = TextAlign.Start, + modifier = Modifier.fillMaxWidth(1f - 2f * extraPadding) + ) + } + } + } + } + } + ToggleRow(title = "Size", + options = sizes.map { it.toString() }.toTypedArray(), + selected = size, optionWidth = 50.dp) + Row(horizontalArrangement = Arrangement.spacedBy(4.dp)) { + SimpleToggle("Icon", hasIcon) + SimpleToggle("Title", hasTitle) + SimpleToggle("OK", hasOkButton) + SimpleToggle("Cancel", hasCancelButton) + } + ToggleRow(title = "Content", + options = contentTypes, + selected = contentIx, optionWidth = 100.dp) + } +} + +@Composable +fun SimpleToggle(name: String, value: MutableState) { + ToggleButton(checked = value.value, onCheckedChange = { value.value = !value.value }) { + Text(name, style = LocalTextStyle.current.copy(fontSize = 14.sp)) + } +} + +@Composable +fun ToggleRow( + title: String, + options: Array, + selected: MutableIntState, + optionWidth: Dp, + modifier: Modifier = Modifier +) { + val heightDp = 40.dp + val heightPx = with(LocalDensity.current) { heightDp.toPx() } + Row(modifier.height(heightDp), verticalAlignment = Alignment.CenterVertically) { + Text(title, color = Color.White) + Spacer(Modifier.width(20.dp)) + options.forEachIndexed { ix, text -> + val shape = if (ix == 0) RoundedCornerShape( + heightPx / 2, 0f, 0f, heightPx / 2) + else if (ix == options.lastIndex) RoundedCornerShape( + 0f, + heightPx / 2, + heightPx / 2, + 0f + ) + else RectangleShape + + Box( + Modifier + .width(optionWidth) + .height(heightDp) + .border( + 1.dp, Color(0xFF75717A), shape = shape + ) + .clip(shape) + .clickable { selected.value = ix } + .background( + if (ix == selected.value) Color(0xFF4A4458) else Color(0xFF1B1B20), + shape = shape + ), + contentAlignment = Alignment.Center + ) { Text(text, color = Color(0xFFEEEEFF)) } + } + } +} + +@Composable +fun SizedContainer( + screenSize: Int, + roundScreen: Boolean, + modifier: Modifier = Modifier, + content: @Composable () -> Unit +) { + val currentConfig = LocalConfiguration.current + val config by remember(screenSize, roundScreen) { + derivedStateOf { + Configuration().apply { + setTo(currentConfig) + screenWidthDp = screenSize + screenHeightDp = screenSize + densityDpi = 320 + // Set the screen to round. + screenLayout = + (screenLayout and Configuration.SCREENLAYOUT_ROUND_MASK.inv()) or + (if (roundScreen) Configuration.SCREENLAYOUT_ROUND_YES else + Configuration.SCREENLAYOUT_ROUND_NO) + } + } + } + val currentDensity = LocalDensity.current + val density = object : Density by currentDensity { + override val density: Float get() = currentDensity.density * ZoomLevel + } + + CompositionLocalProvider( + LocalConfiguration provides config, + LocalDensity provides density + ) { + val shape = if (roundScreen) CircleShape else RoundedCornerShape(0) + Box( + modifier = modifier + .border(2.dp, Color.DarkGray, shape) + .clip(shape) + .size(screenSize.dp) + .background(Color.Black), + contentAlignment = Alignment.Center, + content = { content() } + ) + } +} + +private val ZoomLevel = 1.5f diff --git a/sample/src/main/java/com/google/android/horologist/scratch/ScratchActivity.kt b/sample/src/main/java/com/google/android/horologist/scratch/ScratchActivity.kt index 88fde7fefd..717eb463e2 100644 --- a/sample/src/main/java/com/google/android/horologist/scratch/ScratchActivity.kt +++ b/sample/src/main/java/com/google/android/horologist/scratch/ScratchActivity.kt @@ -220,3 +220,4 @@ fun FixedHeightChip(text: String, itemHeight: Int, onClick: () -> Unit) { ) } } + From 1da49c7f9dbcb9b5eb60be0485f51fd11a1f8a09 Mon Sep 17 00:00:00 2001 From: ssancho14 Date: Tue, 6 Feb 2024 15:32:04 +0000 Subject: [PATCH 2/5] =?UTF-8?q?=F0=9F=A4=96=20reformat?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../compose/material/ResponsiveDialog.kt | 8 +- .../horologist/scratch/DialogActivity.kt | 94 ++++++++++++------- .../horologist/scratch/ScratchActivity.kt | 1 - 3 files changed, 65 insertions(+), 38 deletions(-) diff --git a/compose-material/src/main/java/com/google/android/horologist/compose/material/ResponsiveDialog.kt b/compose-material/src/main/java/com/google/android/horologist/compose/material/ResponsiveDialog.kt index 2390d3a9c8..23934b0d4a 100644 --- a/compose-material/src/main/java/com/google/android/horologist/compose/material/ResponsiveDialog.kt +++ b/compose-material/src/main/java/com/google/android/horologist/compose/material/ResponsiveDialog.kt @@ -150,7 +150,7 @@ public fun ResponsiveDialogContent( contentDescription = cancelButtonContentDescription, modifier = Modifier .size(ButtonDefaults.DefaultIconSize) - .align(Alignment.Center) + .align(Alignment.Center), ) } }, @@ -158,7 +158,7 @@ public fun ResponsiveDialogContent( contentPadding = PaddingValues(0.dp), onClick = it, colors = ChipDefaults.secondaryChipColors(), - modifier = Modifier.width(buttonWidth) + modifier = Modifier.width(buttonWidth), ) } onOk?.let { @@ -170,14 +170,14 @@ public fun ResponsiveDialogContent( contentDescription = okButtonContentDescription, modifier = Modifier .size(ButtonDefaults.DefaultIconSize) - .align(Alignment.Center) + .align(Alignment.Center), ) } }, contentPadding = PaddingValues(0.dp), shape = CircleShape, onClick = it, - modifier = Modifier.width(buttonWidth) + modifier = Modifier.width(buttonWidth), ) } } diff --git a/sample/src/main/java/com/google/android/horologist/scratch/DialogActivity.kt b/sample/src/main/java/com/google/android/horologist/scratch/DialogActivity.kt index 3064351142..949e1f0616 100644 --- a/sample/src/main/java/com/google/android/horologist/scratch/DialogActivity.kt +++ b/sample/src/main/java/com/google/android/horologist/scratch/DialogActivity.kt @@ -64,7 +64,6 @@ import androidx.wear.compose.material.Text import androidx.wear.compose.material.ToggleButton import com.google.android.horologist.compose.material.ResponsiveDialogContent - class DialogActivity : ComponentActivity() { override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) @@ -89,14 +88,22 @@ fun WearDialogApp() { Column(verticalArrangement = Arrangement.spacedBy(10.dp)) { SizedContainer(screenSize = sizes[size.intValue], roundScreen = true) { ResponsiveDialogContent( - icon = if (hasIcon.value) { { - Icon(Icons.Default.ErrorOutline, null) - } } else null, - title = if (hasTitle.value) { { - Text("Title enim minim veniam, quis ut", textAlign = TextAlign.Center) - } } else null, - onOk = if (hasOkButton.value) {{}} else null, - onCancel = if (hasCancelButton.value) {{}} else null, + icon = if (hasIcon.value) { + { + Icon(Icons.Default.ErrorOutline, null) + } + } else { + null + }, + title = if (hasTitle.value) { + { + Text("Title enim minim veniam, quis ut", textAlign = TextAlign.Center) + } + } else { + null + }, + onOk = if (hasOkButton.value) { {} } else null, + onCancel = if (hasCancelButton.value) { {} } else null, ) { when (contentIx.value) { 1 -> items(10) { @@ -110,7 +117,7 @@ fun WearDialogApp() { "This is a text that may be long enough to span " + "multiple rows, so it's left aligned.", textAlign = TextAlign.Start, - modifier = Modifier.fillMaxWidth(1f - 2f * extraPadding) + modifier = Modifier.fillMaxWidth(1f - 2f * extraPadding), ) } // Adding the spaces to previous and next items, this ends up as 12.dp @@ -119,25 +126,31 @@ fun WearDialogApp() { Text( "We have another not so long text here.", textAlign = TextAlign.Start, - modifier = Modifier.fillMaxWidth(1f - 2f * extraPadding) + modifier = Modifier.fillMaxWidth(1f - 2f * extraPadding), ) } } } } } - ToggleRow(title = "Size", + ToggleRow( + title = "Size", options = sizes.map { it.toString() }.toTypedArray(), - selected = size, optionWidth = 50.dp) + selected = size, + optionWidth = 50.dp, + ) Row(horizontalArrangement = Arrangement.spacedBy(4.dp)) { SimpleToggle("Icon", hasIcon) SimpleToggle("Title", hasTitle) SimpleToggle("OK", hasOkButton) SimpleToggle("Cancel", hasCancelButton) } - ToggleRow(title = "Content", + ToggleRow( + title = "Content", options = contentTypes, - selected = contentIx, optionWidth = 100.dp) + selected = contentIx, + optionWidth = 100.dp, + ) } } @@ -154,7 +167,7 @@ fun ToggleRow( options: Array, selected: MutableIntState, optionWidth: Dp, - modifier: Modifier = Modifier + modifier: Modifier = Modifier, ) { val heightDp = 40.dp val heightPx = with(LocalDensity.current) { heightDp.toPx() } @@ -162,30 +175,40 @@ fun ToggleRow( Text(title, color = Color.White) Spacer(Modifier.width(20.dp)) options.forEachIndexed { ix, text -> - val shape = if (ix == 0) RoundedCornerShape( - heightPx / 2, 0f, 0f, heightPx / 2) - else if (ix == options.lastIndex) RoundedCornerShape( - 0f, - heightPx / 2, - heightPx / 2, - 0f - ) - else RectangleShape + val shape = if (ix == 0) { + RoundedCornerShape( + heightPx / 2, + 0f, + 0f, + heightPx / 2, + ) + } else if (ix == options.lastIndex) { + RoundedCornerShape( + 0f, + heightPx / 2, + heightPx / 2, + 0f, + ) + } else { + RectangleShape + } Box( Modifier .width(optionWidth) .height(heightDp) .border( - 1.dp, Color(0xFF75717A), shape = shape + 1.dp, + Color(0xFF75717A), + shape = shape, ) .clip(shape) .clickable { selected.value = ix } .background( if (ix == selected.value) Color(0xFF4A4458) else Color(0xFF1B1B20), - shape = shape + shape = shape, ), - contentAlignment = Alignment.Center + contentAlignment = Alignment.Center, ) { Text(text, color = Color(0xFFEEEEFF)) } } } @@ -196,7 +219,7 @@ fun SizedContainer( screenSize: Int, roundScreen: Boolean, modifier: Modifier = Modifier, - content: @Composable () -> Unit + content: @Composable () -> Unit, ) { val currentConfig = LocalConfiguration.current val config by remember(screenSize, roundScreen) { @@ -209,8 +232,13 @@ fun SizedContainer( // Set the screen to round. screenLayout = (screenLayout and Configuration.SCREENLAYOUT_ROUND_MASK.inv()) or - (if (roundScreen) Configuration.SCREENLAYOUT_ROUND_YES else - Configuration.SCREENLAYOUT_ROUND_NO) + ( + if (roundScreen) { + Configuration.SCREENLAYOUT_ROUND_YES + } else { + Configuration.SCREENLAYOUT_ROUND_NO + } + ) } } } @@ -221,7 +249,7 @@ fun SizedContainer( CompositionLocalProvider( LocalConfiguration provides config, - LocalDensity provides density + LocalDensity provides density, ) { val shape = if (roundScreen) CircleShape else RoundedCornerShape(0) Box( @@ -231,7 +259,7 @@ fun SizedContainer( .size(screenSize.dp) .background(Color.Black), contentAlignment = Alignment.Center, - content = { content() } + content = { content() }, ) } } diff --git a/sample/src/main/java/com/google/android/horologist/scratch/ScratchActivity.kt b/sample/src/main/java/com/google/android/horologist/scratch/ScratchActivity.kt index 717eb463e2..88fde7fefd 100644 --- a/sample/src/main/java/com/google/android/horologist/scratch/ScratchActivity.kt +++ b/sample/src/main/java/com/google/android/horologist/scratch/ScratchActivity.kt @@ -220,4 +220,3 @@ fun FixedHeightChip(text: String, itemHeight: Int, onClick: () -> Unit) { ) } } - From a072a9654801458b65431ab25e3e8aa40e9605b4 Mon Sep 17 00:00:00 2001 From: ssancho14 Date: Tue, 6 Feb 2024 15:49:15 +0000 Subject: [PATCH 3/5] =?UTF-8?q?=F0=9F=A4=96=20Updates=20screenshots?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- ..._DialogTest_batterySaverScreen[0]_mobvoiticwatchpro5_2.png | 4 ++-- ...gTest_batterySaverScreen[2]_samsunggalaxywatch6large_2.png | 4 ++-- ...s_DialogTest_batterySaverScreen[5]_genericlargeround_2.png | 4 ++-- ...alogTest_batterySaverScreen[7]_largedevicesmallfonts_2.png | 4 ++-- ...ialogTest_iconAndTextAlertScreen[0]_mobvoiticwatchpro5.png | 4 ++-- ...est_iconAndTextAlertScreen[2]_samsunggalaxywatch6large.png | 4 ++-- ...DialogTest_iconAndTextAlertScreen[5]_genericlargeround.png | 4 ++-- ...ogTest_iconAndTextAlertScreen[7]_largedevicesmallfonts.png | 4 ++-- ...s_DialogTest_longDialogScreen1[0]_mobvoiticwatchpro5_2.png | 4 ++-- ...ogTest_longDialogScreen1[2]_samsunggalaxywatch6large_2.png | 4 ++-- ...es_DialogTest_longDialogScreen1[5]_genericlargeround_2.png | 4 ++-- ...ialogTest_longDialogScreen1[7]_largedevicesmallfonts_2.png | 4 ++-- ...creensizes_DialogTest_screenshot[0]_mobvoiticwatchpro5.png | 4 ++-- ...izes_DialogTest_screenshot[2]_samsunggalaxywatch6large.png | 4 ++-- ...screensizes_DialogTest_screenshot[5]_genericlargeround.png | 4 ++-- ...ensizes_DialogTest_screenshot[7]_largedevicesmallfonts.png | 4 ++-- ...sizes_DialogTest_textAlertScreen[0]_mobvoiticwatchpro5.png | 4 ++-- ...DialogTest_textAlertScreen[2]_samsunggalaxywatch6large.png | 4 ++-- ...nsizes_DialogTest_textAlertScreen[5]_genericlargeround.png | 4 ++-- ...es_DialogTest_textAlertScreen[7]_largedevicesmallfonts.png | 4 ++-- 20 files changed, 40 insertions(+), 40 deletions(-) diff --git a/sample/src/test/snapshots/images/com.google.android.horologist.screensizes_DialogTest_batterySaverScreen[0]_mobvoiticwatchpro5_2.png b/sample/src/test/snapshots/images/com.google.android.horologist.screensizes_DialogTest_batterySaverScreen[0]_mobvoiticwatchpro5_2.png index 3fbbf2e1dc..549f815219 100644 --- a/sample/src/test/snapshots/images/com.google.android.horologist.screensizes_DialogTest_batterySaverScreen[0]_mobvoiticwatchpro5_2.png +++ b/sample/src/test/snapshots/images/com.google.android.horologist.screensizes_DialogTest_batterySaverScreen[0]_mobvoiticwatchpro5_2.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:d79f5ff1e5509a0c9860951059a5825dce89291016fb23cfa544782768b6a49b -size 35469 +oid sha256:a274c60f1dd6e284f70628c78518f9b3962a992058c93270c737de5be6b8fa4e +size 35726 diff --git a/sample/src/test/snapshots/images/com.google.android.horologist.screensizes_DialogTest_batterySaverScreen[2]_samsunggalaxywatch6large_2.png b/sample/src/test/snapshots/images/com.google.android.horologist.screensizes_DialogTest_batterySaverScreen[2]_samsunggalaxywatch6large_2.png index a3dc7729ea..2853bd0c57 100644 --- a/sample/src/test/snapshots/images/com.google.android.horologist.screensizes_DialogTest_batterySaverScreen[2]_samsunggalaxywatch6large_2.png +++ b/sample/src/test/snapshots/images/com.google.android.horologist.screensizes_DialogTest_batterySaverScreen[2]_samsunggalaxywatch6large_2.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:cc1891f30efc502c53869283a3d5767cdf308b538bdf902db021666225573bdb -size 36228 +oid sha256:2af6e2b607b0db29f454e7c8dd3972177f54975267ef23e216aa75a8aabe0309 +size 36835 diff --git a/sample/src/test/snapshots/images/com.google.android.horologist.screensizes_DialogTest_batterySaverScreen[5]_genericlargeround_2.png b/sample/src/test/snapshots/images/com.google.android.horologist.screensizes_DialogTest_batterySaverScreen[5]_genericlargeround_2.png index 2380048313..f046a042f5 100644 --- a/sample/src/test/snapshots/images/com.google.android.horologist.screensizes_DialogTest_batterySaverScreen[5]_genericlargeround_2.png +++ b/sample/src/test/snapshots/images/com.google.android.horologist.screensizes_DialogTest_batterySaverScreen[5]_genericlargeround_2.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:5592470ec729b34ef723e40ecc57cc952e26134ad4c391a80a4df7214314d875 -size 33943 +oid sha256:3efdb3694c26de3262811d1bf34b931259d90d58210716d6d541ff70e57ca11e +size 33992 diff --git a/sample/src/test/snapshots/images/com.google.android.horologist.screensizes_DialogTest_batterySaverScreen[7]_largedevicesmallfonts_2.png b/sample/src/test/snapshots/images/com.google.android.horologist.screensizes_DialogTest_batterySaverScreen[7]_largedevicesmallfonts_2.png index 8f0a408072..7954ec3012 100644 --- a/sample/src/test/snapshots/images/com.google.android.horologist.screensizes_DialogTest_batterySaverScreen[7]_largedevicesmallfonts_2.png +++ b/sample/src/test/snapshots/images/com.google.android.horologist.screensizes_DialogTest_batterySaverScreen[7]_largedevicesmallfonts_2.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:6a1153341378f24c20b94bbf42cdeb2690af0754656b92914d054ce8b87eef00 -size 35197 +oid sha256:a11481511f1a5f1d574ebbd5d403acff9f97877f5e1fd1790f9a9fde642fb41d +size 35590 diff --git a/sample/src/test/snapshots/images/com.google.android.horologist.screensizes_DialogTest_iconAndTextAlertScreen[0]_mobvoiticwatchpro5.png b/sample/src/test/snapshots/images/com.google.android.horologist.screensizes_DialogTest_iconAndTextAlertScreen[0]_mobvoiticwatchpro5.png index 0eb92495ae..923a644241 100644 --- a/sample/src/test/snapshots/images/com.google.android.horologist.screensizes_DialogTest_iconAndTextAlertScreen[0]_mobvoiticwatchpro5.png +++ b/sample/src/test/snapshots/images/com.google.android.horologist.screensizes_DialogTest_iconAndTextAlertScreen[0]_mobvoiticwatchpro5.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:eaf2f4d4b3a0fc3cd36a5c87d19f142c26ade58ccf37f509470c8cc2dcc526cf -size 27880 +oid sha256:1589192f5f0268a1f406eb71bcc579e182bee19546efdbe45eea6a2214914157 +size 28157 diff --git a/sample/src/test/snapshots/images/com.google.android.horologist.screensizes_DialogTest_iconAndTextAlertScreen[2]_samsunggalaxywatch6large.png b/sample/src/test/snapshots/images/com.google.android.horologist.screensizes_DialogTest_iconAndTextAlertScreen[2]_samsunggalaxywatch6large.png index 51a93aaa6b..6d7e2f4c9c 100644 --- a/sample/src/test/snapshots/images/com.google.android.horologist.screensizes_DialogTest_iconAndTextAlertScreen[2]_samsunggalaxywatch6large.png +++ b/sample/src/test/snapshots/images/com.google.android.horologist.screensizes_DialogTest_iconAndTextAlertScreen[2]_samsunggalaxywatch6large.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:55b1754def8650f23414ee3ba8a57c6287dce71172088afbde2b3a712c3a46e4 -size 29783 +oid sha256:3c3104c1d54efb32fa4a6ad3a53358c4fae4de1509761e9e01f9e61cd8368826 +size 30289 diff --git a/sample/src/test/snapshots/images/com.google.android.horologist.screensizes_DialogTest_iconAndTextAlertScreen[5]_genericlargeround.png b/sample/src/test/snapshots/images/com.google.android.horologist.screensizes_DialogTest_iconAndTextAlertScreen[5]_genericlargeround.png index 1ae2db8287..d76068d97c 100644 --- a/sample/src/test/snapshots/images/com.google.android.horologist.screensizes_DialogTest_iconAndTextAlertScreen[5]_genericlargeround.png +++ b/sample/src/test/snapshots/images/com.google.android.horologist.screensizes_DialogTest_iconAndTextAlertScreen[5]_genericlargeround.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:eb69d48484ec5c029f9100b096b81560a623fb4584d441d5a52d4275be13d692 -size 27410 +oid sha256:88b81baf46cc0d7122a9f3e6f7ebfaa73fb3b3e7566b472021092aef1db69cc5 +size 27620 diff --git a/sample/src/test/snapshots/images/com.google.android.horologist.screensizes_DialogTest_iconAndTextAlertScreen[7]_largedevicesmallfonts.png b/sample/src/test/snapshots/images/com.google.android.horologist.screensizes_DialogTest_iconAndTextAlertScreen[7]_largedevicesmallfonts.png index fb8a8c6df5..a015b541cc 100644 --- a/sample/src/test/snapshots/images/com.google.android.horologist.screensizes_DialogTest_iconAndTextAlertScreen[7]_largedevicesmallfonts.png +++ b/sample/src/test/snapshots/images/com.google.android.horologist.screensizes_DialogTest_iconAndTextAlertScreen[7]_largedevicesmallfonts.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:afa3a0c2868d4da3eab0cfbe502cc382f7e183ee5288b7605e544ec98565f8d2 -size 27515 +oid sha256:fa7fefe1c8e2a98ba9ad7d0650e52a0ad2164bab2a5cf5c97f296d08a9ea8566 +size 27691 diff --git a/sample/src/test/snapshots/images/com.google.android.horologist.screensizes_DialogTest_longDialogScreen1[0]_mobvoiticwatchpro5_2.png b/sample/src/test/snapshots/images/com.google.android.horologist.screensizes_DialogTest_longDialogScreen1[0]_mobvoiticwatchpro5_2.png index b8a1fd504f..4b2996f096 100644 --- a/sample/src/test/snapshots/images/com.google.android.horologist.screensizes_DialogTest_longDialogScreen1[0]_mobvoiticwatchpro5_2.png +++ b/sample/src/test/snapshots/images/com.google.android.horologist.screensizes_DialogTest_longDialogScreen1[0]_mobvoiticwatchpro5_2.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:a9ab28d91f5f4fdde6ab8afa2d364d257ff71b663d98a3a16021226088c33c1a -size 38129 +oid sha256:4896741555040a59a5fb1238674174d9c2d63f45c1a57d5be80505e083a71a86 +size 38353 diff --git a/sample/src/test/snapshots/images/com.google.android.horologist.screensizes_DialogTest_longDialogScreen1[2]_samsunggalaxywatch6large_2.png b/sample/src/test/snapshots/images/com.google.android.horologist.screensizes_DialogTest_longDialogScreen1[2]_samsunggalaxywatch6large_2.png index 6f3e08988a..f5946ae008 100644 --- a/sample/src/test/snapshots/images/com.google.android.horologist.screensizes_DialogTest_longDialogScreen1[2]_samsunggalaxywatch6large_2.png +++ b/sample/src/test/snapshots/images/com.google.android.horologist.screensizes_DialogTest_longDialogScreen1[2]_samsunggalaxywatch6large_2.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:beb967bf0c629a1048bb13dc0cf111f33b2b3adfc7b6a848cf239c45b0a0e622 -size 39626 +oid sha256:0694e287415d5e0fb25afd5bd56331c3ceba115d100dcece80bf2e5c631c98ce +size 39941 diff --git a/sample/src/test/snapshots/images/com.google.android.horologist.screensizes_DialogTest_longDialogScreen1[5]_genericlargeround_2.png b/sample/src/test/snapshots/images/com.google.android.horologist.screensizes_DialogTest_longDialogScreen1[5]_genericlargeround_2.png index ec616c7f19..183d79a8f7 100644 --- a/sample/src/test/snapshots/images/com.google.android.horologist.screensizes_DialogTest_longDialogScreen1[5]_genericlargeround_2.png +++ b/sample/src/test/snapshots/images/com.google.android.horologist.screensizes_DialogTest_longDialogScreen1[5]_genericlargeround_2.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:73529d1a2810e6c360171cfb516164f059bd5b7ce9a4ad68067eaf3d124b3944 -size 37251 +oid sha256:85016de460af277a873aaef7044f29e0235b54265d4f72cada6f401996f49b3c +size 37278 diff --git a/sample/src/test/snapshots/images/com.google.android.horologist.screensizes_DialogTest_longDialogScreen1[7]_largedevicesmallfonts_2.png b/sample/src/test/snapshots/images/com.google.android.horologist.screensizes_DialogTest_longDialogScreen1[7]_largedevicesmallfonts_2.png index 92ea07b565..797c89f7f7 100644 --- a/sample/src/test/snapshots/images/com.google.android.horologist.screensizes_DialogTest_longDialogScreen1[7]_largedevicesmallfonts_2.png +++ b/sample/src/test/snapshots/images/com.google.android.horologist.screensizes_DialogTest_longDialogScreen1[7]_largedevicesmallfonts_2.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:91b195feb3a6c3f15439564c5bd51573daad8e46c016862a8ef97f07ff37fc81 -size 37189 +oid sha256:b243451c5b17caf5cab1ca9d6001a3b1da7a1057151634d9b2d86844fda711f6 +size 37439 diff --git a/sample/src/test/snapshots/images/com.google.android.horologist.screensizes_DialogTest_screenshot[0]_mobvoiticwatchpro5.png b/sample/src/test/snapshots/images/com.google.android.horologist.screensizes_DialogTest_screenshot[0]_mobvoiticwatchpro5.png index 78ffc3b171..c36ffa7e55 100644 --- a/sample/src/test/snapshots/images/com.google.android.horologist.screensizes_DialogTest_screenshot[0]_mobvoiticwatchpro5.png +++ b/sample/src/test/snapshots/images/com.google.android.horologist.screensizes_DialogTest_screenshot[0]_mobvoiticwatchpro5.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:47d1b745616653b1fbc0bfb27f365e15e608c139d297647ac44b3daee3cca1f6 -size 29410 +oid sha256:762bd62bd408beabdfacd7b825d303c6ce673c9a052844210c7709ac867b2989 +size 29685 diff --git a/sample/src/test/snapshots/images/com.google.android.horologist.screensizes_DialogTest_screenshot[2]_samsunggalaxywatch6large.png b/sample/src/test/snapshots/images/com.google.android.horologist.screensizes_DialogTest_screenshot[2]_samsunggalaxywatch6large.png index d41ca15892..253bb22c42 100644 --- a/sample/src/test/snapshots/images/com.google.android.horologist.screensizes_DialogTest_screenshot[2]_samsunggalaxywatch6large.png +++ b/sample/src/test/snapshots/images/com.google.android.horologist.screensizes_DialogTest_screenshot[2]_samsunggalaxywatch6large.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:437646dfed92118dfecd8618fae3dc14b94e684e73642e60a1caec93c7566662 -size 31182 +oid sha256:f453e91b66ade349ac5470d6cb29b77d091486367c2f6e4e341f094a9c5b8de9 +size 31660 diff --git a/sample/src/test/snapshots/images/com.google.android.horologist.screensizes_DialogTest_screenshot[5]_genericlargeround.png b/sample/src/test/snapshots/images/com.google.android.horologist.screensizes_DialogTest_screenshot[5]_genericlargeround.png index 2c64e880d3..cdcd5f375b 100644 --- a/sample/src/test/snapshots/images/com.google.android.horologist.screensizes_DialogTest_screenshot[5]_genericlargeround.png +++ b/sample/src/test/snapshots/images/com.google.android.horologist.screensizes_DialogTest_screenshot[5]_genericlargeround.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:23b799b4d48766c99a334d9638642797ab1faea4bbd174a699bac4975a254235 -size 28873 +oid sha256:57271e8449e6fa06a6cec1e222b83aa018f91ef2eb8cdf9e4cfb4b884b52ad6e +size 29238 diff --git a/sample/src/test/snapshots/images/com.google.android.horologist.screensizes_DialogTest_screenshot[7]_largedevicesmallfonts.png b/sample/src/test/snapshots/images/com.google.android.horologist.screensizes_DialogTest_screenshot[7]_largedevicesmallfonts.png index b3f6e7104a..48b603329b 100644 --- a/sample/src/test/snapshots/images/com.google.android.horologist.screensizes_DialogTest_screenshot[7]_largedevicesmallfonts.png +++ b/sample/src/test/snapshots/images/com.google.android.horologist.screensizes_DialogTest_screenshot[7]_largedevicesmallfonts.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:fff85ac722eb876da1414247364541dc4d4c5b265a5c3383106816eda2a9ff55 -size 28618 +oid sha256:2a9861d9ce32dc295dbdccde97118304491d7b997ced011f0ea5aa7bc64fad6e +size 28789 diff --git a/sample/src/test/snapshots/images/com.google.android.horologist.screensizes_DialogTest_textAlertScreen[0]_mobvoiticwatchpro5.png b/sample/src/test/snapshots/images/com.google.android.horologist.screensizes_DialogTest_textAlertScreen[0]_mobvoiticwatchpro5.png index ebc9595194..7df06d6890 100644 --- a/sample/src/test/snapshots/images/com.google.android.horologist.screensizes_DialogTest_textAlertScreen[0]_mobvoiticwatchpro5.png +++ b/sample/src/test/snapshots/images/com.google.android.horologist.screensizes_DialogTest_textAlertScreen[0]_mobvoiticwatchpro5.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:0c927b18f31c62be96bab5df0c29acf529b0a8cb00f963e90a75cd91429a03b2 -size 29635 +oid sha256:996c4c2cf1e53f6c1fbba90a37d417a2b0d2f86bea6ccb23a535785485d16bd8 +size 29803 diff --git a/sample/src/test/snapshots/images/com.google.android.horologist.screensizes_DialogTest_textAlertScreen[2]_samsunggalaxywatch6large.png b/sample/src/test/snapshots/images/com.google.android.horologist.screensizes_DialogTest_textAlertScreen[2]_samsunggalaxywatch6large.png index ef0ab234ab..f30222f10a 100644 --- a/sample/src/test/snapshots/images/com.google.android.horologist.screensizes_DialogTest_textAlertScreen[2]_samsunggalaxywatch6large.png +++ b/sample/src/test/snapshots/images/com.google.android.horologist.screensizes_DialogTest_textAlertScreen[2]_samsunggalaxywatch6large.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:35957b953b0446289eb30e63ddee0cd18963473a760fef710c817f7d8a597a26 -size 31742 +oid sha256:f6effad0719c1c373986ddaaa959ec6394c6b0224506c29e1f041e5959f4b56e +size 32015 diff --git a/sample/src/test/snapshots/images/com.google.android.horologist.screensizes_DialogTest_textAlertScreen[5]_genericlargeround.png b/sample/src/test/snapshots/images/com.google.android.horologist.screensizes_DialogTest_textAlertScreen[5]_genericlargeround.png index 9730c4b7e1..ed063ad616 100644 --- a/sample/src/test/snapshots/images/com.google.android.horologist.screensizes_DialogTest_textAlertScreen[5]_genericlargeround.png +++ b/sample/src/test/snapshots/images/com.google.android.horologist.screensizes_DialogTest_textAlertScreen[5]_genericlargeround.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:77748cabb85b0e8d6b9c0da3f47c9c45daa28464a7a53451537a928b6a9f306d -size 29159 +oid sha256:2d07d6ab92998d3a48b211f59c8fdd919f13637c282afc7ef87620cee05475ad +size 29287 diff --git a/sample/src/test/snapshots/images/com.google.android.horologist.screensizes_DialogTest_textAlertScreen[7]_largedevicesmallfonts.png b/sample/src/test/snapshots/images/com.google.android.horologist.screensizes_DialogTest_textAlertScreen[7]_largedevicesmallfonts.png index 5750baf4a6..0f6cfdddba 100644 --- a/sample/src/test/snapshots/images/com.google.android.horologist.screensizes_DialogTest_textAlertScreen[7]_largedevicesmallfonts.png +++ b/sample/src/test/snapshots/images/com.google.android.horologist.screensizes_DialogTest_textAlertScreen[7]_largedevicesmallfonts.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:c42891999cb43d44373adcf812410c972adb38e3d2cb7fecfd01cf1a30fffb52 -size 28848 +oid sha256:2b7fb99f80a03787c7eaa13f46336cf513378ffa109a059ab069796164ff9df7 +size 29100 From 0e51c171a98f0c616ed3b0cd02e8688abaca3c55 Mon Sep 17 00:00:00 2001 From: Sergio Sancho Date: Tue, 6 Feb 2024 16:14:13 +0000 Subject: [PATCH 4/5] Refactor code for Responsive Button into a common functoin --- .../compose/material/ResponsiveDialog.kt | 80 +++++++++++-------- 1 file changed, 45 insertions(+), 35 deletions(-) diff --git a/compose-material/src/main/java/com/google/android/horologist/compose/material/ResponsiveDialog.kt b/compose-material/src/main/java/com/google/android/horologist/compose/material/ResponsiveDialog.kt index 23934b0d4a..ea6cb0f70a 100644 --- a/compose-material/src/main/java/com/google/android/horologist/compose/material/ResponsiveDialog.kt +++ b/compose-material/src/main/java/com/google/android/horologist/compose/material/ResponsiveDialog.kt @@ -17,6 +17,7 @@ package com.google.android.horologist.compose.material import android.R +import android.graphics.drawable.VectorDrawable import androidx.compose.foundation.layout.Arrangement import androidx.compose.foundation.layout.Arrangement.spacedBy import androidx.compose.foundation.layout.Box @@ -37,11 +38,14 @@ import androidx.compose.runtime.Composable import androidx.compose.runtime.CompositionLocalProvider import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier +import androidx.compose.ui.graphics.vector.ImageVector import androidx.compose.ui.platform.LocalConfiguration import androidx.compose.ui.res.stringResource +import androidx.compose.ui.unit.Dp import androidx.compose.ui.unit.dp import androidx.wear.compose.foundation.lazy.ScalingLazyListScope import androidx.wear.compose.material.ButtonDefaults +import androidx.wear.compose.material.ChipColors import androidx.wear.compose.material.ChipDefaults import androidx.wear.compose.material.LocalTextStyle import androidx.wear.compose.material.MaterialTheme @@ -123,6 +127,8 @@ public fun ResponsiveDialogContent( if (onOk != null || onCancel != null) { item { val width = LocalConfiguration.current.screenWidthDp + // Single buttons, or buttons on smaller screens are not meant to be + // responsive. val buttonWidth = if (width < 225 || onOk == null || onCancel == null) { ButtonDefaults.DefaultButtonSize } else { @@ -135,49 +141,24 @@ public fun ResponsiveDialogContent( .padding( top = if (content != null || message != null) 12.dp else 0.dp, ), - horizontalArrangement = spacedBy( - 4.dp, - Alignment.CenterHorizontally, - ), + horizontalArrangement = spacedBy(4.dp, Alignment.CenterHorizontally), verticalAlignment = Alignment.CenterVertically, ) { onCancel?.let { - androidx.wear.compose.material.Chip( - label = { - Box(Modifier.fillMaxWidth()) { - Icon( - paintable = ImageVectorPaintable(Icons.Default.Close), - contentDescription = cancelButtonContentDescription, - modifier = Modifier - .size(ButtonDefaults.DefaultIconSize) - .align(Alignment.Center), - ) - } - }, - shape = CircleShape, - contentPadding = PaddingValues(0.dp), + ResponsiveButton( + icon = Icons.Default.Close, + cancelButtonContentDescription, onClick = it, - colors = ChipDefaults.secondaryChipColors(), - modifier = Modifier.width(buttonWidth), + buttonWidth, + ChipDefaults.secondaryChipColors() ) } onOk?.let { - androidx.wear.compose.material.Chip( - label = { - Box(Modifier.fillMaxWidth()) { - Icon( - paintable = ImageVectorPaintable(Icons.Default.Check), - contentDescription = okButtonContentDescription, - modifier = Modifier - .size(ButtonDefaults.DefaultIconSize) - .align(Alignment.Center), - ) - } - }, - contentPadding = PaddingValues(0.dp), - shape = CircleShape, + ResponsiveButton( + icon = Icons.Default.Check, + okButtonContentDescription, onClick = it, - modifier = Modifier.width(buttonWidth), + buttonWidth ) } } @@ -188,6 +169,35 @@ public fun ResponsiveDialogContent( } } +@Composable +private fun ResponsiveButton( + icon: ImageVector, + contentDescription: String, + onClick: () -> Unit, + buttonWidth: Dp, + colors: ChipColors = ChipDefaults.primaryChipColors(), +) { + androidx.wear.compose.material.Chip( + label = { + Box(Modifier.fillMaxWidth()) { + Icon( + paintable = ImageVectorPaintable(icon), + contentDescription = contentDescription, + modifier = Modifier + .size(ButtonDefaults.DefaultIconSize) + .align(Alignment.Center) + ) + } + }, + contentPadding = PaddingValues(0.dp), + shape = CircleShape, + onClick = onClick, + modifier = Modifier.width(buttonWidth), + colors = colors + ) + +} + internal const val globalHorizontalPadding = 5.2f internal const val messageExtraHorizontalPadding = 4.16f internal const val titleExtraHorizontalPadding = 8.84f From c8917cd6094a452bdba1be4ff20fcd598d7f0eac Mon Sep 17 00:00:00 2001 From: ssancho14 Date: Tue, 6 Feb 2024 16:30:48 +0000 Subject: [PATCH 5/5] =?UTF-8?q?=F0=9F=A4=96=20reformat?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../horologist/compose/material/ResponsiveDialog.kt | 10 ++++------ 1 file changed, 4 insertions(+), 6 deletions(-) diff --git a/compose-material/src/main/java/com/google/android/horologist/compose/material/ResponsiveDialog.kt b/compose-material/src/main/java/com/google/android/horologist/compose/material/ResponsiveDialog.kt index ea6cb0f70a..03d0c72c4f 100644 --- a/compose-material/src/main/java/com/google/android/horologist/compose/material/ResponsiveDialog.kt +++ b/compose-material/src/main/java/com/google/android/horologist/compose/material/ResponsiveDialog.kt @@ -17,7 +17,6 @@ package com.google.android.horologist.compose.material import android.R -import android.graphics.drawable.VectorDrawable import androidx.compose.foundation.layout.Arrangement import androidx.compose.foundation.layout.Arrangement.spacedBy import androidx.compose.foundation.layout.Box @@ -150,7 +149,7 @@ public fun ResponsiveDialogContent( cancelButtonContentDescription, onClick = it, buttonWidth, - ChipDefaults.secondaryChipColors() + ChipDefaults.secondaryChipColors(), ) } onOk?.let { @@ -158,7 +157,7 @@ public fun ResponsiveDialogContent( icon = Icons.Default.Check, okButtonContentDescription, onClick = it, - buttonWidth + buttonWidth, ) } } @@ -185,7 +184,7 @@ private fun ResponsiveButton( contentDescription = contentDescription, modifier = Modifier .size(ButtonDefaults.DefaultIconSize) - .align(Alignment.Center) + .align(Alignment.Center), ) } }, @@ -193,9 +192,8 @@ private fun ResponsiveButton( shape = CircleShape, onClick = onClick, modifier = Modifier.width(buttonWidth), - colors = colors + colors = colors, ) - } internal const val globalHorizontalPadding = 5.2f