Page MenuHomePhabricator

Use mw-ui-icon-flush- classes on various icons to fix alignment: search within pages and block drawer icons
Closed, ResolvedPublic3 Estimated Story Points

Description

The vertical alignment issue impacts the BlockMessageDrawer:

Search within pages is also flushed incorrectly:

Acceptance criteria

  • Introduce mw-ui-icon-flush-top to mediawiki ui (https://gerrit.wikimedia.org/r/537529) - this will automatically fix the BlockMessageDrawer which is prematurely using the class that doesn't exist.
  • Use mw-ui-icon-flush-left on the search within pages icon

Event Timeline

There are a very large number of changes, so older changes are hidden. Show Older Changes

Change 536594 had a related patch set uploaded (by Jdrewniak; owner: Jdrewniak):
[mediawiki/skins/MinervaNeue@master] [ICONS] Fix icon positions in page-issues, inline and overlay

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

ovasileva triaged this task as High priority.Sep 13 2019, 2:05 PM

Code review for https://gerrit.wikimedia.org/r/#/c/mediawiki/skins/MinervaNeue/+/536380/:


I'm seeing a slight reflow with the fix. Is that easy to take care of?

Change 536594 merged by jenkins-bot:
[mediawiki/skins/MinervaNeue@master] [ICONS] Fix icon positions in page-issues, inline and overlay

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

On Slack we discussed the need for a flush-top class to fix this, which also seems to be the issue with the reference drawer alignment

Jdlrobson renamed this task from [ICONS] Page issues icons misaligned after icon update to [ICONS] Page issues and reference drawer close icons misaligned after icon update.Sep 16 2019, 8:42 PM
Jdlrobson updated the task description. (Show Details)
alexhollender renamed this task from [ICONS] Page issues and reference drawer close icons misaligned after icon update to [ICONS] Page issues icons misaligned.Sep 17 2019, 5:35 PM
alexhollender removed alexhollender as the assignee of this task.
alexhollender updated the task description. (Show Details)
Jdlrobson renamed this task from [ICONS] Page issues icons misaligned to Page issues, references, block drawer icons misaligned vertically.Sep 17 2019, 5:46 PM

Change 537500 had a related patch set uploaded (by Jdlrobson; owner: Jdlrobson):
[mediawiki/extensions/MobileFrontend@master] Fix alignment of block drawer stop icon (mw-ui-icon-flush)

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

Jdlrobson updated the task description. (Show Details)Sep 17 2019, 6:12 PM

Change 537529 had a related patch set uploaded (by Jdlrobson; owner: Jdlrobson):
[mediawiki/skins/MinervaNeue@master] Add the mw-ui-icon-flush-top class

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

Change 537500 merged by jenkins-bot:
[mediawiki/extensions/MobileFrontend@master] Fix alignment of block drawer stop icon (mw-ui-icon-flush)

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

Jdlrobson renamed this task from Page issues, references, block drawer icons misaligned vertically to Page issues and block drawer icons misaligned vertically.Sep 17 2019, 10:31 PM
Jdlrobson updated the task description. (Show Details)
Jdlrobson renamed this task from Page issues and block drawer icons misaligned vertically to Page issues and block drawer icons misaligned vertically and horizontally (use mw-ui-icon-flush- classes).Sep 17 2019, 10:35 PM
Jdlrobson renamed this task from Page issues and block drawer icons misaligned vertically and horizontally (use mw-ui-icon-flush- classes) to Use mw-ui-icon-flush- classes on various icons to fix alignment: clear search, page issues, block drawer icons.
Jdlrobson renamed this task from Use mw-ui-icon-flush- classes on various icons to fix alignment: clear search, page issues, block drawer icons to Use mw-ui-icon-flush- classes on various icons to fix alignment: search within pages, page issues, block drawer icons.
Jdlrobson updated the task description. (Show Details)
Jdlrobson updated the task description. (Show Details)
Jdlrobson added a subscriber: Edtadros.
Jdlrobson set the point value for this task to 3.Sep 18 2019, 5:18 PM

Change 537726 had a related patch set uploaded (by Jdlrobson; owner: Jdlrobson):
[mediawiki/extensions/MobileFrontend@master] Flush search-content icon to left so it matches search input

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

The page issues one is a little tricker - as page issues has a line height of 1.65 so I can't see a way to adjust this icon's position without an arbitrary non-variable based value. Pausing working on this until the other icons are taken care of.

Change 537726 merged by Jdlrobson:
[mediawiki/extensions/MobileFrontend@master] Flush search-content icon to left so it matches search input

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

Change 537529 merged by Jdlrobson:
[mediawiki/skins/MinervaNeue@master] Add the mw-ui-icon-flush-top class

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

Change 538710 had a related patch set uploaded (by Jdlrobson; owner: Jdlrobson):
[mediawiki/skins/MinervaNeue@master] Vertically align the page issues icon with the text

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

There is no non-hacky way to do this because we are wrestling with template inline styles that we do not control. I suggest we fix T230033 and then hardcode the top value here as before.

Jdlrobson renamed this task from Use mw-ui-icon-flush- classes on various icons to fix alignment: search within pages, page issues, block drawer icons to Use mw-ui-icon-flush- classes on various icons to fix alignment: search within pages and block drawer icons.Sep 30 2019, 6:21 PM
Jdlrobson updated the task description. (Show Details)
Jdlrobson removed a project: Patch-For-Review.

I've split out the page issues problem into T234254 as the scope has grown here. The other two issues with BlockDrawer and search within pages can be QAed/design reviewed and signed off.

Search within page alignment is fixed:

@Jdlrobson can you post a screenshot of the block drawer? Not sure how to trigger that on Beta.

@alexhollender all UI elements are documented on storybook
https://doc.wikimedia.org/MobileFrontend/master/js/ui/?path=/story/drawer--blockmessagedrawer

This is the best and easiest way to check UI that's rarely seen.

@Jdlrobson even with flush-top the block hand icon is still too low. Since this UI is infrequently seen I don't think it's worth more work here and would be fine moving forward as-is.

currentcorrect

Change 541570 had a related patch set uploaded (by Jdlrobson; owner: Jdlrobson):
[mediawiki/extensions/MobileFrontend@master] Heading line height should match icon height

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

Jdrewniak claimed this task.Oct 9 2019, 5:06 PM

Change 541570 merged by jenkins-bot:
[mediawiki/extensions/MobileFrontend@master] Heading line height should match icon height

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

alexhollender removed Jdrewniak as the assignee of this task.Oct 16 2019, 5:09 PM
alexhollender updated the task description. (Show Details)

awesome, all set

ovasileva closed this task as Resolved.Oct 21 2019, 10:23 AM
ovasileva claimed this task.
DannyS712 added a subscriber: DannyS712.

[batch] remove patch for review tag from resolved tasks