From aca5725ade86283a2da706eae715441cfa4e2a70 Mon Sep 17 00:00:00 2001
From: matt1432 <matt@nelim.org>
Date: Sun, 10 Sep 2023 00:39:43 -0400
Subject: [PATCH] feat(ags): make brightness widget a progress bar

---
 config/ags/js/bar/brightness.js          | 50 ++++++++++++++----------
 config/ags/scss/widgets/traybuttons.scss | 13 ++++++
 config/ags/style.css                     |  9 +++++
 config/hypr/main.conf                    |  4 +-
 4 files changed, 54 insertions(+), 22 deletions(-)

diff --git a/config/ags/js/bar/brightness.js b/config/ags/js/bar/brightness.js
index 780a54d8..55fad57b 100644
--- a/config/ags/js/bar/brightness.js
+++ b/config/ags/js/bar/brightness.js
@@ -2,34 +2,44 @@ const { Label, Icon, Stack, ProgressBar, Overlay, Box } = ags.Widget;
 import { Separator } from '../common.js';
 const { exec } = ags.Utils;
 
-const Indicator = props => Label({
+const Indicator = props => Icon({
   ...props,
-  label: '',
-  connections: [[500, icon => {
-    const br = `${exec('brightnessctl get')}`;
-         if (br <= 3) icon.label = "";
-    else if (br <= 38) icon.label = "";
-    else if (br <= 77) icon.label = "";
-    else if (br <= 115) icon.label = "";
-    else if (br <= 153) icon.label = "";
-    else if (br <= 191) icon.label = "";
-    else if (br <= 230) icon.label = "";
-                   else icon.label = "";
-  }]],
+  size: 28,
+  style: 'margin-left: -5px',
+  icon: 'display-brightness-symbolic',
 });
 
 const LevelLabel = props => Label({
   ...props,
   className: 'label',
-  connections: [[500, label => label.label = `${Math.floor(exec('brightnessctl get') / 2.55)}%`]],
+  connections: [[200, label => label.label = `${Math.floor(exec('brightnessctl get') / 2.55)}%`]],
 });
 
-const BrightnessModule = () => Box({
-  className: 'toggle-off battery',
-  children: [
-    Indicator(),
-    Separator(12),
-    LevelLabel(),
+const BrightnessModule = () => Overlay({
+  child: ProgressBar({
+    className: 'toggle-off brightness',
+    connections: [
+      [ 200, progress => {
+        let br = exec('brightnessctl get') / 255;
+        if (br > 0.33) {
+          progress.value = br;
+        }
+        else {
+          progress.value = 0.33;
+        }
+      }]
+    ],
+  }),
+  overlays: [
+    Box({
+      className: 'battery',
+      style: 'color: #CBA6F7;',
+      children: [
+        Indicator(),
+        Separator(2),
+        LevelLabel(),
+      ],
+    }),
   ],
 });
 
diff --git a/config/ags/scss/widgets/traybuttons.scss b/config/ags/scss/widgets/traybuttons.scss
index 0da740f6..d60d0180 100644
--- a/config/ags/scss/widgets/traybuttons.scss
+++ b/config/ags/scss/widgets/traybuttons.scss
@@ -87,3 +87,16 @@
     font-size: 20px;
   }
 }
+
+.brightness {
+  trough {
+    margin-right: -50px;
+    progress {
+      margin-right: 50px;
+      margin-top: -30px;
+      border-radius: 80px;
+      min-height: 37px;
+      background: $bgSecondary;
+    }
+  }
+}
diff --git a/config/ags/style.css b/config/ags/style.css
index cbd55569..8b3355ac 100644
--- a/config/ags/style.css
+++ b/config/ags/style.css
@@ -103,6 +103,15 @@
   .battery .label {
     font-size: 20px; }
 
+.brightness trough {
+  margin-right: -50px; }
+  .brightness trough progress {
+    margin-right: 50px;
+    margin-top: -30px;
+    border-radius: 80px;
+    min-height: 37px;
+    background: rgba(56, 44, 74, 0.8); }
+
 .workspaces {
   background-color: rgba(40, 42, 54, 0.8);
   border-radius: 80px;
diff --git a/config/hypr/main.conf b/config/hypr/main.conf
index 34863475..63dd7e57 100644
--- a/config/hypr/main.conf
+++ b/config/hypr/main.conf
@@ -231,5 +231,5 @@ bind =, XF86AudioMicMute, exec, swayosd-client --input-volume mute-toggle
 bindr = CAPS, Caps_Lock, exec, swayosd-client --caps-lock
 
 # Brightness control
-binde =, XF86MonBrightnessUp, exec, swayosd-client --brightness raise
-binde =, XF86MonBrightnessDown, exec, swayosd-client --brightness lower
+binde =, XF86MonBrightnessUp, exec, swayosd-client --brightness 5
+binde =, XF86MonBrightnessDown, exec, swayosd-client --brightness -5