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
This commit is contained in:
Erik Reider 2023-07-04 20:50:12 +02:00
parent 9a4937c3b8
commit 9c999db4b9
3 changed files with 147 additions and 69 deletions

View File

@ -316,8 +316,12 @@ config file to be able to detect config errors
type: object ++ type: object ++
css classes: ++ css classes: ++
widget-menubar ++ widget-menubar ++
.widget-menubar>box>.menu-button-bar ++ widget-menubar-container (with additional classes "start" and "end") ++
name of element given after menu or buttons with # ++ 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: ++ patternProperties: ++
menu#<name>: ++ menu#<name>: ++
type: object ++ 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"
},
...
]
} }
} }
} }

View File

@ -34,33 +34,44 @@ namespace SwayNotificationCenter.Widgets {
} }
} }
Gtk.Box menus_container; Gtk.Box left_container;
Gtk.Box topbar_container; Gtk.Box right_container;
List<ConfigObject ?> menu_objects; List<ConfigObject ?> menu_objects;
public Menubar (string suffix, SwayncDaemon swaync_daemon, NotiDaemon noti_daemon) { public Menubar (string suffix, SwayncDaemon swaync_daemon, NotiDaemon noti_daemon) {
base (suffix, swaync_daemon, noti_daemon); base (suffix, swaync_daemon, noti_daemon);
set_orientation (Gtk.Orientation.VERTICAL);
Json.Object ? config = get_config (this); Json.Object ? config = get_config (this);
if (config != null) { if (config != null) {
parse_config_objects (config); parse_config_objects (config);
} }
menus_container = new Gtk.Box (Gtk.Orientation.VERTICAL, 0);
topbar_container = new Gtk.Box (Gtk.Orientation.HORIZONTAL, 0); Gtk.Box topbar_container = new Gtk.Box (Gtk.Orientation.HORIZONTAL, 0);
topbar_container.add_css_class ("menu-button-bar"); 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++) { for (int i = 0; i < menu_objects.length (); i++) {
unowned ConfigObject ? obj = menu_objects.nth_data (i); unowned ConfigObject ? obj = menu_objects.nth_data (i);
add_menu (ref obj); add_menu (ref obj);
} }
prepend (menus_container);
foreach (var obj in menu_objects) { foreach (var obj in menu_objects) {
obj.revealer ?.set_reveal_child (false); obj.revealer ?.set_reveal_child (false);
} }
@ -69,43 +80,62 @@ namespace SwayNotificationCenter.Widgets {
void add_menu (ref unowned ConfigObject ? obj) { void add_menu (ref unowned ConfigObject ? obj) {
switch (obj.type) { switch (obj.type) {
case MenuType.BUTTONS: 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); if (obj.name != null) container.add_css_class (obj.name);
foreach (Action a in obj.actions) { foreach (Action action in obj.actions) {
Gtk.Button b = new Gtk.Button.with_label (a.label); 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) { switch (obj.position) {
case Position.LEFT: case Position.LEFT:
topbar_container.prepend (container); left_container.prepend (container);
break; break;
case Position.RIGHT: case Position.RIGHT:
topbar_container.append (container); right_container.append (container);
break; break;
} }
break; break;
case MenuType.MENU: 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); 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 (); Gtk.Revealer revealer = new Gtk.Revealer () {
r.set_child (menu); child = menu,
r.set_transition_duration (obj.animation_duration); css_classes = { "widget-menubar-menu" },
r.set_transition_type (obj.animation_type); hexpand = true,
obj.revealer = r; transition_duration = obj.animation_duration,
transition_type = obj.animation_type
};
obj.revealer = revealer;
show_button.clicked.connect (() => { show_button.clicked.connect (() => {
bool visible = !r.get_reveal_child (); bool visible = !revealer.get_reveal_child ();
foreach (var o in menu_objects) { foreach (var o in menu_objects) {
o.revealer ?.set_reveal_child (false); 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) { foreach (var a in obj.actions) {
@ -116,14 +146,16 @@ namespace SwayNotificationCenter.Widgets {
switch (obj.position) { switch (obj.position) {
case Position.RIGHT: case Position.RIGHT:
topbar_container.append (show_button); show_button.halign = Gtk.Align.START;
right_container.append (show_button);
break; break;
case Position.LEFT: case Position.LEFT:
topbar_container.prepend (show_button); show_button.halign = Gtk.Align.END;
left_container.prepend (show_button);
break; break;
} }
menus_container.append (r); append (revealer);
break; break;
} }
} }
@ -139,21 +171,35 @@ namespace SwayNotificationCenter.Widgets {
if (obj == null) continue; if (obj == null) continue;
string[] key = e.split ("#"); string[] key = e.split ("#");
string t = key[0];
MenuType type = MenuType.BUTTONS; MenuType type = MenuType.BUTTONS;
if (t == "buttons") type = MenuType.BUTTONS; switch (key[0]) {
else if (t == "menu") type = MenuType.MENU; case "buttons":
else info ("Invalid type for menu-object - valid options: 'menu' || 'buttons' using default"); 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 name = key[1];
string ? p = get_prop<string> (obj, "position"); string ? config_pos = get_prop<string> (obj, "position");
Position pos; Position pos = Position.RIGHT;
if (p != "left" && p != "right") { switch (config_pos) {
pos = Position.RIGHT; case "right":
info ("No position for menu-object given using default"); pos = Position.RIGHT;
} else if (p == "right") pos = Position.RIGHT; break;
else pos = Position.LEFT; 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"); Json.Array ? actions = get_prop_array (obj, "actions");
if (actions == null) { if (actions == null) {

View File

@ -296,30 +296,58 @@
} }
/* Menubar widget */ /* Menubar widget */
.widget-menubar>box>.menu-button-bar>button { .widget-menubar {
border: none;
background: transparent;
}
/* .AnyName { Name defined in config after #
background-color: @noti-bg;
padding: 8px;
margin: 8px; margin: 8px;
background: @noti-bg;
border-radius: 12px; border-radius: 12px;
} }
.widget-menubar > box {
.AnyName>button { padding: 8px 0;
background: transparent;
border: none;
} }
/* The left/right button container */
.AnyName>button:hover { .widget-menubar-container {
background-color: @noti-bg-hover; }
} */ /* The left button container */
.widget-menubar-container.start {
.topbar-buttons>button { /* Name defined in config after # */ margin-left: 8px;
border: none; }
background: transparent; /* 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 */ /* Volume widget */