Use GtkButton instead of GtkLabel for Modules

[pinselimo]

This PR turns the GtkLabel into a GtkButton. This has some visual advantages:

• The :hover qualifier can be set on modules in style.css
• There is a nice hover and click animation of the label included
• If the module is merely informative, the button is deactivated and acts just as before

Checkout my dotfiles (.config/waybar/*) for how I use this PR to distinguish modules spawning a window on click from those just changing format.

Caveats: GtkButton catches all single mouse button click events regardless of the flags set on it. Therefore, I had to connect its signal_pressed method to the underlying, preceding handleToggle method.
Another workaround would have been to connect handelToggle to signal_button_release_event instead of signal_button_press_event in AModule. I've done that in my 'use_gtk_button' (without the '_v2') branch. The implementation of '_v2' mimics the previous behavior much better though.

Thanks :)

[lilydjwg]

Hi, how can I customize the hover background? I don't want my widgets which are on a black bar to turn their background to white on hovering. I tried several kinds of :hover rules but didn't find the right one to use.

Affected widgets are: two customs (not all of them), idle inhibitor and pulseaudio.

[Alexays]

@pinselimo Can you check this issue #1726
And add change to default style.css in order to keep background unchanged on hover?

[pinselimo]

@lilydjwg you can change the color using border-color.

Interestingly, the halo-effect disappears if the border attribute for buttons is set, no matter which value.

@Alexays should there be no hover effects at all, or an effect similar to the workspace buttons where the bottom lights up?

[Alexays]

@pinselimo we can have a hover effect only if in the default config, the module have a click event, otherwise we'll let the user change that according to his needs.

[lilydjwg]

@pinselimo we may have been talking about different issues. The issue I have is this:

The purple text is my custom widget to show the focused window title. This widget and the bar has a black background. When I hover on the widget, it has a white background like the screenshot, and I failed to make it black (i.e. I don't want it to change on hovering).

My style.css.

[pinselimo]

Ah I see, then just add:

button:hover {
    background: rgba(0, 0, 0, 0.2);
    box-shadow: inherit;
}

from the default style.css to yours. Fixes the issue for me. If you want to keep the hover effect on the workspace buttons, where it should have been before(?) also add:

#workspaces button:hover {
    background: #ffffff;
}

[lilydjwg]

@pinselimo thanks, it works! Actually I don't use the workspace widget because I'm using wayfire....

[djvs]

If anyone is looking to retain buttons until Gtk4 migration is done or whatever, use commit ce8ae5bf17c11c441d8365acdb39625d32b6c2a2