Page MenuHomePhabricator
Create Task
Maniphest T184023

[wmf.12-minor] monobook Special:Notification - drop-down options for the cog icon should be aligned with the icons
Closed, ResolvedPublic
Actions

Assigned To
Mooeypoo
Authored By
Etonkovidova
Jan 2 2018, 11:51 PM
Tags
Referenced Files
F12669768: Screen Shot 2018-01-19 at 5.01.34 PM.png
Jan 20 2018, 1:02 AM
F12214390: Screen Shot 2018-01-02 at 3.39.37 PM.png
Jan 2 2018, 11:51 PM
F12214388: Screen Shot 2018-01-02 at 3.39.19 PM.png
Jan 2 2018, 11:51 PM
Subscribers
Aklapper
Etonkovidova
gerritbot
matmarex
Mooeypoo
Volker_E

Description

In Vector skin, the icons for the cog icon options are aligned:

Screen Shot 2018-01-02 at 3.39.19 PM.png (389×1 px, 80 KB)

In monobook they are on different lines:

Screen Shot 2018-01-02 at 3.39.37 PM.png (326×494 px, 25 KB)

Details

SubjectRepoBranchLines +/-
Fix help menu icon placement for monobookmediawiki/extensions/Echomaster+7 -0
Customize query in gerrit

Related Objects
Search...

Event Timeline

Etonkovidova created this task.Jan 2 2018, 11:51 PM
Restricted Application added a subscriber: Aklapper. · View Herald TranscriptJan 2 2018, 11:51 PM
Etonkovidova renamed this task from [wmf.12-minor] monobook Special:Notification - drop-down options for the cog icon should be aligned with the icos to [wmf.12-minor] monobook Special:Notification - drop-down options for the cog icon should be aligned with the icons.Jan 2 2018, 11:52 PM
Catrope edited projects, added Collaboration-Team-Triage (Collab-Team-This-Quarter); removed Collaboration-Team-Triage.Jan 9 2018, 7:19 PM
Catrope moved this task from Untriaged to Snack Box on the Collaboration-Team-Triage (Collab-Team-This-Quarter) board.
Mooeypoo claimed this task.EditedJan 16 2018, 10:13 PM
Mooeypoo moved this task from Snack Box to Needs Review on the Collaboration-Team-Triage (Collab-Team-This-Quarter) board.
Mooeypoo added subscribers: Volker_E, Mooeypoo.

@Volker_E this seems to be an issue in OOUI Apex.

There's a rule for Apex:

.oo-ui-widget.oo-ui-iconElement .oo-ui-iconElement-icon,
.oo-ui-widget.oo-ui-iconElement > * > .oo-ui-iconElement-icon,
.oo-ui-widget.oo-ui-iconElement .oo-ui-iconElement .oo-ui-iconElement-icon,
.oo-ui-widget.oo-ui-indicatorElement > .oo-ui-indicatorElement-indicator,
.oo-ui-widget.oo-ui-indicatorElement > * > .oo-ui-indicatorElement-indicator,
.oo-ui-widget.oo-ui-indicatorElement .oo-ui-indicatorElement .oo-ui-indicatorElement-indicator {
   display: block;
}

Beyond the fact that it's super specific and had to be overridden with "!important", we had to make sure the icon is set to display: inline-block; for the icon to appear properly inside the button, otherwise the label was pushed down.

How is this not causing issues in other buttons with icons?

gerritbot subscribed.Jan 16 2018, 10:13 PM

Change 404585 had a related patch set uploaded (by Mooeypoo; owner: Mooeypoo):
[mediawiki/extensions/Echo@master] Fix help menu icon placement for monobook

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

gerritbot added a project: Patch-For-Review.Jan 16 2018, 10:13 PM
Mooeypoo mentioned this in T178437: Make icon/indicator visibility handling several widget nesting levels proof.Jan 16 2018, 10:20 PM
gerritbot added a comment.Jan 19 2018, 6:44 PM

Change 404585 merged by jenkins-bot:
[mediawiki/extensions/Echo@master] Fix help menu icon placement for monobook

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

ReleaseTaggerBot added a project: MW-1.31-release-notes (WMF-deploy-2018-02-06 (1.31.0-wmf.20)).Jan 19 2018, 7:01 PM
Etonkovidova added a comment.Jan 20 2018, 1:02 AM

Fixed - checked in betalabs:

Screen Shot 2018-01-19 at 5.01.34 PM.png (241×502 px, 24 KB)

Etonkovidova closed this task as Resolved.Jan 20 2018, 1:02 AM
matmarex added a subtask: T178437: Make icon/indicator visibility handling several widget nesting levels proof.Jun 13 2018, 1:48 AM
matmarex subscribed.
matmarex closed subtask T178437: Make icon/indicator visibility handling several widget nesting levels proof as Resolved.Jun 28 2018, 1:32 PM
Content licensed under Creative Commons Attribution-ShareAlike (CC BY-SA) 4.0 unless otherwise noted; code licensed under GNU General Public License (GPL) 2.0 or later and other open source licenses. By using this site, you agree to the Terms of Use, Privacy Policy, and Code of Conduct. · Wikimedia Foundation · Privacy Policy · Code of Conduct · Terms of Use · Disclaimer · CC-BY-SA · GPL