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',
-    onPrimaryClickRelease: () => execAsync(['pavucontrol']).catch(print),
-
         child: Box({
-        className: 'audio',
             children: [
-            SpeakerIndicator(),
                 Separator(SPACING),
                 SpeakerPercentLabel(),
             ],
         }),
-});
+    });
+
+    const widget = EventBox({
+        onHover: () => {
+            rev.revealChild = true;
+        },
+        onHoverLost: () => {
+            rev.revealChild = false;
+        },
+        child: Box({
+            className: 'audio',
+            children: [
+                SpeakerIndicator(),
+
+                rev,
+            ],
+        }),
+    });
+
+    widget.rev = rev;
+
+    return widget;
+};

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

@@ -1,13 +1,24 @@
 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: 'bg-text',
+    hpack: 'center',
+    vpack: 'center',
+    connections: [[Battery, (self) => {
+        self.label = `${Math.floor(Battery.percent / 10)}`;
+        self.visible = !Battery.charging;
+    }]],
+});
+
+const Indicator = (overlay) => Overlay({
+    child: Icon({
         className: 'battery-indicator',
 
         binds: [['icon', Battery, 'icon-name']],
@@ -17,6 +28,8 @@ const Indicator = () => Icon({
             self.toggleClassName('charged', Battery.charged);
             self.toggleClassName('low', Battery.percent < LOW_BATT);
         }]],
+    }),
+    overlays: [overlay],
 });
 
 const LevelLabel = (props) => 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: [
-        Indicator(),
                 Separator(SPACING),
                 LevelLabel(),
             ],
-});
+        }),
+    });
+
+    const widget = EventBox({
+        onHover: () => {
+            rev.revealChild = true;
+
+            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,21 +1,20 @@
 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: [
-        Icon({
+                Separator(4),
-            icon: 'input-keyboard-symbolic',
-            css: 'margin-right: 4px;',
-        }),
-
                 Label({
+                    css: 'font-size: 20px;',
                     connections: [[Hyprland, (self, _n, layout) => {
                         if (layout) {
                             if (layout === 'error') {
@@ -34,7 +33,8 @@ export default () => Box({
 
                                 layout = kb['active_keymap'];
 
-                        const shortName = layout.match(/\(([A-Za-z]+)\)/);
+                                const shortName = layout
+                                    .match(/\(([A-Za-z]+)\)/);
 
                                 self.label = shortName ? shortName[1] : layout;
                             }).catch(print);
@@ -42,4 +42,30 @@ export default () => Box({
                     }, 'keyboard-layout']],
                 }),
             ],
-});
+        }),
+    });
+
+    const widget = EventBox({
+        onHover: () => {
+            rev.revealChild = true;
+        },
+        onHoverLost: () => {
+            rev.revealChild = false;
+        },
+        child: Box({
+            css: 'padding: 0 10px; margin-right: -10px;',
+            children: [
+                Icon({
+                    icon: 'input-keyboard-symbolic',
+                    size: 20,
+                }),
+
+                rev,
+            ],
+        }),
+    });
+
+    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 {