Page MenuHomePhabricator

Remove Explore feed overflow and place options in a side drawer
Closed, ResolvedPublic2 Estimated Story Points

Assigned To
Authored By
RHo
Jun 13 2018, 11:33 AM
Referenced Files
F26308275: T197100 Logged In.png
Oct 4 2018, 4:49 PM
F26308279: T197100 Logged Out.png
Oct 4 2018, 4:49 PM
F24771909: main-MainActivity-08102018171058.png
Aug 10 2018, 3:23 PM
F24771884: main-MainActivity-08102018170952.png
Aug 10 2018, 3:23 PM
F24447181: image.png
Aug 2 2018, 5:20 PM
F24447045: image.png
Aug 2 2018, 5:20 PM
F22180937: image.png
Jun 13 2018, 11:33 AM
F22181125: AQ 02ii Settings logged in.png
Jun 13 2018, 11:33 AM

Description

In both proposed app navigation update designs (T195335 and T196372), the Explore feed overflow is removed, and instead options are placed in a side drawer.

Proposed design
Logged out state
image.png (640×360 px, 51 KB)
Logged in state
AQ 02ii Settings logged in.png (640×360 px, 42 KB)

See Zeplin for redlined mocks

Side drawer opens on swipe right and closes on swiping left.

Event Timeline

Vvjjkkii renamed this task from Remove Explore feed overflow and place options in a side drawer to b4aaaaaaaa.Jul 1 2018, 1:04 AM
Vvjjkkii raised the priority of this task from Medium to High.
Vvjjkkii removed the point value for this task.
Vvjjkkii updated the task description. (Show Details)
Vvjjkkii removed a subscriber: Aklapper.
Sharvaniharan renamed this task from b4aaaaaaaa to Remove Explore feed overflow and place options in a side drawer.Jul 1 2018, 5:52 AM
Sharvaniharan lowered the priority of this task from High to Medium.
Sharvaniharan set the point value for this task to 2.
Sharvaniharan updated the task description. (Show Details)
Sharvaniharan added a subscriber: Aklapper.
cooltey subscribed.

Change 446490 had a related patch set uploaded (by Sharvaniharan; owner: Sharvaniharan):
[apps/android/wikipedia@unified_activity] [WIP]Main Nav Drawer:

https://gerrit.wikimedia.org/r/446490

Change 447093 had a related patch set uploaded (by Dbrant; owner: Dbrant):
[apps/android/wikipedia@unified_activity] Main navigation drawer.

https://gerrit.wikimedia.org/r/447093

Change 446490 abandoned by Sharvaniharan:
Main Nav Drawer:

https://gerrit.wikimedia.org/r/446490

hi @Sharvaniharan - some visual tweaks whilst still in blocked:

Logged out view
Expected
image.png (640×360 px, 51 KB)
Actual (as of 2018-08-02):
image.png (1×1 px, 261 KB)
  • Logged out should show Wikipedia globe
  • Log in / Join Wikipedia call to action should be left align with other menu text at 72dp from LHS edge of screen
Logged in view
Expected
AQ 02ii Settings logged in.png (640×360 px, 42 KB)
Actual (as of 2018-08-02):
image.png (1×1 px, 261 KB)
  • Avatar icon and user name should not be in Primary app color but Material secondary icon/text color (Black@54% in Light mode)
  • Avator icon is larger than expected (should be 40x40dp as per Zeplin)
  • User name should be Roboto Medium font-weight and be aligned to the other menu text at 72dp from LHS edge of screen (Settings, Customize the feed etc)
  • Logout call to action should be left align with other menu text at 72dp from LHS edge of screen

Change 450285 had a related patch set uploaded (by Sharvaniharan; owner: jenkins-bot):
[apps/android/wikipedia@unified_activity] Visual tweaks to explore feed side drawer

https://gerrit.wikimedia.org/r/450285

hi @Dbrant - per conversation with @Charlotte - let's push this to BETA only and monitor usage and feedback.

@RHo Let me know if it looks good here: https://gerrit.wikimedia.org/r/450285

hi @Sharvaniharan - almost there! Just 2 minor things

Expected logged out
image.png (640×360 px, 51 KB)
Actual:
main-MainActivity-08102018170952.png (1×1 px, 183 KB)
  • the Wikipedia Globe and white background is smaller than expected. The size is different to the avator icon size when a user is logged in, please refer to the Zeplin where the Globe is 48x48dp inside a 64x64dp white circle.
Expected logged in
AQ 02ii Settings logged in.png (640×360 px, 42 KB)
Actual:
main-MainActivity-08102018171058.png (1×1 px, 170 KB)
  • Logged in user name should be using the Body 2 Secondary text style, which not only is font-weight Medium, but font-size is 14sp (whereas the Actual looks larger at what appears to be 16sp)

Change 460448 had a related patch set uploaded (by Cooltey; owner: Cooltey):
[apps/android/wikipedia@master] Merge prototype A to main branch: Main nav drawer

https://gerrit.wikimedia.org/r/460448

Restricted Application changed the subtype of this task from "Deadline" to "Task". · View Herald TranscriptSep 13 2018, 10:24 PM

Change 460448 merged by jenkins-bot:
[apps/android/wikipedia@master] Merge prototype A to main branch: Main nav drawer

https://gerrit.wikimedia.org/r/460448

hi @cooltey - just a reminder that the side drawer design in prototype A still needs to have the following visual item fixed (Fix the appearance of the Wikipedia logo)

@RHo Let me know if it looks good here: https://gerrit.wikimedia.org/r/450285

hi @Sharvaniharan - almost there! Just 2 minor things

Expected logged out
image.png (640×360 px, 51 KB)
Actual:
main-MainActivity-08102018170952.png (1×1 px, 183 KB)
  • the Wikipedia Globe and white background is smaller than expected. The size is different to the avator icon size when a user is logged in, please refer to the Zeplin where the Globe is 48x48dp inside a 64x64dp white circle.
Expected logged in
AQ 02ii Settings logged in.png (640×360 px, 42 KB)
Actual:
main-MainActivity-08102018171058.png (1×1 px, 170 KB)
  • Logged in user name should be using the Body 2 Secondary text style, which not only is font-weight Medium, but font-size is 14sp (whereas the Actual looks larger at what appears to be 16sp)

Hi @RHo ,

Thanks for the reminder. I've fixed it and you can see it from the current version of the alpha APK.

@ABorbaWMF Testing on Samsung Galaxy Express 3 SM-J120A (Android 6.0.1) and Wikipedia app 2.7.239-alpha-2018-10-03. I included the two screencaps of the Logged In and Logged Out so it can be decided how much has been fixed. In the case of the Galaxy tapping on the top left hamburger ≡ opened the side drawer in addition to swiping.

T197100 Logged In.png (800×480 px, 46 KB)

T197100 Logged Out.png (800×480 px, 52 KB)