Animate warning icon

Author: ranfdev

src/application.rs

@@ -136,6 +136,23 @@ mod imp {
                     font-size: 0.8em;
                     padding: 0.2em 0.2em;
                 }}
+
+                @keyframes pop-warning {{
+                    0% {{
+                        transform: scale(1.0);
+                    }}
+                    30% {{
+                        transform: scale(1.2) rotateZ(20deg);
+                    }}
+                    70% {{
+                        transform: scale(1.4) rotateZ(-15deg);
+                    }}
+                }}
+
+                .task-warning {{
+                    animation: pop-warning 1s;
+                    animation-iteration-count: 3;
+                }}
             "));
             // We give the CssProvided to the default screen so the CSS rules we added
             // can be applied to our window.

src/tasks_button.rs

@@ -8,6 +8,7 @@ use gtk::{
     glib::{self},
 };
 use std::cell::RefCell;
+use std::time::Duration;
 
 use glib::clone;
 
@@ -81,7 +82,7 @@ mod imp {
                             break;
                         }
                     }
-                    this_clone.imp().warning_icon.set_visible(has_warning);
+                    this_clone.set_has_warning(has_warning);
 
                     // Listen when a new task will fail
                     for i in position..position + added {
@@ -91,7 +92,7 @@ mod imp {
                         let this_clone = this_clone.clone();
                         item.connect_status_notify(move |item| {
                             if item.is_failed() {
-                                this_clone.imp().warning_icon.set_visible(true);
+                                this_clone.set_has_warning(true);
                             }
                         });
                     }
@@ -117,4 +118,14 @@ impl TasksButton {
             .property("root-store", root_store)
             .build()
     }
+    pub fn set_has_warning(&self, has_warning: bool) {
+        self.imp().warning_icon.set_visible(has_warning);
+        // trigger the animation
+        self.imp().warning_icon.remove_css_class("task-warning");
+        let this = self.clone();
+        glib::timeout_add_local_full(Duration::from_millis(100), glib::Priority::LOW, move || {
+            this.imp().warning_icon.remove_css_class("task-warning");
+            glib::ControlFlow::Break
+        });
+    }
 }