From 8ea47d493260f5569a1dc8b4d078a324977ea9ec Mon Sep 17 00:00:00 2001
From: matt1432 <matt@nelim.org>
Date: Thu, 12 Oct 2023 18:10:39 -0400
Subject: [PATCH] refactor(ags overview): make icon animations make more sense

---
 config/ags/js/overview/clients.js   | 34 +++++++++++++++--------------
 config/ags/js/overview/dragndrop.js |  6 +----
 2 files changed, 19 insertions(+), 21 deletions(-)

diff --git a/config/ags/js/overview/clients.js b/config/ags/js/overview/clients.js
index 71facabc..cc0a2beb 100644
--- a/config/ags/js/overview/clients.js
+++ b/config/ags/js/overview/clients.js
@@ -11,7 +11,8 @@ Array.prototype.remove = function (el) { this.splice(this.indexOf(el), 1) };
 const scale = size => size * VARS.SCALE - VARS.MARGIN;
 const getFontSize = client => Math.min(scale(client.size[0]), scale(client.size[1])) * VARS.ICON_SCALE;
 
-const IconStyle = client => `min-width:  ${scale(client.size[0])}px;
+const IconStyle = client => `transition: font-size 0.2s linear;
+                             min-width:  ${scale(client.size[0])}px;
                              min-height: ${scale(client.size[1])}px;
                              font-size:  ${getFontSize(client)}px;`;
 
@@ -99,25 +100,26 @@ export function updateClients(box) {
           client.at[1] = VARS.DEFAULT_SPECIAL.POS_Y;
         }
 
-        let existingClient = fixed.get_children().find(ch => ch._address == client.address);
-        toRemove.remove(existingClient);
+        let newClient = [
+          fixed.get_children().find(ch => ch._address == client.address),
+          client.at[0] * VARS.SCALE,
+          client.at[1] * VARS.SCALE,
+        ];
 
-        if (existingClient) {
-          fixed.move(
-            existingClient,
-            client.at[0] * VARS.SCALE,
-            client.at[1] * VARS.SCALE,
-          );
-          existingClient.child.child.className = `window ${active}`;
-          existingClient.child.child.style = IconStyle(client);
+        if (newClient[0]) {
+          toRemove.remove(newClient[0]);
+          fixed.move(...newClient);
         }
         else {
-          fixed.put(
-            Client(client, active, clients),
-            client.at[0] * VARS.SCALE,
-            client.at[1] * VARS.SCALE,
-          );
+          newClient[0] = Client(client, active, clients);
+          fixed.put(...newClient);
         }
+
+        // Set a timeout here to have an animation when the icon first appears
+        setTimeout(() => {
+          newClient[0].child.child.className = `window ${active}`;
+          newClient[0].child.child.style = IconStyle(client);
+        }, 1);
       });
       fixed.show_all();
       toRemove.forEach(ch => {
diff --git a/config/ags/js/overview/dragndrop.js b/config/ags/js/overview/dragndrop.js
index 50fec767..45ffae1f 100644
--- a/config/ags/js/overview/dragndrop.js
+++ b/config/ags/js/overview/dragndrop.js
@@ -64,13 +64,9 @@ export const WindowButton = ({address, ...params} = {}) => Button({
     });
     button.connect('drag-end', () => {
       button.get_parent().destroy();
+
       let mainBox = getWindow('overview').child.children[0].child;
       mainBox._updateClients(mainBox);
-
-      // Set the correct Icon size
-      setTimeout(() => {
-        mainBox._updateClients(mainBox);
-      }, 100);
     });
   },
 });