Updated on 2026-08-14

This commit is contained in:
Tangem 2023-10-26 11:20:16 +04:00
commit f047db3304
7 changed files with 267 additions and 11 deletions

View file

@ -114,6 +114,32 @@ fun PrimaryButtonIconEnd(
)
}
/**
* [Show in Figma](https://www.figma.com/file/14ISV23YB1yVW1uNVwqrKv/Android?type=design&node-id=68%3A20&mode=design&t=YXX8vqJcB9jn0wPp-1)
* */
@Composable
fun PrimaryButtonIconEndTwoLines(
text: String,
@DrawableRes iconResId: Int,
onClick: () -> Unit,
modifier: Modifier = Modifier,
showProgress: Boolean = false,
enabled: Boolean = true,
additionalText: String? = null,
) {
TangemButton(
modifier = modifier,
text = text,
icon = TangemButtonIconPosition.End(iconResId),
onClick = onClick,
colors = TangemButtonsDefaults.primaryButtonColors,
enabled = enabled,
showProgress = showProgress,
additionalText = additionalText,
size = TangemButtonSize.TwoLines,
)
}
/**
* [Show in Figma](https://www.figma.com/file/14ISV23YB1yVW1uNVwqrKv/Android?node-id=233%3A258&t=TmfD6UBHPg9uYfev-4)
* */
@ -261,6 +287,13 @@ private fun PrimaryButtonSample() {
enabled = false,
onClick = { },
)
PrimaryButtonIconEndTwoLines(
modifier = Modifier.fillMaxWidth(),
text = "Manage tokens",
iconResId = R.drawable.ic_tangem_24,
onClick = { },
additionalText = "Manage these tokens",
)
PrimaryButtonIconStart(
modifier = Modifier.fillMaxWidth(),
text = "Manage tokens",

View file

@ -26,6 +26,7 @@ fun TangemButton(
showProgress: Boolean,
enabled: Boolean,
modifier: Modifier = Modifier,
additionalText: String? = null,
size: TangemButtonSize = TangemButtonSize.Default,
elevation: ButtonElevation = TangemButtonsDefaults.elevation,
textStyle: TextStyle = TangemTheme.typography.button,
@ -73,6 +74,20 @@ fun TangemButton(
contentDescription = null,
)
},
additionalText = {
if (additionalText != null) {
Text(
modifier = Modifier
.fillMaxWidth(),
text = additionalText,
style = TangemTheme.typography.caption2,
color = TangemTheme.colors.text.disabled,
textAlign = TextAlign.Center,
maxLines = 1,
overflow = TextOverflow.Ellipsis,
)
}
},
)
}
}
@ -86,18 +101,27 @@ private inline fun RowScope.ButtonContentContainer(
progressIndicator: @Composable RowScope.() -> Unit,
text: @Composable RowScope.() -> Unit,
icon: @Composable RowScope.(Int) -> Unit,
additionalText: @Composable () -> Unit,
) {
if (showProgress) {
progressIndicator()
} else {
if (buttonIcon is TangemButtonIconPosition.Start) {
icon(buttonIcon.iconResId)
Spacer(modifier = Modifier.requiredWidth(iconPadding))
}
text()
if (buttonIcon is TangemButtonIconPosition.End) {
Spacer(modifier = Modifier.requiredWidth(iconPadding))
icon(buttonIcon.iconResId)
Column {
Row(
modifier = Modifier.fillMaxWidth(),
horizontalArrangement = Arrangement.Center,
) {
if (buttonIcon is TangemButtonIconPosition.Start) {
icon(buttonIcon.iconResId)
Spacer(modifier = Modifier.requiredWidth(iconPadding))
}
text()
if (buttonIcon is TangemButtonIconPosition.End) {
Spacer(modifier = Modifier.requiredWidth(iconPadding))
icon(buttonIcon.iconResId)
}
}
additionalText()
}
}
}

View file

@ -14,12 +14,13 @@ enum class TangemButtonSize {
Selector,
Action,
RoundedAction,
TwoLines,
}
@Composable
@ReadOnlyComposable
internal fun TangemButtonSize.toHeightDp(): Dp = when (this) {
TangemButtonSize.Default -> TangemTheme.dimens.size48
TangemButtonSize.Default, TangemButtonSize.TwoLines -> TangemTheme.dimens.size48
TangemButtonSize.Text -> TangemTheme.dimens.size40
TangemButtonSize.Selector -> TangemTheme.dimens.size24
TangemButtonSize.Action,
@ -34,13 +35,14 @@ internal fun TangemButtonSize.toShape(): Shape = when (this) {
TangemButtonSize.Text -> TangemTheme.shapes.roundedCornersSmall
TangemButtonSize.Selector -> TangemTheme.shapes.roundedCornersSmall
TangemButtonSize.Action -> TangemTheme.shapes.roundedCornersMedium
TangemButtonSize.TwoLines -> TangemTheme.shapes.roundedCornersXMedium
TangemButtonSize.RoundedAction -> TangemTheme.shapes.roundedCornersLarge
}
@Composable
@ReadOnlyComposable
internal fun TangemButtonSize.toIconPadding(): Dp = when (this) {
TangemButtonSize.Default -> TangemTheme.dimens.spacing4
TangemButtonSize.Default, TangemButtonSize.TwoLines -> TangemTheme.dimens.spacing4
TangemButtonSize.Text -> TangemTheme.dimens.spacing8
TangemButtonSize.Selector -> 0.dp
TangemButtonSize.Action,
@ -80,6 +82,12 @@ internal fun TangemButtonSize.toContentPadding(icon: TangemButtonIconPosition):
start = horizontalPadding.first,
end = horizontalPadding.second,
)
TangemButtonSize.TwoLines -> PaddingValues(
top = TangemTheme.dimens.spacing6,
bottom = TangemTheme.dimens.spacing6,
start = horizontalPadding.first,
end = horizontalPadding.second,
)
}
}
@ -87,7 +95,8 @@ internal fun TangemButtonSize.toContentPadding(icon: TangemButtonIconPosition):
@ReadOnlyComposable
internal fun TangemButtonSize.toHorizontalContentPadding(icon: TangemButtonIconPosition): Pair<Dp, Dp> {
return when (this) {
TangemButtonSize.Default -> TangemTheme.dimens.spacing32 to TangemTheme.dimens.spacing32
TangemButtonSize.Default, TangemButtonSize.TwoLines ->
TangemTheme.dimens.spacing32 to TangemTheme.dimens.spacing32
TangemButtonSize.Text -> when (icon) {
is TangemButtonIconPosition.None -> TangemTheme.dimens.spacing16 to TangemTheme.dimens.spacing16
is TangemButtonIconPosition.Start -> TangemTheme.dimens.spacing14 to TangemTheme.dimens.spacing16

View file

@ -28,6 +28,7 @@ data class NotificationConfig(
data class PrimaryButtonConfig(
val text: TextReference,
val additionalText: TextReference? = null,
@DrawableRes val iconResId: Int? = null,
val onClick: () -> Unit,
) : ButtonsState()