Page MenuHomePhabricator

Implement frameless (quiet) toggle button in OOUI
Closed, ResolvedPublic2 Estimated Story Points

Assigned To
Authored By
Apr 9 2020, 4:14 PM
Referenced Files
F31853364: image.png
Jun 4 2020, 11:07 AM
F31844487: image.png
May 27 2020, 6:38 PM
F31844475: image.png
May 27 2020, 6:38 PM
F31844506: image.png
May 27 2020, 6:38 PM
F31834073: image.png
May 20 2020, 3:28 PM
F31760814: toggle-button-frameless.png
Apr 17 2020, 2:50 AM


Currently, if an OOUI toggle button is set to frameless, there is no visual difference between the on and off states.

Special:Investigate would benefit from a frameless toggle button for pinning the highlights, since the results tables look quite crowded with framed buttons.

toggle-button-frameless.png (369×245 px, 16 KB)

NOTE: The states and colors are the same as ButtonInputWidget (quiet, framed: false, using <button>)

If it's feasible design-wise, it would be helpful to implement a frameless toggle button in OOUI.

Event Timeline

ARamirez_WMF changed the subtype of this task from "Task" to "Deadline".
Niharika triaged this task as Medium priority.May 7 2020, 9:33 PM
Niharika set Due Date to May 19 2020, 7:00 PM.

Change 597565 had a related patch set uploaded (by Tchanders; owner: Tchanders):
[oojs/ui@master] OO.ui.ToggleButtonWidget: Indicate state when framed is false

Having looked into this a bit further, the background colours are already correct:

(top: frameless toggle button, bottom: frameless button)

image.png (294×39 px, 1 KB)

So the main thing we need to do is set the colour of the icon depending on the state.

Cross-posting from Gerrit patch
I think the interaction behaviour is okayish , but would rather want to orient on the framed toggle visual treatment… to make it consistent for toggles.
Similar to what WMDE implemented in RevisionSlider

Would you provide an in-context screenshot for the toggle button here?

Our use-case is a toggle button in a table cell. Here's how it would look:


image.png (85×278 px, 4 KB)
image.png (83×276 px, 4 KB)


image.png (86×278 px, 4 KB)

Thanks @Tchanders for the context!
This represents one of the major issues with our interfaces very well. We defer to users play hunt&click to identify actionable elements. As our interface is crowded, we lean towards de-emphasizing UI elements by making them frameless, non-flagged, icon-only.
Nonetheless, I wouldn't be sure as noob if the IP, the [ 5 edits ], the pin icon or the ellipsis is interactive (at all).

New to this interface question, why does a table cell need a pin interaction? Is it for scrolling, is it for hiding/showing, expanding/contracting? What does it enable for me?

The yellow background, pin and ellipsis appear on hovering on the cell, and if the pin is toggled on, it keeps the yellow background colour even when the user hovers away. @Prtksxna will be able to explain it better than I can!

Of course one possibility is that the frameless toggle may not be needed upstream in OOUI.

Another issue with frameless toggles is that there might be ButtonGroupWidgets with frameless ToggleButtons, this combination doesn't convince me either.

New to this interface question, why does a table cell need a pin interaction?

As @Tchanders wrote, when you hover over a table cell it highlights that row and all the other rows that have the same data as the cell (same user agent, or IP etc). You can see the behaviour here - (hover on a UA). The pin will keep the highlight pinned so that you can scroll around and look at the data.

@Prtksxna I see, thanks. Side-note: the animations of showing/hiding the button and the sub-links are different speed, which is distracting. Also there are several primary buttons on same view, which shouldn't be the case.

Change 597565 merged by jenkins-bot:
[oojs/ui@master] OO.ui.ToggleButtonWidget: Indicate state when framed is false

Volker_E edited projects, added OOUI (OOUI-0.39.1); removed OOUI.

Here's how the frameless toggle looks:

image.png (266×369 px, 15 KB)

Thanks @Volker_E @Esanders !

Change 602503 had a related patch set uploaded (by Jforrester; owner: Jforrester):
[mediawiki/core@master] Update OOUI to v0.39.1

Change 602503 merged by jenkins-bot:
[mediawiki/core@master] Update OOUI to v0.39.1