Add Color to ButtonType to support Fill and PrimaryFill

This commit is contained in:
Andrew 2024-06-20 11:34:01 +09:30
parent f06d53c746
commit acbe4de25a
4 changed files with 53 additions and 42 deletions

View File

@ -89,8 +89,7 @@ private fun NotificationRadioButton(
modifier = Modifier modifier = Modifier
.weight(1f) .weight(1f)
.contentDescription(contentDescription), .contentDescription(contentDescription),
type = ButtonType.Outline, type = ButtonType.Outline(LocalColors.current.text),
color = LocalColors.current.text,
border = BorderStroke( border = BorderStroke(
width = ButtonDefaults.OutlinedBorderSize, width = ButtonDefaults.OutlinedBorderSize,
color = if (selected) LocalColors.current.primary else LocalColors.current.borders color = if (selected) LocalColors.current.primary else LocalColors.current.borders

View File

@ -38,7 +38,9 @@ interface Colors {
val backgroundBubbleReceived: Color val backgroundBubbleReceived: Color
val textBubbleReceived: Color val textBubbleReceived: Color
val backgroundBubbleSent: Color get() = primary val backgroundBubbleSent: Color get() = primary
val buttonFilled: Color val primaryButtonFillText: Color
val primaryButtonFill: Color
val buttonFill: Color
val buttonOutline: Color val buttonOutline: Color
val qrCodeContent: Color val qrCodeContent: Color
val qrCodeBackground: Color val qrCodeBackground: Color
@ -56,7 +58,9 @@ data class ClassicDark(override val primary: Color = primaryGreen): Colors {
override val textBubbleSent = Color.Black override val textBubbleSent = Color.Black
override val backgroundBubbleReceived = classicDark2 override val backgroundBubbleReceived = classicDark2
override val textBubbleReceived = Color.White override val textBubbleReceived = Color.White
override val buttonFilled = primary override val primaryButtonFillText = Color.Black
override val primaryButtonFill = primary
override val buttonFill = text
override val buttonOutline = primary override val buttonOutline = primary
override val qrCodeContent = background override val qrCodeContent = background
override val qrCodeBackground = text override val qrCodeBackground = text
@ -74,7 +78,9 @@ data class ClassicLight(override val primary: Color = primaryGreen): Colors {
override val textBubbleSent = Color.Black override val textBubbleSent = Color.Black
override val backgroundBubbleReceived = classicLight4 override val backgroundBubbleReceived = classicLight4
override val textBubbleReceived = classicLight4 override val textBubbleReceived = classicLight4
override val buttonFilled = classicLight0 override val primaryButtonFillText = Color.White
override val primaryButtonFill = classicLight0
override val buttonFill = classicLight0
override val buttonOutline = classicLight0 override val buttonOutline = classicLight0
override val qrCodeContent = text override val qrCodeContent = text
override val qrCodeBackground = backgroundSecondary override val qrCodeBackground = backgroundSecondary
@ -92,7 +98,9 @@ data class OceanDark(override val primary: Color = primaryBlue): Colors {
override val textBubbleSent = Color.Black override val textBubbleSent = Color.Black
override val backgroundBubbleReceived = oceanDark4 override val backgroundBubbleReceived = oceanDark4
override val textBubbleReceived = oceanDark4 override val textBubbleReceived = oceanDark4
override val buttonFilled = primary override val primaryButtonFillText = Color.Black
override val primaryButtonFill = primary
override val buttonFill = text
override val buttonOutline = primary override val buttonOutline = primary
override val qrCodeContent = background override val qrCodeContent = background
override val qrCodeBackground = text override val qrCodeBackground = text
@ -110,7 +118,9 @@ data class OceanLight(override val primary: Color = primaryBlue): Colors {
override val textBubbleSent = oceanLight1 override val textBubbleSent = oceanLight1
override val backgroundBubbleReceived = oceanLight4 override val backgroundBubbleReceived = oceanLight4
override val textBubbleReceived = oceanLight1 override val textBubbleReceived = oceanLight1
override val buttonFilled = oceanLight1 override val primaryButtonFillText = Color.White
override val primaryButtonFill = oceanLight1
override val buttonFill = oceanLight1
override val buttonOutline = oceanLight1 override val buttonOutline = oceanLight1
override val qrCodeContent = text override val qrCodeContent = text
override val qrCodeBackground = backgroundSecondary override val qrCodeBackground = backgroundSecondary

View File

@ -16,7 +16,6 @@ import androidx.compose.foundation.layout.RowScope
import androidx.compose.foundation.layout.heightIn import androidx.compose.foundation.layout.heightIn
import androidx.compose.foundation.layout.padding import androidx.compose.foundation.layout.padding
import androidx.compose.material.ButtonColors import androidx.compose.material.ButtonColors
import androidx.compose.material.ButtonDefaults
import androidx.compose.material.Text import androidx.compose.material.Text
import androidx.compose.runtime.Composable import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue import androidx.compose.runtime.getValue
@ -29,7 +28,6 @@ import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.Shape import androidx.compose.ui.graphics.Shape
import androidx.compose.ui.res.stringResource import androidx.compose.ui.res.stringResource
import androidx.compose.ui.text.TextStyle import androidx.compose.ui.text.TextStyle
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.tooling.preview.Preview import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.tooling.preview.PreviewParameter import androidx.compose.ui.tooling.preview.PreviewParameter
import androidx.compose.ui.unit.dp import androidx.compose.ui.unit.dp
@ -37,7 +35,6 @@ import kotlinx.coroutines.delay
import kotlinx.coroutines.flow.collectLatest import kotlinx.coroutines.flow.collectLatest
import kotlinx.coroutines.flow.filter import kotlinx.coroutines.flow.filter
import network.loki.messenger.R import network.loki.messenger.R
import org.thoughtcrime.securesms.ui.GetString
import org.thoughtcrime.securesms.ui.LaunchedEffectAsync import org.thoughtcrime.securesms.ui.LaunchedEffectAsync
import org.thoughtcrime.securesms.ui.PreviewTheme import org.thoughtcrime.securesms.ui.PreviewTheme
import org.thoughtcrime.securesms.ui.SessionColorsParameterProvider import org.thoughtcrime.securesms.ui.SessionColorsParameterProvider
@ -46,7 +43,6 @@ import org.thoughtcrime.securesms.ui.buttonShape
import org.thoughtcrime.securesms.ui.color.Colors import org.thoughtcrime.securesms.ui.color.Colors
import org.thoughtcrime.securesms.ui.color.LocalColors import org.thoughtcrime.securesms.ui.color.LocalColors
import org.thoughtcrime.securesms.ui.contentDescription import org.thoughtcrime.securesms.ui.contentDescription
import org.thoughtcrime.securesms.ui.extraSmall
import kotlin.time.Duration import kotlin.time.Duration
import kotlin.time.Duration.Companion.seconds import kotlin.time.Duration.Companion.seconds
@ -56,14 +52,13 @@ import kotlin.time.Duration.Companion.seconds
@Composable @Composable
fun Button( fun Button(
onClick: () -> Unit, onClick: () -> Unit,
color: Color,
type: ButtonType, type: ButtonType,
modifier: Modifier = Modifier, modifier: Modifier = Modifier,
enabled: Boolean = true, enabled: Boolean = true,
style: ButtonStyle = ButtonStyle.Large, style: ButtonStyle = ButtonStyle.Large,
shape: Shape = buttonShape, shape: Shape = buttonShape,
border: BorderStroke? = type.border(color, enabled), border: BorderStroke? = type.border(enabled),
colors: ButtonColors = type.buttonColors(color), colors: ButtonColors = type.buttonColors(),
interactionSource: MutableInteractionSource = remember { MutableInteractionSource() }, interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
contentPadding: PaddingValues = type.contentPadding, contentPadding: PaddingValues = type.contentPadding,
content: @Composable RowScope.() -> Unit content: @Composable RowScope.() -> Unit
@ -95,38 +90,34 @@ fun Button(
fun Button( fun Button(
text: String, text: String,
onClick: () -> Unit, onClick: () -> Unit,
color: Color,
type: ButtonType, type: ButtonType,
modifier: Modifier = Modifier, modifier: Modifier = Modifier,
enabled: Boolean = true, enabled: Boolean = true,
size: ButtonStyle = ButtonStyle.Large, style: ButtonStyle = ButtonStyle.Large,
shape: Shape = buttonShape, shape: Shape = buttonShape,
border: BorderStroke? = type.border(color, enabled),
colors: ButtonColors = type.buttonColors(color),
interactionSource: MutableInteractionSource = remember { MutableInteractionSource() }, interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
) { ) {
Button(onClick, color, type, modifier, enabled, size, shape, border, colors, interactionSource) { Button(onClick, type, modifier, enabled, style, shape, interactionSource = interactionSource) {
Text(text) Text(text)
} }
} }
@Composable fun FillButton(text: String, modifier: Modifier = Modifier, enabled: Boolean = true, onClick: () -> Unit) { @Composable fun FillButton(text: String, modifier: Modifier = Modifier, enabled: Boolean = true, onClick: () -> Unit) {
Button(text, onClick, LocalColors.current.buttonOutline, ButtonType.Fill, modifier, enabled) Button(text, onClick, ButtonType.Fill, modifier, enabled)
} }
@Composable fun PrimaryFillButton(text: String, modifier: Modifier = Modifier, enabled: Boolean = true, onClick: () -> Unit) { @Composable fun PrimaryFillButton(text: String, modifier: Modifier = Modifier, enabled: Boolean = true, onClick: () -> Unit) {
Button(text, onClick, LocalColors.current.primary, ButtonType.Fill, modifier, enabled) Button(text, onClick, ButtonType.PrimaryFill, modifier, enabled)
} }
@Composable fun OutlineButton(text: String, modifier: Modifier = Modifier, color: Color = LocalColors.current.buttonOutline, enabled: Boolean = true, onClick: () -> Unit) { @Composable fun OutlineButton(text: String, modifier: Modifier = Modifier, color: Color = LocalColors.current.buttonOutline, enabled: Boolean = true, onClick: () -> Unit) {
Button(text, onClick, color, ButtonType.Outline, modifier, enabled) Button(text, onClick, ButtonType.Outline(color), modifier, enabled)
} }
@Composable fun OutlineButton(modifier: Modifier = Modifier, color: Color = LocalColors.current.buttonOutline, enabled: Boolean = true, onClick: () -> Unit, content: @Composable RowScope.() -> Unit) { @Composable fun OutlineButton(modifier: Modifier = Modifier, color: Color = LocalColors.current.buttonOutline, enabled: Boolean = true, onClick: () -> Unit, content: @Composable RowScope.() -> Unit) {
Button( Button(
onClick = onClick, onClick = onClick,
color = color, type = ButtonType.Outline(color),
type = ButtonType.Outline,
modifier = modifier, modifier = modifier,
enabled = enabled, enabled = enabled,
content = content content = content
@ -134,18 +125,18 @@ fun Button(
} }
@Composable fun PrimaryOutlineButton(text: String, modifier: Modifier = Modifier, enabled: Boolean = true, onClick: () -> Unit) { @Composable fun PrimaryOutlineButton(text: String, modifier: Modifier = Modifier, enabled: Boolean = true, onClick: () -> Unit) {
Button(text, onClick, LocalColors.current.primary, ButtonType.Outline, modifier, enabled) Button(text, onClick, ButtonType.Outline(LocalColors.current.primary), modifier, enabled)
} }
@Composable fun SlimOutlineButton(onClick: () -> Unit, modifier: Modifier = Modifier, color: Color = LocalColors.current.text, enabled: Boolean = true, content: @Composable RowScope.() -> Unit) { @Composable fun SlimOutlineButton(onClick: () -> Unit, modifier: Modifier = Modifier, color: Color = LocalColors.current.text, enabled: Boolean = true, content: @Composable RowScope.() -> Unit) {
Button(onClick, color, ButtonType.Outline, modifier, enabled, ButtonStyle.Slim, content = content) Button(onClick, ButtonType.Outline(color), modifier, enabled, ButtonStyle.Slim, content = content)
} }
/** /**
* Courtesy [SlimOutlineButton] implementation for buttons that just display text. * Courtesy [SlimOutlineButton] implementation for buttons that just display text.
*/ */
@Composable fun SlimOutlineButton(text: String, modifier: Modifier = Modifier, color: Color = LocalColors.current.text, enabled: Boolean = true, onClick: () -> Unit) { @Composable fun SlimOutlineButton(text: String, modifier: Modifier = Modifier, color: Color = LocalColors.current.text, enabled: Boolean = true, onClick: () -> Unit) {
Button(text, onClick, color, ButtonType.Outline, modifier, enabled, ButtonStyle.Slim) Button(text, onClick, ButtonType.Outline(color), modifier, enabled, ButtonStyle.Slim)
} }
@Composable @Composable
@ -170,8 +161,7 @@ fun OutlineCopyButton(
modifier = modifier.contentDescription(R.string.AccessibilityId_copy_button), modifier = modifier.contentDescription(R.string.AccessibilityId_copy_button),
interactionSource = interactionSource, interactionSource = interactionSource,
style = style, style = style,
type = ButtonType.Outline, type = ButtonType.Outline(color),
color = color,
onClick = onClick onClick = onClick
) { ) {
TemporaryClickedContent( TemporaryClickedContent(
@ -219,10 +209,9 @@ fun BorderlessButton(
) { ) {
Button( Button(
onClick = onClick, onClick = onClick,
color = color,
modifier = modifier, modifier = modifier,
style = ButtonStyle.Borderless, style = ButtonStyle.Borderless,
type = ButtonType.Borderless, type = ButtonType.Borderless(color),
content = content content = content
) )
} }
@ -288,6 +277,7 @@ private fun VariousButtons(
verticalArrangement = Arrangement.spacedBy(8.dp) verticalArrangement = Arrangement.spacedBy(8.dp)
) { ) {
PrimaryFillButton("Primary Fill") {} PrimaryFillButton("Primary Fill") {}
FillButton("Fill Button") {}
OutlineButton("Outline Button") {} OutlineButton("Outline Button") {}
SlimOutlineButton("Slim Outline") {} SlimOutlineButton("Slim Outline") {}
SlimOutlineButton("Slim Primary", color = LocalColors.current.buttonOutline) {} SlimOutlineButton("Slim Primary", color = LocalColors.current.buttonOutline) {}

View File

@ -14,19 +14,19 @@ interface ButtonType {
val contentPadding: PaddingValues get() = ButtonDefaults.ContentPadding val contentPadding: PaddingValues get() = ButtonDefaults.ContentPadding
@Composable @Composable
fun border(color: Color, enabled: Boolean): BorderStroke? fun border(enabled: Boolean): BorderStroke?
@Composable @Composable
fun buttonColors(color: Color): ButtonColors fun buttonColors(): ButtonColors
object Outline: ButtonType { class Outline(private val color: Color): ButtonType {
@Composable @Composable
override fun border(color: Color, enabled: Boolean) = override fun border(enabled: Boolean) =
BorderStroke( BorderStroke(
width = LocalDimensions.current.borderStroke, width = LocalDimensions.current.borderStroke,
color = if (enabled) color else LocalColors.current.disabled color = if (enabled) color else LocalColors.current.disabled
) )
@Composable @Composable
override fun buttonColors(color: Color) = ButtonDefaults.buttonColors( override fun buttonColors() = ButtonDefaults.buttonColors(
contentColor = color, contentColor = color,
backgroundColor = Color.Unspecified, backgroundColor = Color.Unspecified,
disabledContentColor = LocalColors.current.disabled, disabledContentColor = LocalColors.current.disabled,
@ -36,23 +36,35 @@ interface ButtonType {
object Fill: ButtonType { object Fill: ButtonType {
@Composable @Composable
override fun border(color: Color, enabled: Boolean) = null override fun border(enabled: Boolean) = null
@Composable @Composable
override fun buttonColors(color: Color) = ButtonDefaults.buttonColors( override fun buttonColors() = ButtonDefaults.buttonColors(
contentColor = LocalColors.current.background, contentColor = LocalColors.current.background,
backgroundColor = color, backgroundColor = LocalColors.current.buttonFill,
disabledContentColor = LocalColors.current.disabled, disabledContentColor = LocalColors.current.disabled,
disabledBackgroundColor = Color.Unspecified disabledBackgroundColor = Color.Unspecified
) )
} }
object Borderless: ButtonType { object PrimaryFill: ButtonType {
@Composable
override fun border(enabled: Boolean) = null
@Composable
override fun buttonColors() = ButtonDefaults.buttonColors(
contentColor = LocalColors.current.primaryButtonFillText,
backgroundColor = LocalColors.current.primaryButtonFill,
disabledContentColor = LocalColors.current.disabled,
disabledBackgroundColor = Color.Unspecified
)
}
class Borderless(private val color: Color): ButtonType {
override val contentPadding: PaddingValues override val contentPadding: PaddingValues
get() = PaddingValues(horizontal = 16.dp, vertical = 12.dp) get() = PaddingValues(horizontal = 16.dp, vertical = 12.dp)
@Composable @Composable
override fun border(color: Color, enabled: Boolean) = null override fun border(enabled: Boolean) = null
@Composable @Composable
override fun buttonColors(color: Color) = ButtonDefaults.outlinedButtonColors( override fun buttonColors() = ButtonDefaults.outlinedButtonColors(
contentColor = color, contentColor = color,
backgroundColor = Color.Transparent, backgroundColor = Color.Transparent,
disabledContentColor = LocalColors.current.disabled disabledContentColor = LocalColors.current.disabled