Page MenuHomePhabricator

[L] Resizable half-sheet for image recs
Open, MediumPublic

Assigned To
None
Authored By
Mazevedo
Feb 6 2024, 10:19 PM
Referenced Files
F42754532: IMG_0138.PNG
Mar 19 2024, 4:22 PM
F42749227: Mini sheet.png
Mar 19 2024, 11:27 AM
F42749224: Group 21.png
Mar 19 2024, 11:27 AM
F42604829: IMG_3500.PNG
Mar 13 2024, 9:09 PM
F42604840: Group 19.png
Mar 13 2024, 9:09 PM
F42604824: Article page.png
Mar 13 2024, 9:09 PM
F41796995: Screenshot 2024-02-06 at 19.19.59.png
Feb 6 2024, 10:20 PM

Description

Create the resizable bottom half-sheet suggested image task view, according to Figma

Related spike with some findings https://phabricator.wikimedia.org/T355332

Screenshot 2024-02-06 at 19.19.59.png (456×432 px, 122 KB)

Requirements:

  • Default screen has the sheet pulled up halfway.
  • Text behind the sheet is scrollable. Text inside the sheet is scrollable.

Items:

  • Create UI
  • Create view model
  • Caching
Testing

Please test in TestFlight Wikipedia app 7.5.0 (3509).

Event Timeline

Notes on caching:

We'll need to cache all the displayed items so:
1- we don't fetch them again. The API might return an already seen task so that we can send pageIDs we want to exclude from each call since there's no pagination;
2 - use the IDs to fetch the image recommendation data, which is done in a separate API call.

Besides, some lightweight caching of the fetched items can be done for performance purposes, such as fetching the next batch of tasks before the user completes the last image rec task, so there's no delay.

Tsevener renamed this task from [Task] Resizable half-sheet for image recs to [L] Resizable half-sheet for image recs.Feb 15 2024, 6:39 PM

Note - for estimation and development purposes, we're not considering in this task:

  • The tooltips;
  • Any of the toolbar actions;
  • The smallest sheet size in case it's problematic/harder than initially thought;
  • Pushing any other view (gallery view, webview, or next recommendation view).

@OTichonova, we'll have an experimental build for you to review soon, and I'll update the ticket with the number.
We'll need to discuss adaptations for iPad

Hi @OTichonova! Experimental 7.4.9 (90) is the one you can test, tap the notifications icon to access the feature!

@OTichonova new version with RTL updates Experimental 7.4.9 (91)

Hi @Mazevedo, okay thank you for the RTL updates! It is looking great already!

There are a couple of updates listed below ->

  1. My bad but in the beginning I asked if we could have a smaller title size for the sheet and you replied yes but I didn't update the designs in the ticket. Can we use Title 3 bold (20 pts) for the half sheet title?
  1. Could we decrease the image size to be within a 150x150 pts frame (so it matches the designs for alt text?
  1. The background color for behind the 'Yes' 'No' 'Not sure' buttons doesn't seem to show up for me.
  1. The line height/leading for the image header and description seem larger than in the designs. For 'Callout' it should be 21 pts or?
  1. Could a visible drop shadow be added in the black theme for the half sheet (eg. text formatting in the text editor), currently the sheet blends in with the background.
DesignBuildBlack theme
Article page.png (675×391 px, 106 KB)
Group 19.png (807×672 px, 126 KB)
IMG_3500.PNG (1×750 px, 121 KB)

Thanks!

Hey @OTichonova, all items but number 5 are updated: the native Apple component doesn't expose the shadow component, so we can't tweak it in an easy manner that doesn't involve heavy customization.
We have a new build Experimental 7.4.9 (92)

Hi @Mazevedo, okay sounds good, thanks! It's looking great I have 1 small detail and a question.

  1. The area with the buttons at the bottom of the sheet is missing a border (0.5 width, gray300).
  2. Is it possible to drag down to minimize the sheet?
Missing borderCan the sheet become smaller?
Group 21.png (667×632 px, 63 KB)
Mini sheet.png (667×375 px, 31 KB)

Hi @OTichonova

  1. I believe the missing line is an iOS toolbar bug

IMG_0138.PNG (2×1 px, 183 KB)

  1. Unfortunately, The smaller sheet size doesn't come out of the box, and customizing it leads to some weird UI bugs. If it's ok, could we keep only the large and medium sizes (the user can scroll the view behind)?

@Mazevedo PR has been merged to unblock dependent tasks. Please address feedback in a followup PR. https://github.com/wikimedia/wikipedia-ios/pull/4777