Skip to content

Commit 7f03846

Browse files
maxmemaxme
authored
Merge pull request #20180 from wordpress-mobile/hamorillo/gravatar-info-ui
Add informative Gravatar UI to the profile editing
2 parents 643656f + d53a304 commit 7f03846

File tree

18 files changed

+345
-54
lines changed

18 files changed

+345
-54
lines changed

‎WordPress/src/jetpack/res/drawable-night/ic_logo_plus_gravatar.xml‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
<vector xmlns:android="http://schemas.android.com/apk/res/android"
2+
xmlns:tools="http://schemas.android.com/tools"
3+
android:width="50dp"
4+
android:height="30dp"
5+
android:viewportWidth="50"
6+
android:viewportHeight="30">
7+
<path
8+
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"
9+
android:fillColor="#069E08"/>
10+
<path
11+
android:pathData="M7.002,17.182H13.359V4.501L7.002,17.182Z"
12+
android:fillColor="#ffffff"/>
13+
<path
14+
android:pathData="M14.659,12.816V25.497L21,12.816H14.659Z"
15+
android:fillColor="#ffffff"/>
16+
<path
17+
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"
18+
android:fillColor="#1D4FC4"/>
19+
<path
20+
android:strokeWidth="1"
21+
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"
22+
android:fillColor="#00000000"
23+
android:strokeColor="#1C1C1E"/>
24+
<path
25+
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"
26+
android:fillColor="#ffffff"
27+
tools:ignore="VectorPath" />
28+
</vector>

‎WordPress/src/jetpack/res/drawable/ic_logo_plus_gravatar.xml‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
<vector xmlns:android="http://schemas.android.com/apk/res/android"
2+
xmlns:tools="http://schemas.android.com/tools"
3+
android:width="50dp"
4+
android:height="30dp"
5+
android:viewportWidth="50"
6+
android:viewportHeight="30">
7+
<path
8+
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"
9+
android:fillColor="#069E08"/>
10+
<path
11+
android:pathData="M7.002,17.182H13.359V4.501L7.002,17.182Z"
12+
android:fillColor="#ffffff"/>
13+
<path
14+
android:pathData="M14.659,12.816V25.497L21,12.816H14.659Z"
15+
android:fillColor="#ffffff"/>
16+
<path
17+
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"
18+
android:fillColor="#1D4FC4"/>
19+
<path
20+
android:strokeWidth="1"
21+
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"
22+
android:fillColor="#00000000"
23+
android:strokeColor="#ffffff"/>
24+
<path
25+
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"
26+
android:fillColor="#ffffff"
27+
tools:ignore="VectorPath" />
28+
</vector>

‎WordPress/src/main/java/org/wordpress/android/ui/main/MeFragment.kt‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -200,6 +200,12 @@ class MeFragment : Fragment(R.layout.me_fragment), OnScrollToTopListener {
200200
rowSupport.setOnClickListener {
201201
ActivityLauncher.viewHelp(requireContext(), ME_SCREEN_HELP, viewModel.getSite(), null)
202202
}
203+
learnMoreAtGravatar.setOnClickListener {
204+
ActivityLauncher.openUrlExternal(activity, GRAVATAR_URL)
205+
}
206+
gravatarSyncView.gravatarSyncButton.setOnClickListener {
207+
gravatarSyncView.gravatarSyncContainer.visibility = View.GONE
208+
}
203209

204210
if (BuildConfig.IS_JETPACK_APP) meAboutIcon.setImageResource(R.drawable.ic_jetpack_logo_white_24dp)
205211

@@ -691,6 +697,7 @@ class MeFragment : Fragment(R.layout.me_fragment), OnScrollToTopListener {
691697
if (event.success) {
692698
AnalyticsTracker.track(ME_GRAVATAR_UPLOADED)
693699
binding?.loadAvatar(event.filePath)
700+
binding?.gravatarSyncView?.gravatarSyncContainer?.visibility = View.VISIBLE
694701
} else {
695702
ToastUtils.showToast(
696703
activity,
@@ -709,6 +716,7 @@ class MeFragment : Fragment(R.layout.me_fragment), OnScrollToTopListener {
709716
companion object {
710717
private const val IS_DISCONNECTING = "IS_DISCONNECTING"
711718
private const val IS_UPDATING_GRAVATAR = "IS_UPDATING_GRAVATAR"
719+
private const val GRAVATAR_URL = "https://www.gravatar.com";
712720
fun newInstance(): MeFragment {
713721
return MeFragment()
714722
}

‎WordPress/src/main/java/org/wordpress/android/ui/prefs/MyProfileFragment.java‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@
55
import android.view.LayoutInflater;
66
import android.view.View;
77
import android.view.ViewGroup;
8+
import android.widget.Button;
89
import android.widget.TextView;
910

1011
import androidx.annotation.Nullable;
@@ -37,6 +38,8 @@ public class MyProfileFragment extends Fragment implements TextInputDialogFragme
3738
private WPTextView mLastName;
3839
private WPTextView mDisplayName;
3940
private WPTextView mAboutMe;
41+
private Button mGravatarSyncButton;
42+
private View mGravatarSyncContainer;
4043

4144
@Inject Dispatcher mDispatcher;
4245
@Inject AccountStore mAccountStore;
@@ -85,6 +88,8 @@ public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle sa
8588
mLastName = rootView.findViewById(R.id.last_name);
8689
mDisplayName = rootView.findViewById(R.id.display_name);
8790
mAboutMe = rootView.findViewById(R.id.about_me);
91+
mGravatarSyncButton = rootView.findViewById(R.id.gravatar_sync_button);
92+
mGravatarSyncContainer = rootView.findViewById(R.id.gravatar_sync_container);
8893

8994
rootView.findViewById(R.id.first_name_row).setOnClickListener(
9095
createOnClickListener(
@@ -110,6 +115,7 @@ public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle sa
110115
getString(R.string.about_me_hint),
111116
mAboutMe,
112117
true));
118+
mGravatarSyncButton.setOnClickListener(v -> mGravatarSyncContainer.setVisibility(View.GONE));
113119

114120
return rootView;
115121
}
@@ -174,6 +180,7 @@ private void updateMyProfileForLabel(TextView textView) {
174180
payload.params.put(restParamForTextView(textView), textView.getText().toString());
175181
mDispatcher.dispatch(AccountActionBuilder.newPushSettingsAction(payload));
176182
trackSettingsDidChange(restParamForTextView(textView));
183+
mGravatarSyncContainer.setVisibility(View.VISIBLE);
177184
}
178185

179186
private void trackSettingsDidChange(String fieldName) {

‎WordPress/src/main/res/drawable/bg_wordpress_gravatar_info.xml‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
<?xml version="1.0" encoding="utf-8"?>
2+
<shape xmlns:android="http://schemas.android.com/apk/res/android"
3+
android:shape="rectangle">
4+
<solid android:color="?attr/grColorInfoBanner" />
5+
<corners android:radius="10dp" />
6+
</shape>
7+

‎WordPress/src/main/res/drawable/bg_wordpress_gravatar_sync_info.xml‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
<?xml version="1.0" encoding="utf-8"?>
2+
<shape xmlns:android="http://schemas.android.com/apk/res/android"
3+
android:shape="rectangle">
4+
<solid android:color="?attr/grColorSyncBanner" />
5+
<corners android:radius="10dp" />
6+
</shape>
7+

‎WordPress/src/main/res/layout/gravatar_sync_info_banner.xml‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
<?xml version="1.0" encoding="utf-8"?>
2+
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
3+
xmlns:app="http://schemas.android.com/apk/res-auto"
4+
xmlns:tools="http://schemas.android.com/tools"
5+
android:id="@+id/gravatar_sync_container"
6+
android:layout_width="match_parent"
7+
android:layout_height="wrap_content"
8+
android:background="@drawable/bg_wordpress_gravatar_sync_info"
9+
android:orientation="horizontal"
10+
android:paddingBottom="@dimen/margin_extra_small_large"
11+
android:paddingStart="@dimen/margin_extra_small_large"
12+
android:paddingTop="@dimen/margin_extra_small_large"
13+
android:visibility="visible"
14+
tools:ignore="RtlSymmetry"
15+
tools:visibility="visible">
16+
17+
<com.google.android.material.button.MaterialButton
18+
android:id="@+id/gravatar_sync_button"
19+
style="@style/OverlayMigrationHelperText"
20+
android:layout_width="wrap_content"
21+
android:layout_height="wrap_content"
22+
android:text="@string/gravatar_info_sync_done_button"
23+
android:textColor="@color/jetpack_green_50"
24+
android:textStyle="bold"
25+
app:drawableEndCompat="@drawable/ic_external_white_24dp"
26+
app:layout_constraintBottom_toBottomOf="parent"
27+
app:layout_constraintEnd_toEndOf="parent"
28+
app:layout_constraintTop_toTopOf="parent" />
29+
30+
<org.wordpress.android.widgets.WPTextView
31+
android:id="@+id/gravatar_sync_message"
32+
style="@style/MyProfileLabel"
33+
android:layout_width="0dp"
34+
android:text="@string/gravatar_info_sync_message"
35+
android:textColor="@color/white"
36+
app:layout_constraintEnd_toStartOf="@+id/gravatar_sync_button"
37+
app:layout_constraintStart_toStartOf="parent"
38+
app:layout_constraintTop_toTopOf="parent" />
39+
40+
</androidx.constraintlayout.widget.ConstraintLayout>

‎WordPress/src/main/res/layout/me_fragment.xml‎

Lines changed: 71 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -238,7 +238,7 @@
238238
android:id="@+id/me_design_system_settings"
239239
style="@style/MeListRowTextView"
240240
android:text="@string/preference_design_system" />
241-
241+
242242
</LinearLayout>
243243

244244
<View
@@ -396,6 +396,76 @@
396396
app:iconTint="@null"
397397
tools:ignore="TextContrastCheck"
398398
tools:visibility="visible" />
399+
400+
<LinearLayout
401+
android:id="@+id/gravatar_info_container"
402+
android:layout_width="match_parent"
403+
android:layout_height="wrap_content"
404+
android:orientation="vertical"
405+
android:paddingHorizontal="@dimen/margin_extra_small_large"
406+
android:paddingTop="@dimen/margin_extra_small_large"
407+
android:paddingBottom="@dimen/margin_extra_large"
408+
android:layout_margin="@dimen/margin_extra_large"
409+
android:background="@drawable/bg_wordpress_gravatar_info"
410+
app:layout_constraintBottom_toTopOf="@+id/gravatar_sync_container"
411+
app:layout_constraintEnd_toEndOf="parent"
412+
app:layout_constraintStart_toStartOf="parent">
413+
414+
<ImageView
415+
android:layout_width="wrap_content"
416+
android:layout_height="wrap_content"
417+
android:importantForAccessibility="no"
418+
android:src="@drawable/ic_logo_plus_gravatar" />
419+
420+
<org.wordpress.android.widgets.WPTextView
421+
android:id="@+id/gravatar_title"
422+
style="@style/MyProfileLabel"
423+
app:fixWidowWords="true"
424+
android:layout_marginTop="@dimen/margin_extra_large"
425+
android:text="@string/gravatar_info_title"
426+
android:textStyle="bold"/>
427+
428+
<org.wordpress.android.widgets.WPTextView
429+
android:id="@+id/gravatar_description"
430+
style="@style/MyProfileLabel"
431+
app:fixWidowWords="true"
432+
android:layout_marginTop="@dimen/margin_medium"
433+
android:text="@string/gravatar_info_description" />
434+
435+
<View
436+
android:id="@+id/divider"
437+
android:layout_width="match_parent"
438+
android:layout_height="1dp"
439+
android:layout_marginBottom="@dimen/margin_medium"
440+
android:layout_marginTop="@dimen/margin_large"
441+
android:background="?android:attr/listDivider"
442+
android:visibility="visible" />
443+
444+
<com.google.android.material.button.MaterialButton
445+
android:id="@+id/learn_more_at_gravatar"
446+
style="@style/OverlayMigrationHelperText"
447+
android:layout_width="wrap_content"
448+
android:layout_height="wrap_content"
449+
android:text="@string/gravatar_info_learn_more_link"
450+
android:textColor="@color/jetpack_green_50"
451+
app:drawableEndCompat="@drawable/ic_external_white_24dp"
452+
app:icon="@drawable/ic_external_white_24dp" />
453+
454+
</LinearLayout>
399455
</LinearLayout>
400456
</androidx.core.widget.NestedScrollView>
457+
458+
<include
459+
android:id="@+id/gravatar_sync_view"
460+
layout="@layout/gravatar_sync_info_banner"
461+
android:layout_width="match_parent"
462+
android:layout_height="wrap_content"
463+
android:layout_marginHorizontal="@dimen/margin_extra_large"
464+
android:layout_marginBottom="@dimen/margin_extra_large"
465+
android:visibility="gone"
466+
android:layout_gravity="bottom"
467+
app:layout_constraintBottom_toBottomOf="parent"
468+
app:layout_constraintEnd_toEndOf="parent"
469+
app:layout_constraintStart_toStartOf="parent"
470+
tools:visibility="gone" />
401471
</androidx.coordinatorlayout.widget.CoordinatorLayout>

0 commit comments

Comments
 (0)