For #8643 and #7606 - Changed toolbar picker illustrations according …

…to theme
mozilla-mobile · May 6, 2020 · cde31cf · cde31cf
1 parent 16b7a93
commit cde31cf
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 10 deletions.
diff --git a/...x/home/sessioncontrol/viewholders/onboarding/OnboardingToolbarPositionPickerViewHolder.kt b/...x/home/sessioncontrol/viewholders/onboarding/OnboardingToolbarPositionPickerViewHolder.kt
@@ -6,29 +6,36 @@ package org.mozilla.fenix.home.sessioncontrol.viewholders.onboarding
 
 import android.view.View
 import androidx.recyclerview.widget.RecyclerView
-import kotlinx.android.synthetic.main.onboarding_toolbar_position_picker.view.*
+import kotlinx.android.synthetic.main.onboarding_toolbar_position_picker.view.toolbar_bottom_image
+import kotlinx.android.synthetic.main.onboarding_toolbar_position_picker.view.toolbar_bottom_radio_button
+import kotlinx.android.synthetic.main.onboarding_toolbar_position_picker.view.toolbar_top_image
+import kotlinx.android.synthetic.main.onboarding_toolbar_position_picker.view.toolbar_top_radio_button
 import org.mozilla.fenix.R
 import org.mozilla.fenix.ext.asActivity
 import org.mozilla.fenix.ext.settings
+import org.mozilla.fenix.onboarding.OnboardingRadioButton
 
 class OnboardingToolbarPositionPickerViewHolder(view: View) : RecyclerView.ViewHolder(view) {
 
     init {
         val radioTopToolbar = view.toolbar_top_radio_button
         val radioBottomToolbar = view.toolbar_bottom_radio_button
+        val radio: OnboardingRadioButton
 
         radioTopToolbar.addToRadioGroup(radioBottomToolbar)
         radioBottomToolbar.addToRadioGroup(radioTopToolbar)
 
-        with(view.context.settings()) {
-            val radio = when {
-                this.shouldUseBottomToolbar -> radioBottomToolbar
-                else -> radioTopToolbar
-            }
-            radio.isChecked = true
+        if (view.context.settings().shouldUseBottomToolbar) {
+            radio = radioBottomToolbar
+            setBottomIllustrationSelected()
+        } else {
+            radio = radioTopToolbar
+            setTopIllustrationSelected()
         }
+        radio.isChecked = true
 
         radioBottomToolbar.onClickListener {
+            setBottomIllustrationSelected()
             itemView.context.asActivity()?.recreate()
         }
 
@@ -37,6 +44,7 @@ class OnboardingToolbarPositionPickerViewHolder(view: View) : RecyclerView.ViewH
         }
 
         radioTopToolbar.onClickListener {
+            setTopIllustrationSelected()
             itemView.context.asActivity()?.recreate()
         }
 
@@ -45,6 +53,16 @@ class OnboardingToolbarPositionPickerViewHolder(view: View) : RecyclerView.ViewH
         }
     }
 
+    private fun setTopIllustrationSelected() {
+        itemView.toolbar_top_image.isSelected = true
+        itemView.toolbar_bottom_image.isSelected = false
+    }
+
+    private fun setBottomIllustrationSelected() {
+        itemView.toolbar_top_image.isSelected = false
+        itemView.toolbar_bottom_image.isSelected = true
+    }
+
     companion object {
         const val LAYOUT_ID = R.layout.onboarding_toolbar_position_picker
     }

diff --git a/app/src/main/res/layout/onboarding_toolbar_position_picker.xml b/app/src/main/res/layout/onboarding_toolbar_position_picker.xml
@@ -7,8 +7,7 @@
     android:id="@+id/onboarding_card"
     android:layout_width="match_parent"
     android:layout_height="wrap_content"
-    android:layout_marginBottom="16dp"
-    android:background="@drawable/onboarding_card_background_light"
+    style="@style/OnboardingCardLight"
     android:paddingTop="16dp"
     android:paddingBottom="16dp">
 
@@ -57,8 +56,9 @@
         android:translationX="@dimen/onboarding_dual_pane_radio_button_translation_x"
         android:translationY="@dimen/onboarding_dual_pane_radio_button_translation_y"
         app:layout_constraintStart_toStartOf="@+id/toolbar_top_image"
-        app:layout_constraintTop_toTopOf="@+id/toolbar_top_image"
         app:layout_constraintTop_toBottomOf="@+id/description_text"
+        app:layout_constraintTop_toTopOf="@+id/toolbar_top_image"
+        android:buttonTint="@color/onboarding_radio_button_color"
         app:onboardingKey="@string/pref_key_toolbar_top" />
 
     <ImageButton
@@ -86,6 +86,7 @@
         app:layout_constraintStart_toStartOf="@+id/toolbar_bottom_image"
         app:layout_constraintTop_toTopOf="@+id/toolbar_bottom_image"
         app:layout_constraintTop_toBottomOf="@+id/description_text"
+        android:buttonTint="@color/onboarding_radio_button_color"
         app:onboardingKey="@string/pref_key_toolbar_bottom" />
 
     <ImageButton