Add remote theming toolbar colors (Apps-2062) (#248)

Author: Fabtron

CHANGELOG.md

@@ -5,6 +5,7 @@ All notable changes to this project will be documented in this file.
 ### Added
 ### Changed
 * ui: add new style and theme manager to make primary and secondary buttons customizable (APPS-2213)
+* ui: add new remote colors for toolbar and adjust it accordingly in the checkout activity (APPS-2062)
 ### Removed
 ### Fixed
 

ui/src/main/java/io/snabble/sdk/ui/checkout/CheckoutActivity.kt

@@ -8,6 +8,7 @@ import android.os.Bundle
 import android.view.View
 import android.view.ViewGroup
 import android.view.WindowManager
+import android.widget.FrameLayout
 import androidx.activity.addCallback
 import androidx.appcompat.app.AlertDialog
 import androidx.core.view.ViewCompat
@@ -23,12 +24,15 @@ import androidx.navigation.NavController
 import androidx.navigation.NavGraph
 import androidx.navigation.NavOptions
 import androidx.navigation.fragment.NavHostFragment
+import com.google.android.material.appbar.MaterialToolbar
 import io.snabble.sdk.InitializationState
 import io.snabble.sdk.PaymentMethod
 import io.snabble.sdk.Snabble
 import io.snabble.sdk.checkout.Checkout
 import io.snabble.sdk.checkout.CheckoutState
 import io.snabble.sdk.ui.R
+import io.snabble.sdk.ui.remotetheme.onToolBarColorForProject
+import io.snabble.sdk.ui.remotetheme.toolBarColorForProject
 import io.snabble.sdk.utils.Logger
 
 class CheckoutActivity : FragmentActivity() {
@@ -136,9 +140,24 @@ class CheckoutActivity : FragmentActivity() {
     private fun setUpToolBarAndStatusBar() {
         val showToolBar = resources.getBoolean(R.bool.showToolbarInCheckout)
         findViewById<View>(R.id.checkout_toolbar_spacer)?.isVisible = showToolBar
+
         navController.addOnDestinationChangedListener { _, _, arguments ->
-            findViewById<View>(R.id.checkout_toolbar)?.isVisible = arguments?.getBoolean("showToolbar", false) == true
+            findViewById<View>(R.id.checkout_toolbar)?.isVisible =
+                arguments?.getBoolean("showToolbar", false) == true
+
+            val toolBarColor =
+                this@CheckoutActivity.toolBarColorForProject(Snabble.checkedInProject.value)
+            val onToolBarColor =
+                this@CheckoutActivity.onToolBarColorForProject(Snabble.checkedInProject.value)
+            this.findViewById<MaterialToolbar>(R.id.checkout_toolbar).apply {
+                toolBarColor?.let(::setBackgroundColor)
+                onToolBarColor?.let(::setTitleTextColor)
+            }
+            this.findViewById<FrameLayout>(R.id.checkout_toolbar_spacer).apply {
+                toolBarColor?.let(::setBackgroundColor)
+            }
         }
+
         if (showToolBar) {
             applyInsets()
         }

ui/src/main/java/io/snabble/sdk/ui/remotetheme/RemoteThemingExtensions.kt

@@ -5,8 +5,10 @@ package io.snabble.sdk.ui.remotetheme
 import android.content.Context
 import android.graphics.Color
 import androidx.appcompat.app.AlertDialog
+import com.google.gson.annotations.SerializedName
 import io.snabble.sdk.Project
 import io.snabble.sdk.ui.R
+import io.snabble.sdk.utils.GsonHolder
 import io.snabble.sdk.utils.getColorByAttribute
 
 fun Context.getPrimaryColorForProject(project: Project?): Int {
@@ -72,3 +74,30 @@ fun AlertDialog.changeButtonColorFor(project: Project?): AlertDialog {
     }
     return this
 }
+
+private data class ToolbarColors(
+    @SerializedName("colorAppBar_light") val lightToolbarColor: String?,
+    @SerializedName("colorAppBar_dark") val darkToolbarColor: String?,
+    @SerializedName("colorOnAppBar_light") val lightOnToolbarColor: String?,
+    @SerializedName("colorOnAppBar_dark") val darkOnToolbarColor: String?,
+)
+
+fun Context.toolBarColorForProject(project: Project?): Int? =
+    GsonHolder.get().fromJson(project?.customizationConfig, ToolbarColors::class.java)?.let {
+        val lightColor = it.lightToolbarColor?.asColor()
+        val darkColor = it.darkToolbarColor?.asColor()
+        when {
+            isDarkMode() -> darkColor ?: lightColor
+            else -> lightColor
+        }
+    }
+
+fun Context.onToolBarColorForProject(project: Project?): Int? =
+    GsonHolder.get().fromJson(project?.customizationConfig, ToolbarColors::class.java)?.let {
+        val lightColor = it.lightOnToolbarColor?.asColor()
+        val darkColor = it.darkOnToolbarColor?.asColor()
+        when {
+            isDarkMode() -> darkColor ?: lightColor
+            else -> lightColor
+        }
+    }

ui/src/main/res/drawable/ic_arrow_back.xml

@@ -0,0 +1,12 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="24dp"
+    android:height="24dp"
+    android:autoMirrored="true"
+    android:tint="#000000"
+    android:viewportWidth="24"
+    android:viewportHeight="24">
+
+    <path
+        android:fillColor="@android:color/white"
+        android:pathData="M20,11H7.83l5.59,-5.59L12,4l-8,8 8,8 1.41,-1.41L7.83,13H20v-2z" />
+</vector>