Community
Participate
Working Groups
Created attachment 232409 [details] screenshot of hamburger alignment Opening this to track minor changes that need to happen now that we have Orion 3.0 icon sprites (see bug 410233) 1) In the banner, the hamburger and user menu are not vertically centered anymore. (see pic) (Compare them to the breadcrumb -- they are a few pixels too far down). This has something to do with the "commandSprite" class having changed their vertical alignment from baseline to middle. (I don't know why "baseline" was vertically centering those icons properly.. but apparently it was?) 2) In the editor page, the wrench menu is now too close to the "Line: nn : Col mm" text. There is supposed to be some padding between them, but it got lost somehow.
With regards to the the hamburger (navigation) and silhouette (user) menu are not vertically centered anymore, actually they are indeed both centered. I removed the 2 pixel padding on the navigation menu in ide.css. Unfortunately, there is one blank pixel at the top of the user image and three above the top of the hamburger image. Ideally, the hamburger should fill 14x14 like the other images, but instead is only 12x10. To fix this issue I put the 2 pixel padding back again, or we could fix the image. With regards to the wrench, we cheated in the original image by giving it height: 21px; width: 20px;. To fix this issue I can add 4 pixel padding again, or we could fix the image. What do you think? Add padding for fix the image to be aligned properly?
(In reply to comment #1) > What do you think? Add padding for fix the image to be aligned properly? What do you think? Add padding or fix the image to be aligned properly?
Actually, there is padding and margin for both already: For hamburger (navigation), I put back the top padding that was there previously. For wrench, I adjusted the exiting padding and margin now that the icon is 16x16 in the image sprite. The change is at: https://github.com/ahunter-orion/orion.client/commit/8b3483033b0838d710dc530a9aec28633925c83a I assert that I authored 100% of the content of this contribution and have the rights to donate the content to Eclipse under the EPL
(In reply to comment #3) I do see the blank pixels in hamburger and user menu, but there are equal amounts on top and bottom (3px/3px and 2px/2px). If the banner icons were vertically centered, I would expect the blank parts to cancel each other out. (In the long run we might prefer using different icon dimensions to avoid needing blank pixels in the images, but we can ignore that for now.) Padding the hamburger back into place looks OK but doesn't really fix the underlying alignment issue IMO. (Also the user menu would need a padding hack as well.) However, I am OK with giving a margin to the wrench (since the problem there is just separation, not alignment).
On second thought, this is probably fine. Vertical centering in CSS is a nightmare anyway. Can you just pad the top of user menu icon like the hamburger one? Then I will be fine with this fix.
(In reply to comment #5) > Can you just pad the top of user menu icon like the hamburger one? Then I > will be fine with this fix. With the current changes we already have both center aligned. The banner is 35 pixels heigh. The white visible pixels in the hamburger is 10 pixels high, so there are 13 pixels above and 12 pixels below. The white visible pixels in the silhouette is 14 pixels high, so there are 11 pixels above and 10 pixels below. Is this right?
Pushed, thanks Anthony http://git.eclipse.org/c/orion/org.eclipse.orion.client.git/commit/?id=841b393
