From 559234cbbab910ca00ccae7940d9b2a32cf9efd3 Mon Sep 17 00:00:00 2001 From: matt1432 Date: Tue, 5 Dec 2023 09:42:06 -0500 Subject: [PATCH] feat(ags bar): move some buttons to hover revs with qs button --- .../wim/config/ags/js/bar/buttons/audio.js | 46 ++++++--- .../wim/config/ags/js/bar/buttons/battery.js | 79 ++++++++++++---- .../ags/js/bar/buttons/keyboard-layout.js | 94 ++++++++++++------- .../ags/js/bar/buttons/quick-settings.js | 26 ++++- devices/wim/config/ags/js/bar/main.js | 15 --- .../config/ags/scss/widgets/traybuttons.scss | 16 +++- flake.lock | 36 +++---- 7 files changed, 209 insertions(+), 103 deletions(-) diff --git a/devices/wim/config/ags/js/bar/buttons/audio.js b/devices/wim/config/ags/js/bar/buttons/audio.js index b6e9880a..9dd249ae 100644 --- a/devices/wim/config/ags/js/bar/buttons/audio.js +++ b/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 { execAsync } from 'resource:///com/github/Aylur/ags/utils.js'; +import { Label, Box, EventBox, Icon, Revealer } from 'resource:///com/github/Aylur/ags/widget.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({ - className: 'toggle-off', +export default () => { + 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({ - className: 'audio', - children: [ - SpeakerIndicator(), - Separator(SPACING), - SpeakerPercentLabel(), - ], - }), -}); + rev, + ], + }), + }); + + widget.rev = rev; + + return widget; +}; diff --git a/devices/wim/config/ags/js/bar/buttons/battery.js b/devices/wim/config/ags/js/bar/buttons/battery.js index e0f81e6b..bda8c764 100644 --- a/devices/wim/config/ags/js/bar/buttons/battery.js +++ b/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({ - className: 'battery-indicator', - - binds: [['icon', Battery, 'icon-name']], - +const NumOverlay = () => Label({ + className: 'bg-text', + hpack: 'center', + vpack: 'center', connections: [[Battery, (self) => { - self.toggleClassName('charging', Battery.charging); - self.toggleClassName('charged', Battery.charged); - self.toggleClassName('low', Battery.percent < LOW_BATT); + 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']], + + 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({ - className: 'toggle-off battery', +export default () => { + const rev1 = NumOverlay(); + const rev = Revealer({ + transition: 'slide_right', + child: Box({ + children: [ + Separator(SPACING), + LevelLabel(), + ], + }), + }); - 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; +}; diff --git a/devices/wim/config/ags/js/bar/buttons/keyboard-layout.js b/devices/wim/config/ags/js/bar/buttons/keyboard-layout.js index ea4bcc2a..90b9f03e 100644 --- a/devices/wim/config/ags/js/bar/buttons/keyboard-layout.js +++ b/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({ - className: 'toggle-off', - css: 'padding: 0 10px;', +export default () => { + const rev = Revealer({ + 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: [ - Icon({ - icon: 'input-keyboard-symbolic', - css: 'margin-right: 4px;', + const shortName = layout.match(/\(([A-Za-z]+)\)/); + + 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']], + }), + ], }), + }); - Label({ - connections: [[Hyprland, (self, _n, layout) => { - if (layout) { - if (layout === 'error') { - return; - } + 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, + }), - const shortName = layout.match(/\(([A-Za-z]+)\)/); - - 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']], + rev, + ], }), - ], -}); + }); + + widget.rev = rev; + + return widget; +}; diff --git a/devices/wim/config/ags/js/bar/buttons/quick-settings.js b/devices/wim/config/ags/js/bar/buttons/quick-settings.js index a22384b7..4b71bdeb 100644 --- a/devices/wim/config/ags/js/bar/buttons/quick-settings.js +++ b/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), + ], }), }); diff --git a/devices/wim/config/ags/js/bar/main.js b/devices/wim/config/ags/js/bar/main.js index d1dea957..aff4c337 100644 --- a/devices/wim/config/ags/js/bar/main.js +++ b/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), diff --git a/devices/wim/config/ags/scss/widgets/traybuttons.scss b/devices/wim/config/ags/scss/widgets/traybuttons.scss index 5b0e98c3..d8efa148 100644 --- a/devices/wim/config/ags/scss/widgets/traybuttons.scss +++ b/devices/wim/config/ags/scss/widgets/traybuttons.scss @@ -50,19 +50,29 @@ .clock { font-size: 20px; - padding-left: 10px; - padding-right: 10px; - min-width: 230px; + padding: 0 15px; } .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 { diff --git a/flake.lock b/flake.lock index 04275586..14f90613 100644 --- a/flake.lock +++ b/flake.lock @@ -7,11 +7,11 @@ ] }, "locked": { - "lastModified": 1701723243, - "narHash": "sha256-vQH5nyUqKQ1zdwtNKDmMdnDHuocHatkWF5Yr5fVgjew=", + "lastModified": 1701731887, + "narHash": "sha256-xgfThireUGD8/X6OYKXOpdGAkTUgPbpwW2FySBIjURc=", "owner": "Aylur", "repo": "ags", - "rev": "86a826d8c1a1231e39dee664349802e33acaff6c", + "rev": "93af4d4cbbc190c1116a02cdea99d327b0c5cec2", "type": "github" }, "original": { @@ -358,11 +358,11 @@ "xdph": "xdph" }, "locked": { - "lastModified": 1701715678, - "narHash": "sha256-cCW30ir7VojARVLCVGFf4zSWDe8QOTlgWjYo9VOzTRc=", + "lastModified": 1701737536, + "narHash": "sha256-xSmfHhhCL9mAta5jKfcbJxYjCoD2MdLPBMjBUWvYAJI=", "owner": "hyprwm", "repo": "Hyprland", - "rev": "aa46aaed04f089b849c45a077e81e8b562be23df", + "rev": "3bb9c7c5cf4f2ee30bf821501499f2308d616f94", "type": "github" }, "original": { @@ -426,11 +426,11 @@ ] }, "locked": { - "lastModified": 1701648247, - "narHash": "sha256-GF3OSTywzGWDy70inb8d7mOdrX2ff5EfCEHIn73QCsQ=", + "lastModified": 1701734705, + "narHash": "sha256-Zf5xsGvxLXmnDEtF2j9ZQ81Ot03vfM8jFtE2hiU4A+E=", "owner": "nix-community", "repo": "neovim-nightly-overlay", - "rev": "f789d546e64ff3575aebe4707631482ecbb68e2c", + "rev": "692f9f3cbeaf82824961d9d03ef6322792b2a706", "type": "github" }, "original": { @@ -449,11 +449,11 @@ }, "locked": { "dir": "contrib", - "lastModified": 1701643367, - "narHash": "sha256-1R/BkHjrmqxQC0rE2kQu8b2L3G1Ap6GfdiiH6LUVeek=", + "lastModified": 1701729159, + "narHash": "sha256-RrCbMfSdHO3H04WTX5Eo8EH9c+H5hs7bxgD/BoxEtEs=", "owner": "neovim", "repo": "neovim", - "rev": "5651c1ff27a1eb59d120637ba5cbd90f08a3f1d2", + "rev": "c3836e40a2bffbc1d4e06531145b7825788dd818", "type": "github" }, "original": { @@ -638,11 +638,11 @@ "nixpkgs": "nixpkgs_6" }, "locked": { - "lastModified": 1701694273, - "narHash": "sha256-Pm0T6hZIv6uERkiaHNvebAk0dgAV4pl8W9mtBraRaks=", + "lastModified": 1701730884, + "narHash": "sha256-eSZF7+R0XTcrrzi3vf4nCTLiuKPJHxuMTRg5bz4TMmE=", "owner": "nix-community", "repo": "nixpkgs-wayland", - "rev": "a93f12485a93df3b5c6a9961c7b8986ffa20f292", + "rev": "ca8a7cdd6efb13a30d8aa7f5a27fad4954d8aa9a", "type": "github" }, "original": { @@ -749,11 +749,11 @@ }, "nur": { "locked": { - "lastModified": 1701729144, - "narHash": "sha256-3alCfM4qHgtlBqcMm+Ulm1eBbw44etI3maF8W2o4xV0=", + "lastModified": 1701780125, + "narHash": "sha256-HtNkw7mbLPkxmSoz57FNXEMioFMIBp7yDy88dE3HsZA=", "owner": "nix-community", "repo": "NUR", - "rev": "d8225402f22f93242485c0dc2d4ccb5f48fd1c46", + "rev": "77fbdb7bff2c28e35f755144d9313faf3f8121ed", "type": "github" }, "original": {