Adjust primary and secondary buttons to make them customizable (Apps-2213) (#247)

Author: Fabtron

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
 

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
+)

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
+                )
+            }
         }
     }
 }

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))
     }
+
 }

ui/src/main/res/layout/snabble_view_payment_status.xml

@@ -285,7 +285,7 @@
 
                 <io.snabble.sdk.ui.remotetheme.SnabblePrimaryButton
                     android:id="@+id/send_feedback"
-                    style="@style/Widget.Material3.Button"
+                    style="@style/Snabble.Widget.MaterialComponents.Button"
                     android:layout_width="match_parent"
                     android:layout_height="wrap_content"
                     android:layout_marginTop="16dp"
@@ -325,7 +325,7 @@
 
         <io.snabble.sdk.ui.remotetheme.SnabblePrimaryButton
             android:id="@+id/back"
-            style="@style/Widget.Material3.Button"
+            style="@style/Snabble.Widget.MaterialComponents.Button"
             android:layout_width="match_parent"
             android:layout_height="wrap_content"
             android:layout_margin="16dp"

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" />
 </RelativeLayout>

ui/src/main/res/values/styles.xml

@@ -49,6 +49,8 @@
 
     <style name="ThemeOverlay.Snabble.CouponDetail.ActivateButtonStyle" parent="Snabble.CouponDetail.ActivateButtonStyle" />
 
+    <style name="ThemeOverlay.Snabble.SecondaryButton" parent="Widget.Material3.Button.TextButton"/>
+
     <style name="Snabble.CouponDetail.AppliedButtonStyle" parent="Widget.Material3.Button">
         <item name="android:layout_width">match_parent</item>
         <item name="android:layout_height">wrap_content</item>