Page MenuHomePhabricator

[L] Create WMFComponent for new app wide profile view
Closed, ResolvedPublic5 Estimated Story Points

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

Must have

  • Profile view should be dismissible using "Done" or by swiping down
  • Notifications displays an active state if there are unread notifications
  • Supports Dynamic Type
  • Displays well in Landscape mode
  • Create equivalent version for iPad

Nice to have

  • Notifications shows the number of unread notifications
Designs

Figma

image.png (786×1,704 px, 61 KB)
image.png (786×1,704 px, 72 KB)
1. Logged-in view2. Logged-out view
Engineering Notes

Should be SwiftUI view wrapped up in hosting controller (use WMFCanvasViewController or WMFComponentViewController)

  • Should handle both logged in and logged out states, as well as badged or not badged state for notifications center. This info can be passed in via the view model. The view model will be created app-side, and logged in/logged out state will be set by looking at WMFAuthenticationManager. Notifications badge flag will be set by the same logic as the current Explore nav bar bell icon badge.
  • Show list of items. UI should lean on WMFFont and WMFSFSymbolsIcon or WMFIcon. Properly theme using WMFTheme, and ensure UI scales with dynamic type.
  • (Maybe) Add translations (If we have some target wikis)
  • Add logging when tapping sidebar buttons
  • Add logging on sidebar impression (viewDidAppear, onAppear?)

Test notes:

  • Open app, navigate to the profile view
  • Ensure it is properly displaying based on whether or not you're logged in, repeat process after logged out
  • Not all navigational elements work yet

Event Timeline

Seddon renamed this task from Create WMFComponent for profile view to [L] Create WMFComponent for new app wide profile view.Sep 6 2024, 12:44 PM
Seddon set the point value for this task to 5.
Tsevener subscribed.

FYI @HNordeenWMF @GOlson-WMF I moved these requirements over to T374166 (the navigation task).

  • Clicking on notifications, user page (web view), talk page, watchlist, logout, settings, and donate for logged-in users takes you to those locations (not nested within the profile view)
    • The back button should say "Back"
  • If a user chooses to login or logout, they are returned to the page they were on before (profile view does not need to be open)

Thanks @Tsevener for rearranging requirements.

@GOlson-WMF We don't have prepared translations at this point. Please proceed with the normal process where community members can add them gradually through translate extension. (Should only be necessary for the 2 new sentences showing in the logged-out view)

Update: not build 162, latest main :)

Great work so far @GOlson-WMF 👏

1) Notifications icon is visible on the latest main branch. It should be removed as notifications are part of the account modal.

CleanShot 2024-09-19 at 19.16.09.png (1,179×2,556 px, 281 KB)

2) Spacing below username is different than in the designs (too narrow)

ImplementationvsDesign
CleanShot 2024-09-19 at 19.20.15.png (1,179×2,556 px, 173 KB)
image.png (786×1,704 px, 61 KB)

3) Do we have any control over this handlebar? I suggest keeping this visually lightweight by removing the handlebar and only going with the "Done" button. However, we should still allow the swipe-down gesture.

CleanShot 2024-09-19 at 19.25.44.png (1,179×2,556 px, 175 KB)

4) Use filled donate icon in logged-out state of the modal:

Use thisInstead of this
CleanShot 2024-09-19 at 19.39.33.png (786×1,704 px, 78 KB)
IMG_4B3C4A5E1152-1.jpeg (1,179×2,556 px, 177 KB)

5) Would it be possible to provide a screenshot in all four themes for this change first @GOlson-WMF? 👇

  • Globally update the chromeBackground color group from color-white, color-beige100, color-gray700, color-gray700 to color-white, color-beige100, color-gray650, color-gray650
  • Use chromeBackground for the rows and midBackground for the entire view

Background: It feels visually wrong to have a lighter background color for settings in our dark mode(s):

image-2.png (1,179×2,556 px, 152 KB)

Reference: Apple Settings

image-3.png (332×720 px, 79 KB)

Globally update the chromeBackground color group from color-white, color-beige100, color-gray700, color-gray700 to color-white, color-beige100, color-gray650, color-gray650
Use chromeBackground for the rows and midBackground for the entire view

FYI @GOlson-WMF

https://github.com/wikimedia/wikipedia-ios/blob/main/WMFComponents/Sources/WMFComponents/Style/WMFTheme.swift

That's our newer theme class from WMFComponents, and note it doesn't have chromeBackground. You can add it in here as a new group. The only reason it didn't exist before is because we haven't had a new component built in WMFComponents that needed it.

Let me know if you have any questions on this feedback, thanks!

@scblr

It seems as though this is our only option when it comes to padding, if we can select between this or the slightly narrow one I think - @Tsevener check me here please :)

Toni got rid of the notifications icon, I removed the grabber, changed the colors, and updated the icon :)

Let me know if there's anything else! Build 167

Simulator Screenshot - iPhone 15 Pro - 2024-09-20 at 13.47.11.png (1,179×2,556 px, 147 KB)

Simulator Screenshot - iPhone 15 Pro - 2024-09-20 at 13.47.22.png (1,179×2,556 px, 148 KB)

Simulator Screenshot - iPhone 15 Pro - 2024-09-20 at 13.47.47.png (1,179×2,556 px, 147 KB)

Simulator Screenshot - iPhone 15 Pro - 2024-09-20 at 13.47.32.png (1,179×2,556 px, 149 KB)

Thanks @GOlson-WMF – the new colors look perfect now!

1) Let’s go with the narrower version; the new spacing is too big. Something in the middle of the two would have been great.

2) Can the helper text of the items visually align with the icons and the main title (Account)?

Reference: Apple SettingsImplementationDesign
image.png (1,179×2,556 px, 246 KB)
image-1.png (1,179×2,556 px, 179 KB)
CleanShot 2024-09-26 at 15.21.48.png (786×1,704 px, 84 KB)

Globally update the chromeBackground color group from color-white, color-beige100, color-gray700, color-gray700 to color-white, color-beige100, color-gray650, color-gray650
Use chromeBackground for the rows and midBackground for the entire view

FYI @GOlson-WMF

https://github.com/wikimedia/wikipedia-ios/blob/main/WMFComponents/Sources/WMFComponents/Style/WMFTheme.swift

That's our newer theme class from WMFComponents, and note it doesn't have chromeBackground. You can add it in here as a new group. The only reason it didn't exist before is because we haven't had a new component built in WMFComponents that needed it.

Let me know if you have any questions on this feedback, thanks!

@Tsevener – question to keep the Figma library in sync with the code: does that mean we have an additional group now?

If yes, what would be their names in the code? If not (and we only have one group), I’ll refer to it as "Chrome" in the future. Is that fine? Thanks for clarifying.

question to keep the Figma library in sync with the code: does that mean we have an additional group now?

@scblr The old chrome references were updated as well by @GOlson-WMF to show grey650 for dark and black themes, so we still only have one chrome group.

question to keep the Figma library in sync with the code: does that mean we have an additional group now?

@scblr The old chrome references were updated as well by @GOlson-WMF to show grey650 for dark and black themes, so we still only have one chrome group.

Cool, thanks!