@@ -20,23 +20,32 @@ import android.R
20
20
import androidx.compose.foundation.layout.Arrangement
21
21
import androidx.compose.foundation.layout.Arrangement.spacedBy
22
22
import androidx.compose.foundation.layout.Box
23
+ import androidx.compose.foundation.layout.PaddingValues
23
24
import androidx.compose.foundation.layout.Row
24
25
import androidx.compose.foundation.layout.Spacer
25
26
import androidx.compose.foundation.layout.fillMaxSize
26
27
import androidx.compose.foundation.layout.fillMaxWidth
27
28
import androidx.compose.foundation.layout.height
28
29
import androidx.compose.foundation.layout.padding
30
+ import androidx.compose.foundation.layout.size
31
+ import androidx.compose.foundation.layout.width
32
+ import androidx.compose.foundation.shape.CircleShape
29
33
import androidx.compose.material.icons.Icons
30
34
import androidx.compose.material.icons.filled.Check
31
35
import androidx.compose.material.icons.filled.Close
32
36
import androidx.compose.runtime.Composable
33
37
import androidx.compose.runtime.CompositionLocalProvider
34
38
import androidx.compose.ui.Alignment
35
39
import androidx.compose.ui.Modifier
40
+ import androidx.compose.ui.graphics.vector.ImageVector
41
+ import androidx.compose.ui.platform.LocalConfiguration
36
42
import androidx.compose.ui.res.stringResource
43
+ import androidx.compose.ui.unit.Dp
37
44
import androidx.compose.ui.unit.dp
38
45
import androidx.wear.compose.foundation.lazy.ScalingLazyListScope
39
46
import androidx.wear.compose.material.ButtonDefaults
47
+ import androidx.wear.compose.material.ChipColors
48
+ import androidx.wear.compose.material.ChipDefaults
40
49
import androidx.wear.compose.material.LocalTextStyle
41
50
import androidx.wear.compose.material.MaterialTheme
42
51
import com.google.android.horologist.annotations.ExperimentalHorologistApi
@@ -45,6 +54,7 @@ import com.google.android.horologist.compose.layout.ScalingLazyColumnDefaults.re
45
54
import com.google.android.horologist.compose.layout.ScalingLazyColumnState
46
55
import com.google.android.horologist.compose.layout.ScreenScaffold
47
56
import com.google.android.horologist.compose.layout.rememberColumnState
57
+ import com.google.android.horologist.images.base.paintable.ImageVectorPaintable
48
58
49
59
@ExperimentalHorologistApi
50
60
@Composable
@@ -115,31 +125,39 @@ public fun ResponsiveDialogContent(
115
125
}
116
126
if (onOk != null || onCancel != null ) {
117
127
item {
128
+ val width = LocalConfiguration .current.screenWidthDp
129
+ // Single buttons, or buttons on smaller screens are not meant to be
130
+ // responsive.
131
+ val buttonWidth = if (width < 225 || onOk == null || onCancel == null ) {
132
+ ButtonDefaults .DefaultButtonSize
133
+ } else {
134
+ // 14.52% margin on the sides, 4.dp between.
135
+ ((width * (1f - 2 * 0.1452f ) - 4 ) / 2 ).dp
136
+ }
118
137
Row (
119
138
Modifier
120
139
.fillMaxWidth()
121
140
.padding(
122
141
top = if (content != null || message != null ) 12 .dp else 0 .dp,
123
142
),
124
- horizontalArrangement = spacedBy(
125
- 4 .dp,
126
- Alignment .CenterHorizontally ,
127
- ),
143
+ horizontalArrangement = spacedBy(4 .dp, Alignment .CenterHorizontally ),
128
144
verticalAlignment = Alignment .CenterVertically ,
129
145
) {
130
146
onCancel?.let {
131
- Button (
132
- imageVector = Icons .Default .Close ,
133
- contentDescription = cancelButtonContentDescription,
147
+ ResponsiveButton (
148
+ icon = Icons .Default .Close ,
149
+ cancelButtonContentDescription,
134
150
onClick = it,
135
- colors = ButtonDefaults .secondaryButtonColors(),
151
+ buttonWidth,
152
+ ChipDefaults .secondaryChipColors(),
136
153
)
137
154
}
138
155
onOk?.let {
139
- Button (
140
- imageVector = Icons .Default .Check ,
141
- contentDescription = okButtonContentDescription,
142
- onClick = onOk,
156
+ ResponsiveButton (
157
+ icon = Icons .Default .Check ,
158
+ okButtonContentDescription,
159
+ onClick = it,
160
+ buttonWidth,
143
161
)
144
162
}
145
163
}
@@ -150,6 +168,34 @@ public fun ResponsiveDialogContent(
150
168
}
151
169
}
152
170
171
+ @Composable
172
+ private fun ResponsiveButton (
173
+ icon : ImageVector ,
174
+ contentDescription : String ,
175
+ onClick : () -> Unit ,
176
+ buttonWidth : Dp ,
177
+ colors : ChipColors = ChipDefaults .primaryChipColors(),
178
+ ) {
179
+ androidx.wear.compose.material.Chip (
180
+ label = {
181
+ Box (Modifier .fillMaxWidth()) {
182
+ Icon (
183
+ paintable = ImageVectorPaintable (icon),
184
+ contentDescription = contentDescription,
185
+ modifier = Modifier
186
+ .size(ButtonDefaults .DefaultIconSize )
187
+ .align(Alignment .Center ),
188
+ )
189
+ }
190
+ },
191
+ contentPadding = PaddingValues (0 .dp),
192
+ shape = CircleShape ,
193
+ onClick = onClick,
194
+ modifier = Modifier .width(buttonWidth),
195
+ colors = colors,
196
+ )
197
+ }
198
+
153
199
internal const val globalHorizontalPadding = 5.2f
154
200
internal const val messageExtraHorizontalPadding = 4.16f
155
201
internal const val titleExtraHorizontalPadding = 8.84f
0 commit comments