Merge pull request #20180 from wordpress-mobile/hamorillo/gravatar-in…

…fo-ui Add informative Gravatar UI to the profile editing
wordpress-mobile · Feb 19, 2024 · 7f03846 · 7f03846
2 parents 643656f + d53a304
commit 7f03846
Show file tree

Hide file tree

Showing 18 changed files with 345 additions and 54 deletions.
diff --git a/WordPress/src/jetpack/res/drawable-night/ic_logo_plus_gravatar.xml b/WordPress/src/jetpack/res/drawable-night/ic_logo_plus_gravatar.xml
@@ -0,0 +1,28 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    xmlns:tools="http://schemas.android.com/tools"
+    android:width="50dp"
+    android:height="30dp"
+    android:viewportWidth="50"
+    android:viewportHeight="30">
+  <path
+      android:pathData="M14,1L14,1A14,14 0,0 1,28 15L28,15A14,14 0,0 1,14 29L14,29A14,14 0,0 1,0 15L0,15A14,14 0,0 1,14 1z"
+      android:fillColor="#069E08"/>
+  <path
+      android:pathData="M7.002,17.182H13.359V4.501L7.002,17.182Z"
+      android:fillColor="#ffffff"/>
+  <path
+      android:pathData="M14.659,12.816V25.497L21,12.816H14.659Z"
+      android:fillColor="#ffffff"/>
+  <path
+      android:pathData="M35,0.5L35,0.5A14.5,14.5 0,0 1,49.5 15L49.5,15A14.5,14.5 0,0 1,35 29.5L35,29.5A14.5,14.5 0,0 1,20.5 15L20.5,15A14.5,14.5 0,0 1,35 0.5z"
+      android:fillColor="#1D4FC4"/>
+  <path
+      android:strokeWidth="1"
+      android:pathData="M35,0.5L35,0.5A14.5,14.5 0,0 1,49.5 15L49.5,15A14.5,14.5 0,0 1,35 29.5L35,29.5A14.5,14.5 0,0 1,20.5 15L20.5,15A14.5,14.5 0,0 1,35 0.5z"
+      android:fillColor="#00000000"
+      android:strokeColor="#1C1C1E"/>
+  <path
+      android:pathData="M33,6.999V13.999C33,14.53 33.211,15.038 33.586,15.413C33.961,15.788 34.469,15.998 34.999,15.998C35.53,15.998 36.038,15.788 36.413,15.413C36.788,15.038 36.999,14.53 36.999,13.999V9.342C38.226,9.775 39.279,10.595 40,11.678C40.72,12.761 41.069,14.049 40.994,15.348C40.919,16.647 40.424,17.886 39.583,18.879C38.742,19.872 37.601,20.565 36.332,20.853C35.064,21.141 33.736,21.009 32.548,20.477C31.361,19.945 30.379,19.041 29.75,17.902C29.121,16.763 28.88,15.45 29.062,14.162C29.244,12.874 29.84,11.679 30.759,10.759C31.128,10.383 31.334,9.876 31.331,9.348C31.328,8.821 31.118,8.316 30.745,7.943C30.372,7.571 29.867,7.36 29.34,7.357C28.813,7.355 28.306,7.56 27.929,7.929C26.293,9.565 25.275,11.717 25.048,14.02C24.821,16.322 25.4,18.632 26.685,20.556C27.971,22.479 29.883,23.898 32.097,24.569C34.311,25.241 36.69,25.124 38.827,24.239C40.965,23.353 42.729,21.754 43.819,19.714C44.91,17.673 45.259,15.318 44.808,13.049C44.356,10.78 43.132,8.737 41.343,7.27C39.555,5.802 37.313,5 34.999,5C34.469,5 33.961,5.211 33.586,5.586C33.211,5.96 33,6.469 33,6.999Z"
+      android:fillColor="#ffffff"
+      tools:ignore="VectorPath" />
+</vector>
diff --git a/WordPress/src/jetpack/res/drawable/ic_logo_plus_gravatar.xml b/WordPress/src/jetpack/res/drawable/ic_logo_plus_gravatar.xml
@@ -0,0 +1,28 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    xmlns:tools="http://schemas.android.com/tools"
+    android:width="50dp"
+    android:height="30dp"
+    android:viewportWidth="50"
+    android:viewportHeight="30">
+  <path
+      android:pathData="M14,1L14,1A14,14 0,0 1,28 15L28,15A14,14 0,0 1,14 29L14,29A14,14 0,0 1,0 15L0,15A14,14 0,0 1,14 1z"
+      android:fillColor="#069E08"/>
+  <path
+      android:pathData="M7.002,17.182H13.359V4.501L7.002,17.182Z"
+      android:fillColor="#ffffff"/>
+  <path
+      android:pathData="M14.659,12.816V25.497L21,12.816H14.659Z"
+      android:fillColor="#ffffff"/>
+  <path
+      android:pathData="M35,0.5L35,0.5A14.5,14.5 0,0 1,49.5 15L49.5,15A14.5,14.5 0,0 1,35 29.5L35,29.5A14.5,14.5 0,0 1,20.5 15L20.5,15A14.5,14.5 0,0 1,35 0.5z"
+      android:fillColor="#1D4FC4"/>
+  <path
+      android:strokeWidth="1"
+      android:pathData="M35,0.5L35,0.5A14.5,14.5 0,0 1,49.5 15L49.5,15A14.5,14.5 0,0 1,35 29.5L35,29.5A14.5,14.5 0,0 1,20.5 15L20.5,15A14.5,14.5 0,0 1,35 0.5z"
+      android:fillColor="#00000000"
+      android:strokeColor="#ffffff"/>
+  <path
+      android:pathData="M33,6.999V13.999C33,14.53 33.211,15.038 33.586,15.413C33.961,15.788 34.469,15.998 34.999,15.998C35.53,15.998 36.038,15.788 36.413,15.413C36.788,15.038 36.999,14.53 36.999,13.999V9.342C38.226,9.775 39.279,10.595 40,11.678C40.72,12.761 41.069,14.049 40.994,15.348C40.919,16.647 40.424,17.886 39.583,18.879C38.742,19.872 37.601,20.565 36.332,20.853C35.064,21.141 33.736,21.009 32.548,20.477C31.361,19.945 30.379,19.041 29.75,17.902C29.121,16.763 28.88,15.45 29.062,14.162C29.244,12.874 29.84,11.679 30.759,10.759C31.128,10.383 31.334,9.876 31.331,9.348C31.328,8.821 31.118,8.316 30.745,7.943C30.372,7.571 29.867,7.36 29.34,7.357C28.813,7.355 28.306,7.56 27.929,7.929C26.293,9.565 25.275,11.717 25.048,14.02C24.821,16.322 25.4,18.632 26.685,20.556C27.971,22.479 29.883,23.898 32.097,24.569C34.311,25.241 36.69,25.124 38.827,24.239C40.965,23.353 42.729,21.754 43.819,19.714C44.91,17.673 45.259,15.318 44.808,13.049C44.356,10.78 43.132,8.737 41.343,7.27C39.555,5.802 37.313,5 34.999,5C34.469,5 33.961,5.211 33.586,5.586C33.211,5.96 33,6.469 33,6.999Z"
+      android:fillColor="#ffffff"
+      tools:ignore="VectorPath" />
+</vector>
diff --git a/WordPress/src/main/java/org/wordpress/android/ui/main/MeFragment.kt b/WordPress/src/main/java/org/wordpress/android/ui/main/MeFragment.kt
@@ -200,6 +200,12 @@ class MeFragment : Fragment(R.layout.me_fragment), OnScrollToTopListener {
         rowSupport.setOnClickListener {
             ActivityLauncher.viewHelp(requireContext(), ME_SCREEN_HELP, viewModel.getSite(), null)
         }
+        learnMoreAtGravatar.setOnClickListener {
+            ActivityLauncher.openUrlExternal(activity, GRAVATAR_URL)
+        }
+        gravatarSyncView.gravatarSyncButton.setOnClickListener {
+            gravatarSyncView.gravatarSyncContainer.visibility = View.GONE
+        }
 
         if (BuildConfig.IS_JETPACK_APP) meAboutIcon.setImageResource(R.drawable.ic_jetpack_logo_white_24dp)
 
@@ -691,6 +697,7 @@ class MeFragment : Fragment(R.layout.me_fragment), OnScrollToTopListener {
         if (event.success) {
             AnalyticsTracker.track(ME_GRAVATAR_UPLOADED)
             binding?.loadAvatar(event.filePath)
+            binding?.gravatarSyncView?.gravatarSyncContainer?.visibility = View.VISIBLE
         } else {
             ToastUtils.showToast(
                 activity,
@@ -709,6 +716,7 @@ class MeFragment : Fragment(R.layout.me_fragment), OnScrollToTopListener {
     companion object {
         private const val IS_DISCONNECTING = "IS_DISCONNECTING"
         private const val IS_UPDATING_GRAVATAR = "IS_UPDATING_GRAVATAR"
+        private const val GRAVATAR_URL = "https://www.gravatar.com";
         fun newInstance(): MeFragment {
             return MeFragment()
         }

diff --git a/WordPress/src/main/java/org/wordpress/android/ui/prefs/MyProfileFragment.java b/WordPress/src/main/java/org/wordpress/android/ui/prefs/MyProfileFragment.java
@@ -5,6 +5,7 @@
 import android.view.LayoutInflater;
 import android.view.View;
 import android.view.ViewGroup;
+import android.widget.Button;
 import android.widget.TextView;
 
 import androidx.annotation.Nullable;
@@ -37,6 +38,8 @@ public class MyProfileFragment extends Fragment implements TextInputDialogFragme
     private WPTextView mLastName;
     private WPTextView mDisplayName;
     private WPTextView mAboutMe;
+    private Button mGravatarSyncButton;
+    private View mGravatarSyncContainer;
 
     @Inject Dispatcher mDispatcher;
     @Inject AccountStore mAccountStore;
@@ -85,6 +88,8 @@ public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle sa
         mLastName = rootView.findViewById(R.id.last_name);
         mDisplayName = rootView.findViewById(R.id.display_name);
         mAboutMe = rootView.findViewById(R.id.about_me);
+        mGravatarSyncButton = rootView.findViewById(R.id.gravatar_sync_button);
+        mGravatarSyncContainer = rootView.findViewById(R.id.gravatar_sync_container);
 
         rootView.findViewById(R.id.first_name_row).setOnClickListener(
                 createOnClickListener(
@@ -110,6 +115,7 @@ public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle sa
                         getString(R.string.about_me_hint),
                         mAboutMe,
                         true));
+        mGravatarSyncButton.setOnClickListener(v -> mGravatarSyncContainer.setVisibility(View.GONE));
 
         return rootView;
     }
@@ -174,6 +180,7 @@ private void updateMyProfileForLabel(TextView textView) {
         payload.params.put(restParamForTextView(textView), textView.getText().toString());
         mDispatcher.dispatch(AccountActionBuilder.newPushSettingsAction(payload));
         trackSettingsDidChange(restParamForTextView(textView));
+        mGravatarSyncContainer.setVisibility(View.VISIBLE);
     }
 
     private void trackSettingsDidChange(String fieldName) {

diff --git a/WordPress/src/main/res/drawable/bg_wordpress_gravatar_info.xml b/WordPress/src/main/res/drawable/bg_wordpress_gravatar_info.xml
@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="utf-8"?>
+<shape xmlns:android="http://schemas.android.com/apk/res/android"
+    android:shape="rectangle">
+    <solid android:color="?attr/grColorInfoBanner" />
+    <corners android:radius="10dp" />
+</shape>
+
diff --git a/WordPress/src/main/res/drawable/bg_wordpress_gravatar_sync_info.xml b/WordPress/src/main/res/drawable/bg_wordpress_gravatar_sync_info.xml
@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="utf-8"?>
+<shape xmlns:android="http://schemas.android.com/apk/res/android"
+    android:shape="rectangle">
+    <solid android:color="?attr/grColorSyncBanner" />
+    <corners android:radius="10dp" />
+</shape>
+
diff --git a/WordPress/src/main/res/layout/gravatar_sync_info_banner.xml b/WordPress/src/main/res/layout/gravatar_sync_info_banner.xml
@@ -0,0 +1,40 @@
+<?xml version="1.0" encoding="utf-8"?>
+<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
+    xmlns:app="http://schemas.android.com/apk/res-auto"
+    xmlns:tools="http://schemas.android.com/tools"
+    android:id="@+id/gravatar_sync_container"
+    android:layout_width="match_parent"
+    android:layout_height="wrap_content"
+    android:background="@drawable/bg_wordpress_gravatar_sync_info"
+    android:orientation="horizontal"
+    android:paddingBottom="@dimen/margin_extra_small_large"
+    android:paddingStart="@dimen/margin_extra_small_large"
+    android:paddingTop="@dimen/margin_extra_small_large"
+    android:visibility="visible"
+    tools:ignore="RtlSymmetry"
+    tools:visibility="visible">
+
+    <com.google.android.material.button.MaterialButton
+        android:id="@+id/gravatar_sync_button"
+        style="@style/OverlayMigrationHelperText"
+        android:layout_width="wrap_content"
+        android:layout_height="wrap_content"
+        android:text="@string/gravatar_info_sync_done_button"
+        android:textColor="@color/jetpack_green_50"
+        android:textStyle="bold"
+        app:drawableEndCompat="@drawable/ic_external_white_24dp"
+        app:layout_constraintBottom_toBottomOf="parent"
+        app:layout_constraintEnd_toEndOf="parent"
+        app:layout_constraintTop_toTopOf="parent" />
+
+    <org.wordpress.android.widgets.WPTextView
+        android:id="@+id/gravatar_sync_message"
+        style="@style/MyProfileLabel"
+        android:layout_width="0dp"
+        android:text="@string/gravatar_info_sync_message"
+        android:textColor="@color/white"
+        app:layout_constraintEnd_toStartOf="@+id/gravatar_sync_button"
+        app:layout_constraintStart_toStartOf="parent"
+        app:layout_constraintTop_toTopOf="parent" />
+
+</androidx.constraintlayout.widget.ConstraintLayout>
diff --git a/WordPress/src/main/res/layout/me_fragment.xml b/WordPress/src/main/res/layout/me_fragment.xml
@@ -238,7 +238,7 @@
                     android:id="@+id/me_design_system_settings"
                     style="@style/MeListRowTextView"
                     android:text="@string/preference_design_system" />
-                
+
             </LinearLayout>
 
             <View
@@ -396,6 +396,76 @@
                 app:iconTint="@null"
                 tools:ignore="TextContrastCheck"
                 tools:visibility="visible" />
+
+            <LinearLayout
+                android:id="@+id/gravatar_info_container"
+                android:layout_width="match_parent"
+                android:layout_height="wrap_content"
+                android:orientation="vertical"
+                android:paddingHorizontal="@dimen/margin_extra_small_large"
+                android:paddingTop="@dimen/margin_extra_small_large"
+                android:paddingBottom="@dimen/margin_extra_large"
+                android:layout_margin="@dimen/margin_extra_large"
+                android:background="@drawable/bg_wordpress_gravatar_info"
+                app:layout_constraintBottom_toTopOf="@+id/gravatar_sync_container"
+                app:layout_constraintEnd_toEndOf="parent"
+                app:layout_constraintStart_toStartOf="parent">
+
+                <ImageView
+                    android:layout_width="wrap_content"
+                    android:layout_height="wrap_content"
+                    android:importantForAccessibility="no"
+                    android:src="@drawable/ic_logo_plus_gravatar" />
+
+                <org.wordpress.android.widgets.WPTextView
+                    android:id="@+id/gravatar_title"
+                    style="@style/MyProfileLabel"
+                    app:fixWidowWords="true"
+                    android:layout_marginTop="@dimen/margin_extra_large"
+                    android:text="@string/gravatar_info_title"
+                    android:textStyle="bold"/>
+
+                <org.wordpress.android.widgets.WPTextView
+                    android:id="@+id/gravatar_description"
+                    style="@style/MyProfileLabel"
+                    app:fixWidowWords="true"
+                    android:layout_marginTop="@dimen/margin_medium"
+                    android:text="@string/gravatar_info_description" />
+
+                <View
+                    android:id="@+id/divider"
+                    android:layout_width="match_parent"
+                    android:layout_height="1dp"
+                    android:layout_marginBottom="@dimen/margin_medium"
+                    android:layout_marginTop="@dimen/margin_large"
+                    android:background="?android:attr/listDivider"
+                    android:visibility="visible" />
+
+                <com.google.android.material.button.MaterialButton
+                    android:id="@+id/learn_more_at_gravatar"
+                    style="@style/OverlayMigrationHelperText"
+                    android:layout_width="wrap_content"
+                    android:layout_height="wrap_content"
+                    android:text="@string/gravatar_info_learn_more_link"
+                    android:textColor="@color/jetpack_green_50"
+                    app:drawableEndCompat="@drawable/ic_external_white_24dp"
+                    app:icon="@drawable/ic_external_white_24dp" />
+
+            </LinearLayout>
         </LinearLayout>
     </androidx.core.widget.NestedScrollView>
+
+    <include
+        android:id="@+id/gravatar_sync_view"
+        layout="@layout/gravatar_sync_info_banner"
+        android:layout_width="match_parent"
+        android:layout_height="wrap_content"
+        android:layout_marginHorizontal="@dimen/margin_extra_large"
+        android:layout_marginBottom="@dimen/margin_extra_large"
+        android:visibility="gone"
+        android:layout_gravity="bottom"
+        app:layout_constraintBottom_toBottomOf="parent"
+        app:layout_constraintEnd_toEndOf="parent"
+        app:layout_constraintStart_toStartOf="parent"
+        tools:visibility="gone" />
 </androidx.coordinatorlayout.widget.CoordinatorLayout>