feat(ags bar): move some buttons to hover revs with qs button

devices/wim/config/ags/js/bar/buttons/audio.js

@@ -1,11 +1,9 @@
 import Audio from 'resource:///com/github/Aylur/ags/service/audio.js';
 
-import { Label, Box, Icon } from 'resource:///com/github/Aylur/ags/widget.js';
+import { Label, Box, EventBox, Icon, Revealer } from 'resource:///com/github/Aylur/ags/widget.js';
-import { execAsync } from 'resource:///com/github/Aylur/ags/utils.js';
 
 import { SpeakerIcon } from '../../misc/audio-icons.js';
 import Separator from '../../misc/separator.js';
-import EventBox from '../../misc/cursorbox.js';
 
 
 const SpeakerIndicator = (props) => Icon({
@@ -24,17 +22,35 @@ const SpeakerPercentLabel = (props) => Label({
 
 const SPACING = 5;
 
-export default () => EventBox({
+export default () => {
-    className: 'toggle-off',
+    const rev = Revealer({
+        transition: 'slide_right',
+        child: Box({
+            children: [
+                Separator(SPACING),
+                SpeakerPercentLabel(),
+            ],
+        }),
+    });
 
-    onPrimaryClickRelease: () => execAsync(['pavucontrol']).catch(print),
+    const widget = EventBox({
+        onHover: () => {
+            rev.revealChild = true;
+        },
+        onHoverLost: () => {
+            rev.revealChild = false;
+        },
+        child: Box({
+            className: 'audio',
+            children: [
+                SpeakerIndicator(),
 
-    child: Box({
+                rev,
-        className: 'audio',
+            ],
-        children: [
+        }),
-            SpeakerIndicator(),
+    });
-            Separator(SPACING),
+
-            SpeakerPercentLabel(),
+    widget.rev = rev;
-        ],
+
-    }),
+    return widget;
-});
+};

devices/wim/config/ags/js/bar/buttons/battery.js

@@ -1,24 +1,37 @@
 import Battery from 'resource:///com/github/Aylur/ags/service/battery.js';
 
-import { Label, Icon, Box } from 'resource:///com/github/Aylur/ags/widget.js';
+import { Box, EventBox, Icon, Label, Overlay, Revealer } from 'resource:///com/github/Aylur/ags/widget.js';
 
 import Separator from '../../misc/separator.js';
 
 const LOW_BATT = 20;
 
 
-const Indicator = () => Icon({
+const NumOverlay = () => Label({
-    className: 'battery-indicator',
+    className: 'bg-text',
-
+    hpack: 'center',
-    binds: [['icon', Battery, 'icon-name']],
+    vpack: 'center',
-
     connections: [[Battery, (self) => {
-        self.toggleClassName('charging', Battery.charging);
+        self.label = `${Math.floor(Battery.percent / 10)}`;
-        self.toggleClassName('charged', Battery.charged);
+        self.visible = !Battery.charging;
-        self.toggleClassName('low', Battery.percent < LOW_BATT);
     }]],
 });
 
+const Indicator = (overlay) => Overlay({
+    child: Icon({
+        className: 'battery-indicator',
+
+        binds: [['icon', Battery, 'icon-name']],
+
+        connections: [[Battery, (self) => {
+            self.toggleClassName('charging', Battery.charging);
+            self.toggleClassName('charged', Battery.charged);
+            self.toggleClassName('low', Battery.percent < LOW_BATT);
+        }]],
+    }),
+    overlays: [overlay],
+});
+
 const LevelLabel = (props) => Label({
     ...props,
     className: 'label',
@@ -30,12 +43,44 @@ const LevelLabel = (props) => Label({
 
 const SPACING = 5;
 
-export default () => Box({
+export default () => {
-    className: 'toggle-off battery',
+    const rev1 = NumOverlay();
+    const rev = Revealer({
+        transition: 'slide_right',
+        child: Box({
+            children: [
+                Separator(SPACING),
+                LevelLabel(),
+            ],
+        }),
+    });
 
-    children: [
+    const widget = EventBox({
-        Indicator(),
+        onHover: () => {
-        Separator(SPACING),
+            rev.revealChild = true;
-        LevelLabel(),
+
-    ],
+            if (!Battery.charging) {
-});
+                rev1.visible = false;
+            }
+        },
+        onHoverLost: () => {
+            rev.revealChild = false;
+
+            if (!Battery.charging) {
+                rev1.visible = true;
+            }
+        },
+        child: Box({
+            className: 'battery',
+            children: [
+                Indicator(rev1),
+
+                rev,
+            ],
+        }),
+    });
+
+    widget.rev = rev;
+
+    return widget;
+};

devices/wim/config/ags/js/bar/buttons/keyboard-layout.js

@@ -1,45 +1,71 @@
 import Hyprland from 'resource:///com/github/Aylur/ags/service/hyprland.js';
 
-import { Box, Icon, Label } from 'resource:///com/github/Aylur/ags/widget.js';
+import { Box, EventBox, Icon, Label, Revealer } from 'resource:///com/github/Aylur/ags/widget.js';
+
+import Separator from '../../misc/separator.js';
 
 const DEFAULT_KB = 'at-translated-set-2-keyboard';
 
 
-export default () => Box({
+export default () => {
-    className: 'toggle-off',
+    const rev = Revealer({
-    css: 'padding: 0 10px;',
+        transition: 'slide_right',
+        child: Box({
+            children: [
+                Separator(4),
+                Label({
+                    css: 'font-size: 20px;',
+                    connections: [[Hyprland, (self, _n, layout) => {
+                        if (layout) {
+                            if (layout === 'error') {
+                                return;
+                            }
 
-    children: [
+                            const shortName = layout.match(/\(([A-Za-z]+)\)/);
-        Icon({
+
-            icon: 'input-keyboard-symbolic',
+                            self.label = shortName ? shortName[1] : layout;
-            css: 'margin-right: 4px;',
+                        }
+                        else {
+                        // At launch, kb layout is undefined
+                            Hyprland.sendMessage('j/devices').then((obj) => {
+                                const kb = JSON.parse(obj).keyboards
+                                    .find((val) => val.name === DEFAULT_KB);
+
+                                layout = kb['active_keymap'];
+
+                                const shortName = layout
+                                    .match(/\(([A-Za-z]+)\)/);
+
+                                self.label = shortName ? shortName[1] : layout;
+                            }).catch(print);
+                        }
+                    }, 'keyboard-layout']],
+                }),
+            ],
         }),
+    });
 
-        Label({
+    const widget = EventBox({
-            connections: [[Hyprland, (self, _n, layout) => {
+        onHover: () => {
-                if (layout) {
+            rev.revealChild = true;
-                    if (layout === 'error') {
+        },
-                        return;
+        onHoverLost: () => {
-                    }
+            rev.revealChild = false;
+        },
+        child: Box({
+            css: 'padding: 0 10px; margin-right: -10px;',
+            children: [
+                Icon({
+                    icon: 'input-keyboard-symbolic',
+                    size: 20,
+                }),
 
-                    const shortName = layout.match(/\(([A-Za-z]+)\)/);
+                rev,
-
+            ],
-                    self.label = shortName ? shortName[1] : layout;
-                }
-                else {
-                    // At launch, kb layout is undefined
-                    Hyprland.sendMessage('j/devices').then((obj) => {
-                        const kb = JSON.parse(obj).keyboards
-                            .find((val) => val.name === DEFAULT_KB);
-
-                        layout = kb['active_keymap'];
-
-                        const shortName = layout.match(/\(([A-Za-z]+)\)/);
-
-                        self.label = shortName ? shortName[1] : layout;
-                    }).catch(print);
-                }
-            }, 'keyboard-layout']],
         }),
-    ],
+    });
-});
+
+    widget.rev = rev;
+
+    return widget;
+};

devices/wim/config/ags/js/bar/buttons/quick-settings.js

@@ -2,12 +2,22 @@ import App from 'resource:///com/github/Aylur/ags/app.js';
 
 import { Box, Label } from 'resource:///com/github/Aylur/ags/widget.js';
 
+import Audio from './audio.js';
+import Battery from './battery.js';
+import KeyboardLayout from './keyboard-layout.js';
+import Network from './network.js';
+
 import EventBox from '../../misc/cursorbox.js';
+import Separator from '../../misc/separator.js';
+
+const SPACING = 4;
 
 
 export default () => EventBox({
     className: 'toggle-off',
 
+    onHoverLost: () => { /**/ },
+
     onPrimaryClickRelease: () => App.toggleWindow('quick-settings'),
 
     connections: [[App, (self, windowName, visible) => {
@@ -19,6 +29,20 @@ export default () => EventBox({
     child: Box({
         className: 'quick-settings-toggle',
         vertical: false,
-        child: Label('  '),
+        children: [
+            Separator(SPACING),
+
+            KeyboardLayout(),
+
+            Audio(),
+
+            Battery(),
+
+            Network(),
+
+            Label(' '),
+
+            Separator(SPACING),
+        ],
     }),
 });

devices/wim/config/ags/js/bar/main.js

@@ -2,12 +2,9 @@ import { Window, CenterBox, Box } from 'resource:///com/github/Aylur/ags/widget.
 
 import Separator from '../misc/separator.js';
 
-import Audio from './buttons/audio.js';
-import Battery from './buttons/battery.js';
 import Brightness from './buttons/brightness.js';
 import Clock from './buttons/clock.js';
 import CurrentWindow from './buttons/current-window.js';
-import KeyboardLayout from './buttons/keyboard-layout.js';
 import NotifButton from './buttons/notif-button.js';
 import OskToggle from './buttons/osk-toggle.js';
 import QsToggle from './buttons/quick-settings.js';
@@ -44,10 +41,6 @@ export default () => Window({
 
                     SysTray(),
 
-                    Audio(),
-
-                    Separator(SPACING),
-
                     Brightness(),
 
                     Separator(SPACING),
@@ -70,14 +63,6 @@ export default () => Window({
             endWidget: Box({
                 hpack: 'end',
                 children: [
-                    Battery(),
-
-                    Separator(SPACING),
-
-                    KeyboardLayout(),
-
-                    Separator(SPACING),
-
                     Clock(),
 
                     Separator(SPACING),

devices/wim/config/ags/scss/widgets/traybuttons.scss

@@ -50,19 +50,29 @@
 
 .clock {
   font-size: 20px;
-  padding-left: 10px;
+  padding: 0 15px;
-  padding-right: 10px;
-  min-width: 230px;
 }
 
 .audio {
   padding: 0 10px;
   font-size: 20px;
+  margin-right: -10px;
+}
+
+.network {
+  padding: 0 10px;
+  font-size: 20px;
+}
+
+.bg-text {
+  color: $bg;
+  font-weight: bold;
 }
 
 .battery {
   padding: 0 10px;
   font-size: 20px;
+  margin-right: -10px;
 
   .battery-indicator {
     &.charging {