From 5a0f40a2b2a1217cdae1eefd4d36e23306fd8507 Mon Sep 17 00:00:00 2001 From: matt1432 Date: Sun, 29 Oct 2023 13:40:37 -0400 Subject: [PATCH] feat(ags workspace bar): improve animation --- devices/wim/config/ags/js/bar/workspaces.js | 33 +++++++++---- .../config/ags/scss/widgets/workspaces.scss | 46 +++++++++---------- 2 files changed, 48 insertions(+), 31 deletions(-) diff --git a/devices/wim/config/ags/js/bar/workspaces.js b/devices/wim/config/ags/js/bar/workspaces.js index a8818978..09e08214 100644 --- a/devices/wim/config/ags/js/bar/workspaces.js +++ b/devices/wim/config/ags/js/bar/workspaces.js @@ -1,5 +1,5 @@ import { Hyprland, Utils, Widget } from '../../imports.js'; -const { Box, Revealer } = Widget; +const { Box, Overlay, Revealer } = Widget; const { execAsync } = Utils; import EventBox from '../misc/cursorbox.js'; @@ -21,7 +21,6 @@ const Workspace = ({ i } = {}) => className: 'button', connections: [[Hyprland, self => { const occupied = Hyprland.getWorkspace(i)?.windows > 0; - self.toggleClassName('active', Hyprland.active.workspace.id === i); self.toggleClassName('occupied', occupied); self.toggleClassName('empty', !occupied); }]], @@ -29,10 +28,28 @@ const Workspace = ({ i } = {}) => }), }); -export default () => Box({ - className: 'workspaces', - children: [EventBox({ +export default () => Overlay({ + setup: self => { + self.set_overlay_pass_through( + self.get_children()[1], + true, + ); + }, + overlays: [Box({ + valign: 'center', + halign: 'start', + className: 'button active', + connections: [[Hyprland.active.workspace, self => { + const currentId = Hyprland.active.workspace.id; + const indicators = self.get_parent().get_children()[0].child.children; + const currentIndex = indicators.findIndex(w => w._id == currentId); + + self.setStyle(`margin-left: ${16 + currentIndex * 30}px`); + }]], + })], + child: EventBox({ child: Box({ + className: 'workspaces', properties: [ ['workspaces'], @@ -43,7 +60,7 @@ export default () => Box({ }); }], - ['updateWs', self => { + ['updateWorkspaces', self => { Hyprland.workspaces.forEach(ws => { const currentWs = self.children.find(ch => ch._id == ws.id); if (!currentWs && ws.id > 0) @@ -62,9 +79,9 @@ export default () => Box({ return Hyprland.workspaces.find(ws => ws.id == ch._id); }).sort((a, b) => a._id - b._id); - self._updateWs(self); + self._updateWorkspaces(self); self._refresh(self); }]], }), - })], + }), }); diff --git a/devices/wim/config/ags/scss/widgets/workspaces.scss b/devices/wim/config/ags/scss/widgets/workspaces.scss index 609205c4..f23783d7 100644 --- a/devices/wim/config/ags/scss/widgets/workspaces.scss +++ b/devices/wim/config/ags/scss/widgets/workspaces.scss @@ -3,27 +3,27 @@ border-radius: 80px; border: 2px solid $bg-secondary; padding: 3px 12px; - - .button { - margin: 0 2.5px; - min-height: 22px; - min-width: 22px; - border-radius: 100%; - } - - .empty { - border: none; - transition: border-color 0.25s linear; - } - - .occupied { - border: 2px solid $bg; - background: $contrast-bg; - transition: border-color 0.25s linear; - } - - .active { - border: 2px solid #50fa7b; - transition: border-color 0.25s linear; - } +} + +.button { + margin: 0 2.5px; + min-height: 22px; + min-width: 22px; + border-radius: 100%; +} + +.empty { + border: 2px solid transparent; + transition: border-color 0.25s linear; +} + +.occupied { + border: 2px solid $bg; + background: $contrast-bg; + transition: border-color 0.25s linear; +} + +.active { + border: 2px solid #50fa7b; + transition: margin-left 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); }