Page MenuHomePhabricator

Can't exit add to collection
Closed, ResolvedPublic2 Story Points

Description

Click watchstar
Decide you don't want to add it to a collection and try to exit - it's not possible.

Clicking outside the overlay should make this disappear.

Add a X icon to upper right of overlay

Details

Related Gerrit Patches:
mediawiki/extensions/Gather : masterAdd close icon to the collections content overlay

Event Timeline

Jdlrobson created this task.May 6 2015, 7:54 AM
Jdlrobson raised the priority of this task from to Needs Triage.
Jdlrobson updated the task description. (Show Details)
Jdlrobson moved this task to In Analysis on the Gather Sprint Greatest Hits board.
Jdlrobson added a subscriber: Jdlrobson.
Restricted Application added a subscriber: Aklapper. · View Herald TranscriptMay 6 2015, 7:54 AM
Jdlrobson moved this task from Needs triage to Product triage on the Gather board.May 6 2015, 9:23 AM
Jdlrobson set Security to None.
JKatzWMF moved this task from Product triage to This Sprint on the Gather board.
Jdlrobson updated the task description. (Show Details)May 11 2015, 9:20 PM

@KHammerstein any thoughts around this? The tap area outside the modal can be tiny - should we introduce a close icon or some other design element to allow you to exit?

JKatzWMF moved this task from This Sprint to Must haves on the Gather board.May 28 2015, 5:47 PM
KHammerstein updated the task description. (Show Details)
KLans_WMF edited a custom field.Jun 8 2015, 4:30 PM
Jdlrobson removed KHammerstein as the assignee of this task.Jun 10 2015, 3:26 PM
Jdlrobson moved this task from To Do to Doing on the Mobile-Web-Sprint-49-Wayne's-World board.

Change 217757 had a related patch set uploaded (by Jdlrobson):
Add close icon to the collections content overlay

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

Jdlrobson added a subscriber: phuedx.

Copying across comments from @phuedx "The close icon functions as expected. However, the icon isn't grey – I see there's no asset assigned to T98293 – and it's slightly larger than the main watchstar icon, which has a side of 1.4 em. I'd recommend increasing the size of the watchstar icon to match."

Some design guidance needed here. I'm not sure what to do to get this fixed.
On mobile:

On desktop:

Note we can introduce a variant of the black icon relatively easily but you'll need to let me know the precise hexcode.
The sizes of icons need to be relatively large because of tap area, so I'm not sure what to do with the mobile example but agree it looks odd.

@phuedx @Jdlrobson Still trying to learn how to use the new icons! I'll make a separate discussion about ooui or where else to source them, sizing and color process.
Color should be #999.
Lets make the watchstar follow the original mock which had it at ~50px square so that it stands out.

@KHammerstein if you are referring to the mock in the description then I must point out we need to rethink T92251 - the reason it is small is to allow space for the keyboard without the user having to scroll down.

Talked to Kaity in person. She said to just change the icon colour and we'll live with the size issue for the time being and come back to it later.

KHammerstein removed KHammerstein as the assignee of this task.Jun 20 2015, 12:50 AM
KHammerstein added a subscriber: KHammerstein.

I would suggest reducing the size of the close button (or rather increasing it on tablet and desktop since we do mobile-first). The small watchstar icon is small because of how tiny the viewport is once the keyboard is up on a mobile phone, so let's not raise the size.

rmoen added a subscriber: rmoen.EditedJun 23 2015, 11:36 PM

@Jdlrobson I'm able to close the overlay as expected by clicking outside of it. Testing in both chrome and Firefox

@rmoen the issue is only on certain devices at a certain resolution where the screen is so small there is no space to click outside. Try ios or just the Chrome emulator.

@Jhernandez shrinking the icon also shrinks the tappable error. When I spoke to @KHammerstein she said to leave as is as we have more important design problems to focus on. Things like icon size are easy to tweak later.

Change 217757 merged by jenkins-bot:
Add close icon to the collections content overlay

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

phuedx closed this task as Resolved.Jun 29 2015, 7:31 PM

We'll have to revisit the relative sizing of the watchstar and the close button.