Adding configuration options to change spacing between icons and labels inside the buttons in the bar. (#30)

* Branch protection check.

* Move button spacing config into the Configuration section instead of Theming.

* Partially Resolves #26 - Added the ability to configure outer spacing on the bar.

* Renamed all class names for buttons so they can be styled with margins.

* Added configurable spacing to buttons.

* Fixed styling for network module when using wifi.

* Fixed ghost margins that occur when labels are disabled in the bar buttons.

* Change the default page of the settings dialog to configuration.

README.md

@@ -45,7 +45,7 @@ yay -S grimblast gpu-screen-recorder hyprpicker python-gpustat aylurs-gtk-shell-
 ## Instructions
 
 ### AGS
-Once everything is installed you, need to put the contents of this repo in `~/.config/ags`.
+Once everything is installed you need to put the contents of this repo in `~/.config/ags`.
 If you already have something in `~/.config/ags`, it's recommended that you back it up with:
 ```bash
 mv $HOME/.config/ags $HOME/.config/ags.bkup

modules/bar/battery/index.ts

@@ -47,9 +47,13 @@ const BatteryLabel = () => {
                 (batAvail, showLabel) => {
                     if (batAvail && showLabel) {
                         return [
-                            Widget.Icon({ icon: icon() }),
+                            Widget.Icon({
+                                class_name: "bar-button-icon battery",
+                                icon: icon()
+                            }),
                             Widget.Label({
-                                label: battery.bind("percent").as((p) => ` ${Math.floor(p)}%`),
+                                class_name: "bar-button-label battery",
+                                label: battery.bind("percent").as((p) => `${Math.floor(p)}%`),
                             }),
                         ];
                     } else if (batAvail && !showLabel) {

modules/bar/bluetooth/index.ts

@@ -6,30 +6,32 @@ import { openMenu } from "../utils.js";
 const Bluetooth = () => {
     const btIcon = Widget.Label({
         label: bluetooth.bind("enabled").as((v) => v ? "󰂯" : "󰂲"),
-        class_name: "bar-bt_icon",
+        class_name: "bar-button-icon bluetooth",
     });
 
     const btText = Widget.Label({
         label: Utils.merge([
             bluetooth.bind("enabled"),
             bluetooth.bind("connected_devices"),
-            options.bar.bluetooth.label.bind("value")],
+        ],
-            (btEnabled, btDevices, showLabel) => {
+            (btEnabled, btDevices) => {
-                if (showLabel) {
                 return btEnabled && btDevices.length ? ` Connected (${btDevices.length})`
-                        : btEnabled ? " On"
+                    : btEnabled ? "On"
-                            : " Off"
+                        : "Off"
-                }
-                return "";
 
             }),
-        class_name: "bar-bt_label",
+        class_name: "bar-button-label bluetooth",
     });
 
     return {
         component: Widget.Box({
             class_name: "volume",
-            children: [btIcon, btText],
+            children: options.bar.bluetooth.label.bind("value").as((showLabel) => {
+                if (showLabel) {
+                    return [btIcon, btText];
+                }
+                return [btIcon];
+            }),
         }),
         isVisible: true,
         boxClass: "bluetooth",

modules/bar/media/index.ts

@@ -56,8 +56,8 @@ const Media = () => {
             const { track_title, identity } = activePlayer.value;
             songIcon.value = getIconForPlayer(identity);
             return track_title.length === 0
-                ? `  No media playing...`
+                ? `No media playing...`
-                : `  ${track_title}`;
+                : `${track_title}`;
         } else {
             songIcon.value = "";
             return "󰎇 Media 󰎇";
@@ -72,11 +72,12 @@ const Media = () => {
                 child: Widget.Box({
                     children: [
                         Widget.Label({
-                            class_name: "bar-media_icon",
+                            class_name: "bar-button-icon media",
                             label: songIcon.bind("value"),
                             maxWidthChars: 30,
                         }),
                         Widget.Label({
+                            class_name: "bar-button-label media",
                             label,
                             truncate: "end",
                             wrap: true,

modules/bar/network/index.ts

@@ -6,40 +6,48 @@ import { openMenu } from "../utils.js";
 const Network = () => {
     const wifiIndicator = [
         Widget.Icon({
-            class_name: "bar-network-icon",
+            class_name: "bar-button-icon network",
             icon: network.wifi.bind("icon_name"),
         }),
-        Widget.Label({
+        Widget.Box({
-            class_name: "bar-network-label",
+            children: Utils.merge(
-            label: Utils.merge(
                 [network.bind("wifi"), options.bar.network.label.bind("value")],
                 (wifi, showLabel) => {
-                    if (showLabel) {
+                    if (!showLabel) {
-                        return wifi.ssid ? `  ${wifi.ssid.substring(0, 7)}` : "  --";
+                        return [];
                     }
-                    return "";
+                    return [
-                },
+                        Widget.Label({
-            ),
+                            class_name: "bar-button-label network",
+                            label: wifi.ssid ? `${wifi.ssid.substring(0, 7)}` : "--",
                         }),
+                    ]
+                },
+            )
+        })
     ];
 
     const wiredIndicator = [
         Widget.Icon({
-            class_name: "bar-network-icon",
+            class_name: "bar-button-icon network",
             icon: network.wired.bind("icon_name"),
         }),
-        Widget.Label({
+        Widget.Box({
-            class_name: "bar-network-label",
+            children: Utils.merge(
-            label: Utils.merge(
                 [network.bind("wired"), options.bar.network.label.bind("value")],
                 (_, showLabel) => {
-                    if (showLabel) {
+                    if (!showLabel) {
-                        return "  Wired";
+                        return [];
                     }
-                    return "";
+                    return [
-                },
+                        Widget.Label({
-            ),
+                            class_name: "bar-button-label network",
+                            label: "Wired",
                         }),
+                    ]
+                },
+            )
+        })
     ];
 
     return {

modules/bar/notifications/index.ts

@@ -18,13 +18,13 @@ export const Notifications = () => {
                     (notif, dnd, showTotal) => {
                         const notifIcon = Widget.Label({
                             hpack: "center",
-                            class_name: "bar-notifications-label",
+                            class_name: "bar-button-icon notifications",
                             label: dnd ? "󰂛" : notif.length > 0 ? "󱅫" : "󰂚",
                         });
 
                         const notifLabel = Widget.Label({
                             hpack: "center",
-                            class_name: "bar-notifications-total",
+                            class_name: "bar-button-label notifications",
                             label: notif.length.toString(),
                         });
 

modules/bar/volume/index.ts

@@ -30,13 +30,13 @@ const Volume = () => {
     const volIcn = Widget.Label({
         vpack: "center",
         label: getIcon(),
-        class_name: "bar-volume_icon",
+        class_name: "bar-button-icon volume",
     });
 
     const volPct = Widget.Label({
         vpack: "center",
-        label: audio.speaker.bind("volume").as((v) => `  ${Math.floor(v * 100)}%`),
+        label: audio.speaker.bind("volume").as((v) => `${Math.floor(v * 100)}%`),
-        class_name: "bar-volume_percentage",
+        class_name: "bar-button-label volume",
     });
 
     return {

modules/bar/window_title/index.ts

@@ -3,31 +3,42 @@ import { ActiveClient } from 'types/service/hyprland'
 
 const filterTitle = (windowtitle: ActiveClient) => {
     const windowTitleMap = [
-        ["kitty", "󰄛   Kitty Terminal"],
+        ["kitty", "󰄛", "Kitty Terminal"],
-        ["firefox", "󰈹   Firefox"],
+        ["firefox", "󰈹", "Firefox"],
-        ["microsoft-edge", "󰇩   Edge"],
+        ["microsoft-edge", "󰇩", "Edge"],
-        ["discord", "    Discord"],
+        ["discord", "", "Discord"],
-        ["org.kde.dolphin", "   Dolphin"],
+        ["org.kde.dolphin", "", "Dolphin"],
-        ["plex", "󰚺   Plex"],
+        ["plex", "󰚺", "Plex"],
-        ["steam", "   Steam"],
+        ["steam", "", "Steam"],
-        ["spotify", "󰓇   Spotify"],
+        ["spotify", "󰓇", "Spotify"],
-        ["obsidian", "󱓧   Obsidian"],
+        ["obsidian", "󱓧", "Obsidian"],
-        ["^$", "󰇄   Desktop"],
+        ["^$", "󰇄", "Desktop"],
-        ["(.+)", `󰣆   ${windowtitle.class.charAt(0).toUpperCase() + windowtitle.class.slice(1)}`],
+        ["(.+)", "󰣆", `${windowtitle.class.charAt(0).toUpperCase() + windowtitle.class.slice(1)}`],
     ];
 
     const foundMatch = windowTitleMap.find((wt) =>
         RegExp(wt[0]).test(windowtitle.class.toLowerCase()),
     );
 
-    return foundMatch ? foundMatch[1] : windowtitle.class;
+    return {
+        icon: foundMatch ? foundMatch[1] : windowTitleMap[windowTitleMap.length - 1][1],
+        label: foundMatch ? foundMatch[2] : windowTitleMap[windowTitleMap.length - 1][2]
+    }
 };
 
 const ClientTitle = () => {
     return {
-        component: Widget.Label({
+        component: Widget.Box({
-            class_name: "window_title",
+            children: [
-            label: hyprland.active.bind("client").as((v) => filterTitle(v)),
+                Widget.Label({
+                    class_name: "bar-button-icon windowtitle",
+                    label: hyprland.active.bind("client").as((v) => filterTitle(v).icon),
+                }),
+                Widget.Label({
+                    class_name: "bar-button-label windowtitle",
+                    label: hyprland.active.bind("client").as((v) => filterTitle(v).label),
+                })
+            ]
         }),
         isVisible: true,
         boxClass: "windowtitle",

options.ts

@@ -59,6 +59,8 @@ const options = mkOptions(OPTIONS, {
             margin_bottom: opt("0em"),
             margin_sides: opt("0.5em"),
             border_radius: opt("0.4em"),
+            outer_spacing: opt("1.6em"),
+            label_spacing: opt("0.5em"),
             transparent: opt(false),
             background: opt(colors.crust),
             buttons: {
@@ -85,31 +87,36 @@ const options = mkOptions(OPTIONS, {
                     background: opt(colors.base2),
                     hover: opt(colors.surface1),
                     text: opt(colors.pink),
-                    icon: opt(colors.pink)
+                    icon: opt(colors.pink),
+                    spacing: opt("0.5em"),
                 },
                 media: {
                     background: opt(colors.base2),
                     hover: opt(colors.surface1),
                     text: opt(colors.lavender),
-                    icon: opt(colors.lavender)
+                    icon: opt(colors.lavender),
+                    spacing: opt("0.5em"),
                 },
                 volume: {
                     background: opt(colors.base2),
                     hover: opt(colors.surface1),
                     text: opt(colors.maroon),
                     icon: opt(colors.maroon),
+                    spacing: opt("0.5em"),
                 },
                 network: {
                     background: opt(colors.base2),
                     hover: opt(colors.surface1),
                     text: opt(colors.mauve),
                     icon: opt(colors.mauve),
+                    spacing: opt("0.5em"),
                 },
                 bluetooth: {
                     background: opt(colors.base2),
                     hover: opt(colors.surface1),
                     text: opt(colors.sky),
                     icon: opt(colors.sky),
+                    spacing: opt("0.5em"),
                 },
                 systray: {
                     background: opt(colors.base2),
@@ -120,6 +127,7 @@ const options = mkOptions(OPTIONS, {
                     hover: opt(colors.surface1),
                     text: opt(colors.yellow),
                     icon: opt(colors.yellow),
+                    spacing: opt("0.5em"),
                 },
                 clock: {
                     background: opt(colors.base2),
@@ -131,7 +139,8 @@ const options = mkOptions(OPTIONS, {
                     background: opt(colors.base2),
                     hover: opt(colors.surface1),
                     icon: opt(colors.lavender),
-                    total: opt(colors.lavender)
+                    total: opt(colors.lavender),
+                    spacing: opt("0.5em"),
                 },
             },
             menus: {

scss/style/bar/audio.scss

@@ -1,11 +1,12 @@
 @import '../colors';
 @import '../../variables';
 
-.bar-volume_icon {
+.bar-button-icon.volume {
   font-size: 1.3em;
   color: if($bar-buttons-monochrome, $bar-buttons-icon, $bar-buttons-volume-icon);
 }
 
-.bar-volume_percentage {
+.bar-button-label.volume {
   color: if($bar-buttons-monochrome, $bar-buttons-text, $bar-buttons-volume-text);
+  margin-left: $bar-buttons-volume-spacing;
 }

scss/style/bar/bar.scss

@@ -127,9 +127,9 @@
 }
 
 .box-left {
-  margin-left: 1.9rem;
+  margin-left: $bar-outer_spacing;
 }
 
 .box-right {
-  margin-right: 1.9rem;
+  margin-right: $bar-outer_spacing;
 }

scss/style/bar/battery.scss

@@ -3,10 +3,12 @@
 
 .bar {
   .battery {
-    label {
+    .bar-button-label.battery {
       color: if($bar-buttons-monochrome, $bar-buttons-text, $bar-buttons-battery-text);
+      margin-left: $bar-buttons-battery-spacing;
     }
-    image {
+
+    .bar-button-icon.battery {
       color: if($bar-buttons-monochrome, $bar-buttons-icon, $bar-buttons-battery-icon);
     }
   }
@@ -15,6 +17,7 @@
 .menu-section-container.brightness {
   margin-bottom: 0em;
 }
+
 .menu-section-container.energy {
   margin-top: 0.5em;
 }

scss/style/bar/bluetooth.scss

@@ -1,13 +1,14 @@
 @import '../colors';
 @import '../../variables';
 
-.bar-bt_icon {
+.bar-button-icon.bluetooth {
   font-size: 1.15em;
   color: if($bar-buttons-monochrome, $bar-buttons-icon, $bar-buttons-bluetooth-icon);
 }
 
-.bar-bt_label {
+.bar-button-label.bluetooth {
   color: if($bar-buttons-monochrome, $bar-buttons-text, $bar-buttons-bluetooth-text);
+  margin-left: $bar-buttons-bluetooth-spacing;
 }
 
 .bluetooth-disabled-menu {

scss/style/bar/media.scss

@@ -1,11 +1,12 @@
 @import "../colors";
 @import '../../variables';
 
-.media {
+.bar-button-label.media {
   color: if($bar-buttons-monochrome, $bar-buttons-text, $bar-buttons-media-text);
+  margin-left: $bar-buttons-media-spacing;
 }
 
-.bar-media_icon {
+.bar-button-icon.media {
   font-size: 1.2em;
   color: if($bar-buttons-monochrome, $bar-buttons-icon, $bar-buttons-media-icon);
 }

scss/style/bar/network.scss

@@ -1,10 +1,11 @@
 @import "../colors";
 @import '../../variables';
 
-.bar-network-label {
+.bar-button-label.network {
   color: if($bar-buttons-monochrome, $bar-buttons-text, $bar-buttons-network-text);
+  margin-left: $bar-buttons-network-spacing;
 }
 
-.bar-network-icon {
+.bar-button-icon.network {
   color: if($bar-buttons-monochrome, $bar-buttons-icon, $bar-buttons-network-icon);
 }

scss/style/bar/notifications.scss

@@ -1,12 +1,12 @@
 @import "../colors";
 
-.bar-notifications-label {
+.bar-button-icon.notifications {
   color: if($bar-buttons-monochrome, $bar-buttons-icon, $bar-buttons-notifications-icon);
   font-size: 1.3em;
   min-width: 1em;
 }
 
-.bar-notifications-total {
+.bar-button-label.notifications {
   color: if($bar-buttons-monochrome, $bar-buttons-text, $bar-buttons-notifications-total);
-  margin-left: 0.4em;
+  margin-left: $bar-buttons-notifications-spacing;
 }

scss/style/bar/window_title.scss

@@ -1,6 +1,11 @@
 @import "../colors";
 @import '../../variables';
 
-.window_title {
+.bar-button-icon.windowtitle {
-  color: if($bar-buttons-monochrome, $bar-buttons-text, $bar-buttons-windowtitle-text);
+  color: if($bar-buttons-monochrome, $bar-buttons-text, $bar-buttons-windowtitle-icon);
+}
+
+.bar-button-label.windowtitle {
+  color: if($bar-buttons-monochrome, $bar-buttons-text, $bar-buttons-windowtitle-text);
+  margin-left: $bar-buttons-windowtitle-spacing;
 }

widget/settings/SettingsDialog.ts

@@ -6,7 +6,7 @@ import { SettingsMenu } from "./pages/config/index"
 
 type Page = "Configuration" | "Theming"
 
-const CurrentPage = Variable<Page>("Theming");
+const CurrentPage = Variable<Page>("Configuration");
 
 const pagerMap: Page[] = [
     "Configuration",

widget/settings/pages/config/bar/index.ts

@@ -15,6 +15,9 @@ export const BarSettings = () => {
                 Option({ opt: options.bar.layouts, title: 'Bar Layouts for Monitors', subtitle: 'Please refer to the github README for instructions: https://github.com/Jas-SinghFSU/HyprPanel', type: 'object' }, 'bar-layout-input'),
 
                 Header('Spacing'),
+                Option({ opt: options.theme.bar.outer_spacing, title: 'Outer Spacing', subtitle: 'Spacing on the outer left and right edges of the bar.', type: 'string' }),
+                Option({ opt: options.theme.bar.buttons.spacing, title: 'Button Spacing', subtitle: 'Spacing between the buttons in the bar.', type: 'string' }),
+                Option({ opt: options.theme.bar.buttons.radius, title: 'Button Radius', type: 'string' }),
                 Option({ opt: options.theme.bar.floating, title: 'Floating Bar', type: 'boolean' }),
                 Option({ opt: options.theme.bar.margin_top, title: 'Margin Top', subtitle: 'Only applies if floating is enabled', type: 'string' }),
                 Option({ opt: options.theme.bar.margin_bottom, title: 'Margin Bottom', subtitle: 'Only applies if floating is enabled', type: 'string' }),
@@ -35,17 +38,24 @@ export const BarSettings = () => {
                 Option({ opt: options.bar.workspaces.reverse_scroll, title: 'Invert Scroll', subtitle: 'Scrolling up will go to the previous workspace rather than the next.', type: 'boolean' }),
                 Option({ opt: options.bar.workspaces.scroll_speed, title: 'Scrolling Speed', type: 'number' }),
 
+                Header('Window Titles'),
+                Option({ opt: options.theme.bar.buttons.windowtitle.spacing, title: 'Inner Spacing', subtitle: 'Spacing between the icon and the label inside the buttons.', type: 'string' }),
+
                 Header('Volume'),
                 Option({ opt: options.bar.volume.label, title: 'Show Volume Percentage', type: 'boolean' }),
+                Option({ opt: options.theme.bar.buttons.volume.spacing, title: 'Inner Spacing', subtitle: 'Spacing between the icon and the label inside the buttons.', type: 'string' }),
 
                 Header('Network'),
                 Option({ opt: options.bar.network.label, title: 'Show Network Name', type: 'boolean' }),
+                Option({ opt: options.theme.bar.buttons.network.spacing, title: 'Inner Spacing', subtitle: 'Spacing between the icon and the label inside the buttons.', type: 'string' }),
 
                 Header('Bluetooth'),
                 Option({ opt: options.bar.bluetooth.label, title: 'Show Bluetooth Label', type: 'boolean' }),
+                Option({ opt: options.theme.bar.buttons.bluetooth.spacing, title: 'Inner Spacing', subtitle: 'Spacing between the icon and the label inside the buttons.', type: 'string' }),
 
                 Header('Battery'),
                 Option({ opt: options.bar.battery.label, title: 'Show Battery Percentage', type: 'boolean' }),
+                Option({ opt: options.theme.bar.buttons.battery.spacing, title: 'Inner Spacing', subtitle: 'Spacing between the icon and the label inside the buttons.', type: 'string' }),
 
                 // Header('System Tray'),
                 // TODO: Figure out how to handle arrays
@@ -54,8 +64,12 @@ export const BarSettings = () => {
                 Header('Clock'),
                 Option({ opt: options.bar.clock.format, title: 'Clock Format', type: 'string' }),
 
+                Header('Media'),
+                Option({ opt: options.theme.bar.buttons.media.spacing, title: 'Inner Spacing', subtitle: 'Spacing between the icon and the label inside the buttons.', type: 'string' }),
+
                 Header('Notifications'),
                 Option({ opt: options.bar.notifications.show_total, title: 'Show Total # of notifications', type: 'boolean' }),
+                Option({ opt: options.theme.bar.buttons.notifications.spacing, title: 'Inner Spacing', subtitle: 'Spacing between the icon and the label inside the buttons.', type: 'string' }),
             ]
         })
     })

widget/settings/pages/theme/bar/index.ts

@@ -15,8 +15,6 @@ export const BarTheme = () => {
                 Option({ opt: options.theme.bar.transparent, title: 'Transparent', type: 'boolean' }),
                 Option({ opt: options.theme.bar.background, title: 'Background Color', type: 'color' }),
                 Option({ opt: options.theme.bar.buttons.monochrome, title: 'Use Global Colors', type: 'boolean' }),
-                Option({ opt: options.theme.bar.buttons.spacing, title: 'Button Spacing', type: 'string' }),
-                Option({ opt: options.theme.bar.buttons.radius, title: 'Button Radius', type: 'string' }),
                 Option({ opt: options.theme.bar.buttons.background, title: 'Button Background', type: 'color' }),
                 Option({ opt: options.theme.bar.buttons.hover, title: 'Button Hover', type: 'color' }),
                 Option({ opt: options.theme.bar.buttons.text, title: 'Button Text', type: 'color' }),