Page MenuHomePhabricator

Newcomer tasks: Use Drawer component for mobile UI
Closed, ResolvedPublic

Description

Currently on mobile, the task explanation widget is a popup like on desktop:

It should be a MobileFrontend Drawer component as shown in this mockup, here in Zeplin, and below.

Details

Related Gerrit Patches:
mediawiki/extensions/GrowthExperiments : masterSuggested edits: Lighten the dimming effect on Drawer component
mediawiki/extensions/GrowthExperiments : masterSuggested Edits: Use Drawer component on mobile
mediawiki/extensions/MobileFrontend : masterAdd Drawer to mobile.startup

Event Timeline

MMiller_WMF renamed this task from Newcomer tasks: mobile task explanation widget should be toast to Newcomer tasks: mobile TaskExplanationWidget should be toast.Nov 13 2019, 1:17 AM
MMiller_WMF updated the task description. (Show Details)
RHo renamed this task from Newcomer tasks: mobile TaskExplanationWidget should be toast to Newcomer tasks: mobile TaskExplanationWidget should be bottom sheet.Nov 13 2019, 2:09 PM
RHo updated the task description. (Show Details)
RHo added a comment.Nov 13 2019, 2:12 PM

@MMiller_WMF I changed from toast to bottom sheet or dialog, since "toast" suggests it goes away by itself after some interval, but this dialog/sheet stays until the user taps on the X or outside of it.

Tgr added a comment.Wed, Nov 20, 2:36 AM

@RHo Kosta pointed out elsewhere that the design is similar to the drawer component of MobileFrontend, but when the MF drawer is open, the rest of the page is dimmed (and inaccessible) but in the mockup here the top navigation bar is still accessible. Would it be OK to use the standard drawer UX? Dimming only parts of the page might be complicated even if we use a custom component, and it would be nice to avoid the code duplication.

RHo added a comment.Wed, Nov 20, 11:41 AM

hi @Tgr - yes I have updated the mocks so the nav bar is now also dimmed and we can use the standard drawer component. Thanks!

RHo updated the task description. (Show Details)Wed, Nov 20, 11:41 AM
kostajh triaged this task as High priority.Mon, Nov 25, 12:51 PM

Change 552816 had a related patch set uploaded (by Kosta Harlan; owner: Kosta Harlan):
[mediawiki/extensions/MobileFrontend@master] Add Drawer to mobile.startup

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

Change 552817 had a related patch set uploaded (by Kosta Harlan; owner: Kosta Harlan):
[mediawiki/extensions/GrowthExperiments@master] (wip) Suggested Edits: Use Drawer component on mobile

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

kostajh renamed this task from Newcomer tasks: mobile TaskExplanationWidget should be bottom sheet to Newcomer tasks: Use Drawer component for mobile UI.Mon, Nov 25, 2:29 PM
kostajh updated the task description. (Show Details)

Change 552816 abandoned by Jdlrobson:
Add Drawer to mobile.startup

Reason:
My bad. I see this came before https://gerrit.wikimedia.org/r/#/c/mediawiki/extensions/MobileFrontend/ /552614/ which I've just 2ed. They both achieve the same but the other seems to have the correctly built assets.

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

@RHo the Drawer component uses a down arrow rather than an X, is that OK to use?

RHo added a comment.Tue, Nov 26, 3:14 PM

@RHo the Drawer component uses a down arrow rather than an X, is that OK to use?

Hi @kostajh - for the sake of simplicity I think that's fine.
Unrelated(?): Is there a horizontal scroll happening inside that drawer, and if so can we remove it?

Unrelated(?): Is there a horizontal scroll happening inside that drawer, and if so can we remove it?

You're right that there is horizontal scroll, but it's not caused by the addition of the drawer (it's currently reproducible on beta), so we should probably deal with that in T238280

@RHo how does this look?

As discussed the down arrow is used in place of the X. The heading seems to be slightly different from the mock, and the link doesn't have an underline as in the mock. Do you want any adjustments to those?

RHo added a comment.Wed, Nov 27, 12:34 PM

@RHo how does this look?


As discussed the down arrow is used in place of the X. The heading seems to be slightly different from the mock, and the link doesn't have an underline as in the mock. Do you want any adjustments to those?

Thanks for the changes @kostajh - It's ok for the link to not have the underline, but the title should be a bit larger and the same size as the article title in the card (16px) on mobile – but it's a little hard to tell if because that is still requiring some UI tweaks noted on T238280. Similarly the slightly misaligned baseline for the MEDIUM tag text and the time on task ("15 - 20 minutes") text may be resolved on that task.

Thanks for the changes @kostajh - It's ok for the link to not have the underline, but the title should be a bit larger and the same size as the article title in the card (16px) on mobile – but it's a little hard to tell if because that is still requiring some UI tweaks noted on T238280.

From what I can tell, the task type label with is already 16px, while the article title is 19.2px. Do you want the "Find references" to also be 19.2px?

Similarly the slightly misaligned baseline for the MEDIUM tag text and the time on task ("15 - 20 minutes") text may be resolved on that task.

Agreed, let's deal with that in a separate task.

RHo added a comment.Wed, Nov 27, 4:12 PM

Thanks for the changes @kostajh - It's ok for the link to not have the underline, but the title should be a bit larger and the same size as the article title in the card (16px) on mobile – but it's a little hard to tell if because that is still requiring some UI tweaks noted on T238280.

From what I can tell, the task type label with is already 16px, while the article title is 19.2px. Do you want the "Find references" to also be 19.2px?

Ah the article title should be 16px on mobile (same as the task type label) as per the Zeplin http://zpl.io/2ZmBXqq so it's only article title that needs to be fixed on T238280. This should be good then, thanks!

Change 552817 merged by jenkins-bot:
[mediawiki/extensions/GrowthExperiments@master] Suggested Edits: Use Drawer component on mobile

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

For @RHo review - functionality-wise, all seem to be in place.

  • is the dimming a little bit too strong?

RHo added a comment.Mon, Dec 9, 6:55 PM

Thanks @Etonkovidova - yes, you're right, the dimming expected is a white overlay @ 50% opacity, but this is using rgba(0,0,0,.8) @ opacity:50%.

@kostajh – is this effortful to customize? Would be good if this is relatively easy to change so it seems less 'heavy' an interaction.

^ That's what it looks like with a white background. I can push a patch for it, but is it a problem that this component is then inconsistent in appearance from the other Drawer component implementations?

Change 556058 had a related patch set uploaded (by Kosta Harlan; owner: Kosta Harlan):
[mediawiki/extensions/GrowthExperiments@master] Suggested edits: Lighten the dimming effect on Drawer component

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

RHo added a comment.Mon, Dec 9, 9:22 PM


^ That's what it looks like with a white background. I can push a patch for it, but is it a problem that this component is then inconsistent in appearance from the other Drawer component implementations?

Hmmm, I've thought about it and agree that on balance it is better to keep the semi-transparent black for consistency with other mobile drawers (like when tapping on references on articles). Sorry for the runaround!

Change 556058 abandoned by Kosta Harlan:
Suggested edits: Lighten the dimming effect on Drawer component

Reason:
Per T238164#5725842

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

No worries! I've abandoned the patch.

MMiller_WMF closed this task as Resolved.Wed, Dec 11, 12:47 AM

Thank you! I think it looks good!