From 8298e0bf978695e216de8a5745ab174070369507 Mon Sep 17 00:00:00 2001
From: matt1432 <matt@nelim.org>
Date: Thu, 21 Sep 2023 00:27:58 -0400
Subject: [PATCH] feat(ags notifs): separate height and slide anims for cleaner
 anims of notifs

---
 config/ags/js/misc/drag.js            | 64 ++++++++++++++++++++-------
 config/ags/js/notifications/center.js |  6 +--
 config/ags/js/notifications/popup.js  |  2 +-
 3 files changed, 53 insertions(+), 19 deletions(-)

diff --git a/config/ags/js/misc/drag.js b/config/ags/js/misc/drag.js
index 6b3477c..c8b2b2c 100644
--- a/config/ags/js/misc/drag.js
+++ b/config/ags/js/misc/drag.js
@@ -1,4 +1,4 @@
-const { Window, Box, EventBox, Button } = ags.Widget;
+const { Box, EventBox } = ags.Widget;
 const { Gtk, Gdk } = imports.gi;
 const display = Gdk.Display.get_default();
 
@@ -32,26 +32,39 @@ export const Draggable = ({
 
   let gesture = Gtk.GestureDrag.new(w);
 
-  let leftAnim = 'transition: margin 0.5s ease, opacity 0.5s ease; ' +
-                 'margin-left: -' + Number(maxOffset + endMargin) + 'px; ' +
-                 'margin-right: ' + Number(maxOffset + endMargin) + 'px; ' +
-                 'margin-bottom: -70px; margin-top: -70px; opacity: 0;';
+  let leftAnim1 = `transition: margin 0.5s ease, opacity 0.5s ease;
+                   margin-left: -${Number(maxOffset + endMargin)}px;
+                   margin-right: ${Number(maxOffset + endMargin)}px;
+                   opacity: 0;`;
 
-  let rightAnim = 'transition: margin 0.5s ease, opacity 0.5s ease; ' +
-                  'margin-left: ' + Number(maxOffset + endMargin) + 'px; ' +
-                  'margin-right: -' + Number(maxOffset + endMargin) + 'px; ' +
-                  'margin-bottom: -70px; margin-top: -70px; opacity: 0;';
+  let leftAnim2 = `transition: margin 0.5s ease, opacity 0.5s ease;
+                   margin-left: -${Number(maxOffset + endMargin)}px;
+                   margin-right: ${Number(maxOffset + endMargin)}px;
+                   margin-bottom: -70px; margin-top: -70px; opacity: 0;`;
+
+  let rightAnim1 = `transition: margin 0.5s ease, opacity 0.5s ease;
+                    margin-left: ${Number(maxOffset + endMargin)}px;
+                    margin-right: -${Number(maxOffset + endMargin)}px;
+                    opacity: 0;`;
+
+  let rightAnim2 = `transition: margin 0.5s ease, opacity 0.5s ease;
+                    margin-left: ${Number(maxOffset + endMargin)}px;
+                    margin-right: -${Number(maxOffset + endMargin)}px;
+                    margin-bottom: -70px; margin-top: -70px; opacity: 0;`;
 
   w.child = Box({
     properties: [
-      ['leftAnim', leftAnim],
-      ['rightAnim', rightAnim],
+      ['leftAnim1', leftAnim1],
+      ['leftAnim2', leftAnim2],
+      ['rightAnim1', rightAnim1],
+      ['rightAnim2', rightAnim2],
+      ['ready', false]
     ],
     children: [
       ...children,
       child,
     ],
-    style: leftAnim,
+    style: leftAnim2,
     connections: [
 
       [gesture, box => {
@@ -74,16 +87,37 @@ export const Draggable = ({
       }, 'drag-update'],
 
       [gesture, box => {
+        if (!box._ready) {
+          box.setStyle(`transition: margin 0.5s ease, opacity 0.5s ease;
+                        margin-left: -${Number(maxOffset + endMargin)}px;
+                        margin-right: ${Number(maxOffset + endMargin)}px;
+                        margin-bottom: 0px; margin-top: 0px; opacity: 0;`);
+
+          setTimeout(() => {
+            box.setStyle('transition: margin 0.5s ease, opacity 0.5s ease; ' +
+                         'margin-left: ' + startMargin + 'px; ' +
+                         'margin-right: ' + startMargin + 'px; ' +
+                         'margin-bottom: unset; margin-top: unset; opacity: 1;');
+          }, 500);
+          setTimeout(() => box._ready = true, 1000);
+          return;
+        }
+
         const offset = gesture.get_offset()[1];
 
         if (Math.abs(offset) > maxOffset) {
           if (offset > 0) {
-            box.setStyle(rightAnim);
+            box.setStyle(rightAnim1);
+            setTimeout(() => box.setStyle(rightAnim2), 500);
           }
           else {
-            box.setStyle(leftAnim);
+            box.setStyle(leftAnim1);
+            setTimeout(() => box.setStyle(leftAnim2), 500);
           }
-          setTimeout(command, 500);
+          setTimeout(() => {
+            command();
+            box.destroy();
+          }, 1000);
         }
         else {
           box.setStyle('transition: margin 0.5s ease, opacity 0.5s ease; ' +
diff --git a/config/ags/js/notifications/center.js b/config/ags/js/notifications/center.js
index 9162bd9..d2e9bd9 100644
--- a/config/ags/js/notifications/center.js
+++ b/config/ags/js/notifications/center.js
@@ -9,9 +9,9 @@ import { EventBox } from '../misc/cursorbox.js'
 const ClearButton = () => EventBox({
   child: Button({
     onPrimaryClickRelease: button => {
-      button._popups.children.forEach(ch => ch.child.setStyle(ch.child._leftAnim));
+      button._popups.children.forEach(ch => ch.child.setStyle(ch.child._leftAnim1));
       button._notifList.children.forEach(ch => {
-        ch.child.setStyle(ch.child._rightAnim);
+        ch.child.setStyle(ch.child._rightAnim1);
         timeout(500, () => {
           button._notifList.remove(ch);
           Notifications.close(ch._id);
@@ -77,7 +77,7 @@ const NotificationList = () => Box({
     [Notifications, (box, id) => {
       for (const ch of box.children) {
         if (ch._id == id) {
-          ch.child.setStyle(ch.child._rightAnim);
+          ch.child.setStyle(ch.child._rightAnim1);
           timeout(500, () => box.remove(ch));
           return;
         }
diff --git a/config/ags/js/notifications/popup.js b/config/ags/js/notifications/popup.js
index fe3e577..1b9c22f 100644
--- a/config/ags/js/notifications/popup.js
+++ b/config/ags/js/notifications/popup.js
@@ -47,7 +47,7 @@ const Popups = () => Box({
       });
       box._map.get(id).interval = interval(4500, () => {
         if (!box._map.get(id)._hovered) {
-          box._map.get(id).child.setStyle(box._map.get(id).child._leftAnim);
+          box._map.get(id).child.setStyle(box._map.get(id).child._leftAnim1);
 
           if (box._map.get(id).interval) {
             source_remove(box._map.get(id).interval);