Page MenuHomePhabricator

Adjust the magnifying glass icon on the language selector
Closed, ResolvedPublic

Description

As part of the changes in T130633, the magnifyier glass icon became too big compared to the text next to it:

The recommended proportions are illustrated in this mockup (notice the white space around the icon and the size only slightly larger than the text next to it):

Since the ULS was created the magnifying glass icon also evolved, it may make sense to make the adjustments for the updated version:

Details

Related Gerrit Patches:
mediawiki/extensions/UniversalLanguageSelector : masterUpdate jquery.uls to 5ceba61

Event Timeline

Restricted Application added a project: UniversalLanguageSelector. · View Herald TranscriptApr 12 2016, 8:40 AM
Restricted Application added a subscriber: Aklapper. · View Herald Transcript

If I remember correctly, the current png icon is 30×30 px and the search row is fixed at 32px but the elements around it add extra padding. In compact version the search icon is currently scaled down to 15×15 px.

The new png is 53px so it would be scaled down to fit the 32px height (unless that should be adjusted as well).

The new png is 53px so it would be scaled down to fit the 32px height (unless that should be adjusted as well).

I just exported the .png at the default size from the .svg, I was not suggesting to adopt the .png size for the html element displaying it.

Since the new icon has some padding already around the shape as part of the image, I think we can use a 32px size element for all versions of ULS. I exported a 32px version of the png:

According to my browser, the background size of the html element displaying the icon (".uls-compact .uls-search-label") on the compact ULS is currently 25px (I'm not sure if that was changed for the last version in master).

Nikerabbit triaged this task as Low priority.Apr 12 2016, 3:29 PM

I did change it a bit, the icon is centered vertically and horizontally in the space available.

I recommend fixing this now that we are working on the code anyway.

As suggested by Santhosh and Kartik, we don't need to depend on the new scripts to do this. But just updating to latest uls master should be avoided because it needs https://gerrit.wikimedia.org/r/285593

Change 286597 had a related patch set uploaded (by Nikerabbit):
Update jquery.uls to 5ceba61

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

Change 286597 merged by jenkins-bot:
Update jquery.uls to 5ceba61

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

I can see the new icon on mediawiki.org now.

Nikerabbit moved this task from QA to Done on the Language-Q4-2016-Sprint 2 board.May 11 2016, 7:20 AM
Arrbee closed this task as Resolved.May 17 2016, 6:38 AM