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,29 +59,41 @@ 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(
-                if (batAvail && showLabel) {
+                [
-                    return [
+                    battery.bind('available'),
-                        Widget.Icon({
+                    show_label.bind('value'),
-                            class_name: 'bar-button-icon battery',
+                    battery.bind('charged'),
-                            icon: batIcon,
+                    hideLabelWhenFull.bind('value'),
-                        }),
+                ],
-                        Widget.Label({
+                (batAvail, showLabel, isCharged, hideWhenFull) => {
-                            class_name: 'bar-button-label battery',
+                    if (batAvail && showLabel) {
-                            label: battery.bind('percent').as((p) => `${Math.floor(p)}%`),
+                        return [
-                        }),
+                            Widget.Icon({
-                    ];
+                                class_name: 'bar-button-icon battery',
-                } else if (batAvail && !showLabel) {
+                                icon: batIcon,
-                    return [
+                            }),
-                        Widget.Icon({
+                            ...(hideWhenFull && isCharged
-                            class_name: 'bar-button-icon battery',
+                                ? []
-                            icon: batIcon,
+                                : [
-                        }),
+                                      Widget.Label({
-                    ];
+                                          class_name: 'bar-button-label battery',
-                } else {
+                                          label: battery.bind('percent').as((p) => `${Math.floor(p)}%`),
-                    return [];
+                                      }),
-                }
+                                  ]),
-            }),
+                        ];
+                    } else if (batAvail && !showLabel) {
+                        return [
+                            Widget.Icon({
+                                class_name: 'bar-button-icon battery',
+                                icon: batIcon,
+                            }),
+                        ];
+                    } 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',