| Pginer-WMF | |
| Mar 29 2018, 12:07 PM |
| F18511291: rc-tags-help-icon.png | |
| May 24 2018, 5:47 PM |
| F16434482: image.png | |
| Mar 29 2018, 4:38 PM |
| F16434476: image.png | |
| Mar 29 2018, 4:38 PM |
| F16433558: Screenshot from 2018-03-29 17-53-34.png | |
| Mar 29 2018, 3:56 PM |
| F16433560: Screenshot from 2018-03-29 17-54-03.png | |
| Mar 29 2018, 3:56 PM |
| F16433562: Screenshot from 2018-03-29 17-55-02.png | |
| Mar 29 2018, 3:56 PM |
| F16433211: Screen Shot 2018-03-29 at 8.06.26 AM.png | |
| Mar 29 2018, 3:10 PM |
| F16425354: Screen Shot 2018-03-29 at 14.00.40 2.png | |
| Mar 29 2018, 12:07 PM |
On Recent Changes, the tag panel shows a "?" icon to get more details about what tags are. In beta the icon seems to be pushed down as part of an adjustment made to the previous version of the icon.
This needs to be adjusted for the icon to align vertically with the text. We may want to increase the separation also to make clear the icon is not a question mark that is part of the text (with the previous icon of a question mark inside a circle this was not an issue)
| Subject | Repo | Branch | Lines +/- | |
|---|---|---|---|---|
| RCFilters UI: Remove CSS customization for help icon | mediawiki/core | master | +0 -14 |
| Status | Subtype | Assigned | Task | ||
|---|---|---|---|---|---|
| Resolved | SBisson | T162675 'Integrated filters'—add all RC Page filters into the new UI along with selected new functions | |||
| Open | None | T168826 Styling adjustments for the New filters for edit review | |||
| Resolved | • Catrope | T191014 Help icon is misplaced on the Tags panel |
I see the problem on beta. Just for reference, see the screenshot below, which shows how this looks on production (in Mac Chrome, if that matters). As you can see the alignment and icon are both different from what's on beta now (and are effective, IMHO).
the icon seems to be pushed down as part of an adjustment made to the previous version of the icon.
You're absolutely right, and the low-hanging fruit here is to remove that adjustment, which is what I did in my attached patch.
Before:
After:
However, that might not be enough. I'd love to fix this better, but I'd need some guidance as to what CSS to use here. Something like margin-top: -0.1em maybe? That would look like this:
Change 422957 had a related patch set uploaded (by Catrope; owner: Catrope):
[mediawiki/core@master] RCFilters UI: Remove CSS customization for help icon
Change 422957 merged by jenkins-bot:
[mediawiki/core@master] RCFilters UI: Remove CSS customization for help icon
@Catrope The button and it's position seems fine to me with your patch. What might put some browser into bogus here, is the padding of .mw-rcfilters-ui-filterMenuHeaderWidget-title. It leads to pixel rounding. Currently the header has 45.19px` in Chrome. With 44px – padding-top: 12px and padding-bottom: 12px it seems fine (in Chrome):
I say Chrome, because there doesn't seem to be, besides weird display: table-cell or line-height hacks, any way to perfectly control vertical alignment in em based layout calculations across browsers. Firefox and Chrome are always 1-2px different, no matter what.
We're coming close through setting explicit line-height on labels, but that should only be limited to non-wrapping OOUI elements like buttons.
Btw, isn't it nice to get rid of all those CSS overrides? :)
That icon, is it is here, looks like a bold question mark to me, like in "Tagged edits ?". That's a bit confusing.
The previous, cercled one was clearly an icon.
@Trizek-WMF Point taken, we'll add further icons in a bit… It was a necessary compromise for making the VisualEditor toolbar help not too distracting, but we're aware that it might result in confusing side-effects, that we need to overcome quickly.
I didn’t find the circled question mark distracting at all. It is in fact more distracting now, as this bug report demonstrates. Circled question marks are the norm—they are familiar and predictable (compare e.g. the help buttons in macOS applications, or the little help disks in Windows 7’s Control Panel), and familiarity means no distraction. It was a completely misguided change.
@Fito As I've stated above, your sentiment is aligned with our own take on this. It was a unintended side-effect on a change for a different product and we will take care to revert this in the case of RCFilters in a timely manner.
! In T191014#4097802, @Volker_E wrote:
@Fito As I've stated above, your sentiment is aligned with our own take on this. It was a unintended side-effect on a change for a different product and we will take care to revert this in the case of RCFilters in a timely manner.
Thanks Volker!
Ping.
Help icon without the circle still looks bad in-context. Also, icon is a lot bigger than text and not well aligned.
@Volker_E, just checking: is the intention here to leave the ? without a circle? I think that is a mistake, as has probably been discussed before. For these reasons: 1) Although designers frequently like to put help icons off on their own, it is usually more helpful to put them next to the item to which they refer, since such proximity creates a more obvious connection and make the help more discoverable, 2) given that, the no-circle help link has definite potential to be misinterpreted not as an icon but as just another character (which, after all, it is). This latter point means that instead of looking like a help icon, the help icon simply turns the thing it's offering help about into a question.
If that was the intention, can it please be revisited? As I say, I am a firm believer in putting the help icon next to the thing it refers to. I've seen in testing many times that this improves discoverability, which can be crucial for some confusing features.
@Volker_E says this task is resolved (the icon is no longer misaligned). I've filed T202477: Create a help icon with a question mark in a circle for the remaining issue of creating an icon with a circled question mark.