fix(android): keep the accent button's width and corners
Moving the gradient onto a row inside the button lost both: the button's own row hands its children no minimum size, so a fillMaxWidth button painted the ramp only behind its label, and with square corners. The gradient goes back on the button, and the 48dp touch-target padding is taken by a box around it instead, with the button inside told not to add its own. The primary button now matches the other buttons' 40dp container at every width. The screenshots are re-recorded for it.
No files matched your search
@@ -2,18 +2,15 @@ package io.narl.protonstream.ui.theme
|
|||||||
|
|
||||||
import androidx.compose.foundation.Canvas
|
import androidx.compose.foundation.Canvas
|
||||||
import androidx.compose.foundation.background
|
import androidx.compose.foundation.background
|
||||||
import androidx.compose.foundation.layout.Arrangement
|
import androidx.compose.foundation.layout.Box
|
||||||
import androidx.compose.foundation.layout.PaddingValues
|
|
||||||
import androidx.compose.foundation.layout.Row
|
|
||||||
import androidx.compose.foundation.layout.RowScope
|
import androidx.compose.foundation.layout.RowScope
|
||||||
import androidx.compose.foundation.layout.defaultMinSize
|
|
||||||
import androidx.compose.foundation.layout.fillMaxWidth
|
import androidx.compose.foundation.layout.fillMaxWidth
|
||||||
import androidx.compose.foundation.layout.height
|
import androidx.compose.foundation.layout.height
|
||||||
import androidx.compose.foundation.layout.padding
|
|
||||||
import androidx.compose.material3.Button
|
import androidx.compose.material3.Button
|
||||||
import androidx.compose.material3.ButtonDefaults
|
import androidx.compose.material3.ButtonDefaults
|
||||||
import androidx.compose.material3.ExperimentalMaterial3Api
|
import androidx.compose.material3.ExperimentalMaterial3Api
|
||||||
import androidx.compose.material3.FilledTonalButton
|
import androidx.compose.material3.FilledTonalButton
|
||||||
|
import androidx.compose.material3.LocalMinimumInteractiveComponentSize
|
||||||
import androidx.compose.material3.MaterialTheme
|
import androidx.compose.material3.MaterialTheme
|
||||||
import androidx.compose.material3.NavigationBarItemDefaults
|
import androidx.compose.material3.NavigationBarItemDefaults
|
||||||
import androidx.compose.material3.NavigationDrawerItemDefaults
|
import androidx.compose.material3.NavigationDrawerItemDefaults
|
||||||
@@ -23,7 +20,9 @@ import androidx.compose.material3.adaptive.navigationsuite.NavigationSuiteDefaul
|
|||||||
import androidx.compose.material3.adaptive.navigationsuite.NavigationSuiteItemColors
|
import androidx.compose.material3.adaptive.navigationsuite.NavigationSuiteItemColors
|
||||||
import androidx.compose.material3.SliderState
|
import androidx.compose.material3.SliderState
|
||||||
import androidx.compose.material3.TextButton
|
import androidx.compose.material3.TextButton
|
||||||
|
import androidx.compose.material3.minimumInteractiveComponentSize
|
||||||
import androidx.compose.runtime.Composable
|
import androidx.compose.runtime.Composable
|
||||||
|
import androidx.compose.runtime.CompositionLocalProvider
|
||||||
import androidx.compose.runtime.remember
|
import androidx.compose.runtime.remember
|
||||||
import androidx.compose.ui.Alignment
|
import androidx.compose.ui.Alignment
|
||||||
import androidx.compose.ui.Modifier
|
import androidx.compose.ui.Modifier
|
||||||
@@ -32,6 +31,7 @@ import androidx.compose.ui.geometry.Size
|
|||||||
import androidx.compose.ui.graphics.Brush
|
import androidx.compose.ui.graphics.Brush
|
||||||
import androidx.compose.ui.graphics.Color
|
import androidx.compose.ui.graphics.Color
|
||||||
import androidx.compose.ui.graphics.SolidColor
|
import androidx.compose.ui.graphics.SolidColor
|
||||||
|
import androidx.compose.ui.unit.Dp
|
||||||
import androidx.compose.ui.unit.dp
|
import androidx.compose.ui.unit.dp
|
||||||
|
|
||||||
/**
|
/**
|
||||||
@@ -73,31 +73,32 @@ internal fun AccentButton(
|
|||||||
enabled: Boolean = true,
|
enabled: Boolean = true,
|
||||||
content: @Composable RowScope.() -> Unit,
|
content: @Composable RowScope.() -> Unit,
|
||||||
) {
|
) {
|
||||||
// The ramp is painted inside the container, not on `modifier`: the button
|
val shape = MaterialTheme.shapes.small
|
||||||
// pads itself out to the 48dp minimum touch target, and a background on
|
// The button pads itself out to the 48dp minimum touch target, and a
|
||||||
// the outer modifier fills that whole target — 8dp taller than the 40dp
|
// background on its modifier fills that whole target — 8dp taller than
|
||||||
// container every other button draws, so it stood out beside them.
|
// the 40dp container every other button draws. So the padding is taken
|
||||||
|
// here, outside the ramp, and the button inside is told not to add its
|
||||||
|
// own. The box hands its size down, so a `fillMaxWidth` still reaches it.
|
||||||
|
Box(
|
||||||
|
modifier.minimumInteractiveComponentSize(),
|
||||||
|
contentAlignment = Alignment.Center,
|
||||||
|
propagateMinConstraints = true,
|
||||||
|
) {
|
||||||
|
CompositionLocalProvider(LocalMinimumInteractiveComponentSize provides Dp.Unspecified) {
|
||||||
Button(
|
Button(
|
||||||
onClick = onClick,
|
onClick = onClick,
|
||||||
modifier = modifier,
|
|
||||||
enabled = enabled,
|
|
||||||
shape = MaterialTheme.shapes.small,
|
|
||||||
colors = ButtonDefaults.buttonColors(containerColor = Color.Transparent),
|
|
||||||
contentPadding = PaddingValues(0.dp),
|
|
||||||
) {
|
|
||||||
Row(
|
|
||||||
// Only while it is live: a disabled button keeps Material's flat
|
// Only while it is live: a disabled button keeps Material's flat
|
||||||
// disabled container, because a greyed control that still wears
|
// disabled container, because a greyed control that still wears the
|
||||||
// the one strong colour in the window reads as pressable.
|
// one strong colour in the window reads as pressable.
|
||||||
modifier = (if (enabled) Modifier.background(accentBrush()) else Modifier)
|
modifier = if (enabled) Modifier.background(accentBrush(), shape) else Modifier,
|
||||||
.defaultMinSize(ButtonDefaults.MinWidth, ButtonDefaults.MinHeight)
|
enabled = enabled,
|
||||||
.padding(ButtonDefaults.ContentPadding),
|
shape = shape,
|
||||||
horizontalArrangement = Arrangement.Center,
|
colors = ButtonDefaults.buttonColors(containerColor = Color.Transparent),
|
||||||
verticalAlignment = Alignment.CenterVertically,
|
|
||||||
content = content,
|
content = content,
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
@Composable
|
@Composable
|
||||||
internal fun TonalButton(
|
internal fun TonalButton(
|
||||||
|
|||||||
|
Before Width: | Height: | Size: 813 KiB After Width: | Height: | Size: 813 KiB |
|
Before Width: | Height: | Size: 769 KiB After Width: | Height: | Size: 768 KiB |
|
Before Width: | Height: | Size: 807 KiB After Width: | Height: | Size: 806 KiB |
|
Before Width: | Height: | Size: 638 KiB After Width: | Height: | Size: 631 KiB |
|
Before Width: | Height: | Size: 678 KiB After Width: | Height: | Size: 669 KiB |
|
Before Width: | Height: | Size: 1.1 MiB After Width: | Height: | Size: 1.1 MiB |