Adding the ability to have dropdown menu for modules

[benjamin-voisin]

Related to #1064 : Every ALabel module now can have a dropdown menu that can be spawned using any click you want. The menu is defined with a xml file, and the comportment of each button can be configured in the waybar/conf file. The menus can by styled in the waybar/style.css.

For example, you can now easily built a well-integrated power module with this config:

"custom/power": {
    "format" : "⏻ ",
    "tooltip": false,
    "menu": "on-click",
    "menu-file": "~/.config/waybar/power_menu.xml",
    "menu-actions": {
        "shutdown": "shutdown",
        "reboot": "reboot",
	"suspend": "systemctl suspend",
	"hibernate": "systemctl hibernate",
    },
},

Where the ~/.config/waybar/power_menu.xml look like this:

<?xml version="1.0" encoding="UTF-8"?>
<interface>
  <object class="GtkMenu" id="menu">
    <child>
		<object class="GtkMenuItem" id="suspend">
			<property name="label">Suspend</property>
        </object>
	</child>
	<child>
        <object class="GtkMenuItem" id="hibernate">
			<property name="label">Hibernate</property>
        </object>
	</child>
    <child>
        <object class="GtkMenuItem" id="shutdown">
			<property name="label">Shutdown</property>
        </object>
    </child>
    <child>
      <object class="GtkSeparatorMenuItem" id="delimiter1"/>
    </child>
    <child>
		<object class="GtkMenuItem" id="reboot">
			<property name="label">Reboot</property>
		</object>
    </child>
  </object>
</interface>

This gives something like this:

And it can by styled with some css:

menu {
	border-radius: 15px;
	background: #161320;
	color: #B5E8E0;
}
menuitem {
	border-radius: 15px;
}

To look like this :

The GObject is in the AModule class, so every module could have such menu, but I figured that only the ALabel class should build it automatically reading the config. For other AModule, it could be made differently.

[nevaforget]

Hey guys, wouldn't it be possible to use the already existing groups? But just adding orientation = popout-vertical | popout-horizontal | popout-inherit or something.
Why having an additional xml file and why doesn't it contain the actions instead of having an extra menu-actions. Looks so inconvenient.

Thanks for your effort guys!
Best regards

[benjamin-voisin]

@nevaforget My implementation uses Gtk objects in a more general way. That is why their is a xml file, it's not a random file, it's a Gtk ui definition. That means that the user can use all the power of Gtk menus, with documented and very used xml files. That's also why the actions need to be defined separatly : the Gtk ui definition doesn't allow this.

[Alexays]

Can you add it to the man, as well as an example to the default conf? :)

[benjamin-voisin]

@Alexays I've added the checks asked, and I made sure that the app doesn't crash when trying to build the popup menu. If something fails during constructions, it display a warning message explaining why, and still launch the waybar.

I've also updated the manpages of all the modules supporting this behaviour, and created a dedicated waybar-menu manpage.

[yorunoken]

This would be so so so so useful to have.
Any updates?

[Alexays]

Thanks!

[wmtrx]

I'm using the code you provided, but the GtkSeparatorMenuItem seem to not show up, there's just no spacing between items at all like it's ignored completely, what am I doing wrong?

[benjamin-voisin]

I'm using the code you provided, but the GtkSeparatorMenuItem seem to not show up, there's just no spacing between items at all like it's ignored completely, what am I doing wrong?

@user880907 Does the example I provided above work ? It has a GtkSeparatorMenuItem and it shows up correctly. You may add padding into the style.css file to choose the spacing.

[wmtrx]

@benjamin-voisin It looks like this.
Adding padding sounds good but I don't know how to target particular menu item in style.css.

[rieje]

"menu-file": "~/.config/waybar/power_menu.xml" doesn't seem to work as in the example--I was not able to use ~ or $HOME and only hardcoding the path like /home/rieje/waybar/power_menu.xml does (waybar says it's not able to see the file).

Also, is it possible to color the icon (preferably not the text)?

[Heus-Sueh]

"menu-file": "~/.config/waybar/power_menu.xml" doesn't seem to work as in the example--I was not able to use ~ or $HOME and only hardcoding the path like /home/rieje/waybar/power_menu.xml does (waybar says it's not able to see the file).

the same thing is happening to me

[tom-gora]

Hi. Does anyone knows of any way to dynamically reload the xml template source without restarting waybar itself? I was interested in scripting myself a small dropdown with todo list for the day I could click and and tick off but that requires changing state dynamically.

Scratch that. The functionality also depends on statically declared menu actions in the module definition so I don't suppose this would be an available option. In this case it is indeed better to have a full-fledged rofi instance.

[MariaSolOs]

This is a great feature! Could the use of the "menu" properties in the custom module be documented in the wiki? I had to look at the default config and this PR to discover how to hook up such menu.