For #8643 and #7606 - Changed theme picker illustrations according to…

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

Hide file tree

Showing 2 changed files with 43 additions and 7 deletions.
diff --git a/...zilla/fenix/home/sessioncontrol/viewholders/onboarding/OnboardingThemePickerViewHolder.kt b/...zilla/fenix/home/sessioncontrol/viewholders/onboarding/OnboardingThemePickerViewHolder.kt
@@ -9,11 +9,17 @@ import android.os.Build.VERSION.SDK_INT
 import android.view.View
 import androidx.appcompat.app.AppCompatDelegate
 import androidx.recyclerview.widget.RecyclerView
-import kotlinx.android.synthetic.main.onboarding_theme_picker.view.*
+import kotlinx.android.synthetic.main.onboarding_theme_picker.view.clickable_region_automatic
+import kotlinx.android.synthetic.main.onboarding_theme_picker.view.theme_automatic_radio_button
+import kotlinx.android.synthetic.main.onboarding_theme_picker.view.theme_dark_image
+import kotlinx.android.synthetic.main.onboarding_theme_picker.view.theme_dark_radio_button
+import kotlinx.android.synthetic.main.onboarding_theme_picker.view.theme_light_image
+import kotlinx.android.synthetic.main.onboarding_theme_picker.view.theme_light_radio_button
 import org.mozilla.fenix.R
 import org.mozilla.fenix.components.metrics.Event
 import org.mozilla.fenix.ext.components
 import org.mozilla.fenix.ext.settings
+import org.mozilla.fenix.onboarding.OnboardingRadioButton
 
 class OnboardingThemePickerViewHolder(view: View) : RecyclerView.ViewHolder(view) {
 
@@ -54,10 +60,12 @@ class OnboardingThemePickerViewHolder(view: View) : RecyclerView.ViewHolder(view
         }
 
         radioLightTheme.onClickListener {
+            setLightIllustrationSelected()
             setNewTheme(AppCompatDelegate.MODE_NIGHT_NO)
         }
 
         radioDarkTheme.onClickListener {
+            setDarkIllustrationSelected()
             view.context.components.analytics.metrics.track(
                 Event.DarkThemeSelected(
                     Event.DarkThemeSelected.Source.ONBOARDING
@@ -67,6 +75,7 @@ class OnboardingThemePickerViewHolder(view: View) : RecyclerView.ViewHolder(view
         }
 
         radioFollowDeviceTheme.onClickListener {
+            setNoIllustrationSelected()
             if (SDK_INT >= Build.VERSION_CODES.P) {
                 setNewTheme(AppCompatDelegate.MODE_NIGHT_FOLLOW_SYSTEM)
             } else {
@@ -75,15 +84,40 @@ class OnboardingThemePickerViewHolder(view: View) : RecyclerView.ViewHolder(view
         }
 
         with(view.context.settings()) {
-            val radio = when {
-                this.shouldUseLightTheme -> radioLightTheme
-                this.shouldUseDarkTheme -> radioDarkTheme
-                else -> radioFollowDeviceTheme
+            val radio: OnboardingRadioButton
+            when {
+                shouldUseLightTheme -> {
+                    radio = radioLightTheme
+                    setLightIllustrationSelected()
+                }
+                shouldUseDarkTheme -> {
+                    radio = radioDarkTheme
+                    setDarkIllustrationSelected()
+                }
+                else -> {
+                    radio = radioFollowDeviceTheme
+                    setNoIllustrationSelected()
+                }
             }
             radio.isChecked = true
         }
     }
 
+    private fun setNoIllustrationSelected() {
+        itemView.theme_dark_image.isSelected = false
+        itemView.theme_light_image.isSelected = false
+    }
+
+    private fun setDarkIllustrationSelected() {
+        itemView.theme_dark_image.isSelected = true
+        itemView.theme_light_image.isSelected = false
+    }
+
+    private fun setLightIllustrationSelected() {
+        itemView.theme_dark_image.isSelected = false
+        itemView.theme_light_image.isSelected = true
+    }
+
     private fun setNewTheme(mode: Int) {
         if (AppCompatDelegate.getDefaultNightMode() == mode) return
         AppCompatDelegate.setDefaultNightMode(mode)

diff --git a/app/src/main/res/layout/onboarding_theme_picker.xml b/app/src/main/res/layout/onboarding_theme_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">
 
     <TextView
@@ -56,6 +55,7 @@
         android:translationY="@dimen/onboarding_dual_pane_radio_button_translation_y"
         app:layout_constraintStart_toStartOf="@+id/theme_light_image"
         app:layout_constraintTop_toTopOf="@+id/theme_light_image"
+        android:buttonTint="@color/onboarding_radio_button_color"
         app:onboardingKey="@string/pref_key_light_theme" />
 
     <ImageButton
@@ -82,6 +82,7 @@
         android:translationY="@dimen/onboarding_dual_pane_radio_button_translation_y"
         app:layout_constraintStart_toStartOf="@+id/theme_dark_image"
         app:layout_constraintTop_toTopOf="@+id/theme_dark_image"
+        android:buttonTint="@color/onboarding_radio_button_color"
         app:onboardingKey="@string/pref_key_dark_theme" />
 
     <ImageButton
@@ -145,6 +146,7 @@
         app:layout_constraintBottom_toBottomOf="parent"
         app:layout_constraintStart_toStartOf="parent"
         app:layout_constraintTop_toBottomOf="@+id/divider"
+        android:buttonTint="@color/onboarding_radio_button_color"
         app:onboardingKey="@string/pref_key_follow_device_theme" />
 
     <TextView