Page MenuHomePhabricator

[S] Update ArticleViewController nav bar in preparation for new profile view
Closed, ResolvedPublic1 Estimated Story Points

Assigned To
None
Authored By
HNordeenWMF
Sep 5 2024, 9:46 PM
Referenced Files
F57589282: IMG_0441.PNG
Oct 4 2024, 7:09 PM
F57589279: IMG_0446.PNG
Oct 4 2024, 7:09 PM
F57589277: IMG_0444.PNG
Oct 4 2024, 7:09 PM
F57589276: IMG_0445.PNG
Oct 4 2024, 7:09 PM
F57589264: Screenshot 2024-10-04 at 2.02.33 PM
Oct 4 2024, 7:09 PM
F57588876: image.png
Oct 4 2024, 4:24 PM

Description

Background

As part of the Navigation refresh, T373712, we are creating a profile view that will be accessible from both article view and the main view for quick access to notifications, watchlist, and other items throughout the entire app.

Requirements
  • Profile icon is accessible from Article view
  • Profile icon is visible to both logged-in and logged-out users, and opens profile menu in either logged-in or logged-out state
  • Profile icon should show "unread" active state when user has unread notifications
  • Make equivalent changes for iPad
  • Displays properly in landscape
Designs

Figma

image.png (1×786 px, 682 KB)
image.png (1×786 px, 61 KB)
Engineering notes

Add profile icon to article nav bar. Add and update profile icon badge using same logic as current Explore feed bell icon badge.

Open app
Navigate to any article
Ensure icon appears in upper righthand corner
Tap icon
Ensure page appears and is dismissable

Event Timeline

Seddon renamed this task from Update ArticleViewController nav bar to [S] Update ArticleViewController nav bar in preparation for new profile view.Sep 6 2024, 12:46 PM
Seddon set the point value for this task to 1.

Hey @GOlson-WMF do both of these icons use the exact size/width definition? I’m asking because the outlines of the profile icons look thicker. Thanks for clarifying.

@scblr

They're using the same image without a specific size being passed, the navigation bar fits it in so they should be the same minus the color

Simulator Screenshot - iPhone 15 Pro - 2024-09-20 at 13.55.33.png (2×1 px, 854 KB)

Simulator Screenshot - iPhone 15 Pro - 2024-09-20 at 13.55.30.png (2×1 px, 987 KB)

Thanks for checking @GOlson-WMF; that is fine then – I’m moving it to the next column.

The profile icon feels quite small in Landscape mode, does this meet touch targets?

image.png (1×2 px, 474 KB)

@HNordeenWMF Yeah I'm not sure why it's so scrunched, but the good news is the tap target is bigger:

Screenshot 2024-10-04 at 2.02.33 PM (455×953 px, 120 KB)

What's interesting is that it isn't scrunched on Article, but Search (which also has a textfield) is also kinda small. My guess is that this was a design decision by previous team iterations to make our custom navigation bar extra-small to accommodate the search bar.

IMG_0445.PNG (1×2 px, 102 KB)

IMG_0444.PNG (1×2 px, 1 MB)

IMG_0446.PNG (1×2 px, 3 MB)

Just an FYI, this would be fixed the with system navigation bar :) (taken from my T363606 prototype branch):

IMG_0441.PNG (1×2 px, 194 KB)

thanks @Tsevener, good to know that the touch target is bigger.
Until we do the system navigation bar, could an in-between fix just be to enlarge the icon? (If so, I can file a task)