GTK window layout, classes and CSS compatibility

[d3adb5]

Hey there, I have a few questions and perhaps suggestions regarding styling notifications outside and inside the notification center. Thank you so much for your work on this project, by the way, @phuhl! I was looking for an alternative to dunst that might provide a more complete desktop notifications experience while remaining standalone (I use XMonad + xmobar and that's it), and decided to switch to deadd.

From what I've gathered, the layouts for the windows are in the .glade files on the root of the repository, which I've been trying to use as a guide for writing the CSS I'm using in my configuration. However, as expected, it's not as straightforward as reading some HTML and writing CSS for the browser. Moreover, some classes (e.g. .userbutton, .buttonState1) aren't present in any of the XML files and are instead added dynamically during execution. Consequently I have some questions:

• What is a .userbutton and what buttons are not .userbuttons?
• What do State1 and State2 represent? Is State2 used anywhere?
• Is there concise documentation anywhere regarding GTK's CSS compatibility? I found this, but I think I'm more interested in what it does not support compared to standard CSS3 (such as display: flex).
• Could we attribute more semantically accurate names than State1 and State2?

I'm familiar with Haskell, but not so much with GTK, and wonder if you have the time to explain the project structure to point me in the right direction? I really want to contribute to the project.

[phuhl]

Hey @d3adb5, thanks :)

What is a .userbutton and what buttons are not .userbuttons?

The userbuttons are the buttons you can specify in the config through notification-center.buttons, hence the buttons at the bottom of the notification center. By default I think there are none, you'll have to add them through the config file.

All other buttons (i.e., the delete all button, buttons within the notifications) are not userbuttons.

This could probably be pointed out a bit better in the Readme.

What do State1 and State2 represent? Is State2 used anywhere?

The user buttons are meant for features like turning on/off Wifi, hence actions that have an on and an off state and a loading state when switching. When you press a userbutton in the notificatin center, it will be put into an intermediate (loading) state (state 2) and the configured command is executed.

linux_notification_center/src/NotificationCenter/Button.hs

Lines 70 to 76 in 207b5b0

	onButtonClicked button $ do
	addSource $ do
	setButtonState2 $ theButton
	return False
	ph <- spawnCommand command
	waitForProcess ph `finally` interruptProcessGroupOf ph
	return ()

Now, the script has the task to e.g. turn on the Wi-Fi and when it did, to set the button to the correct state (either true or false) through a special notification:

# either turn highlighting on
notify-send.py a --hint boolean:deadd-notification-center:true \
               int:id:0 boolean:state:true type:string:buttons

# or turn highlighting off
notify-send.py a --hint boolean:deadd-notification-center:true \
               int:id:0 boolean:state:false type:string:buttons

That will put the button into state 1 or remove both classes. This is done through these functions: updateNotisForMe -> parseNotisForMe -> parseButtons -> setButtonState.

Is there concise documentation anywhere regarding GTK's CSS compatibility? I found this, but I think I'm more interested in what it does not support compared to standard CSS3 (such as display: flex).

That's what I used to look at, too. That's the official spec anyways. It is not that long ([un]fortunately) so when I want to know support for something I just go through that document and CTRL-F the feature. Usually it is not in there, hence not supported 😅

Could we attribute more semantically accurate names than State1 and State2?

Certainly. I am not sure why I named them that way, I guess it grew over time. The names are frankly terrible and they could be chnanged, but also respecting backwards compatibility. So the best we could do would be adding new classes to the existing ones.

As explained above:

• State 2 = loading
• State 1 = on
• [State 0 i.e. no state] = off

I'm familiar with Haskell, but not so much with GTK, and wonder if you have the time to explain the project structure to point me in the right direction? I really want to contribute to the project.

Sure, what do you want to work on? If there is an issue for it already, leave a comment there and maybe a question or two and I will try to give you the relevant hints to get you started.

If there is no issue for what you want to do, just open one and we can discuss it in there.

To edit (or view) the glade files, I use https://en.wikipedia.org/wiki/Glade_Interface_Designer

The libraries used here are documented on hackage and that way give a view into what you can do with GTK.

Hope that helps :)

[d3adb5]

Hi @phuhl, thanks for the explanation!

Sure, what do you want to work on? If there is an issue for it already, leave a comment there and maybe a question or two and I will try to give you the relevant hints to get you started.

For now I'm more focused on making it look and behave the way I want it to, and while exploring it, the first existing issue I might be looking to work on is #119. I'm fiddling with the styling and struggling with getting notifications with and without images to look the way I want them to.

If there is no issue for what you want to do, just open one and we can discuss it in there.

Some of what I have in mind might not even be possible with GTK, but as I go along I'll make sure to open some issues!