feat(ags overview): add anims to workspace changes
This commit is contained in:
parent
785dbf4bc8
commit
7898f408e2
4 changed files with 120 additions and 60 deletions
|
@ -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 => {
|
||||
|
|
|
@ -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,10 +53,13 @@ export const WorkspaceRow = (className, i) => Revealer({
|
|||
['name', className === 'special' ? 'special' : ''],
|
||||
],
|
||||
child: WorkspaceDrop({
|
||||
child: Overlay({
|
||||
child: Box({
|
||||
className: 'workspace',
|
||||
style: `min-width: ${VARS.SCREEN.X * VARS.SCALE}px;
|
||||
min-height: ${VARS.SCREEN.Y * VARS.SCALE}px;`,
|
||||
style: DEFAULT_STYLE,
|
||||
}),
|
||||
overlays: [Box({
|
||||
style: DEFAULT_STYLE,
|
||||
children: [
|
||||
ags.Widget({
|
||||
type: Gtk.Fixed,
|
||||
|
@ -55,6 +69,7 @@ export const WorkspaceRow = (className, i) => Revealer({
|
|||
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: Overlay({
|
||||
child: Box({
|
||||
className: 'workspace active',
|
||||
style: `${DEFAULT_STYLE} opacity: 0;`,
|
||||
}),
|
||||
overlays: [Box({
|
||||
className: 'workspace',
|
||||
style: `min-width: ${VARS.SCREEN.X * VARS.SCALE}px;
|
||||
min-height: ${VARS.SCREEN.Y * VARS.SCALE}px;`,
|
||||
style: DEFAULT_STYLE,
|
||||
child: ags.Widget({
|
||||
type: Gtk.Fixed,
|
||||
}),
|
||||
})],
|
||||
}),
|
||||
}),
|
||||
});
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -670,29 +670,27 @@ 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;
|
||||
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; }
|
||||
.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 {
|
||||
|
|
Loading…
Reference in a new issue