Feature Request: Ability to customize buttons in the notifications.

[tpurde]

We cannot do this in the gtk.css. It would be a very useful feature to make our notification looks a lot better.
This feature request would probably be of low priority, as it's not the most important feature needed, but still helps the experience.

Here is an example screenshot:

I would prefer the buttons to be on the bottom-left in this case, because the app name was too long.

Also, these lack the option to set a space between the two manually. This could also be useful.

[MyriaCore]

Adding a css name to the button container would be a big win!

[tpurde]

I'd like to request another thing that's fairly related (It includes the location of buttons). Putting the icons to the left or the right of the notification just like in macOS.

If you add this, in my opinion, it should be changeable in the deadd.conf file. Adding something like button-location: [right, left, default, none] would also allow for fully disabling these buttons. (Default being the way it is right now, or if this feature request gets accepted, the way that was configured in the gtk.css

This would also allow for much smaller notifications when image size is lowered, just like the image from macOS.

Also, @MyriaCore, I've seen you a lot in my issue requests today, so can I have your opinions about this feature I'm requesting?

[MyriaCore]

I think actions are initialized here:

linux_notification_center/src/NotificationCenter/Notifications/AbstractNotification.hs

Line 71 in 86936cb

actions <- box objs "box_actions"

AFAIK, "box_actions" comes from the glade, and isn't actually a valid css tag. However, since we have addClass, we should just be able to do:

  actions <- box objs "box_actions"
  addClass actions "action-buttons"

I get the sense that there's probably a better point in the code to be doing this, though.

[MyriaCore]

@tpurde well, the actual actions box should just be a GTK box. So, to accomplish this, we'd basically need to:

1. Change the position of the box from the bottom to the right
2. Change the Orientation of the action box (so the elements are stacked vertically, not horizontally)

I think you should be able to do step 2 in the CSS, but 1 is gonna be kinda difficult. This is b/c, AFAIK, you'd need to change the structure of the heirarchy to get both orientations side-by-side. You'd have to use another box or something along those lines, as I've shown in this little diagram:

What things look like now	How the structure would need to change
+---------------------------+ | |Noti Title | | |Noti Body | |Image +--------------------+ | Zone | Action Button Zone | | +----------+---------+ | |App Icon | App Name| +-----------------+---------+	+---------------------------+ | |Noti Title| Action | | |Noti Body | Button | |Image | | Zone | | Zone | | | | +--------------------+ | |App Icon | App Name| +-----------------+---------+

We could do this by nesting the boxes like this:

Orientation of surrounding box is Horizontal	Orientation of surrounding box is Vertical
+------+--------------------+ | | +----------------+ | | | | Title |Action | | |Image | | Body |Buttons | | | Zone | +----------------+ | | +--------------------+ | |App Icon | App Name| +-----------------+---------+	+------+--------------------+ | | +----------------+ | | | | Title / Body | | | | +----------------+ | |Image | | Action Buttons | | | Zone | +----------------+ | | +--------------------+ | |App Icon | App Name| +-----------------+---------+

Depending on how things were arranged now, this could be super easy, or super hard. If this is already kinda how things are implemented, then all we'd need to do is expose this outer box so the user could potentially change the orientation in the CSS (which i think is possible).

However, it could be the case that the actions box is just centered, and exists as the title & body's siblings in the same box. If this is the case, we'd basically have to lift these two into a new box that wraps them, and then expose that in the css.

I probably wouldn't be able to make this edit, since I just don't know where the heirarchy is setup (I couldn't rly find any glade xml files anywhere). Plus, this might not even be the end result you're looking for, visually. Here's what I think this might look like:

Orientation of surrounding box is Vertical	Orientation of surrounding box is Horizontal

Honestly, I think this feature is pretty doable, but it might not necessarily be what suits your needs. I assumed the things that drew you to the mac's design there is the wireframey design, and the fact that the buttons take up the entire space. You might be able to achieve something like that, but you'd still be fighting for space with the app name at the bottom, at least with this setup.

[tpurde]

Okay, I wanted something like the macOS notification but the way you edited the image looks even more beautiful.
I have no knowledge in Haskell, so sadly I'll have to wait for @phuhl's response.

[MyriaCore]

Sure, I recommend you open up a new issue for this, though. It is kinda a different thing, AFAIK this issue is specifically about exposing the action box with a CSS identifier. This new idea would be more about exposing the surrounding box in the CSS, so u can make the orientation changes I'm describing.

[MyriaCore]

Unfortunately, it doesn't actually look like boxes expose their orientation properties:
https://developer.gnome.org/gtk3/stable/chap-css-properties.html

That's rather limiting, honestly. Unless there's another property I haven't seen that does control this, you might be kinda stuck. I guess u could control orientation through settings, but that feels like it'd be kinda not great.

[tpurde]

@MyriaCore well, if changing locations gets added, couldn't I in theory do this manually?

[MyriaCore]

I guess you could, but I rly don't know how you might add changing locations. More likely is to have locations fixed, but then do some more fancy things with orientation to kinda swing elements to where you want them.

This article seems to suggest it's possible to do things with custom css properties. Maybe we could try to force something via that? I'm just trying to avoid cluttering the configs with what should probably be handled by the css style.

Maybe the property details here describe css properties? I mean, the orientation property is documented here.

[MyriaCore]

Some more links:

• SO link about custom style properties in C
• gtk_widget_class_install_style_property
• haskell's StylePropertyParser

I'm starting to lose hope, tbh. This seems like it should be such a simple thing

[tpurde]

Well, we have to wait and see what @phuhl says.

[phuhl]

I don't think, this can be achieved with pure CSS. What one had to do would be, to add a container for the buttons in the notification.glade (and notification_in_center.glade) file (checkout the glade tool) that is position to the right of the body somehow. Based on the configuration, the notification center would then append the buttons to the correct container for the desired style.

[phuhl]

While the changes from #118 don't allow for a vertical button arrangement, it enables arbitrary styling for buttons. If vertical buttons are still a desired thing, feel free to open an issues, specifically for that matter. For now, I will close this