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

feat(ags overview): add anims to workspace changes

Browse source
This commit is contained in:
matt1432 2023-09-28 22:45:23 -04:00
parent 785dbf4bc8
commit 7898f408e2
4 changed files with 120 additions and 60 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
config/ags/js/overview/clients.js
View file

@ -70,7 +70,7 @@ export function updateClients(box) {
let clients = JSON.parse(result).filter(client => client.class)
box._workspaces.forEach(workspace => {
let fixed = workspace.child.child.children[0];
let fixed = workspace.child.child.overlays[0].children[0];
let toRemove = fixed.get_children();
clients.filter(client => client.workspace.id == workspace._id).forEach(client => {

120
config/ags/js/overview/workspaces.js
View file

@ -1,10 +1,13 @@
const { Revealer, CenterBox, Box, EventBox, Label } = ags.Widget;
const { Revealer, CenterBox, Box, EventBox, Label, Overlay } = ags.Widget;
const { Hyprland } = ags.Service;
const { Gtk } = imports.gi;
import { WorkspaceDrop } from './dragndrop.js';
import * as VARS from './variables.js';
const DEFAULT_STYLE = `min-width: ${VARS.SCREEN.X * VARS.SCALE}px;
min-height: ${VARS.SCREEN.Y * VARS.SCALE}px;`;
export function getWorkspaces(box) {
let children = [];
box.children.forEach(type => {
@ -20,17 +23,25 @@ export function getWorkspaces(box) {
export const WorkspaceRow = (className, i) => Revealer({
transition: 'slide_down',
connections: [[Hyprland, rev => {
rev.revealChild = Hyprland.workspaces.some(ws => ws.id > i * VARS.WORKSPACE_PER_ROW &&
let minId = i * VARS.WORKSPACE_PER_ROW;
let activeId = Hyprland.active.workspace.id;
rev.revealChild = Hyprland.workspaces.some(ws => ws.id > minId &&
(ws.windows > 0 ||
ws.id === Hyprland.active.workspace.id));
ws.id === activeId));
}]],
child: CenterBox({
children: [null, EventBox({
properties: [['box']],
setup: eventbox => eventbox._box = eventbox.child.children[0],
connections: [[Hyprland, eventbox => {
let maxId = i * VARS.WORKSPACE_PER_ROW + VARS.WORKSPACE_PER_ROW;
let activeId = Hyprland.active.workspace.id;
eventbox._box.revealChild = className === 'special' ||
!Hyprland.workspaces.some(ws => ws.id > i * VARS.WORKSPACE_PER_ROW + VARS.WORKSPACE_PER_ROW && (ws.windows > 0 || ws.id === Hyprland.active.workspace.id));
!Hyprland.workspaces.some(ws => ws.id > maxId &&
(ws.windows > 0 ||
ws.id === activeId));
}]],
child: Box({
className: className,
@ -42,19 +53,23 @@ export const WorkspaceRow = (className, i) => Revealer({
['name', className === 'special' ? 'special' : ''],
],
child: WorkspaceDrop({
child: Box({
className: 'workspace',
style: `min-width: ${VARS.SCREEN.X * VARS.SCALE}px;
min-height: ${VARS.SCREEN.Y * VARS.SCALE}px;`,
children: [
ags.Widget({
type: Gtk.Fixed,
}),
Label({
label: ' +',
style: 'font-size: 40px;',
}),
],
child: Overlay({
child: Box({
className: 'workspace',
style: DEFAULT_STYLE,
}),
overlays: [Box({
style: DEFAULT_STYLE,
children: [
ags.Widget({
type: Gtk.Fixed,
}),
Label({
label: ' +',
style: 'font-size: 40px;',
}),
],
})],
}),
}),
}),
@ -66,23 +81,76 @@ export const WorkspaceRow = (className, i) => Revealer({
const Workspace = (id, name) => Revealer({
transition: 'slide_right',
transitionDuration: 500,
properties: [
['id', id],
['name', name],
['timeouts', []],
['wasActive', false],
],
connections: [[Hyprland, box => {
let active = Hyprland.active.workspace.id === box._id;
box.child.child.toggleClassName('active', active);
box.revealChild = Hyprland.getWorkspace(box._id)?.windows > 0 || active;
box._timeouts.forEach(clearTimeout);
let activeId = Hyprland.active.workspace.id;
let active = activeId === box._id;
let rev = box.child.child.child;
let n = activeId > box._id;
if (Hyprland.getWorkspace(box._id)?.windows > 0 || active) {
rev.setStyle(DEFAULT_STYLE);
box._timeouts.push(setTimeout(() => {
box.revealChild = true;
}, 100));
}
else if (!Hyprland.getWorkspace(box._id)?.windows > 0) {
rev.setStyle(DEFAULT_STYLE);
box._timeouts.push(setTimeout(() => {
box.revealChild = false;
}, 100));
return;
}
if (active) {
rev.setStyle(`${DEFAULT_STYLE}
transition: margin 0.5s ease-in-out;
opacity: 1;`);
box._wasActive = true;
}
else if (box._wasActive) {
box._wasActive = false;
box._timeouts.push(setTimeout(() => {
rev.setStyle(`${DEFAULT_STYLE}
transition: margin 0.5s ease-in-out;
opacity: 1; margin-left: ${n ? '' : '-'}300px;
margin-right: ${n ? '-' : ''}300px;`);
}, 120));
box._timeouts.push(setTimeout(() => {
rev.setStyle(`${DEFAULT_STYLE} opacity: 0;
margin-left: ${n ? '' : '-'}300px;
margin-right: ${n ? '-' : ''}300px;`);
}, 500));
}
else {
rev.setStyle(`${DEFAULT_STYLE} opacity: 0;
margin-left: ${n ? '' : '-'}300px;
margin-right: ${n ? '-' : ''}300px;`);
}
}]],
child: WorkspaceDrop({
child: Box({
className: 'workspace',
style: `min-width: ${VARS.SCREEN.X * VARS.SCALE}px;
min-height: ${VARS.SCREEN.Y * VARS.SCALE}px;`,
child: ags.Widget({
type: Gtk.Fixed,
child: Overlay({
child: Box({
className: 'workspace active',
style: `${DEFAULT_STYLE} opacity: 0;`,
}),
overlays: [Box({
className: 'workspace',
style: DEFAULT_STYLE,
child: ags.Widget({
type: Gtk.Fixed,
}),
})],
}),
}),
});

8
config/ags/scss/widgets/overview.scss
View file

@ -1,18 +1,12 @@
.overview {
min-height: 1px;
min-width: 1px;
.workspace {
padding: 4px;
padding: 4px 15px 4px 0px;
border: 2px solid transparent;
transition: border-color 0.2s ease-in-out,
background-color 0.2s ease-in-out;
border-radius: 10px;
&.active {
background-color: rgba(lighten($color: black, $amount: 15), 0.8);
transition: border-color 0.2s ease-in-out,
background-color 0.2s ease-in-out;
border: 2px solid black;
}
}

50
config/ags/style.css
View file

@ -670,30 +670,28 @@ calendar:indeterminate {
.position-slider slider:hover {
transition: background-color 0.5s ease-in-out; }
.overview {
min-height: 1px;
min-width: 1px; }
.overview .workspace {
padding: 4px;
border: 2px solid transparent;
transition: border-color 0.2s ease-in-out, background-color 0.2s ease-in-out;
border-radius: 10px; }
.overview .workspace.active {
background-color: rgba(38, 38, 38, 0.8);
transition: border-color 0.2s ease-in-out, background-color 0.2s ease-in-out;
border: 2px solid black; }
.overview .workspace .window {
background-color: #282a36;
border-radius: 10px;
margin: 0 10px;
transition: min-width 0.2s ease-in-out, min-height 0.2s ease-in-out, border-color 0.2s ease-in-out, font-size 0.2s ease-in-out; }
.overview .normal {
margin-bottom: 5px; }
.overview .normal .workspace .window {
border: 2px solid #411C6C; }
.overview .normal .workspace .window.active {
border: 2px solid purple; }
.overview .special .workspace .window {
border: 2px solid #333333; }
.overview .special .workspace .window.active {
.overview .workspace {
padding: 4px 15px 4px 0px;
border: 2px solid transparent;
border-radius: 10px; }
.overview .workspace.active {
background-color: rgba(38, 38, 38, 0.8);
border: 2px solid black; }
.overview .workspace .window {
background-color: #282a36;
border-radius: 10px;
margin: 0 10px;
transition: min-width 0.2s ease-in-out, min-height 0.2s ease-in-out, border-color 0.2s ease-in-out, font-size 0.2s ease-in-out; }
.overview .normal {
margin-bottom: 5px; }
.overview .normal .workspace .window {
border: 2px solid #411C6C; }
.overview .normal .workspace .window.active {
border: 2px solid purple; }
.overview .special .workspace .window {
border: 2px solid #333333; }
.overview .special .workspace .window.active {
border: 2px solid purple; }