feat: add option to hide label when battery is full (#350)

* feat: add option to hide label when battery is full

* feat: add option to hide label when battery is full

* feat: add option to hide label when battery is full

* Update modules/bar/battery/index.ts

Co-authored-by: Jas Singh <jaskiratpal.singh@outlook.com>

* fix: battery css

---------

Co-authored-by: Jas Singh <jaskiratpal.singh@outlook.com>

modules/bar/battery/index.ts

@@ -7,7 +7,7 @@ import Button from 'types/widgets/button.js';
 import { Attribute, Child } from 'lib/types/widget.js';
 import { runAsyncCommand, throttledScrollHandler } from 'customModules/utils.js';
 
-const { label: show_label, rightClick, middleClick, scrollUp, scrollDown } = options.bar.battery;
+const { label: show_label, rightClick, middleClick, scrollUp, scrollDown, hideLabelWhenFull } = options.bar.battery;
 
 const BatteryLabel = (): BarBoxChild => {
     const isVis = Variable(battery.available);
@@ -59,17 +59,28 @@ const BatteryLabel = (): BarBoxChild => {
             ),
             visible: battery.bind('available'),
             tooltip_text: battery.bind('time_remaining').as((t) => t.toString()),
-            children: Utils.merge([battery.bind('available'), show_label.bind('value')], (batAvail, showLabel) => {
+            children: Utils.merge(
+                [
+                    battery.bind('available'),
+                    show_label.bind('value'),
+                    battery.bind('charged'),
+                    hideLabelWhenFull.bind('value'),
+                ],
+                (batAvail, showLabel, isCharged, hideWhenFull) => {
                     if (batAvail && showLabel) {
                         return [
                             Widget.Icon({
                                 class_name: 'bar-button-icon battery',
                                 icon: batIcon,
                             }),
+                            ...(hideWhenFull && isCharged
+                                ? []
+                                : [
                                       Widget.Label({
                                           class_name: 'bar-button-label battery',
                                           label: battery.bind('percent').as((p) => `${Math.floor(p)}%`),
                                       }),
+                                  ]),
                         ];
                     } else if (batAvail && !showLabel) {
                         return [
@@ -81,7 +92,8 @@ const BatteryLabel = (): BarBoxChild => {
                     } else {
                         return [];
                     }
-            }),
+                },
+            ),
             setup: (self) => {
                 self.hook(battery, () => {
                     if (battery.available) {

options.ts

@@ -912,6 +912,7 @@ const options = mkOptions(OPTIONS, {
         },
         battery: {
             label: opt(true),
+            hideLabelWhenFull: opt(false),
             rightClick: opt(''),
             middleClick: opt(''),
             scrollUp: opt(''),

scss/style/bar/battery.scss

@@ -25,6 +25,10 @@
             $bar-buttons-radius * 0.4,
             $bar-buttons-radius
         );
+
+        &:last-child {
+            border-radius: $bar-buttons-radius;
+        }
     }
 
     .bar-button-label.battery {
@@ -56,3 +60,4 @@
         0em
     );
 }
+

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

@@ -559,6 +559,11 @@ export const BarSettings = (): Scrollable<Gtk.Widget, Gtk.Widget> => {
                     title: 'Show Battery Percentage',
                     type: 'boolean',
                 }),
+                Option({
+                    opt: options.bar.battery.hideLabelWhenFull,
+                    title: 'Hide Battery Percentage When Full',
+                    type: 'boolean',
+                }),
                 Option({
                     opt: options.theme.bar.buttons.battery.spacing,
                     title: 'Inner Spacing',