feat(ags overview): add anims to workspace changes

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

View file

@ -70,7 +70,7 @@ export function updateClients(box) {
let clients = JSON.parse(result).filter(client => client.class) let clients = JSON.parse(result).filter(client => client.class)
box._workspaces.forEach(workspace => { 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(); let toRemove = fixed.get_children();
clients.filter(client => client.workspace.id == workspace._id).forEach(client => { clients.filter(client => client.workspace.id == workspace._id).forEach(client => {

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 { Hyprland } = ags.Service;
const { Gtk } = imports.gi; const { Gtk } = imports.gi;
import { WorkspaceDrop } from './dragndrop.js'; import { WorkspaceDrop } from './dragndrop.js';
import * as VARS from './variables.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) { export function getWorkspaces(box) {
let children = []; let children = [];
box.children.forEach(type => { box.children.forEach(type => {
@ -20,17 +23,25 @@ export function getWorkspaces(box) {
export const WorkspaceRow = (className, i) => Revealer({ export const WorkspaceRow = (className, i) => Revealer({
transition: 'slide_down', transition: 'slide_down',
connections: [[Hyprland, rev => { 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.windows > 0 ||
ws.id === Hyprland.active.workspace.id)); ws.id === activeId));
}]], }]],
child: CenterBox({ child: CenterBox({
children: [null, EventBox({ children: [null, EventBox({
properties: [['box']], properties: [['box']],
setup: eventbox => eventbox._box = eventbox.child.children[0], setup: eventbox => eventbox._box = eventbox.child.children[0],
connections: [[Hyprland, eventbox => { 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' || 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({ child: Box({
className: className, className: className,
@ -42,10 +53,13 @@ export const WorkspaceRow = (className, i) => Revealer({
['name', className === 'special' ? 'special' : ''], ['name', className === 'special' ? 'special' : ''],
], ],
child: WorkspaceDrop({ child: WorkspaceDrop({
child: Overlay({
child: Box({ child: Box({
className: 'workspace', className: 'workspace',
style: `min-width: ${VARS.SCREEN.X * VARS.SCALE}px; style: DEFAULT_STYLE,
min-height: ${VARS.SCREEN.Y * VARS.SCALE}px;`, }),
overlays: [Box({
style: DEFAULT_STYLE,
children: [ children: [
ags.Widget({ ags.Widget({
type: Gtk.Fixed, type: Gtk.Fixed,
@ -55,6 +69,7 @@ export const WorkspaceRow = (className, i) => Revealer({
style: 'font-size: 40px;', style: 'font-size: 40px;',
}), }),
], ],
})],
}), }),
}), }),
}), }),
@ -66,23 +81,76 @@ export const WorkspaceRow = (className, i) => Revealer({
const Workspace = (id, name) => Revealer({ const Workspace = (id, name) => Revealer({
transition: 'slide_right', transition: 'slide_right',
transitionDuration: 500,
properties: [ properties: [
['id', id], ['id', id],
['name', name], ['name', name],
['timeouts', []],
['wasActive', false],
], ],
connections: [[Hyprland, box => { connections: [[Hyprland, box => {
let active = Hyprland.active.workspace.id === box._id; box._timeouts.forEach(clearTimeout);
box.child.child.toggleClassName('active', active);
box.revealChild = Hyprland.getWorkspace(box._id)?.windows > 0 || active; 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: WorkspaceDrop({
child: Overlay({
child: Box({ child: Box({
className: 'workspace active',
style: `${DEFAULT_STYLE} opacity: 0;`,
}),
overlays: [Box({
className: 'workspace', className: 'workspace',
style: `min-width: ${VARS.SCREEN.X * VARS.SCALE}px; style: DEFAULT_STYLE,
min-height: ${VARS.SCREEN.Y * VARS.SCALE}px;`,
child: ags.Widget({ child: ags.Widget({
type: Gtk.Fixed, type: Gtk.Fixed,
}), }),
})],
}), }),
}), }),
}); });

View file

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

View file

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