GNOME Bugzilla – Bug 706500
HeaderBars - adjust padding
Last modified: 2013-08-25 19:41:38 UTC
Created attachment 252553 [details] modified screenshot I've been working on refining the layout of header bars. Guidelines are here: https://wiki.gnome.org/Design/Whiteboards/HeadeBarGuideline In some cases, like Clocks, the apps are relying purely on Adwaita and GTK to set the layout. However, I'm struggling to figure out why the layout is the way it is. Header bars are set to have vertical and horizontal padding of 6px (in GTK), but it is more than that in the examples I've seen, and I can't see anything in Adwaita that would change it. I've attached a screenshot of Clocks from master, along with a modified version which shows the desired layout.
Created attachment 252555 [details] [review] simple patch Ah ha, figure it out!
Not sure if this will mess up titlebars under CSD though... (same story as bug 706418).
Created attachment 252557 [details] [review] updated patch The extra 1px padding for HeaderBars was throwing things off.
The header bar probably needs to have 1px shorter padding below than above, since the highlights under the buttons, while _actually_ being part of the button, visually looks like it belongs to the header. So that way, we'll end up with something that looks like it's 6px above and 6px below the button, while the actual css numbers are 6px above and 5px below.
https://dl.dropboxusercontent.com/u/5031519/clocks-header.png is a example of actually 6px above and 6px below https://cloud.gnome.org/public.php?service=files&t=9255c5ae7605925e3a6d31d01304eb7f is a example of having 6px above and 5px below (but yeah, visually 6 above and 6 below)
Unfortunately the side effect of this is that the close button in the CSD gtk3-demo lacks any margin.
Allan's patch is correct here - the bug mentioned by Jakub by running GTK_CSD=1 gtk3-demo is a different one, and should be fixed in GTK+ itself (I have a patch). I pushed that to master now.
Thanks so much!
(In reply to comment #4) > The header bar probably needs to have 1px shorter padding below than above, > since the highlights under the buttons, while _actually_ being part of the > button, visually looks like it belongs to the header. > So that way, we'll end up with something that looks like it's 6px above and 6px > below the button, while the actual css numbers are 6px above and 5px below. I had a look into doing this. Ideally we would do it in CSS using margin properties, but it doesn't seem that GTK has support for that. :/