Show images/icons in system tray menu items

[fnune]

This issue is cross-posted from tauri-apps/tao#645

Linux

GTK menu items can be passed a box as a child instead of labels:

let mut menu = gtk::Menu::new();
                                                                                             
// A bit of a hack: this defaults to `false` in most "modern" (2010+ or so) DEs. This line
// enables menu images just for this application.
let settings = gtk::Settings::default().unwrap();
glib::ObjectExt::set_property(&settings, "gtk-menu-images", true);
                                                                                             
// One used to be able to instantiate an ImageMenuItem, but now one needs to build a box and
// pack some children instead:
let image = gtk::Image::from_file(icon_path.join("icon.png"));
let label = gtk::Label::new(Some("Hi there"));
                                                                                             
let mut menu_item_box = gtk::Box::builder().build();
menu_item_box.pack_start(&image, true, true, 0);
menu_item_box.pack_start(&label, true, true, 0);
                                                                                             
let menu_item = gtk::builders::MenuItemBuilder::new().child(&menu_item_box).build();
menu.append(&menu_item);
                                                                                             
indicator.set_menu(&mut menu);
menu.show_all();
                                                                                             
gtk::main();

ImageMenuItem is deprecated: https://docs.gtk.org/gtk3/class.ImageMenuItem.html

MacOS

Not sure how it would be implemented but going by MeetingBar, it's possible: https://github.com/leits/MeetingBar

[amrbashir]

without gtk::ImageMenuItem, there will be an ugly padding at the start, see the first one

more at https://stackoverflow.com/questions/48452717/how-to-replace-the-deprecated-gtk3-gtkimagemenuitem

[fnune]

When I do this using GNOME 3.38 the image appears on the right and looks quite good!

[fnune]

But I haven't tried GTK4. Maybe that looks worse.

[amrbashir]

we are using GTK3, and it is weird that it is on the Right, it is supposed to be on the left, here is an example with my current implementation with the default Adawita theme

[fnune]

For what it's worth my box is Debian stable (11/bullseye). And:

 ~/.dotfiles [127] => gnome-shell --version                                                                                            17:47:27
GNOME Shell 3.38.6

[amrbashir]

found a workarouond!

by adding a custom css to the menu item and using margin-left: -22px;:

        let box_container = gtk::Box::new(Orientation::Horizontal, 6);
        let style_context = box_container.style_context();
        let css_provider = gtk::CssProvider::new();
        let theme = r#"
            box {
                margin-left: -22px;
            }
          "#;
        let _ = css_provider.load_from_data(theme.as_bytes());

[fnune]

Looks good, but the pixel value probably won't work for all environments... I also wonder what makes my image appear on the right side 👀

[fnune]

I don't know how many CSS features are available. Maybe you can do a transformX(-100%) or something...? I'm still unsure a portable solution is attainable.

[amrbashir]

Looks good, but the pixel value probably won't work for all environments...

yeah, but it is a start, I will look into it again later if someone reports it.