matt1432/nixos-configs
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat(ags workspace bar): improve animation

Browse source
This commit is contained in:
matt1432 2023-10-29 13:40:37 -04:00
parent 4e0141099c
commit 5a0f40a2b2
2 changed files with 48 additions and 31 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

33
devices/wim/config/ags/js/bar/workspaces.js
View file

@ -1,5 +1,5 @@
import { Hyprland, Utils, Widget } from '../../imports.js'; import { Hyprland, Utils, Widget } from '../../imports.js';
const { Box, Revealer } = Widget; const { Box, Overlay, Revealer } = Widget;
const { execAsync } = Utils; const { execAsync } = Utils;
import EventBox from '../misc/cursorbox.js'; import EventBox from '../misc/cursorbox.js';
@ -21,7 +21,6 @@ const Workspace = ({ i } = {}) =>
className: 'button', className: 'button',
connections: [[Hyprland, self => { connections: [[Hyprland, self => {
const occupied = Hyprland.getWorkspace(i)?.windows > 0; const occupied = Hyprland.getWorkspace(i)?.windows > 0;
self.toggleClassName('active', Hyprland.active.workspace.id === i);
self.toggleClassName('occupied', occupied); self.toggleClassName('occupied', occupied);
self.toggleClassName('empty', !occupied); self.toggleClassName('empty', !occupied);
}]], }]],
@ -29,10 +28,28 @@ const Workspace = ({ i } = {}) =>
}), }),
}); });
export default () => Box({ export default () => Overlay({
className: 'workspaces', setup: self => {
children: [EventBox({ 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({ child: Box({
className: 'workspaces',
properties: [ properties: [
['workspaces'], ['workspaces'],
@ -43,7 +60,7 @@ export default () => Box({
}); });
}], }],
['updateWs', self => { ['updateWorkspaces', self => {
Hyprland.workspaces.forEach(ws => { Hyprland.workspaces.forEach(ws => {
const currentWs = self.children.find(ch => ch._id == ws.id); const currentWs = self.children.find(ch => ch._id == ws.id);
if (!currentWs && ws.id > 0) if (!currentWs && ws.id > 0)
@ -62,9 +79,9 @@ export default () => Box({
return Hyprland.workspaces.find(ws => ws.id == ch._id); return Hyprland.workspaces.find(ws => ws.id == ch._id);
}).sort((a, b) => a._id - b._id); }).sort((a, b) => a._id - b._id);
self._updateWs(self); self._updateWorkspaces(self);
self._refresh(self); self._refresh(self);
}]], }]],
}), }),
})], }),
}); });

24
devices/wim/config/ags/scss/widgets/workspaces.scss
View file

@ -3,27 +3,27 @@
border-radius: 80px; border-radius: 80px;
border: 2px solid $bg-secondary; border: 2px solid $bg-secondary;
padding: 3px 12px; padding: 3px 12px;
}
.button { .button {
margin: 0 2.5px; margin: 0 2.5px;
min-height: 22px; min-height: 22px;
min-width: 22px; min-width: 22px;
border-radius: 100%; border-radius: 100%;
} }
.empty { .empty {
border: none; border: 2px solid transparent;
transition: border-color 0.25s linear; transition: border-color 0.25s linear;
} }
.occupied { .occupied {
border: 2px solid $bg; border: 2px solid $bg;
background: $contrast-bg; background: $contrast-bg;
transition: border-color 0.25s linear; transition: border-color 0.25s linear;
} }
.active { .active {
border: 2px solid #50fa7b; border: 2px solid #50fa7b;
transition: border-color 0.25s linear; transition: margin-left 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
} }