Set lower ordered notifications content opacity to 0

ErikReider · Dec 12, 2023 · fc73f1a · fc73f1a
1 parent 216522e
commit fc73f1a
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 1 deletion.
diff --git a/src/notificationGroup/notificationGroup.vala b/src/notificationGroup/notificationGroup.vala
@@ -1,6 +1,7 @@
 namespace SwayNotificationCenter {
     public class NotificationGroup : Gtk.ListBoxRow {
         const string STYLE_CLASS_URGENT = "critical";
+        const string STYLE_CLASS_COLLAPSED = "collapsed";
 
         public string name_id;
 
@@ -89,7 +90,13 @@ namespace SwayNotificationCenter {
 
             group = new ExpandableGroup (Constants.ANIMATION_DURATION, (state) => {
                 revealer.set_reveal_child (state);
+
+                // Change CSS Class
+                if (parent != null) {
+                    set_classes ();
+                }
             });
+            set_classes ();
             box.add (group);
             add (box);
 
@@ -146,6 +153,16 @@ namespace SwayNotificationCenter {
             });
         }
 
+        private void set_classes () {
+            unowned Gtk.StyleContext ctx = get_style_context ();
+            ctx.remove_class (STYLE_CLASS_COLLAPSED);
+            if (!group.is_expanded) {
+                if (!ctx.has_class (STYLE_CLASS_COLLAPSED)) {
+                    ctx.add_class (STYLE_CLASS_COLLAPSED);
+                }
+            }
+        }
+
         /// Returns if there's more than one notification
         public bool only_single_notification () {
             unowned Gtk.Widget ? widget = group.widgets.nth_data (1);
@@ -255,7 +272,7 @@ namespace SwayNotificationCenter {
 
     private class ExpandableGroup : Gtk.Container {
         const int NUM_STACKED_NOTIFICATIONS = 3;
-        const int COLLAPSED_NOTIFICATION_OFFSET = 6;
+        const int COLLAPSED_NOTIFICATION_OFFSET = 8;
 
         public bool is_expanded { get; private set; default = true; }
 

diff --git a/src/style.css b/src/style.css
@@ -20,6 +20,13 @@
 .notification-group {
 }
 
+/* Set lower stacked notifications opacity to 0 */
+.notification-group.collapsed .notification-row:not(:last-child) .notification-action *,
+.notification-group.collapsed .notification-row:not(:last-child) .notification-default-action * {
+  transition: opacity 400ms ease-in-out;
+  opacity: 0;
+}
+
 .notification-group-buttons,
 .notification-group-headers {
   margin: 0 16px;