GTK 3.20 :: Buttons are too big

[SammysHP]

Buttons in Numix are huge – alone and compared to the gtk2 version and the previous official release of Numix.

During my investigation I collected a few facts:

• button has a padding, which is fine if it works
• There is a min-height and min-width for buttons, but this does not include the padding
• The padding/height influences also the height of entry with buttons and combobox

The goal should be that entry and button have a similar height. A good way to test this is the top-left section on the first page of gtk3-widget-factory.

I tried a few different approaches to fix this (remove min-xxx, some buttons are too small; remove padding from button and move add it to button > *, changes too much or misses some buttons). I was not able to get a consistent size of buttons and entries. As this is one of the most important GUI elements, it should get a high priority.

[khurshid-alam]

We haven't optimize the padding yet. Ideally $spacing should vary proportionally between 3px-5px like it used to be. But this requires lot of testing to achieve desired value. You are welcome to try and open a PR. And varying min-max height is not going to work unless you stop mixing same button code everywhere (toolbar, inline-toolbar, action-bar, entry etc).

In light version paddings are already optimized...for example setting $spacing to 3px doesn't break anything. I can share the code (but this has to wait).

[lots0logs]

@khurshid-alam The buttons in your screenshot don't have enough padding IMO. I agree we need to rewrite the button code, but I'm not convinced that there needs to be less padding. :grimacing:

[khurshid-alam]

@lots0logs Yeah....the screenshots was taken with lowest possible padding...I was just responding to SammysHP to show him how $spacing can be adjusted without breaking anything (for lower resolution displays)

And yes, we need to readjust button code slightly, otherwise these "everything is too big" will keep popping up.

[joaojotta]

The buttons on the screenshot are, in my use case, perfect. However, that's not what I get when I install Numix and that's why I've (sadly) stopped using the theme.

As if they should or should not have more padding I believe it's a personal preference. I like them small as they take up a lot of space in the screen, specially in lower resolution screens witch (let's be honest) lots of people still use like 1360_768. I don't like them that big even after I switched from a 19" 1360_768 to a 24" 1920*1080 display so I just went and chose another theme.

But hey! That's the power of Linux: CHOICE! (;

[megax]

Test:

Old code:

    button {
        min-height: 22px;
        min-width: 24px;
        @include button(shade($bg_color, 1.2), $fg_color);

        .inline-toolbar &,
        .linked > & { @include linked_button(shade($bg_color, 1.2)); }

        .linked.vertical > & { @include linked_vertical_button(shade($bg_color, 1.2)); }

        &.circular { // FIXME: aggregate to buttons
            border-radius: 20px;
            -gtk-outline-radius: 20px;

            label { padding: 0; }
        }
    }

New code:

    button {
        min-height: 11px;
        min-width: 12px;
        @include button(shade($bg_color, 1.2), $fg_color);

        .inline-toolbar &,
        .linked > & { @include linked_button(shade($bg_color, 1.2)); }

        .linked.vertical > & { @include linked_vertical_button(shade($bg_color, 1.2)); }

        &.circular { // FIXME: aggregate to buttons
            border-radius: 20px;
            -gtk-outline-radius: 20px;

            label { padding: 0; }
        }
    }

Examples:

@SammysHP @khurshid-alam @lots0logs opinion?

[lots0logs]

Sorry, I dont like it. I dont understand what is wrong with a bit of padding. Since I began maintaining the theme I've accepted PRs that have significantly reduced padding throughout the theme even though I personally dont like the result (just one example is the headerbar which is way too small for my tastes now). I did so because its what the community wanted. However, we have to draw the line somewhere before there is no whitespace remaining between or within widgets anywhere in the theme (lol kidding, but not really :wink: )

[megax]

@lots0logs I do not like small buttons ;)

[joaojotta]

What's not to understand about people not liking big buttons? And that the Numix Theme buttons got bigger since the GTK 3.20 update? Buttons have allways been small and uit's natural that some people don't like the change (look at Arc as an example where the buttons are small like Numix used to be).

Now, as far as I'm concerned I too posted a "bug report" (somewhere else) because they got bigger. The answer was something like "it's a feature, the new look" and I just switch. It's called respect for other peoples opinion and, in my case, appreciation for the work done. However, I've switched themes.

So, it's only natural that people who like the Numix theme wouldn't like to change. Not natural would be some one protesting the change.

Anyway, keep up the good work and thanks for that code change. I'll use it as soon as I get home.

p.s. As a suggestion: how about a compact version theme?

[khurshid-alam]

We will look into this after we fix #486

[megax]

Big button -> circular bug (width):

[megax]

Optimised (not perfect yet):

Notebook:

Code: https://github.com/The-Megax/Numix/commit/0e54b003307e5b48c149ac822a64578fa5eeb885

[megax]

Global fix: https://github.com/numixproject/numix-gtk-theme/pull/539

@joaojotta I rewrite button padding system.

[khurshid-alam]

I think it looks big in some areas because lowest icon size most icon theme can provide is 16x16. So by default, the lowest icon size a gtk-widget can use is 16x16 (most are using 24x24 anyway). And we are using minimum height/width set to 22px.

The default icon sizes are: GTK_ICON_SIZE_BUTTON: 16x16 GTK_ICON_SIZE_MENU: 16x16 GTK_ICON_SIZE_LARGE_TOOLBAR: 24x24 GTK_ICON_SIZE_SMALL_TOOLBAR: 16x16 GTK_ICON_SIZE_DIALOG: 48x48

Setting min height-width below 16px should resolve the issue. But this calls for trial and error.

[khurshid-alam]

@megax No. You made it work but using that much variation in padding could break the theme & other tools out there (like oomox ).

See my previous comment. Try using min height/width = 16/14 or 14/12 and then try optimizing. Everything should change proportionally. Thanks.

[megax]

I understand what settings exist from the icons, and I know that maybe fractures appear at the outer themes. I did it from the bases of reference theme by reason and furthermore I have no time for trying the code! The main problem is that the button system and the other basic sections, what we are building on, are faulty. I am trying to fix it. As I did it at the headebar, because there were operational problems but I did it with @lots0logs so that it is inconspicuous with the old settings. If you can give me a strong point then I will rewrite, but in my oppinion it would be better to make it with another theme basis than testing... It is written everywhere like this at adwaita too where only written with bigger minimum values, and at numix there was only something so far. Furthermore, an intermediate state was created because the numix's small button is too small, I think... and than in width and height are bigger a little. @lots0logs has already said many times that this is only about the comfort limit... In case of trying I would build on this base, because it is sure to formed everything together. If someone like @lots0logs, has time than modify it as you like.

[megax]

@lots0logs @khurshid-alam Fixed default 16px.

Please fix: (1-2px bug "X" button")

Nemo primary bar

• [X] Nemo if headerbar fix merged:

if headerbar fix merged please update toolbar code: https://github.com/The-Megax/Numix/commit/2fbb6cc278342a8b17a5ebe6d374b3018d99212b#diff-557b2df12fb26276c4571752f146e701R34

• [X] Keycap circular and button size:

[khurshid-alam]

@lots0logs I reviewed his code. There is no point. It made the button rectangular which is wrong and made things more complicated. Honestly I would like to gid red of min-height/min-width altogether and only use padding to decide the shape.

@megax Honestly I like your previous test code. For me only this works much better:

    button {
        min-height: 14px;
        min-width: 16px;
   }

which is basically equivalent to disabling it unless some widget calls for icon size <16x16. After this only some minor changes for entries and circular button are needed.

And please test your code without the headerbar fix you proposed. We haven't merge that.

[megax]

@khurshid-alam Okay, then i change min-height: 14px;. Definitely i'll wait headerbar merge :)

[satya164]

What I don't like is the rectangular shape of icon only buttons in Nemo headerbar. I feel like it will look bad with Nautilus.

[megax]

Nemo headerbar now bug, then fix.

Edit: @satya164 i optimised.

[khurshid-alam]

To All,

Buttons are now using 16px as minimum height/width. It can grow as big as a gtk-widget wants it to be. If you find any abnormalities please open a new issue.

Thanks.

[SammysHP]

I don't think that this is a proper solution. I tried it before and something didn't work.

[megax]

Minimal fix: https://github.com/numixproject/numix-gtk-theme/pull/542

[megax]

Minimal entry padding bug:

will be improved once, now I have no idea on it =/

[hamad12a]

what is the appropriate css code needed to be added to the file ~/.config/gtk-3.0/gtk.css