Page MenuHomePhabricator

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


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

pasted_file (505×658 px, 49 KB)

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):

compact-uls.png (360×518 px, 35 KB)

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

Event Timeline

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:

magnifyingglass-grey.png (32×32 px, 797 B)

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).

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

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

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

I can see the new icon on now.