Page MenuHomePhabricator

WVUI: Search icon not centered
Closed, ResolvedPublic2 Estimated Story Points


Coming out of changes around WVUI's search icon implementation in T279015, the new search icon features the right path, but is not vertically centered on canvas.

This has to do with the way that WVUI icons are currently implemented – they need to feature a single, flattened path and can't feature attributes like `fill-rule="evenodd", which are exported by many graphics applications and not flattened.
Which makes comparing the file with the elsewhere production-ready SVG icons much harder.

Wrongly applied icon on canvas

Screen Shot 2021-07-19 at 11.30.54 AM.png (634×679 px, 32 KB)

Current path is M7 0a7 7 0 017 7 6.92 6.92 0 01-1.4 4.19l5.4 5.4L16.58 18l-5.39-5.39A7 7 0 117 0zm0 2a5 5 0 105 5 5 5 0 00-5-5z

Proposed solution

Newly optimized path M8 1a7 7 0 015.6 11.2l5.4 5.4-1.4 1.4-5.4-5.4A7 7 0 118 1zm0 2a5 5 0 100 10A5 5 0 008 3z

QA notes

Additionally for QAing, we also want to check again, that the original issue with 'search' icon resizing between fallback search and Vue enabled search is gone.

Screen Shot 2021-03-31 at 5.00.50 PM.png (1×1 px, 150 KB)

QA Results - Beta

Event Timeline

Change 705495 had a related patch set uploaded (by VolkerE; author: VolkerE):

[wvui@master] [icons] Center 'wvuiIconSearch' search icon in canvas

LGoto triaged this task as Low priority.Jul 20 2021, 5:16 PM
LGoto set the point value for this task to 2.

Change 705495 merged by jenkins-bot:

[wvui@master] [icons] Center 'wvuiIconSearch' search icon in canvas

Change 715153 had a related patch set uploaded (by VolkerE; author: VolkerE):

[mediawiki/core@master] Update WVUI to v0.3.0

Change 715153 merged by jenkins-bot:

[mediawiki/core@master] Update WVUI to v0.3.0

Volker_E claimed this task.

image.png (124×206 px, 3 KB)

Perfectly centered now in WVUI.