Merge pull request #12425 from wordpress-mobile/issue/unified-login-s…

…ignup-theming-issues Unified Login & Sign-Up: Fix theming-related issues
wordpress-mobile · Jul 13, 2020 · b5f564f · b5f564f
2 parents d7146ba + c14b15d
commit b5f564f
Show file tree

Hide file tree

Showing 14 changed files with 72 additions and 9 deletions.
diff --git a/WordPress/src/main/java/org/wordpress/android/ui/FullScreenDialogFragment.java b/WordPress/src/main/java/org/wordpress/android/ui/FullScreenDialogFragment.java
@@ -18,10 +18,10 @@
 import androidx.annotation.NonNull;
 import androidx.annotation.Nullable;
 import androidx.annotation.StringRes;
+import androidx.annotation.StyleRes;
 import androidx.appcompat.app.ActionBar;
 import androidx.appcompat.app.AppCompatActivity;
 import androidx.appcompat.widget.Toolbar;
-import androidx.core.content.ContextCompat;
 import androidx.core.content.res.ResourcesCompat;
 import androidx.core.view.ViewCompat;
 import androidx.fragment.app.DialogFragment;
@@ -31,6 +31,8 @@
 import androidx.fragment.app.FragmentTransaction;
 
 import org.wordpress.android.R;
+import org.wordpress.android.util.ColorUtils;
+import org.wordpress.android.util.ContextExtensionsKt;
 
 /**
  * A {@link DialogFragment} implementing the full-screen dialog pattern defined in the
@@ -48,12 +50,14 @@ public class FullScreenDialogFragment extends DialogFragment {
     private String mTitle;
     private Toolbar mToolbar;
     private boolean mHideActivityBar;
+    private int mToolbarTheme;
     private int mToolbarColor;
 
     private static final String ARG_ACTION = "ARG_ACTION";
     private static final String ARG_HIDE_ACTIVITY_BAR = "ARG_HIDE_ACTIVITY_BAR";
     private static final String ARG_SUBTITLE = "ARG_SUBTITLE";
     private static final String ARG_TITLE = "ARG_TITLE";
+    private static final String ARG_TOOLBAR_THEME = "ARG_TOOLBAR_THEME";
     private static final String ARG_TOOLBAR_COLOR = "ARG_TOOLBAR_COLOR";
     private static final int ID_ACTION = 1;
 
@@ -98,6 +102,7 @@ private static Bundle setArguments(Builder builder) {
         bundle.putString(ARG_ACTION, builder.mAction);
         bundle.putString(ARG_TITLE, builder.mTitle);
         bundle.putString(ARG_SUBTITLE, builder.mSubtitle);
+        bundle.putInt(ARG_TOOLBAR_THEME, builder.mToolbarTheme);
         bundle.putInt(ARG_TOOLBAR_COLOR, builder.mToolbarColor);
         bundle.putBoolean(ARG_HIDE_ACTIVITY_BAR, builder.mHideActivityBar);
         return bundle;
@@ -251,6 +256,7 @@ private void initBuilderArguments() {
         mAction = bundle.getString(ARG_ACTION);
         mTitle = bundle.getString(ARG_TITLE);
         mSubtitle = bundle.getString(ARG_SUBTITLE);
+        mToolbarTheme = bundle.getInt(ARG_TOOLBAR_THEME);
         mToolbarColor = bundle.getInt(ARG_TOOLBAR_COLOR);
         mHideActivityBar = bundle.getBoolean(ARG_HIDE_ACTIVITY_BAR);
     }
@@ -262,9 +268,17 @@ private void initBuilderArguments() {
      */
     private void initToolbar(View view) {
         mToolbar = view.findViewById(R.id.toolbar_main);
+
+        if (mToolbarTheme > 0) {
+            mToolbar.getContext().setTheme(mToolbarTheme);
+        }
+
+        final Context context = mToolbar.getContext();
+
         mToolbar.setTitle(mTitle);
         mToolbar.setSubtitle(mSubtitle);
-        mToolbar.setNavigationIcon(ContextCompat.getDrawable(view.getContext(), R.drawable.ic_close_white_24dp));
+        mToolbar.setNavigationIcon(ColorUtils.applyTintToDrawable(context, R.drawable.ic_close_white_24dp,
+                ContextExtensionsKt.getColorResIdFromAttribute(context, R.attr.colorControlNormal)));
         mToolbar.setNavigationContentDescription(R.string.close_dialog_button_desc);
         mToolbar.setNavigationOnClickListener(v -> onDismissClicked());
 
@@ -415,6 +429,7 @@ public static class Builder {
         String mSubtitle = "";
         String mTitle = "";
         boolean mHideActivityBar = false;
+        int mToolbarTheme = 0;
         int mToolbarColor = 0;
 
         /**
@@ -530,6 +545,11 @@ public Builder setTitle(@StringRes int textId) {
             return this;
         }
 
+        public Builder setToolbarTheme(@StyleRes int themeId) {
+            this.mToolbarTheme = themeId;
+            return this;
+        }
+
         /**
          * Set {@link FullScreenDialogFragment} toolbar color.
          *

diff --git a/WordPress/src/main/java/org/wordpress/android/ui/accounts/LoginActivity.java b/WordPress/src/main/java/org/wordpress/android/ui/accounts/LoginActivity.java
@@ -133,6 +133,8 @@ protected void onCreate(Bundle savedInstanceState) {
         ((WordPress) getApplication()).component().inject(this);
         super.onCreate(savedInstanceState);
 
+        LoginFlowThemeHelper.injectMissingCustomAttributes(getTheme());
+
         setContentView(R.layout.login_activity);
 
         if (savedInstanceState == null) {

diff --git a/WordPress/src/main/java/org/wordpress/android/ui/accounts/LoginEpilogueActivity.java b/WordPress/src/main/java/org/wordpress/android/ui/accounts/LoginEpilogueActivity.java
@@ -31,6 +31,8 @@ protected void onCreate(Bundle savedInstanceState) {
         super.onCreate(savedInstanceState);
         ((WordPress) getApplication()).component().inject(this);
 
+        LoginFlowThemeHelper.injectMissingCustomAttributes(getTheme());
+
         setContentView(R.layout.login_epilogue_activity);
 
         if (savedInstanceState == null) {

diff --git a/WordPress/src/main/java/org/wordpress/android/ui/accounts/LoginFlowThemeHelper.kt b/WordPress/src/main/java/org/wordpress/android/ui/accounts/LoginFlowThemeHelper.kt
@@ -0,0 +1,17 @@
+package org.wordpress.android.ui.accounts
+
+import android.content.res.Resources
+import org.wordpress.android.R
+
+object LoginFlowThemeHelper {
+    /**
+     * This function should be used by activities that use the LoginFlow theme.
+     * These activities often use components that refer to custom theme attributes defined by the WordPress theme,
+     * but that are missing from the LoginFlow theme. Some examples: wpColorText, wpColorError, wpColorSuccess, etc.
+     * Instead of extending the LoginFlow theme only to include these attributes and having to maintain them in multiple
+     * places, we use this function to "inject" them directly.
+     */
+    @JvmStatic fun injectMissingCustomAttributes(theme: Resources.Theme) {
+        theme.applyStyle(R.style.WordPress_NoActionBar, false)
+    }
+}
diff --git a/WordPress/src/main/java/org/wordpress/android/ui/accounts/PostSignupInterstitialActivity.kt b/WordPress/src/main/java/org/wordpress/android/ui/accounts/PostSignupInterstitialActivity.kt
@@ -24,6 +24,8 @@ class PostSignupInterstitialActivity : LocaleAwareActivity() {
         super.onCreate(savedInstanceState)
         (application as WordPress).component().inject(this)
 
+        LoginFlowThemeHelper.injectMissingCustomAttributes(theme)
+
         setContentView(R.layout.post_signup_interstitial_activity)
 
         viewModel = ViewModelProviders.of(this, viewModelFactory)

diff --git a/WordPress/src/main/java/org/wordpress/android/ui/accounts/SignupEpilogueActivity.java b/WordPress/src/main/java/org/wordpress/android/ui/accounts/SignupEpilogueActivity.java
@@ -30,6 +30,8 @@ protected void onCreate(Bundle savedInstanceState) {
         super.onCreate(savedInstanceState);
         ((WordPress) getApplication()).component().inject(this);
 
+        LoginFlowThemeHelper.injectMissingCustomAttributes(getTheme());
+
         setContentView(R.layout.signup_epilogue_activity);
 
         if (savedInstanceState == null) {

diff --git a/WordPress/src/main/java/org/wordpress/android/ui/accounts/signup/SignupEpilogueFragment.java b/WordPress/src/main/java/org/wordpress/android/ui/accounts/signup/SignupEpilogueFragment.java
@@ -27,6 +27,7 @@
 import androidx.annotation.NonNull;
 import androidx.annotation.Nullable;
 import androidx.appcompat.app.AlertDialog;
+import androidx.appcompat.view.ContextThemeWrapper;
 import androidx.core.widget.NestedScrollView;
 import androidx.core.widget.NestedScrollView.OnScrollChangeListener;
 
@@ -605,6 +606,7 @@ protected void launchDialog() {
         mDialog = new FullScreenDialogFragment.Builder(getContext())
                 .setTitle(R.string.username_changer_title)
                 .setAction(R.string.username_changer_action)
+                .setToolbarTheme(R.style.ThemeOverlay_LoginFlow_Toolbar)
                 .setOnConfirmListener(this)
                 .setOnDismissListener(this)
                 .setContent(UsernameChangerFullScreenDialogFragment.class, bundle)
@@ -703,9 +705,11 @@ protected void showErrorDialogWithCloseButton(String message) {
     }
 
     protected void startCropActivity(Uri uri) {
-        final Context context = getActivity();
+        final Context baseContext = getActivity();
+
+        if (baseContext != null) {
+            final Context context = new ContextThemeWrapper(baseContext, R.style.WordPress_NoActionBar);
 
-        if (context != null) {
             UCrop.Options options = new UCrop.Options();
             options.setShowCropGrid(false);
             options.setStatusBarColor(ContextExtensionsKt.getColorFromAttribute(
@@ -721,7 +725,7 @@ protected void startCropActivity(Uri uri) {
             UCrop.of(uri, Uri.fromFile(new File(context.getCacheDir(), "cropped.jpg")))
                  .withAspectRatio(1, 1)
                  .withOptions(options)
-                 .start(getActivity(), this);
+                 .start(context, this);
         }
     }
 

diff --git a/WordPress/src/main/java/org/wordpress/android/util/ColorUtils.kt b/WordPress/src/main/java/org/wordpress/android/util/ColorUtils.kt
@@ -12,6 +12,7 @@ import androidx.core.graphics.drawable.DrawableCompat
 import androidx.core.widget.ImageViewCompat
 
 object ColorUtils {
+    @JvmStatic
     fun applyTintToDrawable(context: Context, @DrawableRes drawableResId: Int, @ColorRes colorResId: Int): Drawable {
         val drawable = context.resources.getDrawable(drawableResId, context.theme)
         val color = ContextCompat.getColor(context, colorResId)
@@ -20,6 +21,7 @@ object ColorUtils {
         return drawable
     }
 
+    @JvmStatic
     fun setImageResourceWithTint(imageView: ImageView, @DrawableRes drawableResId: Int, @ColorRes colorResId: Int) {
         imageView.setImageDrawable(ContextCompat.getDrawable(imageView.context, drawableResId))
         ImageViewCompat.setImageTintList(

diff --git a/WordPress/src/main/res/drawable/ic_close_white_24dp.xml b/WordPress/src/main/res/drawable/ic_close_white_24dp.xml
@@ -0,0 +1,9 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="24dp"
+    android:height="24dp"
+    android:viewportHeight="24.0"
+    android:viewportWidth="24.0">
+    <path
+        android:fillColor="@android:color/white"
+        android:pathData="M19,6.41L17.59,5 12,10.59 6.41,5 5,6.41 10.59,12 5,17.59 6.41,19 12,13.41 17.59,19 19,17.59 13.41,12z" />
+</vector>
diff --git a/WordPress/src/main/res/layout/username_changer_dialog_fragment.xml b/WordPress/src/main/res/layout/username_changer_dialog_fragment.xml
@@ -29,7 +29,7 @@
             android:paddingTop="@dimen/margin_extra_large"
             android:paddingBottom="@dimen/margin_extra_large"
             android:src="@drawable/ic_search_white_24dp"
-            app:tint="@color/login_on_surface_medium_selector" />
+            app:tint="?attr/wpColorOnSurfaceMedium" />
 
         <com.google.android.material.textfield.TextInputEditText
             android:id="@+id/username"

diff --git a/libs/login/WordPressLoginFlow/src/main/res/color/login_on_background_medium_selector.xml b/libs/login/WordPressLoginFlow/src/main/res/color/login_on_background_medium_selector.xml
@@ -1,5 +1,5 @@
 <?xml version="1.0" encoding="utf-8"?>
 <selector xmlns:android="http://schemas.android.com/apk/res/android">
     <item android:color="@color/material_on_background_disabled" android:state_enabled="false" />
-    <item android:color="@color/material_on_background_emphasis_medium" />
+    <item android:alpha="@dimen/material_emphasis_medium" android:color="?attr/colorOnBackground"/>
 </selector>
diff --git a/libs/login/WordPressLoginFlow/src/main/res/color/login_on_surface_high_selector.xml b/libs/login/WordPressLoginFlow/src/main/res/color/login_on_surface_high_selector.xml
@@ -1,5 +1,5 @@
 <?xml version="1.0" encoding="utf-8"?>
 <selector xmlns:android="http://schemas.android.com/apk/res/android">
     <item android:color="@color/material_on_surface_disabled" android:state_enabled="false" />
-    <item android:color="@color/material_on_surface_emphasis_high_type" />
+    <item android:alpha="@dimen/material_emphasis_high_type" android:color="?attr/colorOnSurface" />
 </selector>
diff --git a/libs/login/WordPressLoginFlow/src/main/res/color/login_on_surface_medium_selector.xml b/libs/login/WordPressLoginFlow/src/main/res/color/login_on_surface_medium_selector.xml
@@ -1,5 +1,5 @@
 <?xml version="1.0" encoding="utf-8"?>
 <selector xmlns:android="http://schemas.android.com/apk/res/android">
     <item android:color="@color/material_on_surface_disabled" android:state_enabled="false" />
-    <item android:color="@color/material_on_surface_emphasis_medium" />
+    <item android:alpha="@dimen/material_emphasis_medium" android:color="?attr/colorOnSurface"/>
 </selector>
diff --git a/libs/login/WordPressLoginFlow/src/main/res/values/themes.xml b/libs/login/WordPressLoginFlow/src/main/res/values/themes.xml
@@ -31,6 +31,9 @@
         <item name="bottomSheetDialogTheme">@style/ThemeOverlay.LoginFlow.BottomSheetDialog</item>
         <item name="appBarLayoutStyle">@style/Widget.LoginFlow.AppBarLayout</item>
         <item name="toolbarStyle">@style/Widget.LoginFlow.Toolbar</item>
+
+        <!-- Makes the toolbar action mode behave correctly on older API levels -->
+        <item name="windowActionModeOverlay">true</item>
     </style>
 
     <!-- Base theme containing attributes that are overridden by the dark theme variant -->