From 931f66523c25811a0fd2e2c6416048473f749c06 Mon Sep 17 00:00:00 2001 From: Fabian Bender Date: Wed, 9 Apr 2025 12:18:15 +0200 Subject: [PATCH 1/5] change to custom style for overrides --- ui/src/main/res/layout/snabble_view_payment_status.xml | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) 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 a4fe6b468..7bda10995 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 @@ Date: Thu, 10 Apr 2025 10:31:22 +0200 Subject: [PATCH 2/5] make composable secondary button customizable --- .../java/io/snabble/sdk/ui/ThemeManager.kt | 18 ++++++++ .../shared/CustomerInfoInputScreen.kt | 41 +++++++++++++++---- 2 files changed, 52 insertions(+), 7 deletions(-) create mode 100644 ui/src/main/java/io/snabble/sdk/ui/ThemeManager.kt 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 000000000..6e12eb4f5 --- /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 0c77ea3be..db7d54003 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 + ) + } } } } From c120ff3ea2c809f9c356bb72e68f8062d364c713 Mon Sep 17 00:00:00 2001 From: Fabian Bender Date: Thu, 10 Apr 2025 10:32:27 +0200 Subject: [PATCH 3/5] adjust components to make them externally customizable --- .../ui/remotetheme/SnabbleSecondaryButton.kt | 36 ++++++++++++++----- .../layout/snabble_view_search_product.xml | 1 + ui/src/main/res/values/styles.xml | 2 ++ 3 files changed, 30 insertions(+), 9 deletions(-) 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 d9627325b..ffd176af3 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_search_product.xml b/ui/src/main/res/layout/snabble_view_search_product.xml index d3f1dccba..7ea836a9a 100644 --- a/ui/src/main/res/layout/snabble_view_search_product.xml +++ b/ui/src/main/res/layout/snabble_view_search_product.xml @@ -26,6 +26,7 @@ android:layout_centerHorizontal="true" android:layout_marginTop="56dp" android:gravity="center" + android:visibility="gone" android:padding="16dp" tools:text="Add 2623237002494 as is" /> diff --git a/ui/src/main/res/values/styles.xml b/ui/src/main/res/values/styles.xml index df1aaf157..3b6d5d4ea 100644 --- a/ui/src/main/res/values/styles.xml +++ b/ui/src/main/res/values/styles.xml @@ -49,6 +49,8 @@