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 · 26156a5 · 26156a5
1 parent 2271079
commit 26156a5
Show file tree

Hide file tree

Showing 9 changed files with 184 additions and 50 deletions.
diff --git a/WordPress/src/jetpack/res/drawable/ic_logo.xml b/WordPress/src/jetpack/res/drawable/ic_logo.xml
@@ -0,0 +1,15 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="80dp"
+    android:height="80dp"
+    android:viewportWidth="80"
+    android:viewportHeight="80">
+  <path
+      android:pathData="M40,40m-40,0a40,40 0,1 1,80 0a40,40 0,1 1,-80 0"
+      android:fillColor="#069E08"/>
+  <path
+      android:pathData="M40,40m-28.23,0a28.23,28.23 0,1 1,56.46 0a28.23,28.23 0,1 1,-56.46 0"
+      android:fillColor="#069E08"/>
+  <path
+      android:pathData="M41.12,58.57V36.04h11.55L41.12,58.57zM38.75,43.8H27.17l11.58,-22.53V43.8zM39.95,16.71c-12.8,0 -23.24,10.41 -23.24,23.24s10.41,23.24 23.24,23.24s23.24,-10.41 23.24,-23.24S52.78,16.71 39.95,16.71z"
+      android:fillColor="#FFFFFF"/>
+</vector>
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,7 @@ 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/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_logo_gravatar.xml b/WordPress/src/main/res/drawable/ic_logo_gravatar.xml
@@ -0,0 +1,14 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    xmlns:tools="http://schemas.android.com/tools"
+    android:width="30dp"
+    android:height="30dp"
+    android:viewportWidth="30"
+    android:viewportHeight="30">
+  <path
+      android:pathData="M15,0L15,0A15,15 0,0 1,30 15L30,15A15,15 0,0 1,15 30L15,30A15,15 0,0 1,0 15L0,15A15,15 0,0 1,15 0z"
+      android:fillColor="#1D4FC4"/>
+  <path
+      android:pathData="M13.2,7.799V14.099C13.2,14.576 13.39,15.034 13.727,15.372C14.064,15.709 14.522,15.899 14.999,15.899C15.477,15.899 15.934,15.709 16.272,15.372C16.609,15.034 16.799,14.576 16.799,14.099V9.908C17.903,10.297 18.851,11.035 19.5,12.01C20.148,12.985 20.462,14.144 20.395,15.313C20.327,16.483 19.881,17.598 19.125,18.492C18.368,19.385 17.341,20.009 16.199,20.268C15.057,20.527 13.862,20.409 12.793,19.929C11.725,19.45 10.841,18.637 10.275,17.612C9.709,16.587 9.492,15.405 9.656,14.246C9.819,13.086 10.356,12.012 11.183,11.183C11.516,10.844 11.7,10.388 11.698,9.914C11.695,9.439 11.506,8.985 11.17,8.649C10.835,8.314 10.38,8.124 9.906,8.122C9.431,8.119 8.975,8.304 8.636,8.636C7.164,10.108 6.247,12.046 6.043,14.118C5.839,16.19 6.36,18.269 7.517,20C8.674,21.732 10.395,23.008 12.388,23.612C14.38,24.217 16.521,24.112 18.444,23.315C20.368,22.518 21.956,21.079 22.937,19.242C23.919,17.406 24.233,15.286 23.827,13.244C23.421,11.202 22.319,9.363 20.709,8.043C19.1,6.722 17.082,6 14.999,6C14.522,6 14.064,6.19 13.727,6.527C13.39,6.864 13.2,7.322 13.2,7.799Z"
+      android:fillColor="#ffffff"
+      tools:ignore="VectorPath"/>
+</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,135 @@
 <?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" />
+
+            <LinearLayout
+                android:id="@+id/about_me_row"
+                style="@style/MyProfileRow">
+
+                <org.wordpress.android.widgets.WPTextView
+                    style="@style/MyProfileLabel"
+                    android:text="@string/about_me" />
 
-            <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" />
 
-            <org.wordpress.android.widgets.WPTextView
-                android:id="@+id/about_me"
-                style="@style/MyProfileText" />
+            </LinearLayout>
 
+            <View style="@style/MyProfileDividerView" />
+
+        </LinearLayout>
+    </androidx.core.widget.NestedScrollView>
+
+    <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">
+
+        <LinearLayout
+            android:layout_width="wrap_content"
+            android:layout_height="wrap_content">
+            <ImageView
+                android:layout_width="@dimen/my_profile_gravatar_info_avatar_size"
+                android:layout_height="@dimen/my_profile_gravatar_info_avatar_size"
+                android:importantForAccessibility="no"
+                android:src="@drawable/ic_logo" />
+
+            <ImageView
+                android:layout_width="@dimen/my_profile_gravatar_info_avatar_size"
+                android:layout_height="@dimen/my_profile_gravatar_info_avatar_size"
+                android:layout_marginStart="@dimen/my_profile_gravatar_info_avatars_overlap"
+                android:importantForAccessibility="no"
+                android:src="@drawable/ic_logo_gravatar" />
         </LinearLayout>
 
-        <View style="@style/MyProfileDividerView" />
+        <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/dimens.xml b/WordPress/src/main/res/values/dimens.xml
@@ -763,4 +763,8 @@
     <dimen name="switch_vertical_padding">4dp</dimen>
     <dimen name="post_list_more_button_extra_padding">24dp</dimen>
     <dimen name="navbar_me_icon_padding">4dp</dimen>
+
+    <!-- My Profile Fragment -->
+    <dimen name="my_profile_gravatar_info_avatar_size">30dp</dimen>
+    <dimen name="my_profile_gravatar_info_avatars_overlap">-10dp</dimen>
 </resources>
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>

diff --git a/WordPress/src/wordpress/res/drawable-night/ic_logo.xml b/WordPress/src/wordpress/res/drawable-night/ic_logo.xml
@@ -0,0 +1,15 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    xmlns:tools="http://schemas.android.com/tools"
+    android:width="30dp"
+    android:height="30dp"
+    android:viewportWidth="30"
+    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.849,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"
+      tools:ignore="VectorPath"/>
+</vector>
diff --git a/WordPress/src/wordpress/res/drawable/ic_logo.xml b/WordPress/src/wordpress/res/drawable/ic_logo.xml
@@ -0,0 +1,15 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    xmlns:tools="http://schemas.android.com/tools"
+    android:width="30dp"
+    android:height="30dp"
+    android:viewportWidth="30"
+    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.042,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.849,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"
+      tools:ignore="VectorPath"/>
+</vector>