Added Gravatar message in "My profile"

Showing the card with the Gravatar info in the My Profile fragment. The card should contain a link to the Gravartar.com website. Design differs between light and dark modes.
wordpress-mobile · Feb 13, 2024 · 1732798 · 1732798
1 parent 2271079
commit 1732798
Show file tree

Hide file tree

Showing 6 changed files with 150 additions and 50 deletions.
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;
@@ -22,6 +23,7 @@
 import org.wordpress.android.fluxc.store.AccountStore;
 import org.wordpress.android.fluxc.store.AccountStore.OnAccountChanged;
 import org.wordpress.android.fluxc.store.AccountStore.PushAccountSettingsPayload;
+import org.wordpress.android.ui.ActivityLauncher;
 import org.wordpress.android.ui.TextInputDialogFragment;
 import org.wordpress.android.util.NetworkUtils;
 import org.wordpress.android.util.ToastUtils;
@@ -37,13 +39,15 @@ public class MyProfileFragment extends Fragment implements TextInputDialogFragme
     private WPTextView mLastName;
     private WPTextView mDisplayName;
     private WPTextView mAboutMe;
+    private Button mLearMoreAtGravatar;
 
     @Inject Dispatcher mDispatcher;
     @Inject AccountStore mAccountStore;
 
     private static final String TRACK_PROPERTY_FIELD_NAME = "field_name";
     private static final String TRACK_PROPERTY_PAGE = "page";
     private static final String TRACK_PROPERTY_PAGE_MY_PROFILE = "my_profile";
+    private static final String GRAVATAR_URL = "https://www.gravatar.com";
 
     public static MyProfileFragment newInstance() {
         return new MyProfileFragment();
@@ -85,6 +89,7 @@ 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);
+        mLearMoreAtGravatar = rootView.findViewById(R.id.learn_more_at_gravatar);
 
         rootView.findViewById(R.id.first_name_row).setOnClickListener(
                 createOnClickListener(
@@ -110,6 +115,9 @@ public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle sa
                         getString(R.string.about_me_hint),
                         mAboutMe,
                         true));
+        mLearMoreAtGravatar.setOnClickListener(v -> {
+            ActivityLauncher.openUrlExternal(getActivity(), GRAVATAR_URL);
+        });
 
         return rootView;
     }

diff --git a/WordPress/src/main/res/drawable-night/ic_wordpress_gravatar.xml b/WordPress/src/main/res/drawable-night/ic_wordpress_gravatar.xml
@@ -0,0 +1,19 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="49dp"
+    android:height="30dp"
+    android:viewportWidth="49"
+    android:viewportHeight="30">
+  <path
+      android:pathData="M14.999,0L14.999,0A14.999,14.999 0,0 1,29.999 14.999L29.999,15.001A14.999,14.999 0,0 1,14.999 30L14.999,30A14.999,14.999 0,0 1,0 15.001L0,14.999A14.999,14.999 0,0 1,14.999 0z"
+      android:fillColor="#ffffff"/>
+  <path
+      android:pathData="M19.068,21.994L21.54,14.847C22,13.692 22.155,12.77 22.155,11.95C22.155,11.653 22.135,11.375 22.1,11.117C22.731,12.268 23.091,13.592 23.091,14.998C23.091,17.983 21.475,20.59 19.068,21.992V21.994ZM16.115,11.206C16.602,11.18 17.04,11.129 17.04,11.129C17.475,11.078 17.424,10.436 16.989,10.462C16.989,10.462 15.68,10.564 14.832,10.564C14.036,10.564 12.701,10.462 12.701,10.462C12.264,10.436 12.213,11.104 12.65,11.129C12.65,11.129 13.063,11.18 13.499,11.206L14.759,14.662L12.988,19.973L10.041,11.204C10.531,11.179 10.967,11.127 10.967,11.127C11.402,11.077 11.351,10.434 10.916,10.46C10.916,10.46 9.607,10.562 8.759,10.562C8.608,10.562 8.428,10.558 8.237,10.553C9.687,8.359 12.173,6.908 15,6.908C17.108,6.908 19.025,7.713 20.463,9.034C20.429,9.032 20.394,9.027 20.36,9.027C19.563,9.027 19.001,9.72 19.001,10.462C19.001,11.129 19.385,11.693 19.798,12.361C20.105,12.899 20.465,13.592 20.465,14.593C20.465,15.286 20.26,16.157 19.848,17.21L19.041,19.907L16.116,11.209V11.206H16.115ZM15,23.092C14.205,23.092 13.439,22.974 12.713,22.763L15.141,15.708L17.63,22.523C17.646,22.563 17.666,22.599 17.688,22.634C16.846,22.929 15.942,23.092 15.001,23.092H15ZM6.908,14.998C6.908,13.825 7.16,12.712 7.608,11.704L11.467,22.281C8.766,20.97 6.908,18.203 6.908,14.998ZM15,6C10.038,6 6,10.038 6,15C6,19.962 10.038,24 15,24C19.961,24 23.999,19.962 23.999,15C23.999,10.038 19.963,6 15,6Z"
+      android:fillColor="#000000"
+      android:fillType="evenOdd"/>
+  <path
+      android:pathData="M34,0L34,0A15,15 0,0 1,49 15L49,15A15,15 0,0 1,34 30L34,30A15,15 0,0 1,19 15L19,15A15,15 0,0 1,34 0z"
+      android:fillColor="#1D4FC4"/>
+  <path
+      android:pathData="M32.2,7.799V14.099C32.2,14.576 32.39,15.034 32.727,15.372C33.064,15.709 33.522,15.899 33.999,15.899C34.477,15.899 34.934,15.709 35.272,15.372C35.609,15.034 35.799,14.576 35.799,14.099V9.908C36.903,10.297 37.851,11.035 38.5,12.01C39.148,12.985 39.462,14.144 39.395,15.313C39.327,16.483 38.881,17.598 38.125,18.492C37.368,19.385 36.341,20.009 35.199,20.268C34.057,20.527 32.862,20.409 31.794,19.929C30.725,19.45 29.841,18.637 29.275,17.612C28.709,16.587 28.492,15.405 28.656,14.246C28.819,13.086 29.356,12.012 30.183,11.183C30.515,10.844 30.7,10.388 30.698,9.914C30.695,9.439 30.506,8.985 30.17,8.649C29.835,8.314 29.38,8.124 28.906,8.122C28.431,8.119 27.975,8.304 27.636,8.636C26.164,10.108 25.247,12.046 25.043,14.118C24.839,16.19 25.36,18.269 26.517,20C27.674,21.732 29.395,23.008 31.388,23.612C33.38,24.217 35.521,24.112 37.444,23.315C39.368,22.518 40.956,21.079 41.937,19.242C42.919,17.406 43.233,15.286 42.827,13.244C42.421,11.202 41.319,9.363 39.709,8.043C38.099,6.722 36.082,6 33.999,6C33.522,6 33.064,6.19 32.727,6.527C32.39,6.864 32.2,7.322 32.2,7.799Z"
+      android:fillColor="#ffffff"/>
+</vector>
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/wpColorSurfaceSecondary" />
+    <corners android:radius="10dp" />
+</shape>
+
diff --git a/WordPress/src/main/res/drawable/ic_wordpress_gravatar.xml b/WordPress/src/main/res/drawable/ic_wordpress_gravatar.xml
@@ -0,0 +1,19 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="49dp"
+    android:height="30dp"
+    android:viewportWidth="49"
+    android:viewportHeight="30">
+  <path
+      android:pathData="M14.999,0L14.999,0A14.999,14.999 0,0 1,29.999 14.999L29.999,15.001A14.999,14.999 0,0 1,14.999 30L14.999,30A14.999,14.999 0,0 1,0 15.001L0,14.999A14.999,14.999 0,0 1,14.999 0z"
+      android:fillColor="#111517"/>
+  <path
+      android:pathData="M19.068,21.994L21.54,14.847C22,13.692 22.155,12.77 22.155,11.95C22.155,11.653 22.135,11.375 22.1,11.117C22.731,12.268 23.091,13.592 23.091,14.998C23.091,17.983 21.475,20.59 19.068,21.992V21.994ZM16.115,11.206C16.602,11.18 17.04,11.129 17.04,11.129C17.475,11.078 17.424,10.436 16.989,10.462C16.989,10.462 15.68,10.564 14.832,10.564C14.036,10.564 12.701,10.462 12.701,10.462C12.264,10.436 12.213,11.104 12.65,11.129C12.65,11.129 13.063,11.18 13.499,11.206L14.759,14.662L12.988,19.973L10.041,11.204C10.531,11.179 10.967,11.127 10.967,11.127C11.402,11.077 11.351,10.434 10.916,10.46C10.916,10.46 9.607,10.562 8.759,10.562C8.608,10.562 8.428,10.558 8.237,10.553C9.687,8.359 12.173,6.908 15,6.908C17.108,6.908 19.025,7.713 20.463,9.034C20.429,9.032 20.394,9.027 20.36,9.027C19.563,9.027 19.001,9.72 19.001,10.462C19.001,11.129 19.385,11.693 19.798,12.361C20.105,12.899 20.465,13.592 20.465,14.593C20.465,15.286 20.26,16.157 19.848,17.21L19.041,19.907L16.116,11.209V11.206H16.115ZM15,23.092C14.205,23.092 13.439,22.974 12.713,22.763L15.141,15.708L17.63,22.523C17.646,22.563 17.666,22.599 17.688,22.634C16.846,22.929 15.942,23.092 15.001,23.092H15ZM6.908,14.998C6.908,13.825 7.16,12.712 7.608,11.704L11.467,22.281C8.766,20.97 6.908,18.203 6.908,14.998ZM15,6C10.038,6 6,10.038 6,15C6,19.962 10.038,24 15,24C19.961,24 23.999,19.962 23.999,15C23.999,10.038 19.963,6 15,6Z"
+      android:fillColor="#ffffff"
+      android:fillType="evenOdd"/>
+  <path
+      android:pathData="M34,0L34,0A15,15 0,0 1,49 15L49,15A15,15 0,0 1,34 30L34,30A15,15 0,0 1,19 15L19,15A15,15 0,0 1,34 0z"
+      android:fillColor="#1D4FC4"/>
+  <path
+      android:pathData="M32.2,7.799V14.099C32.2,14.576 32.39,15.034 32.727,15.372C33.064,15.709 33.522,15.899 33.999,15.899C34.477,15.899 34.934,15.709 35.272,15.372C35.609,15.034 35.799,14.576 35.799,14.099V9.908C36.903,10.297 37.851,11.035 38.5,12.01C39.148,12.985 39.462,14.144 39.395,15.313C39.327,16.483 38.881,17.598 38.125,18.492C37.368,19.385 36.341,20.009 35.199,20.268C34.057,20.527 32.862,20.409 31.794,19.929C30.725,19.45 29.841,18.637 29.275,17.612C28.709,16.587 28.492,15.405 28.656,14.246C28.819,13.086 29.356,12.012 30.183,11.183C30.515,10.844 30.7,10.388 30.698,9.914C30.695,9.439 30.506,8.985 30.17,8.649C29.835,8.314 29.38,8.124 28.906,8.122C28.431,8.119 27.975,8.304 27.636,8.636C26.164,10.108 25.247,12.046 25.043,14.118C24.839,16.19 25.36,18.269 26.517,20C27.674,21.732 29.395,23.008 31.388,23.612C33.38,24.217 35.521,24.112 37.444,23.315C39.368,22.518 40.956,21.079 41.937,19.242C42.919,17.406 43.233,15.286 42.827,13.244C42.421,11.202 41.319,9.363 39.709,8.043C38.099,6.722 36.082,6 33.999,6C33.522,6 33.064,6.19 32.727,6.527C32.39,6.864 32.2,7.322 32.2,7.799Z"
+      android:fillColor="#ffffff"/>
+</vector>
diff --git a/WordPress/src/main/res/layout/my_profile_fragment.xml b/WordPress/src/main/res/layout/my_profile_fragment.xml
@@ -1,79 +1,124 @@
 <?xml version="1.0" encoding="utf-8"?>
-<androidx.core.widget.NestedScrollView xmlns:android="http://schemas.android.com/apk/res/android"
+<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
+    xmlns:app="http://schemas.android.com/apk/res-auto"
     android:layout_width="match_parent"
-    android:layout_height="wrap_content"
-    android:id="@+id/nested_scroll_view">
+    android:layout_height="match_parent">
 
-    <LinearLayout
+    <androidx.core.widget.NestedScrollView
+        android:id="@+id/nested_scroll_view"
         android:layout_width="match_parent"
         android:layout_height="wrap_content"
-        android:orientation="vertical">
+        app:layout_constraintEnd_toEndOf="parent"
+        app:layout_constraintStart_toStartOf="parent"
+        app:layout_constraintTop_toTopOf="parent">
 
         <LinearLayout
-            android:id="@+id/first_name_row"
-            style="@style/MyProfileRow"
-            android:layout_marginTop="@dimen/margin_medium">
+            android:layout_width="match_parent"
+            android:layout_height="wrap_content"
+            android:orientation="vertical">
 
-            <org.wordpress.android.widgets.WPTextView
-                style="@style/MyProfileLabel"
-                android:text="@string/first_name" />
+            <LinearLayout
+                android:id="@+id/first_name_row"
+                style="@style/MyProfileRow"
+                android:layout_marginTop="@dimen/margin_medium">
 
-            <org.wordpress.android.widgets.WPTextView
-                android:id="@+id/first_name"
-                style="@style/MyProfileText"
-                android:text="@string/first_name" />
+                <org.wordpress.android.widgets.WPTextView
+                    style="@style/MyProfileLabel"
+                    android:text="@string/first_name" />
 
-        </LinearLayout>
+                <org.wordpress.android.widgets.WPTextView
+                    android:id="@+id/first_name"
+                    style="@style/MyProfileText"
+                    android:text="@string/first_name" />
 
-        <View style="@style/MyProfileDividerView" />
+            </LinearLayout>
 
-        <LinearLayout
-            android:id="@+id/last_name_row"
-            style="@style/MyProfileRow">
+            <View style="@style/MyProfileDividerView" />
 
-            <org.wordpress.android.widgets.WPTextView
-                style="@style/MyProfileLabel"
-                android:text="@string/last_name" />
+            <LinearLayout
+                android:id="@+id/last_name_row"
+                style="@style/MyProfileRow">
 
-            <org.wordpress.android.widgets.WPTextView
-                android:id="@+id/last_name"
-                style="@style/MyProfileText" />
+                <org.wordpress.android.widgets.WPTextView
+                    style="@style/MyProfileLabel"
+                    android:text="@string/last_name" />
 
-        </LinearLayout>
+                <org.wordpress.android.widgets.WPTextView
+                    android:id="@+id/last_name"
+                    style="@style/MyProfileText" />
 
-        <View style="@style/MyProfileDividerView" />
+            </LinearLayout>
 
-        <LinearLayout
-            android:id="@+id/display_name_row"
-            style="@style/MyProfileRow">
+            <View style="@style/MyProfileDividerView" />
 
-            <org.wordpress.android.widgets.WPTextView
-                style="@style/MyProfileLabel"
-                android:text="@string/public_display_name" />
+            <LinearLayout
+                android:id="@+id/display_name_row"
+                style="@style/MyProfileRow">
 
-            <org.wordpress.android.widgets.WPTextView
-                android:id="@+id/display_name"
-                style="@style/MyProfileText" />
+                <org.wordpress.android.widgets.WPTextView
+                    style="@style/MyProfileLabel"
+                    android:text="@string/public_display_name" />
 
-        </LinearLayout>
+                <org.wordpress.android.widgets.WPTextView
+                    android:id="@+id/display_name"
+                    style="@style/MyProfileText" />
 
-        <View style="@style/MyProfileDividerView" />
+            </LinearLayout>
 
-        <LinearLayout
-            android:id="@+id/about_me_row"
-            style="@style/MyProfileRow">
+            <View style="@style/MyProfileDividerView" />
 
-            <org.wordpress.android.widgets.WPTextView
-                style="@style/MyProfileLabel"
-                android:text="@string/about_me" />
+            <LinearLayout
+                android:id="@+id/about_me_row"
+                style="@style/MyProfileRow">
 
-            <org.wordpress.android.widgets.WPTextView
-                android:id="@+id/about_me"
-                style="@style/MyProfileText" />
+                <org.wordpress.android.widgets.WPTextView
+                    style="@style/MyProfileLabel"
+                    android:text="@string/about_me" />
+
+                <org.wordpress.android.widgets.WPTextView
+                    android:id="@+id/about_me"
+                    style="@style/MyProfileText" />
+
+            </LinearLayout>
+
+            <View style="@style/MyProfileDividerView" />
 
         </LinearLayout>
+    </androidx.core.widget.NestedScrollView>
 
-        <View style="@style/MyProfileDividerView" />
+    <LinearLayout
+        android:layout_width="match_parent"
+        android:layout_height="wrap_content"
+        android:orientation="vertical"
+        android:padding="@dimen/margin_extra_small_large"
+        android:layout_margin="@dimen/margin_extra_large"
+        android:background="@drawable/bg_wordpress_gravatar_info"
+        app:layout_constraintBottom_toBottomOf="parent"
+        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_wordpress_gravatar" />
+
+        <org.wordpress.android.widgets.WPTextView
+            android:id="@+id/gravatar_description"
+            style="@style/MyProfileLabel"
+            android:layout_marginTop="@dimen/margin_extra_large"
+            android:text="@string/gravatar_info_description" />
+
+        <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:layout_marginTop="@dimen/margin_extra_large"
+            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>
-</androidx.core.widget.NestedScrollView>
+</androidx.constraintlayout.widget.ConstraintLayout>
diff --git a/WordPress/src/main/res/values/strings.xml b/WordPress/src/main/res/values/strings.xml
@@ -2869,6 +2869,8 @@
     <string name="premium_upgrades_message">You have active premium upgrades on your site. Please cancel your upgrades prior to deleting your site.</string>
     <string name="show_purchases">Show purchases</string>
     <string name="checking_purchases">Checking purchases</string>
+    <string name="gravatar_info_description">"Gravatar keeps your profile information safe and up to date, automatically syncing any updates made here with your Gravatar profile."</string>
+    <string name="gravatar_info_learn_more_link">Learn more on Gravatar.com</string>
 
     <!--Account Settings-->
     <string name="account_settings">Account Settings</string>