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
Description
Description
Details
Details
| Subject | Repo | Branch | Lines +/- | |
|---|---|---|---|---|
| Add close icon to the collections content overlay | mediawiki/extensions/Gather | master | +25 -2 |
Related Objects
Related Objects
- Mentioned In
- rEGATf818473312a1: Add close icon to the collections content overlay
rMEXT3087439c8a32: Updated mediawiki/extensions Project: mediawiki/extensions/Gather…
T99109: Onboarding message for first time creating a new collection - Mentioned Here
- T96837: Phone screen improvements on Adding to collection modal
T92251: Watchstar overlay broken with keyboard up on mobile
Event Timeline
Comment Actions
@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?
Comment Actions
Change 217757 had a related patch set uploaded (by Jdlrobson):
Add close icon to the collections content overlay
Comment Actions
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.
Comment Actions
@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.
Comment Actions
@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.
Comment Actions
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.
Comment Actions
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.
Comment Actions
@Jdlrobson I'm able to close the overlay as expected by clicking outside of it. Testing in both chrome and Firefox
Comment Actions
@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.
Comment Actions
Change 217757 merged by jenkins-bot:
Add close icon to the collections content overlay