Added 3 new styles for bar buttons. (#168)

* Added a new style called split for bar buttons * Added wavy button styles. * Added padding configuration * Update bar padding * Fix styling for battery style2 * Fix icon only setting for bar * Update types and options * Add button style to exported theme props. * Fix top margin for menus.
2024-08-24 00:01:21 -07:00
parent c0d9c594c9
commit 2908ff7dd6
31 changed files with 459 additions and 58 deletions
--- a/modules/bar/Bar.ts
+++ b/modules/bar/Bar.ts
@@ -14,6 +14,8 @@ const hyprland = await Service.import("hyprland");
 import { BarItemBox as WidgetContainer } from "../shared/barItemBox.js";
 import options from "options";
 import Gdk from "gi://Gdk?version=3.0";
+import Button from "types/widgets/button.js";
+import Gtk from "types/@girs/gtk-3.0/gtk-3.0.js";

 const { layouts } = options.bar;

@@ -241,7 +243,7 @@ export const Bar = (() => {
                        setup: self => {
                            self.hook(layouts, (self) => {
                                const foundLayout = getModulesForMonitor(hyprlandMonitor, layouts.value as BarLayout);
-                                self.children = foundLayout.left.filter(mod => Object.keys(widget).includes(mod)).map(w => widget[w](hyprlandMonitor));
+                                self.children = foundLayout.left.filter(mod => Object.keys(widget).includes(mod)).map(w => widget[w](hyprlandMonitor) as Button<Gtk.Widget, unknown>);
                            });
                        },
                    }),
@@ -251,7 +253,7 @@ export const Bar = (() => {
                        setup: self => {
                            self.hook(layouts, (self) => {
                                const foundLayout = getModulesForMonitor(hyprlandMonitor, layouts.value as BarLayout);
-                                self.children = foundLayout.middle.filter(mod => Object.keys(widget).includes(mod)).map(w => widget[w](hyprlandMonitor));
+                                self.children = foundLayout.middle.filter(mod => Object.keys(widget).includes(mod)).map(w => widget[w](hyprlandMonitor) as Button<Gtk.Widget, unknown>);
                            });
                        },
                    }),
@@ -261,7 +263,7 @@ export const Bar = (() => {
                        setup: self => {
                            self.hook(layouts, (self) => {
                                const foundLayout = getModulesForMonitor(hyprlandMonitor, layouts.value as BarLayout);
-                                self.children = foundLayout.right.filter(mod => Object.keys(widget).includes(mod)).map(w => widget[w](hyprlandMonitor));
+                                self.children = foundLayout.right.filter(mod => Object.keys(widget).includes(mod)).map(w => widget[w](hyprlandMonitor) as Button<Gtk.Widget, unknown>);
                            });
                        },
                    }),
--- a/modules/bar/battery/index.ts
+++ b/modules/bar/battery/index.ts
@@ -1,6 +1,5 @@
 const battery = await Service.import("battery");
 import Gdk from 'gi://Gdk?version=3.0';
-import EventHandler from 'types/widgets/button.ts'
 import { openMenu } from "../utils.js";
 import options from "options";

@@ -42,7 +41,14 @@ const BatteryLabel = () => {

    return {
        component: Widget.Box({
-            class_name: "battery",
+            className: Utils.merge([options.theme.bar.buttons.style.bind("value"), show_label.bind("value")], (style, showLabel) => {
+                const styleMap = {
+                    default: "style1",
+                    split: "style2",
+                    wave: "style3",
+                };
+                return `battery ${styleMap[style]} ${!showLabel ? "no-label" : ""}`;
+            }),
            visible: battery.bind("available"),
            tooltip_text: battery.bind("time_remaining").as((t) => t.toString()),
            children: Utils.merge(
@@ -60,7 +66,12 @@ const BatteryLabel = () => {
                            }),
                        ];
                    } else if (batAvail && !showLabel) {
-                        return [Widget.Icon({ icon: batIcon })];
+                        return [
+                            Widget.Icon({
+                                class_name: "bar-button-icon battery",
+                                icon: batIcon
+                            })
+                        ];
                    } else {
                        return [];
                    }
--- a/modules/bar/bluetooth/index.ts
+++ b/modules/bar/bluetooth/index.ts
@@ -3,6 +3,8 @@ import Gdk from 'gi://Gdk?version=3.0';
 import options from "options";
 import { openMenu } from "../utils.js";

+const { label } = options.bar.bluetooth;
+
 const Bluetooth = () => {
    const btIcon = Widget.Label({
        label: bluetooth.bind("enabled").as((v) => v ? "󰂯" : "󰂲"),
@@ -25,7 +27,14 @@ const Bluetooth = () => {

    return {
        component: Widget.Box({
-            class_name: "volume",
+            className: Utils.merge([options.theme.bar.buttons.style.bind("value"), label.bind("value")], (style, showLabel) => {
+                const styleMap = {
+                    default: "style1",
+                    split: "style2",
+                    wave: "style3",
+                };
+                return `bluetooth ${styleMap[style]} ${!showLabel ? "no-label" : ""}`;
+            }),
            children: options.bar.bluetooth.label.bind("value").as((showLabel) => {
                if (showLabel) {
                    return [btIcon, btText];
--- a/modules/bar/media/index.ts
+++ b/modules/bar/media/index.ts
@@ -16,12 +16,12 @@ const Media = () => {

    const getIconForPlayer = (playerName: string): string => {
        const windowTitleMap = [
-            ["Firefox", "󰈹 "],
-            ["Microsoft Edge", "󰇩 "],
-            ["Discord", " "],
-            ["Plex", "󰚺 "],
-            ["Spotify", "󰓇 "],
-            ["(.*)", "󰝚 "],
+            ["Firefox", "󰈹"],
+            ["Microsoft Edge", "󰇩"],
+            ["Discord", ""],
+            ["Plex", "󰚺"],
+            ["Spotify", "󰓇"],
+            ["(.*)", "󰝚"],
        ];

        const foundMatch = windowTitleMap.find((wt) =>
@@ -59,7 +59,14 @@ const Media = () => {
        component: Widget.Box({
            visible: false,
            child: Widget.Box({
-                class_name: "media",
+                className: Utils.merge([options.theme.bar.buttons.style.bind("value"), show_label.bind("value")], (style, showLabel) => {
+                    const styleMap = {
+                        default: "style1",
+                        split: "style2",
+                        wave: "style3",
+                    };
+                    return `media ${styleMap[style]}`;
+                }),
                child: Widget.Box({
                    children: [
                        Widget.Label({
--- a/modules/bar/menu/index.ts
+++ b/modules/bar/menu/index.ts
@@ -5,8 +5,16 @@ import options from "options";
 const Menu = () => {
    return {
        component: Widget.Box({
+            className: Utils.merge([options.theme.bar.buttons.style.bind("value")], (style) => {
+                const styleMap = {
+                    default: "style1",
+                    split: "style2",
+                    wave: "style3",
+                };
+                return `dashboard ${styleMap[style]}`;
+            }),
            child: Widget.Label({
-                class_name: "bar-menu_label txt-icon bar",
+                class_name: "bar-menu_label bar-button_icon txt-icon bar",
                label: options.bar.launcher.icon.bind("value"),
            }),
        }),
--- a/modules/bar/network/index.ts
+++ b/modules/bar/network/index.ts
@@ -8,8 +8,16 @@ const { label: networkLabel, truncation, truncation_size } = options.bar.network
 const Network = () => {
    return {
        component: Widget.Box({
-            vpack: "center",
-            class_name: "bar-network",
+            vpack: "fill",
+            vexpand: true,
+            className: Utils.merge([options.theme.bar.buttons.style.bind("value"), networkLabel.bind("value")], (style, showLabel) => {
+                const styleMap = {
+                    default: "style1",
+                    split: "style2",
+                    wave: "style3",
+                };
+                return `network ${styleMap[style]}${!showLabel ? " no-label" : ""}`;
+            }),
            children: [
                Widget.Icon({
                    class_name: "bar-button-icon network",
@@ -25,7 +33,7 @@ const Network = () => {
                    })
                }),
                Widget.Box({
-                    class_name: "bar-button-icon network",
+                    vpack: "center",
                    child: Utils.merge([
                        network.bind("primary"),
                        network.bind("wifi"),
--- a/modules/bar/notifications/index.ts
+++ b/modules/bar/notifications/index.ts
@@ -10,6 +10,14 @@ export const Notifications = () => {
    return {
        component: Widget.Box({
            hpack: "start",
+            className: Utils.merge([options.theme.bar.buttons.style.bind("value"), show_total.bind("value")], (style, showTotal) => {
+                const styleMap = {
+                    default: "style1",
+                    split: "style2",
+                    wave: "style3",
+                };
+                return `notifications ${styleMap[style]} ${!showTotal ? "no-label" : ""}`;
+            }),
            child: Widget.Box({
                hpack: "start",
                class_name: "bar-notifications",
--- a/modules/bar/systray/index.ts
+++ b/modules/bar/systray/index.ts
@@ -41,6 +41,7 @@ const SysTray = () => {
        isVisible: true,
        boxClass: "systray",
        isVis,
+        props: {}
    };
 };

--- a/modules/bar/volume/index.ts
+++ b/modules/bar/volume/index.ts
@@ -26,21 +26,30 @@ const Volume = () => {
    };

    const volIcn = Widget.Label({
-        vpack: "center",
+        hexpand: true,
        label: getIcon(),
        class_name: "bar-button-icon volume txt-icon bar",
    });

    const volPct = Widget.Label({
-        vpack: "center",
+        hexpand: true,
        label: audio.speaker.bind("volume").as((v) => `${Math.round(v * 100)}%`),
        class_name: "bar-button-label volume",
    });

    return {
        component: Widget.Box({
-            vpack: "center",
-            class_name: "volume",
+            hexpand: true,
+            vexpand: true,
+            className: Utils.merge([options.theme.bar.buttons.style.bind("value"), options.bar.volume.label.bind("value")], (style, showLabel) => {
+                const styleMap = {
+                    default: "style1",
+                    split: "style2",
+                    wave: "style3",
+                };
+
+                return `volume ${styleMap[style]} ${!showLabel ? "no-label" : ""}`;
+            }),
            children: options.bar.volume.label.bind("value").as((showLabel) => {
                if (showLabel) {
                    return [volIcn, volPct];
--- a/modules/bar/window_title/index.ts
+++ b/modules/bar/window_title/index.ts
@@ -135,19 +135,29 @@ const filterTitle = (windowtitle: ActiveClient) => {
 const ClientTitle = () => {
    return {
        component: Widget.Box({
-            children: [
-                Widget.Label({
+            className: Utils.merge([options.theme.bar.buttons.style.bind("value"), options.bar.windowtitle.label.bind("value")], (style, showLabel) => {
+                const styleMap = {
+                    default: "style1",
+                    split: "style2",
+                    wave: "style3",
+                };
+                return `windowtitle ${styleMap[style]} ${!showLabel ? "no-label" : ""}`;
+            }),
+            children: options.bar.windowtitle.label.bind("value").as((showLabel) => {
+                const titleIcon = Widget.Label({
                    class_name: "bar-button-icon windowtitle txt-icon bar",
                    label: hyprland.active.bind("client").as((v) => filterTitle(v).icon),
-                }),
-                Widget.Label({
+                });
+                const titleLabel = Widget.Label({
                    class_name: "bar-button-label windowtitle",
                    label: hyprland.active.bind("client").as((v) => filterTitle(v).label),
-                })
-            ]
+                });
+                return showLabel ? [titleIcon, titleLabel] : [titleIcon];
+            }),
        }),
        isVisible: true,
        boxClass: "windowtitle",
+        props: {}
    };
 };