From a3d93f554862d4272ce17ab3386ceef1c0e13161 Mon Sep 17 00:00:00 2001
From: matt1432 <matt@nelim.org>
Date: Thu, 14 Sep 2023 01:15:33 -0400
Subject: [PATCH] feat(ags): add some animations to notif center

---
 config/ags/js/notifications/center.js     | 29 +++++++++++++----------
 config/ags/scss/widgets/notification.scss |  4 ++--
 config/ags/style.css                      |  4 ++--
 3 files changed, 20 insertions(+), 17 deletions(-)

diff --git a/config/ags/js/notifications/center.js b/config/ags/js/notifications/center.js
index 12d4b966..b2fac2e0 100644
--- a/config/ags/js/notifications/center.js
+++ b/config/ags/js/notifications/center.js
@@ -1,5 +1,5 @@
 const { Notifications } = ags.Service;
-const { Button, Label, Box, Icon, Scrollable, Window } = ags.Widget;
+const { Button, Label, Box, Icon, Scrollable, Window, Revealer } = ags.Widget;
 
 import Notification from './base.js';
 import { EventBox } from '../misc/cursorbox.js'
@@ -42,20 +42,23 @@ const NotificationList = () => Box({
   }]],
 });
 
-const Placeholder = () => Box({
-  className: 'placeholder',
-  vertical: true,
-  valign: 'center',
-  halign: 'center',
-  vexpand: true,
-  hexpand: true,
-  children: [
-    Icon('notification-disabled-symbolic'),
-    Label('Your inbox is empty'),
-  ],
+const Placeholder = () => Revealer({
+  transition: 'crossfade',
   connections: [[Notifications, box => {
-    box.visible = Notifications.notifications.length === 0;
+    box.revealChild = Notifications.notifications.length === 0;
   }]],
+  child: Box({
+    className: 'placeholder',
+    vertical: true,
+    valign: 'center',
+    halign: 'center',
+    vexpand: true,
+    hexpand: true,
+    children: [
+      Icon('notification-disabled-symbolic'),
+      Label('Your inbox is empty'),
+    ],
+  }),
 });
 
 export const NotificationCenter = Window({
diff --git a/config/ags/scss/widgets/notification.scss b/config/ags/scss/widgets/notification.scss
index fc5012d6..7933ddfa 100644
--- a/config/ags/scss/widgets/notification.scss
+++ b/config/ags/scss/widgets/notification.scss
@@ -52,7 +52,7 @@ $background-color_10: rgba(238, 238, 238, 0.5);
 	.actions {
 		button {
 			all: unset;
-			transition: 200ms;
+			transition: all 500ms;
 			border-radius: 9px;
 			background-color: $background-color_3;
 			box-shadow: inset 0 0 0 1px rgba(238, 238, 238, 0.03);
@@ -117,7 +117,7 @@ $background-color_10: rgba(238, 238, 238, 0.5);
 	}
 	button.close-button {
 		all: unset;
-		transition: 200ms;
+		transition: all 500ms;
 		border-radius: 9px;
 		background-color: $background-color_5;
 		background-image: none;
diff --git a/config/ags/style.css b/config/ags/style.css
index 361f9640..20271942 100644
--- a/config/ags/style.css
+++ b/config/ags/style.css
@@ -292,7 +292,7 @@ tooltip {
 
 .notification .actions button {
   all: unset;
-  transition: 200ms;
+  transition: all 500ms;
   border-radius: 9px;
   background-color: rgba(238, 238, 238, 0.06);
   box-shadow: inset 0 0 0 1px rgba(238, 238, 238, 0.03);
@@ -344,7 +344,7 @@ tooltip {
 
 .notification button.close-button {
   all: unset;
-  transition: 200ms;
+  transition: all 500ms;
   border-radius: 9px;
   background-color: transparent;
   background-image: none;