Page MenuHomePhabricator

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

Description

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.

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

Tchanders created this task.Apr 9 2020, 4:14 PM
Restricted Application added a subscriber: Aklapper. · View Herald TranscriptApr 9 2020, 4:14 PM
ARamirez_WMF set the point value for this task to 2.Apr 15 2020, 4:16 PM
Prtksxna updated the task description. (Show Details)Apr 17 2020, 2:50 AM
dbarratt removed dbarratt as the assignee of this task.Apr 29 2020, 4:10 PM
dbarratt added a subscriber: dbarratt.
ARamirez_WMF set Due Date to May 5 2020, 4:00 AM.May 5 2020, 3:54 PM
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

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

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

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

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 https://de.wikipedia.org/w/index.php?diff=199932273&oldid=199678972&title=Samen_%28Volk%29&type=revision

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:

On:

Off:

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 - https://prtksxna.github.io/wmf-cu-goodplace/compare.html (hover on a UA). The pin will keep the highlight pinned so that you can scroll around and look at the data.

Volker_E added a comment.EditedJun 2 2020, 2:28 PM

@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

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

Volker_E moved this task from Backlog to OOUI-0.39.1 on the OOUI board.Jun 4 2020, 4:51 AM
Volker_E edited projects, added OOUI (OOUI-0.39.1); removed OOUI.

Here's how the frameless toggle looks:

Thanks @Volker_E @Esanders !

Tchanders closed this task as Resolved.Jun 4 2020, 12:01 PM

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

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

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

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