Move me to bottom nav #18606

ravishanker · 2023-06-15T06:57:31Z

Moves Me (avatar) to Bottom Navigation as a fourth tab after Notifications on JP app, and in menu under manage on WP app

Updates MySite Info layout
Updates Me screen layout

Fixes # pcdRpT-2HW-p2#comment-4875, and this discussion p1686812471360099-slack-C04SFL0RP51

Jetpack app

Me at the Bottom	Me Screen	Dark Mode

WordPress app

Me in menu	Me

To test:

Launch Jetpack app, and login
Verify that Me/Avatar doesn't appear at top right hand corner anymore
Verify that Me is in the bottom navigation, next to Notifications
Tap on Me tab
Verify that it goes to Me Screen as before
Launch WordPress app, and login
Verify that Me/Avatar doesn't appear at top right hand corner anymore
Verify that Me is in the menu, under manage category
Tap on Me row
Verify that it goes to Me Screen as before

To-do for later in a separate PR

Replace icons with new ones on Me Screen
Add change photo cta on Me -> My Profile screen if required

Regression Notes

Potential unintended areas of impact
N/A
What I did to test those areas of impact (or what existing automated tests I relied on)
N/A
What automated tests I added (or what prevented me from doing so)
Existing tests

PR submission checklist:

I have completed the Regression Notes.
I have considered adding accessibility improvements for my changes.
I have considered if this change warrants user-facing release notes and have added them to RELEASE-NOTES.txt if necessary.

UI Changes testing checklist:

Portrait and landscape orientations.
Light and dark modes.
Fonts: Larger, smaller and bold text.
High contrast.
Talkback.
Languages with large words or with letters/accents not frequently used in English.
Right-to-left languages. (Even if translation isn’t complete, formatting should still respect the right-to-left layout)
Large and small screen sizes. (Tablet and smaller phones)
Multi-tasking: Split screen and Pop-up view. (Android 10 or higher)

wpmobilebot · 2023-06-15T07:15:57Z

📲 You can test the changes from this Pull Request in WordPress by scanning the QR code below to install the corresponding build.

	App Name	WordPress
	Flavor	Jalapeno
	Build Type	Debug
	Version	pr18606-7b5b2ab
	Commit	`7b5b2ab`
	Direct Download	`wordpress-prototype-build-pr18606-7b5b2ab.apk`

Note: Google Login is not supported on these builds.

wpmobilebot · 2023-06-15T07:17:47Z

📲 You can test the changes from this Pull Request in Jetpack by scanning the QR code below to install the corresponding build.

	App Name	Jetpack
	Flavor	Jalapeno
	Build Type	Debug
	Version	pr18606-7b5b2ab
	Commit	`7b5b2ab`
	Direct Download	`jetpack-prototype-build-pr18606-7b5b2ab.apk`

Note: Google Login is not supported on these builds.

osullivanchris

Sharing per slack the reasons I think this is a good move:

the iA is more 'correct'. Today, 'Me' is inside My Site, which is the opposite of the actual parent/child structure
its more consistent with WordPress.com where the top bar has My Sites, Reader, Me, Notifications
When we merged Me into My Site years ago, My Site was just a menu. Now My Site is more complicated and we have several rows of navigations/information at the top
We're using a lot of vertical space for only one icon
Removing that vertical space aligns the header information on My Site, Reader, Notifications more consistently

Here are a couple of improvements I think we could make. Wouldn't have to do all immediately and some are separate issues. The padding bug is a must fix of course. Then, I think changing the layout of the profile photo and name on 'Me' to match the My Site header would be a big improvement, if I was to pick one change.

Moved Me avatar to Bottom Nav

- Reduce blavatar size from 64 to 40 - Reduce chevron size from 24 to 16

- Update to new header layout similar to My Site - Removed CHANGE PHOTO cta - Updated paddings and margins - clean up

Adjust app_bar_with_site_info_tabs_height from 200 dp to 136dp since Me is removed now

- increase the Site icon on My Site to 56dp - Increase Me icon size to 56dp, and align row icons to Center of Me icon on Me screen

ravishanker · 2023-06-19T00:22:39Z

👋 @ovitrif - I've added you as a reviewer since you're also doing some work in this area. 🙇

ravishanker · 2023-06-19T00:23:48Z

👋 @pachlava - I've added you as this might fail instrumented tests, any other automation stuff. 🙇

AjeshRPai · 2023-06-19T08:17:42Z

Hey @ravishanker 👋🏼

Awesome job on moving me to the bottom nav 🙌🏼 . Sorry for jumping in, but I was doing some changes in the dashboard and noticed this PR.

FYI - On jetpack phase removal four, new users phase and self hosted users phase, we are removing this bottom nav entirely to prevent the access of reader and notifications. you might need to make some changes to show the bottom nav without a reader and notifications but only with me page and my site bottom nav in the above phases.

⚠️ 🐛 I tested this PR and enabled the jp_removal_four flag, and the bottom nav is completely gone. So a user can't access the me page at all. Screenshot below.

I also noticed the padding issue, but I am unsure if that's a WIP. If thats fixed, let me know so I can double-check.

also, There is an issue int the enabling of phase 4 right now which we are trying to fix with #18612,

TO reproduce the issue of the me tab not shown, you can try any of the below scenarios

~~Disable jp_removal_static_posters_phase and enable jp_removal_four~~
~~IF you are testing this scenario after this PR is merged, then just~~ enable jp_removal_four
enable jp_removal_new_users - this phase is rolled out, in this phase notifications and reader is not shown
enable jp_removal_self_hosted_users- this phase is rolled out as well, in this phase notifications and reader is not shown as well

Let me know if you need any help with the changes that need to be done or want more information on this.

osullivanchris · 2023-06-19T11:50:44Z

@AjeshRPai thanks for taking the time to look and highlighting the changes on the WordPress side. That wasn't front in my mind. I'm going to take a look at it. But I think the 'default' solution would be having a tab bar with 2 tabs as you described.

Another approach would be to keep the old layout with 'me' in the My Site navigation bar only for WordPress, but that seems like more differences between the two apps to support and maintain than a tab bar with items which turn on and off...

ravishanker · 2023-06-20T01:36:59Z

Let me know if you need any help with the changes that need to be done or want more information on this.

@AjeshRPai - Thanks for noticing, and flagging this early 🙇 I'll need to make some changes then in the light phase four. I'll add you as a reviewer as well to make sure it all works before and after.

This can be done in two ways

Bottom nav with My Site, and Me
Me under Manage in the menu (ignore profile pic, and padding for now)

Bottom Nav	Manage

ovitrif · 2023-06-20T15:17:23Z

👋 @ovitrif - I've added you as a reviewer since you're also doing some work in this area. 🙇

This is a no-brainer for me, I like it, though as @AjeshRPai shared, there is some overlap with ongoing work to improve the daily development workflow, by optimising and making debug settings easily accessible regardless of logged in/out state.

Then there's also the phase 4, which Chris is aware of.

Thus carry on from my side 🙏🏻 , I'm not needed here since I ended up focusing on crashes and didn't do any Compose refactoring 😅 .

AjeshRPai

Hey @ravishanker

I tested the following scenarios

migration from static posters phase to phase 4| self hosted users phase | new users phase 🟢
- Wordpress app
  - Bottom nav is not shown on phase 4 and me item is shown in menu list 🟢
  - if the user is on me fragment on static posters phase and the app goes to background, when the phase 4 is switched on user is navigated to my site dashboard without bottom nav. 🟢
- Jetpack app
  - no ui changes when user migrates 🟢
if me tab was the last opened tab, when a user opens the app again, me tab is shown 🟢

Minor issues

In wordpress app (static posters phase) me option is show on the menu items as well on bottom nav - as per my understanding it should be shown either on menu items or on bottom nav, correct me if am wrong
in both wp/jp app people icon is a dark circle/white circle

light mode	dark mode

Other than these minor issues, all looks good to me 👍🏼

cc: @zwarm

for letting you about this change on dashboard, in case if you want to test for any regression issues
also for letting you know that I have tested to make sure that there are no regression issues that we fixed for phase 4. mainly 👇🏼
1. Jetpack Focus: Fix the Landing page content being shown multiple times on top of each other #17811
2. Jetpack Focus: Fix landing page content scrolling issue #17828

AjeshRPai · 2023-06-21T08:59:17Z

WordPress/src/main/java/org/wordpress/android/ui/main/WPMainActivity.java

-            } else {
-                mFabTooltip.hide();
-            }
-


👏🏼 thanks for removing this tooltip, ICYMI you can close this issue once this PR is merged
cc: @thomashorta

tiagomar · 2023-06-21T22:57:58Z

Hey @ravishanker, it seems like we could save some vertical space in Landscape mode.

tiagomar · 2023-06-21T23:59:53Z

🐛 When selecting Me tab, TalkBack reads the My Site description.

meTab.mp4

Fix Me item showing on WP in both menu and on bottom nav during static posters phase

ravishanker · 2023-06-22T01:57:28Z

Minor issues

In wordpress app (static posters phase) me option is show on the menu items as well on bottom nav - as per my understanding it should be shown either on menu items or on bottom nav, correct me if am wrong

in both wp/jp app people icon is a dark circle/white circle

👋 @AjeshRPai - Thanks for testing for various phases. Fixed the those minor issues. Please review again. 🙇

ravishanker · 2023-06-22T02:10:24Z

Hey @ravishanker, it seems like we could save some vertical space in Landscape mode.

👋 @tiagomar - This is happening on JP app only in landscape mode right? It is proving difficult fix this due to various feature flags and differences between WP/JP etc. Need to handle separately perhaps afterwards

ravishanker · 2023-06-22T02:13:07Z

🐛 When selecting Me tab, TalkBack reads the My Site description.

meTab.mp4

Me tab is reading the content description correctly. When on Me screen, it is reading the MySite description. Still investigating where that is coming from!

ravishanker · 2023-06-22T02:15:04Z

👋 @pachlava - If you could please take a look at the failing instrumentation tests, if you're back from AFK . 🙇

peril-wordpress-mobile · 2023-06-22T05:54:56Z

	Warnings
⚠️	This PR is assigned to a milestone which is closing in less than 4 days Please, make sure to get it merged by then or assign it to a later expiring milestone
⚠️	PR has more than 300 lines of code changing. Consider splitting into smaller PRs if possible.

Generated by 🚫 dangerJS

pachlava · 2023-06-22T09:20:54Z

I'm taking a look @ravishanker 👋

pachlava · 2023-06-22T10:19:12Z

@ravishanker 👋

A 0db1912 of yours updates the flow to get to the Me screen 👍, however, there remained one thing that also needed an update: a way to go back from Me screen.

Previously, this was done by pressing the back button, since the navbar was not available for Me screen, and it resulted in My site screen being shown. Now, however, pressing back results in the app being minimized. So the back button press had to be replaced with tapping My Sites, which I did in 744b3fe. All the tests passed locally for me, 🤞 for the 🟢 Buildkite.

Apparently, the only place where going back from Me screen was needed, was after running e2eLoginWithSelfHostedAccount. It can be seen from the logs that all the UI tests were failing after this test - since to "log out" from the self-hosted account, we need to open Me screen, see that it's a self-hosted account, and then go back to My sites and delete a site.

tiagomar · 2023-06-22T12:49:10Z

In WordPress app, as long as Me is a tab, we probably want to remove the back arrow on top left corner? It will be needed when Me is moved to Menu though.

Co-authored-by: Ravi <ravi.program@gmail.com> fixes the back button shown on me fragment in wordpress app in static posters phase

# Conflicts: # WordPress/src/main/java/org/wordpress/android/ui/main/MeFragment.kt

AjeshRPai · 2023-06-22T13:26:45Z

Hey @ravishanker

The people icon and the me option in menu is fixed, but I found the same bug as @tiagomar reported here. the back button is visible on wordpress app in static posters phase. In an effort to merge this change before the code freeze on monday and also because your are AFK, I went ahead and fixed it with the commit 60fb503

@zwarm am adding you as a reviewer, once you have reviewed the changes i have done you can go ahead and merge it. 👍🏼

I have tested the jetpack app and wordpress app for all other scenarios, everything looks good to me. 🟢

@tiagomar if you can review it once again, it would be awesome 🙌🏼

zwarm

@AjeshRPai - I've verified the following

The back button does not show in JP/WP when "me" is a tab
The back button shows in WP when "me" is in the menu
👍

@ravishanker @osullivanchris - love this change. 🙇‍♀️

tiagomar · 2023-06-23T18:35:59Z

@tiagomar if you can review it once again, it would be awesome 🙌🏼

It was all good, @AjeshRPai! 👍

Me tab is reading the content description correctly. When on Me screen, it is reading the MySite description. Still investigating where that is coming from!

Yep, I've filed a ticket (#18698 ) for better tracking.

ravishanker added 3 commits June 15, 2023 16:34

Remove Me avatar on MySite

e16e931

Add Me to bottom navigation

6787bbd

Remove AppBar from MeFragment

48aa91e

ravishanker added [Type] Task Low Hanging Fruit labels Jun 15, 2023

ravishanker added this to the 22.7 milestone Jun 15, 2023

ravishanker requested a review from osullivanchris June 15, 2023 06:57

ravishanker self-assigned this Jun 15, 2023

osullivanchris approved these changes Jun 15, 2023

View reviewed changes

ravishanker added 8 commits June 16, 2023 16:36

Move Me avatar to Bottom Nav

155d313

Moved Me avatar to Bottom Nav

Update MySite Info header card

284db60

- Reduce blavatar size from 64 to 40 - Reduce chevron size from 24 to 16

Update Me screen

4c87fba

- Update to new header layout similar to My Site - Removed CHANGE PHOTO cta - Updated paddings and margins - clean up

Remove too tip on FAB

b43b70b

Update dimens.xml

8ff40cd

Adjust app_bar_with_site_info_tabs_height from 200 dp to 136dp since Me is removed now

Merge branch 'trunk' into Move-Me-to-Bottom-Nav

964c54c

Fix detekt reported issues

7bf6e98

Update padding

2b65356

- increase the Site icon on My Site to 56dp - Increase Me icon size to 56dp, and align row icons to Center of Me icon on Me screen

ravishanker requested review from ovitrif and pachlava June 19, 2023 00:17

ravishanker marked this pull request as ready for review June 19, 2023 00:21

Update RELEASE-NOTES.txt

e55cf18

Merge branch 'trunk' into Move-Me-to-Bottom-Nav

03ee4fa

ravishanker requested a review from AjeshRPai June 20, 2023 04:25

ravishanker removed the request for review from ovitrif June 20, 2023 22:43

AjeshRPai suggested changes Jun 21, 2023

View reviewed changes

ravishanker added 2 commits June 22, 2023 11:01

Fix Me item icon for People item

9fff63b

Fix Me item showing up in menu

b4450f8

Fix Me item showing on WP in both menu and on bottom nav during static posters phase

ravishanker requested a review from AjeshRPai June 22, 2023 02:13

Fix test

d870a3e

Updated the flow to get back from Me screen.

744b3fe

AjeshRPai added 2 commits June 22, 2023 18:48

* fix: back button shown on me fragment in wordpress app

60fb503

Co-authored-by: Ravi <ravi.program@gmail.com> fixes the back button shown on me fragment in wordpress app in static posters phase

Merge branch 'trunk' into Move-Me-to-Bottom-Nav

efe5812

# Conflicts: # WordPress/src/main/java/org/wordpress/android/ui/main/MeFragment.kt

AjeshRPai requested a review from zwarm June 22, 2023 13:27

* suppress: lint error

7b5b2ab

AjeshRPai approved these changes Jun 22, 2023

View reviewed changes

zwarm approved these changes Jun 22, 2023

View reviewed changes

zwarm merged commit a86b655 into trunk Jun 22, 2023

zwarm deleted the Move-Me-to-Bottom-Nav branch June 22, 2023 16:09

AjeshRPai mentioned this pull request Jun 22, 2023

[My Site] Remove FAB tooltip #18249

Closed

guarani mentioned this pull request Jul 12, 2023

Move Me to bottom tab bar wordpress-mobile/WordPress-iOS#21079

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Move me to bottom nav #18606

Move me to bottom nav #18606

ravishanker commented Jun 15, 2023 •

edited

Loading

wpmobilebot commented Jun 15, 2023 •

edited

Loading

wpmobilebot commented Jun 15, 2023 •

edited

Loading

osullivanchris left a comment •

edited

Loading

ravishanker commented Jun 19, 2023

ravishanker commented Jun 19, 2023

AjeshRPai commented Jun 19, 2023 •

edited

Loading

osullivanchris commented Jun 19, 2023

ravishanker commented Jun 20, 2023 •

edited

Loading

ovitrif commented Jun 20, 2023 •

edited

Loading

AjeshRPai left a comment

AjeshRPai Jun 21, 2023

tiagomar commented Jun 21, 2023

tiagomar commented Jun 21, 2023

ravishanker commented Jun 22, 2023

ravishanker commented Jun 22, 2023

ravishanker commented Jun 22, 2023

ravishanker commented Jun 22, 2023

peril-wordpress-mobile bot commented Jun 22, 2023 •

edited

Loading

pachlava commented Jun 22, 2023

pachlava commented Jun 22, 2023

tiagomar commented Jun 22, 2023 •

edited

Loading

AjeshRPai commented Jun 22, 2023

zwarm left a comment

tiagomar commented Jun 23, 2023

Move me to bottom nav #18606

Move me to bottom nav #18606

Conversation

ravishanker commented Jun 15, 2023 • edited Loading

To-do for later in a separate PR

Regression Notes

wpmobilebot commented Jun 15, 2023 • edited Loading

wpmobilebot commented Jun 15, 2023 • edited Loading

osullivanchris left a comment • edited Loading

Choose a reason for hiding this comment

ravishanker commented Jun 19, 2023

ravishanker commented Jun 19, 2023

AjeshRPai commented Jun 19, 2023 • edited Loading

osullivanchris commented Jun 19, 2023

ravishanker commented Jun 20, 2023 • edited Loading

ovitrif commented Jun 20, 2023 • edited Loading

AjeshRPai left a comment

Choose a reason for hiding this comment

AjeshRPai Jun 21, 2023

Choose a reason for hiding this comment

tiagomar commented Jun 21, 2023

tiagomar commented Jun 21, 2023

ravishanker commented Jun 22, 2023

ravishanker commented Jun 22, 2023

ravishanker commented Jun 22, 2023

ravishanker commented Jun 22, 2023

peril-wordpress-mobile bot commented Jun 22, 2023 • edited Loading

pachlava commented Jun 22, 2023

pachlava commented Jun 22, 2023

tiagomar commented Jun 22, 2023 • edited Loading

AjeshRPai commented Jun 22, 2023

zwarm left a comment

Choose a reason for hiding this comment

tiagomar commented Jun 23, 2023

ravishanker commented Jun 15, 2023 •

edited

Loading

wpmobilebot commented Jun 15, 2023 •

edited

Loading

wpmobilebot commented Jun 15, 2023 •

edited

Loading

osullivanchris left a comment •

edited

Loading

AjeshRPai commented Jun 19, 2023 •

edited

Loading

ravishanker commented Jun 20, 2023 •

edited

Loading

ovitrif commented Jun 20, 2023 •

edited

Loading

peril-wordpress-mobile bot commented Jun 22, 2023 •

edited

Loading

tiagomar commented Jun 22, 2023 •

edited

Loading