feat(ags): make brightness widget a progress bar

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(),
+      ],
+    }),
   ],
 });
 

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;
+    }
+  }
+}

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;

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