diff --git a/CHANGELOG.md b/CHANGELOG.md index 1d3b59fb93..6152ae3c81 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -4,6 +4,7 @@ All notable changes to this project will be documented in this file. ## UNRELEASED ### Added ### Changed +* ui: add new style and theme manager to make primary and secondary buttons customizable (APPS-2213) ### Removed ### Fixed diff --git a/ui/src/main/java/io/snabble/sdk/ui/ThemeManager.kt b/ui/src/main/java/io/snabble/sdk/ui/ThemeManager.kt new file mode 100644 index 0000000000..6e12eb4f51 --- /dev/null +++ b/ui/src/main/java/io/snabble/sdk/ui/ThemeManager.kt @@ -0,0 +1,18 @@ +package io.snabble.sdk.ui + +object ThemeManager { + var primaryButtonConfig: PrimaryConfig = PrimaryConfig() + var secondaryButtonConfig: SecondaryConfig = SecondaryConfig() +} + + +data class PrimaryConfig( + val textSize: Int = 16, + val minHeight: Int = 40, +) + +data class SecondaryConfig( + val textSize: Int = 16, + val minHeight: Int = 40, + val useOutlinedButton: Boolean = false +) diff --git a/ui/src/main/java/io/snabble/sdk/ui/payment/creditcard/shared/CustomerInfoInputScreen.kt b/ui/src/main/java/io/snabble/sdk/ui/payment/creditcard/shared/CustomerInfoInputScreen.kt index 0c77ea3bec..db7d540035 100644 --- a/ui/src/main/java/io/snabble/sdk/ui/payment/creditcard/shared/CustomerInfoInputScreen.kt +++ b/ui/src/main/java/io/snabble/sdk/ui/payment/creditcard/shared/CustomerInfoInputScreen.kt @@ -1,8 +1,10 @@ package io.snabble.sdk.ui.payment.creditcard.shared import androidx.compose.animation.AnimatedVisibility +import androidx.compose.foundation.BorderStroke import androidx.compose.foundation.layout.Arrangement import androidx.compose.foundation.layout.Column +import androidx.compose.foundation.layout.defaultMinSize import androidx.compose.foundation.layout.fillMaxWidth import androidx.compose.foundation.layout.padding import androidx.compose.foundation.rememberScrollState @@ -11,6 +13,7 @@ import androidx.compose.foundation.text.KeyboardOptions import androidx.compose.foundation.verticalScroll import androidx.compose.material3.Button import androidx.compose.material3.MaterialTheme +import androidx.compose.material3.OutlinedButton import androidx.compose.material3.Text import androidx.compose.material3.TextButton import androidx.compose.runtime.Composable @@ -24,8 +27,10 @@ import androidx.compose.ui.res.stringResource import androidx.compose.ui.text.input.ImeAction import androidx.compose.ui.text.input.KeyboardCapitalization import androidx.compose.ui.unit.dp +import androidx.compose.ui.unit.sp import io.snabble.sdk.Snabble import io.snabble.sdk.ui.R +import io.snabble.sdk.ui.ThemeManager import io.snabble.sdk.ui.cart.shoppingcart.utils.rememberTextFieldManager import io.snabble.sdk.ui.payment.creditcard.shared.country.displayName import io.snabble.sdk.ui.payment.creditcard.shared.country.domain.models.Address @@ -46,6 +51,8 @@ internal fun CustomerInfoInputScreen( onBackNavigationClick: () -> Unit, ) { val preFilledData = Snabble.formPrefillData + val primaryButtonConfig = ThemeManager.primaryButtonConfig + val secondaryButtonConfig = ThemeManager.secondaryButtonConfig var name by remember { mutableStateOf(preFilledData?.name.orEmpty()) } var intCallingCode by remember { mutableStateOf("") } @@ -193,11 +200,16 @@ internal fun CustomerInfoInputScreen( verticalArrangement = Arrangement.spacedBy(4.dp), ) { Button( - modifier = Modifier.fillMaxWidth(), + modifier = Modifier + .fillMaxWidth() + .defaultMinSize(minHeight = primaryButtonConfig.minHeight.dp), onClick = { onSendAction(createCustomerInfo()) }, enabled = !isLoading && areRequiredFieldsSet ) { - Text(stringResource(R.string.Snabble_Payment_CustomerInfo_next)) + Text( + stringResource(R.string.Snabble_Payment_CustomerInfo_next), + fontSize = primaryButtonConfig.textSize.sp + ) } AnimatedVisibility(visible = showError) { Text( @@ -208,11 +220,26 @@ internal fun CustomerInfoInputScreen( ) } } - TextButton( - modifier = Modifier.fillMaxWidth(), - onClick = onBackNavigationClick - ) { - Text(text = stringResource(R.string.Snabble_cancel)) + if (!secondaryButtonConfig.useOutlinedButton) { + TextButton( + modifier = Modifier.fillMaxWidth(), + onClick = onBackNavigationClick + ) { + Text(text = stringResource(R.string.Snabble_cancel)) + } + } else { + OutlinedButton( + modifier = Modifier + .fillMaxWidth() + .defaultMinSize(minHeight = secondaryButtonConfig.minHeight.dp), + onClick = onBackNavigationClick, + border = BorderStroke(width = 1.dp, color = MaterialTheme.colorScheme.primary) + ) { + Text( + text = stringResource(R.string.Snabble_cancel), + fontSize = secondaryButtonConfig.textSize.sp + ) + } } } } diff --git a/ui/src/main/java/io/snabble/sdk/ui/remotetheme/SnabbleSecondaryButton.kt b/ui/src/main/java/io/snabble/sdk/ui/remotetheme/SnabbleSecondaryButton.kt index d9627325bc..ffd176af38 100644 --- a/ui/src/main/java/io/snabble/sdk/ui/remotetheme/SnabbleSecondaryButton.kt +++ b/ui/src/main/java/io/snabble/sdk/ui/remotetheme/SnabbleSecondaryButton.kt @@ -2,8 +2,11 @@ package io.snabble.sdk.ui.remotetheme import android.content.Context import android.content.res.ColorStateList +import android.graphics.Color import android.util.AttributeSet +import androidx.core.graphics.ColorUtils import com.google.android.material.button.MaterialButton +import com.google.android.material.color.MaterialColors import io.snabble.sdk.Project import io.snabble.sdk.Snabble import io.snabble.sdk.ui.R @@ -26,28 +29,43 @@ class SnabbleSecondaryButton @JvmOverloads constructor( private fun setProjectAppTheme() { val project = Snabble.checkedInProject.value + setRippleColor(project) setTextColorFor(project) + setStrokeColor(project) } - private fun setTextColorFor(project: Project?) { - val defaultTextColorStateList = textColors + private fun setStrokeColor(project: Project?) { + strokeColor = ColorStateList.valueOf(context.primaryColorForProject(project)) + } - // Extract the default disabled color - val defaultDisabledTextColor = defaultTextColorStateList.getColorForState( - intArrayOf(-android.R.attr.state_enabled), - currentTextColor + private fun setRippleColor(project: Project?) { + val highlightColor = MaterialColors.getColor( + context, + com.google.android.material.R.attr.colorControlHighlight, + Color.TRANSPARENT + ) + + val rippleColorStateList = ColorStateList.valueOf( + ColorUtils.setAlphaComponent( + context.primaryColorForProject(project), Color.alpha(highlightColor) ) + ) + rippleColor = rippleColorStateList + } + + private fun setTextColorFor(project: Project?) { val states = arrayOf( intArrayOf(-android.R.attr.state_enabled), - intArrayOf(android.R.attr.state_enabled) + intArrayOf(android.R.attr.state_enabled), ) val colors = intArrayOf( - defaultDisabledTextColor, - context.primaryColorForProject(project) + context.primaryColorForProject(project), + context.primaryColorForProject(project), ) setTextColor(ColorStateList(states, colors)) } + } diff --git a/ui/src/main/res/layout/snabble_view_payment_status.xml b/ui/src/main/res/layout/snabble_view_payment_status.xml index a4fe6b4686..7bda10995c 100644 --- a/ui/src/main/res/layout/snabble_view_payment_status.xml +++ b/ui/src/main/res/layout/snabble_view_payment_status.xml @@ -285,7 +285,7 @@ diff --git a/ui/src/main/res/values/styles.xml b/ui/src/main/res/values/styles.xml index df1aaf1575..3b6d5d4ea8 100644 --- a/ui/src/main/res/values/styles.xml +++ b/ui/src/main/res/values/styles.xml @@ -49,6 +49,8 @@