Fix NerdFont icon alignments. (#143)

* WIP * Fix nerdfont icon alignments * Ship needed fonts * Remove italicised fonts * Update readme and separate OSD settings into their own category. * Dashboard styling updates --------- Co-authored-by: matavach <erik@matijevich.org>
2024-08-18 00:32:22 -07:00
parent a1beac4c05
commit b200b6fadb
40 changed files with 263 additions and 150 deletions
--- a/modules/bar/bluetooth/index.ts
+++ b/modules/bar/bluetooth/index.ts
@@ -6,7 +6,7 @@ import { openMenu } from "../utils.js";
 const Bluetooth = () => {
    const btIcon = Widget.Label({
        label: bluetooth.bind("enabled").as((v) => v ? "󰂯" : "󰂲"),
-        class_name: "bar-button-icon bluetooth",
+        class_name: "bar-button-icon bluetooth txt-icon bar",
    });

    const btText = Widget.Label({
--- a/modules/bar/media/index.ts
+++ b/modules/bar/media/index.ts
@@ -40,7 +40,7 @@ const Media = () => {
            const trackArtist = show_artist.value
                ? ` - ${track_artists.join(', ')}`
                : ``;
-            const truncatedLabel = truncation.value 
+            const truncatedLabel = truncation.value
                ? `${track_title + trackArtist}`.substring(0, truncation_size.value)
                : `${track_title + trackArtist}`;

@@ -63,7 +63,7 @@ const Media = () => {
                child: Widget.Box({
                    children: [
                        Widget.Label({
-                            class_name: "bar-button-icon media",
+                            class_name: "bar-button-icon media txt-icon bar",
                            label: songIcon.bind("value").as(v => v || "󰝚"),
                        }),
                        Widget.Label({
--- a/modules/bar/menu/index.ts
+++ b/modules/bar/menu/index.ts
@@ -6,7 +6,7 @@ const Menu = () => {
    return {
        component: Widget.Box({
            child: Widget.Label({
-                class_name: "bar-menu_label",
+                class_name: "bar-menu_label txt-icon bar",
                label: options.bar.launcher.icon.bind("value"),
            }),
        }),
--- a/modules/bar/notifications/index.ts
+++ b/modules/bar/notifications/index.ts
@@ -18,7 +18,7 @@ export const Notifications = () => {
                    (notif, dnd, showTotal) => {
                        const notifIcon = Widget.Label({
                            hpack: "center",
-                            class_name: "bar-button-icon notifications",
+                            class_name: "bar-button-icon notifications txt-icon bar",
                            label: dnd ? "󰂛" : notif.length > 0 ? "󱅫" : "󰂚",
                        });

--- a/modules/bar/volume/index.ts
+++ b/modules/bar/volume/index.ts
@@ -3,8 +3,6 @@ const audio = await Service.import("audio");
 import { openMenu } from "../utils.js";
 import options from "options";

-import { globalMousePos } from "globals.js";
-
 const Volume = () => {
    const icons = {
        101: "󰕾",
@@ -30,7 +28,7 @@ const Volume = () => {
    const volIcn = Widget.Label({
        vpack: "center",
        label: getIcon(),
-        class_name: "bar-button-icon volume",
+        class_name: "bar-button-icon volume txt-icon bar",
    });

    const volPct = Widget.Label({
--- a/modules/bar/window_title/index.ts
+++ b/modules/bar/window_title/index.ts
@@ -31,7 +31,7 @@ const ClientTitle = () => {
        component: Widget.Box({
            children: [
                Widget.Label({
-                    class_name: "bar-button-icon windowtitle",
+                    class_name: "bar-button-icon windowtitle txt-icon bar",
                    label: hyprland.active.bind("client").as((v) => filterTitle(v).icon),
                }),
                Widget.Label({
--- a/modules/bar/workspaces/index.ts
+++ b/modules/bar/workspaces/index.ts
@@ -2,13 +2,13 @@ const hyprland = await Service.import("hyprland");
 import { WorkspaceRule, WorkspaceMap } from "lib/types/workspace";
 import options from "options";

-const { 
-    workspaces, 
+const {
+    workspaces,
    monitorSpecific,
-    workspaceMask, 
-    reverse_scroll, 
-    scroll_speed, 
-    spacing 
+    workspaceMask,
+    reverse_scroll,
+    scroll_speed,
+    spacing
 } = options.bar.workspaces;

 function range(length: number, start = 1) {
@@ -188,7 +188,7 @@ const Workspaces = (monitor = -1, ws = 8) => {
                                        ],
                                        (show_icons, show_numbered, numbered_active_indicator) => {
                                            if (show_icons) {
-                                                return `workspace-icon`;
+                                                return `workspace-icon txt-icon bar`;
                                            }
                                            if (show_numbered) {
                                                const numActiveInd = hyprland.active.workspace.id === i
@@ -270,4 +270,4 @@ const Workspaces = (monitor = -1, ws = 8) => {
        }
    };
 };
-export { Workspaces };
+export { Workspaces };
--- a/modules/menus/audio/available/InputDevices.ts
+++ b/modules/menus/audio/available/InputDevices.ts
@@ -37,8 +37,8 @@ const renderInputDevices = (inputDevices: Stream[]) => {
                                    .bind("description")
                                    .as((v) =>
                                        device.description === v
-                                            ? "menu-button-icon active input"
-                                            : "menu-button-icon input",
+                                            ? "menu-button-icon active input txt-icon"
+                                            : "menu-button-icon input txt-icon",
                                    ),
                                label: "",
                            }),
--- a/modules/menus/audio/available/PlaybackDevices.ts
+++ b/modules/menus/audio/available/PlaybackDevices.ts
@@ -31,8 +31,8 @@ const renderPlaybacks = (playbackDevices: Stream[]) => {
                                    .bind("description")
                                    .as((v) =>
                                        device.description === v
-                                            ? "menu-button-icon active playback"
-                                            : "menu-button-icon playback",
+                                            ? "menu-button-icon active playback txt-icon"
+                                            : "menu-button-icon playback txt-icon",
                                    ),
                                label: "",
                            }),
--- a/modules/menus/bluetooth/devices/connectedControls.ts
+++ b/modules/menus/bluetooth/devices/connectedControls.ts
@@ -13,7 +13,7 @@ const connectedControls = (dev: BluetoothDevice, connectedDevices: BluetoothDevi
                class_name: "menu-icon-button unpair bluetooth",
                child: Widget.Label({
                    tooltip_text: dev.paired ? "Unpair" : "Pair",
-                    class_name: "menu-icon-button-label unpair bluetooth",
+                    class_name: "menu-icon-button-label unpair bluetooth txt-icon",
                    label: dev.paired ? "" : "",
                }),
                on_primary_click: () =>
@@ -32,7 +32,7 @@ const connectedControls = (dev: BluetoothDevice, connectedDevices: BluetoothDevi
                class_name: "menu-icon-button disconnect bluetooth",
                child: Widget.Label({
                    tooltip_text: dev.connected ? "Disconnect" : "Connect",
-                    class_name: "menu-icon-button-label disconnect bluetooth",
+                    class_name: "menu-icon-button-label disconnect bluetooth txt-icon",
                    label: dev.connected ? "󱘖" : "",
                }),
                on_primary_click: () => dev.setConnection(!dev.connected),
@@ -41,7 +41,7 @@ const connectedControls = (dev: BluetoothDevice, connectedDevices: BluetoothDevi
                class_name: "menu-icon-button untrust bluetooth",
                child: Widget.Label({
                    tooltip_text: dev.trusted ? "Untrust" : "Trust",
-                    class_name: "menu-icon-button-label untrust bluetooth",
+                    class_name: "menu-icon-button-label untrust bluetooth txt-icon",
                    label: dev.trusted ? "" : "󱖡",
                }),
                on_primary_click: () =>
@@ -60,7 +60,7 @@ const connectedControls = (dev: BluetoothDevice, connectedDevices: BluetoothDevi
                class_name: "menu-icon-button delete bluetooth",
                child: Widget.Label({
                    tooltip_text: "Forget",
-                    class_name: "menu-icon-button-label delete bluetooth",
+                    class_name: "menu-icon-button-label delete bluetooth txt-icon",
                    label: "󰆴",
                }),
                on_primary_click: () => {
--- a/modules/menus/bluetooth/devices/devicelist.ts
+++ b/modules/menus/bluetooth/devices/devicelist.ts
@@ -86,7 +86,7 @@ const devices = (bluetooth: Bluetooth, self: Box<any, any>) => {
                                        children: [
                                            Widget.Label({
                                                vpack: "start",
-                                                class_name: `menu-button-icon bluetooth ${conDevNames.includes(device.address) ? "active" : ""}`,
+                                                class_name: `menu-button-icon bluetooth ${conDevNames.includes(device.address) ? "active" : ""} txt-icon`,
                                                label: getBluetoothIcon(`${device["icon-name"]}-symbolic`),
                                            }),
                                            Widget.Box({
--- a/modules/menus/calendar/weather/stats/index.ts
+++ b/modules/menus/calendar/weather/stats/index.ts
@@ -16,7 +16,7 @@ export const TodayStats = (theWeather: Variable<Weather>) => {
                class_name: "weather wind",
                children: [
                    Widget.Label({
-                        class_name: "weather wind icon",
+                        class_name: "weather wind icon txt-icon",
                        label: "",
                    }),
                    Widget.Label({
@@ -37,7 +37,7 @@ export const TodayStats = (theWeather: Variable<Weather>) => {
                class_name: "weather precip",
                children: [
                    Widget.Label({
-                        class_name: "weather precip icon",
+                        class_name: "weather precip icon txt-icon",
                        label: "",
                    }),
                    Widget.Label({
--- a/modules/menus/calendar/weather/temperature/index.ts
+++ b/modules/menus/calendar/weather/temperature/index.ts
@@ -64,7 +64,7 @@ export const TodayTemperature = (theWeather: Variable<Weather>) => {
                                    .bind("value")
                                    .as(
                                        (v) =>
-                                            `calendar-menu-weather today temp label icon ${getIcon(Math.ceil(v.current.temp_f)).color}`,
+                                            `calendar-menu-weather today temp label icon txt-icon ${getIcon(Math.ceil(v.current.temp_f)).color}`,
                                    ),
                                label: theWeather
                                    .bind("value")
--- a/modules/menus/dashboard/controls/index.ts
+++ b/modules/menus/dashboard/controls/index.ts
@@ -4,93 +4,98 @@ const notifications = await Service.import("notifications");
 const audio = await Service.import("audio");

 const Controls = () => {
-  return Widget.Box({
-    class_name: "dashboard-card controls-container",
-    hpack: "fill",
-    vpack: "fill",
-    expand: true,
-    children: [
-      Widget.Button({
-        tooltip_text: "Toggle Wifi",
+    return Widget.Box({
+        class_name: "dashboard-card controls-container",
+        hpack: "fill",
+        vpack: "fill",
        expand: true,
-        setup: (self) => {
-          self.hook(network, () => {
-            return (self.class_name = `dashboard-button wifi ${!network.wifi.enabled ? "disabled" : ""}`);
-          });
-        },
-        on_primary_click: () => network.toggleWifi(),
-        child: Widget.Label({
-          setup: (self) => {
-            self.hook(network, () => {
-              return (self.label = network.wifi.enabled ? "󰤨" : "󰤭");
-            });
-          },
-        }),
-      }),
-      Widget.Button({
-        tooltip_text: "Toggle Bluetooth",
-        expand: true,
-        class_name: bluetooth
-          .bind("enabled")
-          .as(
-            (btOn) => `dashboard-button bluetooth ${!btOn ? "disabled" : ""}`,
-          ),
-        on_primary_click: () => bluetooth.toggle(),
-        child: Widget.Label({
-          label: bluetooth.bind("enabled").as((btOn) => (btOn ? "󰂯" : "󰂲")),
-        }),
-      }),
-      Widget.Button({
-        tooltip_text: "Toggle Notifications",
-        expand: true,
-        class_name: notifications
-          .bind("dnd")
-          .as(
-            (dnd) => `dashboard-button notifications ${dnd ? "disabled" : ""}`,
-          ),
-        on_primary_click: () => (notifications.dnd = !notifications.dnd),
-        child: Widget.Label({
-          label: notifications.bind("dnd").as((dnd) => (dnd ? "󰂛" : "󰂚")),
-        }),
-      }),
-      Widget.Button({
-        tooltip_text: "Toggle Mute (Playback)",
-        expand: true,
-        on_primary_click: () =>
-          (audio.speaker.is_muted = !audio.speaker.is_muted),
-        setup: (self) => {
-          self.hook(audio, () => {
-            return (self.class_name = `dashboard-button playback ${audio.speaker.is_muted ? "disabled" : ""}`);
-          });
-        },
-        child: Widget.Label({
-          setup: (self) => {
-            self.hook(audio, () => {
-              return (self.label = audio.speaker.is_muted ? "󰖁" : "󰕾");
-            });
-          },
-        }),
-      }),
-      Widget.Button({
-        tooltip_text: "Toggle Mute (Microphone)",
-        expand: true,
-        on_primary_click: () =>
-          (audio.microphone.is_muted = !audio.microphone.is_muted),
-        setup: (self) => {
-          self.hook(audio, () => {
-            return (self.class_name = `dashboard-button input ${audio.microphone.is_muted ? "disabled" : ""}`);
-          });
-        },
-        child: Widget.Label({
-          setup: (self) => {
-            self.hook(audio, () => {
-              return (self.label = audio.microphone.is_muted ? "󰍭" : "󰍬");
-            });
-          },
-        }),
-      }),
-    ],
-  });
+        children: [
+            Widget.Button({
+                tooltip_text: "Toggle Wifi",
+                expand: true,
+                setup: (self) => {
+                    self.hook(network, () => {
+                        return (self.class_name = `dashboard-button wifi ${!network.wifi.enabled ? "disabled" : ""}`);
+                    });
+                },
+                on_primary_click: () => network.toggleWifi(),
+                child: Widget.Label({
+                    class_name: "txt-icon",
+                    setup: (self) => {
+                        self.hook(network, () => {
+                            return (self.label = network.wifi.enabled ? "󰤨" : "󰤭");
+                        });
+                    },
+                }),
+            }),
+            Widget.Button({
+                tooltip_text: "Toggle Bluetooth",
+                expand: true,
+                class_name: bluetooth
+                    .bind("enabled")
+                    .as(
+                        (btOn) => `dashboard-button bluetooth ${!btOn ? "disabled" : ""}`,
+                    ),
+                on_primary_click: () => bluetooth.toggle(),
+                child: Widget.Label({
+                    class_name: "txt-icon",
+                    label: bluetooth.bind("enabled").as((btOn) => (btOn ? "󰂯" : "󰂲")),
+                }),
+            }),
+            Widget.Button({
+                tooltip_text: "Toggle Notifications",
+                expand: true,
+                class_name: notifications
+                    .bind("dnd")
+                    .as(
+                        (dnd) => `dashboard-button notifications ${dnd ? "disabled" : ""}`,
+                    ),
+                on_primary_click: () => (notifications.dnd = !notifications.dnd),
+                child: Widget.Label({
+                    class_name: "txt-icon",
+                    label: notifications.bind("dnd").as((dnd) => (dnd ? "󰂛" : "󰂚")),
+                }),
+            }),
+            Widget.Button({
+                tooltip_text: "Toggle Mute (Playback)",
+                expand: true,
+                on_primary_click: () =>
+                    (audio.speaker.is_muted = !audio.speaker.is_muted),
+                setup: (self) => {
+                    self.hook(audio, () => {
+                        return (self.class_name = `dashboard-button playback ${audio.speaker.is_muted ? "disabled" : ""}`);
+                    });
+                },
+                child: Widget.Label({
+                    class_name: "txt-icon",
+                    setup: (self) => {
+                        self.hook(audio, () => {
+                            return (self.label = audio.speaker.is_muted ? "󰖁" : "󰕾");
+                        });
+                    },
+                }),
+            }),
+            Widget.Button({
+                tooltip_text: "Toggle Mute (Microphone)",
+                expand: true,
+                on_primary_click: () =>
+                    (audio.microphone.is_muted = !audio.microphone.is_muted),
+                setup: (self) => {
+                    self.hook(audio, () => {
+                        return (self.class_name = `dashboard-button input ${audio.microphone.is_muted ? "disabled" : ""}`);
+                    });
+                },
+                child: Widget.Label({
+                    class_name: "txt-icon",
+                    setup: (self) => {
+                        self.hook(audio, () => {
+                            return (self.label = audio.microphone.is_muted ? "󰍭" : "󰍬");
+                        });
+                    },
+                }),
+            }),
+        ],
+    });
 };

 export { Controls };
--- a/modules/menus/dashboard/shortcuts/index.ts
+++ b/modules/menus/dashboard/shortcuts/index.ts
@@ -88,7 +88,7 @@ const Shortcuts = () => {
                                    .bind("value")
                                    .as((cmd) => () => handleClick(cmd)),
                                child: Widget.Label({
-                                    class_name: "button-label",
+                                    class_name: "button-label txt-icon",
                                    label: left.shortcut1.icon.bind("value"),
                                }),
                            }),
@@ -99,7 +99,7 @@ const Shortcuts = () => {
                                    .bind("value")
                                    .as((cmd) => () => handleClick(cmd)),
                                child: Widget.Label({
-                                    class_name: "button-label",
+                                    class_name: "button-label txt-icon",
                                    label: left.shortcut2.icon.bind("value"),
                                }),
                            }),
@@ -117,7 +117,7 @@ const Shortcuts = () => {
                                    .as((cmd) => () => handleClick(cmd)),
                                child: Widget.Label({
                                    hpack: "center",
-                                    class_name: "button-label",
+                                    class_name: "button-label txt-icon",
                                    label: left.shortcut3.icon.bind("value"),
                                }),
                            }),
@@ -128,7 +128,7 @@ const Shortcuts = () => {
                                    .bind("value")
                                    .as((cmd) => () => handleClick(cmd)),
                                child: Widget.Label({
-                                    class_name: "button-label",
+                                    class_name: "button-label txt-icon",
                                    label: left.shortcut4.icon.bind("value"),
                                }),
                            }),
@@ -152,7 +152,7 @@ const Shortcuts = () => {
                                    .bind("value")
                                    .as((cmd) => () => handleClick(cmd)),
                                child: Widget.Label({
-                                    class_name: "button-label",
+                                    class_name: "button-label txt-icon",
                                    label: right.shortcut1.icon.bind("value"),
                                }),
                            }),
@@ -164,7 +164,7 @@ const Shortcuts = () => {
                                    App.toggleWindow("settings-dialog");
                                },
                                child: Widget.Label({
-                                    class_name: "button-label",
+                                    class_name: "button-label txt-icon",
                                    label: "󰒓",
                                }),
                            }),
@@ -181,7 +181,7 @@ const Shortcuts = () => {
                                    .bind("value")
                                    .as((cmd) => () => handleClick(cmd)),
                                child: Widget.Label({
-                                    class_name: "button-label",
+                                    class_name: "button-label txt-icon",
                                    label: right.shortcut3.icon.bind("value"),
                                }),
                            }),
@@ -206,7 +206,7 @@ const Shortcuts = () => {
                                    });
                                },
                                child: Widget.Label({
-                                    class_name: "button-label",
+                                    class_name: "button-label txt-icon",
                                    label: "󰑊",
                                }),
                            }),
--- a/modules/menus/dashboard/stats/index.ts
+++ b/modules/menus/dashboard/stats/index.ts
@@ -128,7 +128,10 @@ const Stats = () => {
                                                );
                                            }
                                        }),
-                                        label: "󰢮",
+                                        child: Widget.Label({
+                                            class_name: "txt-icon",
+                                            label: "󰢮",
+                                        })
                                    }),
                                    Widget.Button({
                                        on_primary_click: terminal.bind("value").as(term => {
@@ -227,7 +230,10 @@ const Stats = () => {
                                        );
                                    }
                                }),
-                                label: "",
+                                child: Widget.Label({
+                                    class_name: "txt-icon",
+                                    label: "",
+                                })
                            }),
                            Widget.Button({
                                on_primary_click: terminal.bind("value").as(term => {
@@ -273,7 +279,10 @@ const Stats = () => {
                                        );
                                    }
                                }),
-                                label: "",
+                                child: Widget.Label({
+                                    class_name: "txt-icon",
+                                    label: "",
+                                })
                            }),
                            Widget.Button({
                                on_primary_click: terminal.bind("value").as(term => {
@@ -318,7 +327,10 @@ const Stats = () => {
                                        );
                                    }
                                }),
-                                label: "󰋊",
+                                child: Widget.Label({
+                                    class_name: "txt-icon",
+                                    label: "󰋊",
+                                })
                            }),
                            Widget.Button({
                                on_primary_click: terminal.bind("value").as(term => {
--- a/modules/menus/network/wifi/WirelessAPs.ts
+++ b/modules/menus/network/wifi/WirelessAPs.ts
@@ -132,7 +132,7 @@ const renderWAPs = (self: any, network: Network, staging: Variable<AccessPoint>,
                                        children: [
                                            Widget.Label({
                                                vpack: "start",
-                                                class_name: `network-icon wifi ${ap.ssid === network.wifi.ssid ? "active" : ""}`,
+                                                class_name: `network-icon wifi ${ap.ssid === network.wifi.ssid ? "active" : ""} txt-icon`,
                                                label: getWifiIcon(`${ap["iconName"]}`),
                                            }),
                                            Widget.Box({
@@ -202,6 +202,7 @@ const renderWAPs = (self: any, network: Network, staging: Variable<AccessPoint>,
                                    });
                                },
                                child: Widget.Label({
+                                    class_name: "txt-icon delete-network",
                                    label: "󰚃",
                                }),
                            }),
--- a/modules/menus/notifications/controls/index.ts
+++ b/modules/menus/notifications/controls/index.ts
@@ -23,6 +23,7 @@ const Controls = (notifs) => {
                children: [
                    Widget.Switch({
                        class_name: "menu-switch notifications",
+                        vpack: "center",
                        active: notifs.bind("dnd").as((dnd: boolean) => !dnd),
                        on_activate: ({ active }) => {
                            notifs.dnd = !active;
@@ -41,7 +42,7 @@ const Controls = (notifs) => {
                                tooltip_text: "Clear Notifications",
                                on_primary_click: () => notifs.clear(),
                                child: Widget.Label({
-                                    class_name: "clear-notifications-label",
+                                    class_name: "clear-notifications-label txt-icon",
                                    label: "",
                                }),
                            }),
--- a/modules/menus/notifications/notification/close/index.ts
+++ b/modules/menus/notifications/notification/close/index.ts
@@ -6,6 +6,7 @@ export const CloseButton = (notif: Notification, notifs: Notifications) => {
            notifs.CloseNotification(notif.id);
        },
        child: Widget.Label({
+            class_name: "txt-icon notif-close",
            label: "󰅜",
            hpack: "center",
        }),
--- a/modules/notifications/close/index.ts
+++ b/modules/notifications/close/index.ts
@@ -7,6 +7,7 @@ export const CloseButton = (notif: Notification, notifs: Notifications) => {
            notifs.CloseNotification(notif.id);
        },
        child: Widget.Label({
+            class_name: "txt-icon notif-close",
            label: "󰅜",
            hpack: "center",
        }),
--- a/modules/osd/icon/index.ts
+++ b/modules/osd/icon/index.ts
@@ -7,7 +7,7 @@ export const OSDIcon = (ort: OSDOrientation) => {
        class_name: "osd-icon-container",
        hexpand: true,
        child: Widget.Label({
-            class_name: "osd-icon",
+            class_name: "osd-icon txt-icon",
            hexpand: true,
            vexpand: true,
            hpack: "center",