feat(ags overview): add anims to workspace changes

config/ags/js/overview/clients.js

@@ -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 => {

config/ags/js/overview/workspaces.js

@@ -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({
+              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({
   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._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: 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,
+        }),
+      })],
     }),
   }),
 });

config/ags/scss/widgets/overview.scss

@@ -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;
     }
   }

config/ags/style.css

@@ -670,30 +670,28 @@ calendar:indeterminate {
 .position-slider slider:hover {
   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; }
+
+.overview .special .workspace .window {
+  border: 2px solid #333333; }
+  .overview .special .workspace .window.active {
+    border: 2px solid purple; }