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)
|
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 => {
|
||||||
|
|
|
@ -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,19 +53,23 @@ export const WorkspaceRow = (className, i) => Revealer({
|
||||||
['name', className === 'special' ? 'special' : ''],
|
['name', className === 'special' ? 'special' : ''],
|
||||||
],
|
],
|
||||||
child: WorkspaceDrop({
|
child: WorkspaceDrop({
|
||||||
child: Box({
|
child: Overlay({
|
||||||
className: 'workspace',
|
child: Box({
|
||||||
style: `min-width: ${VARS.SCREEN.X * VARS.SCALE}px;
|
className: 'workspace',
|
||||||
min-height: ${VARS.SCREEN.Y * VARS.SCALE}px;`,
|
style: DEFAULT_STYLE,
|
||||||
children: [
|
}),
|
||||||
ags.Widget({
|
overlays: [Box({
|
||||||
type: Gtk.Fixed,
|
style: DEFAULT_STYLE,
|
||||||
}),
|
children: [
|
||||||
Label({
|
ags.Widget({
|
||||||
label: ' +',
|
type: Gtk.Fixed,
|
||||||
style: 'font-size: 40px;',
|
}),
|
||||||
}),
|
Label({
|
||||||
],
|
label: ' +',
|
||||||
|
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: Box({
|
child: Overlay({
|
||||||
className: 'workspace',
|
child: Box({
|
||||||
style: `min-width: ${VARS.SCREEN.X * VARS.SCALE}px;
|
className: 'workspace active',
|
||||||
min-height: ${VARS.SCREEN.Y * VARS.SCALE}px;`,
|
style: `${DEFAULT_STYLE} opacity: 0;`,
|
||||||
child: ags.Widget({
|
|
||||||
type: Gtk.Fixed,
|
|
||||||
}),
|
}),
|
||||||
|
overlays: [Box({
|
||||||
|
className: 'workspace',
|
||||||
|
style: DEFAULT_STYLE,
|
||||||
|
child: ags.Widget({
|
||||||
|
type: Gtk.Fixed,
|
||||||
|
}),
|
||||||
|
})],
|
||||||
}),
|
}),
|
||||||
}),
|
}),
|
||||||
});
|
});
|
||||||
|
|
|
@ -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;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -670,30 +670,28 @@ 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 {
|
.overview .workspace {
|
||||||
min-height: 1px;
|
padding: 4px 15px 4px 0px;
|
||||||
min-width: 1px; }
|
border: 2px solid transparent;
|
||||||
.overview .workspace {
|
border-radius: 10px; }
|
||||||
padding: 4px;
|
.overview .workspace.active {
|
||||||
border: 2px solid transparent;
|
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-radius: 10px; }
|
|
||||||
.overview .workspace.active {
|
.overview .workspace .window {
|
||||||
background-color: rgba(38, 38, 38, 0.8);
|
background-color: #282a36;
|
||||||
transition: border-color 0.2s ease-in-out, background-color 0.2s ease-in-out;
|
border-radius: 10px;
|
||||||
border: 2px solid black; }
|
margin: 0 10px;
|
||||||
.overview .workspace .window {
|
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; }
|
||||||
background-color: #282a36;
|
|
||||||
border-radius: 10px;
|
.overview .normal {
|
||||||
margin: 0 10px;
|
margin-bottom: 5px; }
|
||||||
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 .workspace .window {
|
||||||
.overview .normal {
|
border: 2px solid #411C6C; }
|
||||||
margin-bottom: 5px; }
|
.overview .normal .workspace .window.active {
|
||||||
.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; }
|
border: 2px solid purple; }
|
||||||
|
|
||||||
|
.overview .special .workspace .window {
|
||||||
|
border: 2px solid #333333; }
|
||||||
|
.overview .special .workspace .window.active {
|
||||||
|
border: 2px solid purple; }
|
||||||
|
|
Loading…
Reference in a new issue