From 1e3a23439d09cc143252dc564118ced629a009f5 Mon Sep 17 00:00:00 2001
From: Jas Singh <jaskiratpal.singh@outlook.com>
Date: Thu, 18 Jul 2024 00:26:29 -0700
Subject: [PATCH] Added customizable styling for network, bluetooth, battery
 and audio menu... and fixed window position based on scale.

---
 modules/menus/DropdownMenu.js                 | 12 ++++
 modules/menus/bluetooth/devices/devicelist.js |  4 +-
 options.ts                                    | 17 ++++-
 scss/style/menus/audiomenu.scss               | 43 +++++++++++--
 scss/style/menus/bluetooth.scss               | 20 ++++--
 scss/style/menus/energy.scss                  | 33 ++++++++--
 scss/style/menus/network.scss                 | 64 +++++++++++++------
 scss/variables.scss                           | 14 ++--
 8 files changed, 161 insertions(+), 46 deletions(-)

diff --git a/modules/menus/DropdownMenu.js b/modules/menus/DropdownMenu.js
index ec19c1c..93d3911 100644
--- a/modules/menus/DropdownMenu.js
+++ b/modules/menus/DropdownMenu.js
@@ -20,6 +20,18 @@ const moveBoxToCursor = (self, fixed) => {
     let monWidth = hyprland.monitors[hyprland.active.monitor.id].width;
     let monHeight = hyprland.monitors[hyprland.active.monitor.id].height;
 
+    // If GDK Scaling is applied, then get divide width by scaling
+    // to get the proper coordinates.
+    // Ex: On a 2860px wide monitor... if scaling is set to 2, then the right
+    // end of the monitor is the 1430th pixel.
+    const gdkScale = Utils.exec('bash -c "echo $GDK_SCALE"');
+
+    if (/^\d+(.\d+)?$/.test(gdkScale)) {
+      const scale = parseFloat(gdkScale);
+      monWidth = monWidth / scale;
+      monHeight = monHeight / scale;
+    }
+
     // If monitor is vertical (transform = 1 || 3) swap height and width
     if (hyprland.monitors[hyprland.active.monitor.id].transform % 2 !== 0) {
       [monWidth, monHeight] = [monHeight, monWidth];
diff --git a/modules/menus/bluetooth/devices/devicelist.js b/modules/menus/bluetooth/devices/devicelist.js
index 3e20879..7511bd7 100644
--- a/modules/menus/bluetooth/devices/devicelist.js
+++ b/modules/menus/bluetooth/devices/devicelist.js
@@ -49,12 +49,12 @@ const devices = (bluetooth, self) => {
         hpack: "center",
         children: [
           Widget.Label({
-            class_name: "dim",
+            class_name: "no-bluetooth-devices dim",
             hexpand: true,
             label: "No devices currently found",
           }),
           Widget.Label({
-            class_name: "dim",
+            class_name: "search-bluetooth-label dim",
             hexpand: true,
             label: "Press '󰑐' to search",
           }),
diff --git a/options.ts b/options.ts
index 4fe7637..2784a54 100644
--- a/options.ts
+++ b/options.ts
@@ -244,6 +244,10 @@ const options = mkOptions(OPTIONS, {
                             active: opt(colors.maroon)
                         },
                         iconbutton: {
+                            passive: opt(colors.text),
+                            active: opt(colors.maroon),
+                        },
+                        icons: {
                             passive: opt(colors.overlay2),
                             active: opt(colors.maroon),
                         },
@@ -287,7 +291,7 @@ const options = mkOptions(OPTIONS, {
                         },
                         iconbuttons: {
                             passive: opt(colors.text),
-                            hover: opt(colors.mauve)
+                            active: opt(colors.mauve)
                         },
                     },
                     bluetooth: {
@@ -319,9 +323,9 @@ const options = mkOptions(OPTIONS, {
                             passive: opt(colors.text),
                             active: opt(colors.sky),
                         },
-                        iconbuttons: {
+                        iconbutton: {
                             passive: opt(colors.text),
-                            hover: opt(colors.sky)
+                            active: opt(colors.sky)
                         },
                     },
                     systray: {
@@ -356,6 +360,12 @@ const options = mkOptions(OPTIONS, {
                             passive: opt(colors.overlay2),
                             active: opt(colors.yellow),
                         },
+                        slider: {
+                            primary: opt(colors.lavender),
+                            background: opt(colors.surface2),
+                            backgroundhover: opt(colors.surface1),
+                            puck: opt(colors.overlay0)
+                        },
                     },
                     clock: {
                         card: {
@@ -573,6 +583,7 @@ const options = mkOptions(OPTIONS, {
                 "volume",
                 "network",
                 "bluetooth",
+                "battery",
                 "systray",
                 "clock",
                 "notifications"
diff --git a/scss/style/menus/audiomenu.scss b/scss/style/menus/audiomenu.scss
index a5c141a..1401da6 100644
--- a/scss/style/menus/audiomenu.scss
+++ b/scss/style/menus/audiomenu.scss
@@ -13,12 +13,43 @@
     color: if($bar-menus-monochrome, $bar-menus-icons-active, $bar-menus-menu-volume-icons-active);
 }
 
-.menu-active-slider {
+.menu-slider.playback {
     trough {
+        background: if($bar-menus-monochrome, $bar-menus-slider-background, $bar-menus-menu-volume-audio_slider-background);
 
         highlight,
         progress {
-            background: if($bar-menus-monochrome, $bar-menus-slider-primary, $bar-menus-menu-media-slider-primary);
+            background: if($bar-menus-monochrome, $bar-menus-slider-primary, $bar-menus-menu-volume-audio_slider-primary);
+        }
+    }
+
+    &:hover {
+        trough {
+            background: if($bar-menus-monochrome, $bar-menus-slider-backgroundhover, $bar-menus-menu-volume-audio_slider-backgroundhover);
+        }
+
+        slider {
+            background: if($bar-menus-monochrome, $bar-menus-slider-puck, $bar-menus-menu-volume-audio_slider-puck);
+        }
+    }
+}
+.menu-slider.inputs {
+    trough {
+        background: if($bar-menus-monochrome, $bar-menus-slider-background, $bar-menus-menu-volume-input_slider-background);
+
+        highlight,
+        progress {
+            background: if($bar-menus-monochrome, $bar-menus-slider-primary, $bar-menus-menu-volume-input_slider-primary);
+        }
+    }
+
+    &:hover {
+        trough {
+            background: if($bar-menus-monochrome, $bar-menus-slider-backgroundhover, $bar-menus-menu-volume-input_slider-backgroundhover);
+        }
+
+        slider {
+            background: if($bar-menus-monochrome, $bar-menus-slider-puck, $bar-menus-menu-volume-input_slider-puck);
         }
     }
 }
@@ -26,28 +57,28 @@
 .menu-active-button {
     .menu-active-icon.playback,
     .menu-active-icon.input {
-        color: if($bar-menus-monochrome, $bar-menus-iconbuttons-active, $bar-menus-menu-volume-iconbuttons-active);
+        color: if($bar-menus-monochrome, $bar-menus-iconbuttons-active, $bar-menus-menu-volume-iconbutton-active);
         opacity: 1;
     }
 
     &.muted {
         .menu-active-icon.playback,
         .menu-active-icon.input {
-            color: if($bar-menus-monochrome, $bar-menus-iconbuttons-passive, $bar-menus-menu-volume-iconbuttons-passive);
+            color: if($bar-menus-monochrome, $bar-menus-iconbuttons-passive, $bar-menus-menu-volume-iconbutton-passive);
             opacity: 1;
         }
     }
     &:hover {
         .menu-active-icon.playback,
         .menu-active-icon.input {
-            color: if($bar-menus-monochrome, $bar-menus-iconbuttons-passive, $bar-menus-menu-volume-iconbuttons-passive);
+            color: if($bar-menus-monochrome, $bar-menus-iconbuttons-passive, $bar-menus-menu-volume-iconbutton-passive);
             opacity: 0.3;
         }
     }
     &.muted:hover {
         .menu-active-icon.playback,
         .menu-active-icon.input {
-            color: if($bar-menus-monochrome, $bar-menus-iconbuttons-active, $bar-menus-menu-volume-iconbuttons-active);
+            color: if($bar-menus-monochrome, $bar-menus-iconbuttons-active, $bar-menus-menu-volume-iconbutton-active);
             opacity: 1;
         }
     }
diff --git a/scss/style/menus/bluetooth.scss b/scss/style/menus/bluetooth.scss
index 9cf04c9..aaa200a 100644
--- a/scss/style/menus/bluetooth.scss
+++ b/scss/style/menus/bluetooth.scss
@@ -1,4 +1,5 @@
 @import "../colors";
+@import '../../variables';
 
 .menu-items-container.bluetooth {
     font-size: 1.3em;
@@ -28,11 +29,11 @@
 
         &.search {
             image {
-                color: if($bar-menus-monochrome, $bar-menus-iconbuttons-passive, $bar-menus-menu-bluetooth-iconbuttons-passive);
+                color: if($bar-menus-monochrome, $bar-menus-iconbuttons-passive, $bar-menus-menu-bluetooth-iconbutton-passive);
             }
 
             &:hover image {
-                color: if($bar-menus-monochrome, $bar-menus-iconbuttons-active, $bar-menus-menu-bluetooth-iconbuttons-active);
+                color: if($bar-menus-monochrome, $bar-menus-iconbuttons-active, $bar-menus-menu-bluetooth-iconbutton-active);
             }
 
             font-size: 0.8em;
@@ -40,15 +41,15 @@
         }
 
         &:hover {
-            color: if($bar-menus-monochrome, $bar-menus-iconbuttons-active, $bar-menus-menu-bluetooth-iconbuttons-active);
+            color: if($bar-menus-monochrome, $bar-menus-iconbuttons-active, $bar-menus-menu-bluetooth-iconbutton-active);
         }
     }
 
     .menu-icon-button.bluetooth {
-        color: if($bar-menus-monochrome, $bar-menus-iconbuttons-passive, $bar-menus-menu-bluetooth-iconbuttons-passive);
+        color: if($bar-menus-monochrome, $bar-menus-iconbuttons-passive, $bar-menus-menu-bluetooth-iconbutton-passive);
 
         &:hover {
-            color: if($bar-menus-monochrome, $bar-menus-iconbuttons-active, $bar-menus-menu-bluetooth-iconbuttons-active);
+            color: if($bar-menus-monochrome, $bar-menus-iconbuttons-active, $bar-menus-menu-bluetooth-iconbutton-active);
         }
     }
 
@@ -57,7 +58,7 @@
 
         &:hover {
             .menu-button-icon, .menu-button-name {
-                color: if($bar-menus-monochrome, $bar-menus-iconbuttons-active, $bar-menus-menu-bluetooth-iconbuttons-active);
+                color: if($bar-menus-monochrome, $bar-menus-iconbuttons-active, $bar-menus-menu-bluetooth-iconbutton-active);
             }
         }
 
@@ -97,7 +98,7 @@
     spinner {
         min-height: 1.3em;
         min-width: 1.3em;
-        color: if($bar-menus-monochrome, $bar-menus-iconbuttons-active, $bar-menus-menu-bluetooth-iconbuttons-active);
+        color: if($bar-menus-monochrome, $bar-menus-iconbuttons-active, $bar-menus-menu-bluetooth-iconbutton-active);
     }
 
     .menu-separator {
@@ -129,4 +130,9 @@
             background: if($bar-menus-monochrome, $bar-menus-switch-enabled, $bar-menus-menu-bluetooth-switch-enabled);
         }
     }
+
+    .no-bluetooth-devices.dim, .search-bluetooth-label.dim{
+        color: if($bar-menus-monochrome, $bar-menus-text, $bar-menus-menu-bluetooth-text);
+        opacity: 0.5;
+    }
 }
diff --git a/scss/style/menus/energy.scss b/scss/style/menus/energy.scss
index ba9052d..450b6be 100644
--- a/scss/style/menus/energy.scss
+++ b/scss/style/menus/energy.scss
@@ -1,8 +1,9 @@
 @import "../colors";
+@import '../../variables';
 
 .menu-items-container.energy {
     .menu-label {
-        color: $yellow;
+        color: if($bar-menus-monochrome, $bar-menus-label, $bar-menus-menu-battery-label-color);
     }
 
     .power-profile-item {
@@ -16,19 +17,18 @@
             font-size: 1.3em;
             min-width: 1em;
             min-height: 1em;
-
-            color: $overlay1;
+            color: if($bar-menus-monochrome, $bar-menus-icons-passive, $bar-menus-menu-battery-icons-passive);
         }
 
         &:hover {
             label {
-                color: $yellow;
+                color: if($bar-menus-monochrome, $bar-menus-icons-active, $bar-menus-menu-battery-icons-active);
             }
         }
 
         &.active {
             image {
-                color: $yellow;
+                color: if($bar-menus-monochrome, $bar-menus-icons-active, $bar-menus-menu-battery-icons-active);
             }
         }
     }
@@ -36,7 +36,7 @@
         trough {
             highlight,
             progress {
-                background: $yellow;
+                background: if($bar-menus-monochrome, $bar-menus-slider-primary, $bar-menus-menu-battery-slider-primary);
             }
         }
     }
@@ -58,4 +58,25 @@
         font-weight: bold;
         margin-bottom: 0.2em;
     }
+
+    .menu-slider.brightness {
+        trough {
+            background: if($bar-menus-monochrome, $bar-menus-slider-background, $bar-menus-menu-battery-slider-background);
+
+            highlight,
+            progress {
+                background: if($bar-menus-monochrome, $bar-menus-slider-primary, $bar-menus-menu-battery-slider-primary);
+            }
+        }
+
+        &:hover {
+            trough {
+                background: if($bar-menus-monochrome, $bar-menus-slider-backgroundhover, $bar-menus-menu-battery-slider-backgroundhover);
+            }
+
+            slider {
+                background: if($bar-menus-monochrome, $bar-menus-slider-puck, $bar-menus-menu-battery-slider-puck);
+            }
+        }
+    }
 }
diff --git a/scss/style/menus/network.scss b/scss/style/menus/network.scss
index 7ba0cd4..4a57c7a 100644
--- a/scss/style/menus/network.scss
+++ b/scss/style/menus/network.scss
@@ -1,4 +1,5 @@
 @import "../colors";
+@import '../../variables';
 
 .menu-items-container.network {
     font-size: 1.3em;
@@ -6,32 +7,30 @@
         padding-bottom: 1.5em;
     }
     .menu-label {
-        color: $mauve;
-    }
-
-    .menu-icon-button.network {
-        margin: 1em;
-
-        &:hover {
-            color: $mauve;
-        }
+        color: if($bar-menus-monochrome, $bar-menus-label, $bar-menus-menu-network-label-color);
     }
 
     .network-icon {
         font-size: 1.3em;
         min-width: 1em;
         min-height: 1em;
-        color: $overlay1;
+        color: if($bar-menus-monochrome, $bar-menus-icons-passive, $bar-menus-menu-network-icons-passive);
 
         &.active {
-            color: $mauve;
+            color: if($bar-menus-monochrome, $bar-menus-icons-active, $bar-menus-menu-network-icons-active);
         }
     }
 
+    .menu-icon-button.network {
+        margin: 1em;
+    }
+
     .connection-container {
         margin-left: 1em;
     }
-    .connection-status {
+    .connection-status.dim {
+        color: if($bar-menus-monochrome, $bar-menus-text, $bar-menus-menu-network-text);
+        opacity: 0.5;
         font-size: 0.9em;
     }
     .menu-section-container.wifi {
@@ -42,7 +41,6 @@
     }
 
     .network-element-item {
-
         &:not(:last-child) {
             margin-bottom: 0.5em;
         }
@@ -52,16 +50,31 @@
         }
 
         &:hover {
-            color: $mauve;
+            .network-icon {
+                color: if($bar-menus-monochrome, $bar-menus-icons-active, $bar-menus-menu-network-icons-active);
+                opacity: 1;
+            }
+            .active-connection {
+                color: if($bar-menus-monochrome, $bar-menus-iconbuttons-active, $bar-menus-menu-network-iconbuttons-active);
+            }
+        }
+
+        .active-connection {
+            color: if($bar-menus-monochrome, $bar-menus-text, $bar-menus-menu-network-text);
+        }
+        .active-connection.dim {
+            color: if($bar-menus-monochrome, $bar-menus-text, $bar-menus-menu-network-text);
+            opacity: 0.5;
         }
     }
 
     .spinner.wap {
-        color: $mauve;
+        color: if($bar-menus-monochrome, $bar-menus-iconbuttons-active, $bar-menus-menu-network-iconbuttons-active);
     }
 
     .network-password-input-container {
-        background: $mantle;
+        background: darken(if($bar-menus-monochrome, $bar-menus-cards, $bar-menus-menu-network-card-color), 5%);
+        color: if($bar-menus-monochrome, $bar-menus-text, $bar-menus-menu-network-text);
         border-radius: 0.4em;
         margin: 0em 2em;
         margin-top: 0.75em;
@@ -71,10 +84,20 @@
     .close-network-password-input-button {
         padding: 0em 0.5em;
         &:hover image { 
-            color: $mauve;
+            color: if($bar-menus-monochrome, $bar-menus-text, $bar-menus-menu-network-text);
+            opacity: 0.5;
         }
     }
 
+    .menu-icon-button.network.search {
+        label {
+            color: if($bar-menus-monochrome, $bar-menus-iconbuttons-passive, $bar-menus-menu-network-iconbuttons-passive);
+        }
+        &:hover { 
+            color: if($bar-menus-monochrome, $bar-menus-iconbuttons-active, $bar-menus-menu-network-iconbuttons-active);
+        }
+    }
+    
     .menu-icon-button.network.disconnect {
         margin: 0em;
         margin-top: -0.2em;
@@ -83,7 +106,12 @@
             font-size: 1.4em;
         }
         &:hover { 
-            color: $mauve;
+            color: if($bar-menus-monochrome, $bar-menus-iconbuttons-active, $bar-menus-menu-network-iconbuttons-active);
         }
     }
+
+    .waps-not-found.dim {
+        color: if($bar-menus-monochrome, $bar-menus-text, $bar-menus-menu-network-text);
+        opacity: 0.5;
+    }
 }
diff --git a/scss/variables.scss b/scss/variables.scss
index d5cde1c..0db4477 100644
--- a/scss/variables.scss
+++ b/scss/variables.scss
@@ -120,8 +120,10 @@ $bar-menus-menu-volume-label-color: #eba0ac;
 $bar-menus-menu-volume-text: #cdd6f4;
 $bar-menus-menu-volume-listitems-passive: #cdd6f4;
 $bar-menus-menu-volume-listitems-active: #eba0ac;
-$bar-menus-menu-volume-iconbutton-passive: #9399b2;
+$bar-menus-menu-volume-iconbutton-passive: #cdd6f4;
 $bar-menus-menu-volume-iconbutton-active: #eba0ac;
+$bar-menus-menu-volume-icons-passive: #9399b2;
+$bar-menus-menu-volume-icons-active: #eba0ac;
 $bar-menus-menu-volume-audio_slider-primary: #eba0ac;
 $bar-menus-menu-volume-audio_slider-background: #585b70;
 $bar-menus-menu-volume-audio_slider-backgroundhover: #45475a;
@@ -141,7 +143,7 @@ $bar-menus-menu-network-listitems-active: #cba6f7;
 $bar-menus-menu-network-icons-passive: #9399b2;
 $bar-menus-menu-network-icons-active: #cba6f7;
 $bar-menus-menu-network-iconbuttons-passive: #cdd6f4;
-$bar-menus-menu-network-iconbuttons-hover: #cba6f7;
+$bar-menus-menu-network-iconbuttons-active: #cba6f7;
 $bar-menus-menu-bluetooth-card-color: #1e1e2e;
 $bar-menus-menu-bluetooth-background-color: #11111b;
 $bar-menus-menu-bluetooth-border-color: #313244;
@@ -156,8 +158,8 @@ $bar-menus-menu-bluetooth-listitems-passive: #cdd6f4;
 $bar-menus-menu-bluetooth-listitems-active: #89dceb;
 $bar-menus-menu-bluetooth-icons-passive: #cdd6f4;
 $bar-menus-menu-bluetooth-icons-active: #89dceb;
-$bar-menus-menu-bluetooth-iconbuttons-passive: #cdd6f4;
-$bar-menus-menu-bluetooth-iconbuttons-hover: #89dceb;
+$bar-menus-menu-bluetooth-iconbutton-passive: #cdd6f4;
+$bar-menus-menu-bluetooth-iconbutton-active: #89dceb;
 $bar-menus-menu-systray-background-color: #242438;
 $bar-menus-menu-systray-dropdownmenu-background: #11111b;
 $bar-menus-menu-systray-dropdownmenu-text: #cdd6f4;
@@ -171,6 +173,10 @@ $bar-menus-menu-battery-listitems-passive: #cdd6f4;
 $bar-menus-menu-battery-listitems-active: #f9e2af;
 $bar-menus-menu-battery-icons-passive: #9399b2;
 $bar-menus-menu-battery-icons-active: #f9e2af;
+$bar-menus-menu-battery-slider-primary: #b4befe;
+$bar-menus-menu-battery-slider-background: #585b70;
+$bar-menus-menu-battery-slider-backgroundhover: #45475a;
+$bar-menus-menu-battery-slider-puck: #6c7086;
 $bar-menus-menu-clock-card-color: #1e1e2e;
 $bar-menus-menu-clock-background-color: #11111b;
 $bar-menus-menu-clock-border-color: #313244;