From 9c999db4b9f59917090389627f4b6d74111592e9 Mon Sep 17 00:00:00 2001 From: Erik Reider <35975961+ErikReider@users.noreply.github.com> Date: Tue, 4 Jul 2023 20:50:12 +0200 Subject: [PATCH] Fixed menubar widget + other fixes - Tweaked default style to match the other widgets - Improved the MAN page doc - Fixed the alignment not working in GTK4 --- man/swaync.5.scd | 26 ++-- .../widgets/menubar/menubar.vala | 122 ++++++++++++------ src/style.css | 68 +++++++--- 3 files changed, 147 insertions(+), 69 deletions(-) diff --git a/man/swaync.5.scd b/man/swaync.5.scd index a13d8f7..ab2dd12 100644 --- a/man/swaync.5.scd +++ b/man/swaync.5.scd @@ -316,8 +316,12 @@ config file to be able to detect config errors type: object ++ css classes: ++ widget-menubar ++ - .widget-menubar>box>.menu-button-bar ++ - name of element given after menu or buttons with # ++ + widget-menubar-container (with additional classes "start" and "end") ++ + widget-menubar-child (direct child of the container) ++ + widget-menubar-buttons (group of buttons, "buttons" widget) ++ + widget-menubar-button (each individual button) ++ + widget-menubar-menu (the animated menu for the "menu" widget) ++ + Name of individual buttons, ex: "button#power" would be "power" ++ patternProperties: ++ menu#: ++ type: object ++ @@ -543,16 +547,16 @@ config file to be able to detect config errors }, ... ] + }, + "buttons": { + "actions": [ + { + "label": "wifi", + "command": "rofi-wifi-menu" + }, + ... + ] } - }, - "buttons": { - "actions": [ - { - "label": "wifi", - "command": "rofi-wifi-menu" - }, - ... - ] } } } diff --git a/src/controlCenter/widgets/menubar/menubar.vala b/src/controlCenter/widgets/menubar/menubar.vala index 16e1ec9..09b85d2 100644 --- a/src/controlCenter/widgets/menubar/menubar.vala +++ b/src/controlCenter/widgets/menubar/menubar.vala @@ -34,33 +34,44 @@ namespace SwayNotificationCenter.Widgets { } } - Gtk.Box menus_container; - Gtk.Box topbar_container; + Gtk.Box left_container; + Gtk.Box right_container; List menu_objects; public Menubar (string suffix, SwayncDaemon swaync_daemon, NotiDaemon noti_daemon) { base (suffix, swaync_daemon, noti_daemon); + set_orientation (Gtk.Orientation.VERTICAL); Json.Object ? config = get_config (this); if (config != null) { parse_config_objects (config); } - menus_container = new Gtk.Box (Gtk.Orientation.VERTICAL, 0); - topbar_container = new Gtk.Box (Gtk.Orientation.HORIZONTAL, 0); - topbar_container.add_css_class ("menu-button-bar"); + Gtk.Box topbar_container = new Gtk.Box (Gtk.Orientation.HORIZONTAL, 0); + append (topbar_container); - menus_container.append (topbar_container); + left_container = new Gtk.Box (Gtk.Orientation.HORIZONTAL, 0) { + css_classes = { "widget-menubar-container", "start" }, + overflow = Gtk.Overflow.HIDDEN, + hexpand = true, + halign = Gtk.Align.START, + }; + topbar_container.append (left_container); + right_container = new Gtk.Box (Gtk.Orientation.HORIZONTAL, 0) { + css_classes = { "widget-menubar-container", "end" }, + overflow = Gtk.Overflow.HIDDEN, + hexpand = true, + halign = Gtk.Align.END, + }; + topbar_container.append (right_container); for (int i = 0; i < menu_objects.length (); i++) { unowned ConfigObject ? obj = menu_objects.nth_data (i); add_menu (ref obj); } - prepend (menus_container); - foreach (var obj in menu_objects) { obj.revealer ?.set_reveal_child (false); } @@ -69,43 +80,62 @@ namespace SwayNotificationCenter.Widgets { void add_menu (ref unowned ConfigObject ? obj) { switch (obj.type) { case MenuType.BUTTONS: - Gtk.Box container = new Gtk.Box (Gtk.Orientation.HORIZONTAL, 0); + Gtk.Box container = new Gtk.Box (Gtk.Orientation.HORIZONTAL, 0) { + css_classes = { "widget-menubar-buttons", "widget-menubar-child" }, + overflow = Gtk.Overflow.HIDDEN, + }; if (obj.name != null) container.add_css_class (obj.name); - foreach (Action a in obj.actions) { - Gtk.Button b = new Gtk.Button.with_label (a.label); + foreach (Action action in obj.actions) { + Gtk.Button button = new Gtk.Button.with_label (action.label); + button.add_css_class ("widget-menubar-button"); - b.clicked.connect (() => execute_command (a.command)); + button.clicked.connect (() => execute_command (action.command)); - container.append (b); + container.append (button); } switch (obj.position) { case Position.LEFT: - topbar_container.prepend (container); + left_container.prepend (container); break; case Position.RIGHT: - topbar_container.append (container); + right_container.append (container); break; } break; case MenuType.MENU: - Gtk.Button show_button = new Gtk.Button.with_label (obj.label); + Gtk.ToggleButton show_button = new Gtk.ToggleButton.with_label (obj.label); + show_button.add_css_class ("widget-menubar-button"); + show_button.add_css_class ("widget-menubar-child"); + if (obj.name != null) show_button.add_css_class (obj.name); Gtk.Box menu = new Gtk.Box (Gtk.Orientation.VERTICAL, 0); - if (obj.name != null) menu.add_css_class (obj.name); + print ("NAME: %s\n", obj.name); - Gtk.Revealer r = new Gtk.Revealer (); - r.set_child (menu); - r.set_transition_duration (obj.animation_duration); - r.set_transition_type (obj.animation_type); - obj.revealer = r; + Gtk.Revealer revealer = new Gtk.Revealer () { + child = menu, + css_classes = { "widget-menubar-menu" }, + hexpand = true, + transition_duration = obj.animation_duration, + transition_type = obj.animation_type + }; + obj.revealer = revealer; show_button.clicked.connect (() => { - bool visible = !r.get_reveal_child (); + bool visible = !revealer.get_reveal_child (); foreach (var o in menu_objects) { o.revealer ?.set_reveal_child (false); } - r.set_reveal_child (visible); + if (visible) { + // revealer.show (); + revealer.set_reveal_child (true); + } else { + revealer.set_reveal_child (false); + Timeout.add_once (revealer.transition_duration, () => { + // revealer.hide (); + return Source.REMOVE; + }); + } }); foreach (var a in obj.actions) { @@ -116,14 +146,16 @@ namespace SwayNotificationCenter.Widgets { switch (obj.position) { case Position.RIGHT: - topbar_container.append (show_button); + show_button.halign = Gtk.Align.START; + right_container.append (show_button); break; case Position.LEFT: - topbar_container.prepend (show_button); + show_button.halign = Gtk.Align.END; + left_container.prepend (show_button); break; } - menus_container.append (r); + append (revealer); break; } } @@ -139,21 +171,35 @@ namespace SwayNotificationCenter.Widgets { if (obj == null) continue; string[] key = e.split ("#"); - string t = key[0]; MenuType type = MenuType.BUTTONS; - if (t == "buttons") type = MenuType.BUTTONS; - else if (t == "menu") type = MenuType.MENU; - else info ("Invalid type for menu-object - valid options: 'menu' || 'buttons' using default"); + switch (key[0]) { + case "buttons": + type = MenuType.BUTTONS; + break; + case "menu": + type = MenuType.MENU; + break; + default: + info ("Invalid type for menu-object - valid options: 'menu' || 'buttons' using default"); + break; + } string name = key[1]; - string ? p = get_prop (obj, "position"); - Position pos; - if (p != "left" && p != "right") { - pos = Position.RIGHT; - info ("No position for menu-object given using default"); - } else if (p == "right") pos = Position.RIGHT; - else pos = Position.LEFT; + string ? config_pos = get_prop (obj, "position"); + Position pos = Position.RIGHT; + switch (config_pos) { + case "right": + pos = Position.RIGHT; + break; + case "left": + pos = Position.LEFT; + break; + default: + pos = Position.RIGHT; + info ("No position for menu-object given using default"); + break; + } Json.Array ? actions = get_prop_array (obj, "actions"); if (actions == null) { diff --git a/src/style.css b/src/style.css index d2e1a24..0f35f90 100644 --- a/src/style.css +++ b/src/style.css @@ -296,30 +296,58 @@ } /* Menubar widget */ -.widget-menubar>box>.menu-button-bar>button { - border: none; - background: transparent; -} - -/* .AnyName { Name defined in config after # - background-color: @noti-bg; - padding: 8px; +.widget-menubar { margin: 8px; + background: @noti-bg; border-radius: 12px; } - -.AnyName>button { - background: transparent; - border: none; +.widget-menubar > box { + padding: 8px 0; } - -.AnyName>button:hover { - background-color: @noti-bg-hover; -} */ - -.topbar-buttons>button { /* Name defined in config after # */ - border: none; - background: transparent; +/* The left/right button container */ +.widget-menubar-container { +} +/* The left button container */ +.widget-menubar-container.start { + margin-left: 8px; +} +/* The right button container */ +.widget-menubar-container.end { + margin-right: 8px; +} +/* Each child element of the container (buttons box/toggle button) */ +.widget-menubar-child { + margin: 0 4px; + border-radius: 12px; +} +.widget-menubar-child:first-child { + margin-left: 0; +} +.widget-menubar-child:last-child { + margin-right: 0; +} +/* Each clickable button */ +.widget-menubar-button { +} +.widget-menubar-button:hover { + background: @noti-bg-hover; +} +.widget-menubar-button:checked { + background: @noti-bg-darker; +} +/* The container for each menubar "buttons" widget */ +.widget-menubar-buttons { +} +.widget-menubar-buttons > * { + border-radius: 0; +} +/* The menu revealer widget */ +.widget-menubar-menu { + padding: 0px 8px; +} +/* Each button in the revealer */ +.widget-menubar-menu > box > * { + margin-bottom: 8px; } /* Volume widget */