| Quiddity | |
| Aug 22 2014, 11:54 PM |
| F21572: button-based.png | |
| Dec 17 2014, 5:26 PM |
| F21574: tabs-based.png | |
| Dec 17 2014, 5:26 PM |
| F14471: www.mediawiki.org_2014-08-22_16-50-55.png | |
| Dec 8 2014, 10:00 PM |
screenshot
Currently the flyout's two tabs, have the link colors backwards.
The label for the active tab, should be colored black, and should not be an active link.
The label for the inactive tab, should be blue, and clickable.
(per standard mediawiki UX, and usability best-practices.)
When you have only Alerts (no Flow messages) the one word should likewise be black text non-linked (this was T76912).
Version: unspecified
Severity: normal
Attached:
| Subject | Repo | Branch | Lines +/- | |
|---|---|---|---|---|
| Make current Echo overlay tab dark gray and bold | mediawiki/extensions/Echo | master | +2 -0 |
More generally the flyout should implement our developing standard for tabbed panes, which seems to be a blue bottom border to indicate current tab and no color. https://trello.com/c/F3SdIvRg/45-tabs
Back in September we made the patch https://gerrit.wikimedia.org/r/#/c/159222/ fixing this, so I'm pretty sure this bug should have been closed then, and what we're seeing now is a regression.
To fix this properly we need a design spec for tabs, see the Trello card. @Jaredzimmerman-WMF suggests using button group, but mediawiki.ui doesn't have any support for highlighting the current "selected" button.
Danny says "we don't need design approval to fix the regression -- go ahead and fix it. :)"
In the short term, making the current selection to be bold and black will avoid the current issue.
For the long term, tabs or button groups could work. Given that the "messages" tab requires additional actions ("Mark all as read"), a button group may be more space efficient. I created two quick mockups below (I added the "mark all as read" action to the "Alerts" for the sake of the example):
Based on button groups:
Based on tabs:
@Pginer-WMF just wanted to share this with you https://www.mediawiki.org/wiki/Compact_Personal_Bar#mediaviewer/File:CPB_flyout_icons_v2.png in case you wanted to use it for greater alignment (the eng. work has not been done) but it was a pattern I'd hoped to see for settings, and actions on flyout lists. Take a look and use at your discretion.
Change 188214 had a related patch set uploaded (by BearND):
Make current Echo overlay tab dark gray and bold
Change 188214 merged by jenkins-bot:
Make current Echo overlay tab dark gray and bold