AppEntry: Add sweep animation (#283)

elementary · Oct 9, 2024 · 05f569c · 05f569c
1 parent 271afb6
commit 05f569c
Show file tree

Hide file tree

Showing 4 changed files with 57 additions and 33 deletions.
diff --git a/data/AppEntry.css b/data/AppEntry.css
@@ -0,0 +1,41 @@
+/*
+* SPDX-License-Identifier: GPL-2.0-or-later
+* SPDX-FileCopyrightText: 2017-2023 elementary, Inc. (https://elementary.io)
+*/
+
+.expander:checked {
+    background: transparent;
+}
+
+.expander:checked:focus {
+    background: @selected_bg_color;
+}
+
+.expander image {
+    transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.expander:checked image {
+    transition: all 250ms cubic-bezier(0.4, 0, 0.2, 1);
+    -gtk-icon-transform: rotate(90deg);
+}
+
+.expander label {
+    font-weight: inherit;
+}
+
+@keyframes sweep {
+    0%   { -gtk-icon-transform: rotate(0deg) translatex(0);   }
+    20%  { -gtk-icon-transform: rotate(40deg) translatex(-5px); }
+    60%  { -gtk-icon-transform: rotate(0deg)   translatex(0); }
+    80%  { -gtk-icon-transform: rotate(-30deg) translatex(3px);  }
+    100% { -gtk-icon-transform: rotate(0deg) translatex(0);   }
+}
+
+.sweep-animation {
+    transition: all 175ms ease-in-out;
+}
+
+.sweep-animation.active {
+    animation: sweep 600ms ease-in-out;
+}
diff --git a/data/AppEntryExpander.css b/data/AppEntryExpander.css
diff --git a/data/gresource.xml b/data/gresource.xml
@@ -1,7 +1,7 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <gresources>
   <gresource prefix="/io/elementary/wingpanel/notifications">
-    <file compressed="true">AppEntryExpander.css</file>
+    <file compressed="true">AppEntry.css</file>
     <file compressed="true">indicator.css</file>
     <file compressed="true">NotificationEntry.css</file>
   </gresource>

diff --git a/src/Widgets/AppEntry.vala b/src/Widgets/AppEntry.vala
@@ -30,7 +30,8 @@ public class Notifications.AppEntry : Gtk.ListBoxRow {
 
     static construct {
         provider = new Gtk.CssProvider ();
-        provider.load_from_resource ("/io/elementary/wingpanel/notifications/AppEntryExpander.css");
+        provider.load_from_resource ("/io/elementary/wingpanel/notifications/AppEntry.css");
+        Gtk.StyleContext.add_provider_for_screen (Gdk.Screen.get_default (), provider, Gtk.STYLE_PROVIDER_PRIORITY_APPLICATION);
 
         settings = new Settings ("io.elementary.wingpanel.notifications");
         headers = (HashTable<string, bool>) settings.get_value ("headers");
@@ -53,14 +54,12 @@ public class Notifications.AppEntry : Gtk.ListBoxRow {
         }
 
         var image = new Gtk.Image.from_icon_name ("pan-end-symbolic", SMALL_TOOLBAR);
-        image.get_style_context ().add_provider (provider, Gtk.STYLE_PROVIDER_PRIORITY_APPLICATION);
 
         var label = new Gtk.Label (name) {
             hexpand = true,
             xalign = 0
         };
         label.get_style_context ().add_class (Granite.STYLE_CLASS_H3_LABEL);
-        label.get_style_context ().add_provider (provider, Gtk.STYLE_PROVIDER_PRIORITY_APPLICATION);
 
         var expander_content = new Gtk.Box (HORIZONTAL, 3);
         expander_content.add (label);
@@ -71,11 +70,15 @@ public class Notifications.AppEntry : Gtk.ListBoxRow {
             active = true
         };
         unowned var expander_style_context = expander.get_style_context ();
-        expander_style_context.add_provider (provider, Gtk.STYLE_PROVIDER_PRIORITY_APPLICATION);
         expander_style_context.add_class ("image-button");
+        expander_style_context.add_class ("expander");
 
-        var clear_btn_entry = new Gtk.Button.from_icon_name ("edit-clear-all-symbolic", Gtk.IconSize.SMALL_TOOLBAR) {
-            tooltip_text = _("Clear all %s notifications").printf (name)
+        var clear_btn_image = new Gtk.Image.from_icon_name ("edit-clear-all-symbolic", Gtk.IconSize.SMALL_TOOLBAR);
+        clear_btn_image.get_style_context ().add_class ("sweep-animation");
+
+        var clear_btn_entry = new Gtk.Button () {
+            tooltip_text = _("Clear all %s notifications").printf (name),
+            child = clear_btn_image
         };
         clear_btn_entry.get_style_context ().add_class (Gtk.STYLE_CLASS_FLAT);
 
@@ -101,7 +104,12 @@ public class Notifications.AppEntry : Gtk.ListBoxRow {
         });
 
         clear_btn_entry.clicked.connect (() => {
-            clear (); // Causes notification list to destroy this app entry after clearing its notification entries
+            clear_btn_image.get_style_context ().add_class ("active");
+            clear_all_notification_entries ();
+            GLib.Timeout.add (600, () => {
+                clear (); // Causes notification list to destroy this app entry after clearing its notification entries
+                return GLib.Source.REMOVE;
+            });
         });
 
         expander.bind_property ("active", image, "tooltip-text", SYNC_CREATE, (binding, srcval, ref targetval) => {