InAppNotification: Add close button.

hammond-gtk/resources/gtk/inapp_notif.ui

@@ -2,13 +2,13 @@
 <!-- Generated with glade 3.21.0 -->
 <interface>
   <requires lib="gtk+" version="3.20"/>
-  <object class="GtkOverlay" id="notif_overlay">
+  <object class="GtkOverlay" id="overlay">
     <property name="visible">True</property>
     <property name="can_focus">False</property>
     <property name="halign">center</property>
     <property name="valign">start</property>
     <child>
-      <object class="GtkRevealer" id="notif_revealer">
+      <object class="GtkRevealer" id="revealer">
         <property name="visible">True</property>
         <property name="can_focus">False</property>
         <child>
@@ -29,7 +29,7 @@
                 <property name="margin_bottom">6</property>
                 <property name="spacing">12</property>
                 <child>
-                  <object class="GtkLabel" id="notif_label">
+                  <object class="GtkLabel" id="text">
                     <property name="visible">True</property>
                     <property name="can_focus">False</property>
                     <property name="halign">center</property>
@@ -43,7 +43,31 @@
                   </packing>
                 </child>
                 <child>
-                  <object class="GtkButton" id="undo_button">
+                  <object class="GtkButton" id="close">
+                    <property name="visible">True</property>
+                    <property name="can_focus">True</property>
+                    <property name="focus_on_click">False</property>
+                    <property name="receives_default">True</property>
+                    <property name="halign">center</property>
+                    <property name="valign">center</property>
+                    <property name="relief">none</property>
+                    <child>
+                      <object class="GtkImage">
+                        <property name="visible">True</property>
+                        <property name="can_focus">False</property>
+                        <property name="icon_name">window-close-symbolic</property>
+                      </object>
+                    </child>
+                  </object>
+                  <packing>
+                    <property name="expand">False</property>
+                    <property name="fill">False</property>
+                    <property name="pack_type">end</property>
+                    <property name="position">1</property>
+                  </packing>
+                </child>
+                <child>
+                  <object class="GtkButton" id="undo">
                     <property name="label" translatable="yes">Undo</property>
                     <property name="visible">True</property>
                     <property name="can_focus">True</property>
@@ -55,7 +79,7 @@
                     <property name="expand">False</property>
                     <property name="fill">False</property>
                     <property name="pack_type">end</property>
-                    <property name="position">1</property>
+                    <property name="position">2</property>
                   </packing>
                 </child>
               </object>

hammond-gtk/src/app.rs

@@ -174,7 +174,9 @@ impl App {
                     let sender = sender.clone();
                     let notif = InAppNotification::new(text.into(), callback, sender);
                     overlay.add_overlay(&notif.overlay);
-                    overlay.show_all();
+                    // We need to display the notification after the widget is added to the overlay
+                    // so there will be a nice animation.
+                    notif.show();
                 }
                 Err(_) => (),
             }

hammond-gtk/src/appnotif.rs

@@ -14,22 +14,25 @@ pub struct InAppNotification {
     revealer: gtk::Revealer,
     text: gtk::Label,
     undo: gtk::Button,
+    close: gtk::Button,
 }
 
 impl Default for InAppNotification {
     fn default() -> Self {
         let builder = gtk::Builder::new_from_resource("/org/gnome/hammond/gtk/inapp_notif.ui");
 
-        let overlay: gtk::Overlay = builder.get_object("notif_overlay").unwrap();
+        let overlay: gtk::Overlay = builder.get_object("overlay").unwrap();
-        let revealer: gtk::Revealer = builder.get_object("notif_revealer").unwrap();
+        let revealer: gtk::Revealer = builder.get_object("revealer").unwrap();
-        let text: gtk::Label = builder.get_object("notif_label").unwrap();
+        let text: gtk::Label = builder.get_object("text").unwrap();
-        let undo: gtk::Button = builder.get_object("undo_button").unwrap();
+        let undo: gtk::Button = builder.get_object("undo").unwrap();
+        let close: gtk::Button = builder.get_object("close").unwrap();
 
         InAppNotification {
             overlay,
             revealer,
             text,
             undo,
+            close,
         }
     }
 }
@@ -40,11 +43,9 @@ impl InAppNotification {
         F: FnMut() -> glib::Continue + 'static,
     {
         let notif = InAppNotification::default();
-
         notif.text.set_text(&text);
-        notif.revealer.set_reveal_child(true);
 
-        let id = timeout_add_seconds(60, callback);
+        let id = timeout_add_seconds(6, callback);
         let id = Rc::new(RefCell::new(Some(id)));
 
         // Cancel the callback
@@ -66,6 +67,20 @@ impl InAppNotification {
             }
         });
 
+        // Hide the revealer when the close button is clicked
+        let revealer = notif.revealer.clone();
+        notif.close.connect_clicked(move |_| {
+            revealer.set_reveal_child(false);
+        });
+
         notif
     }
+
+    // This is a seperate method cause in order to get a nice animation
+    // the revealer should be attached to something that will display it.
+    // Previouslyi we where doing it in the constructor, which had the result
+    // of the animation being skipped cause there was no parent widget to display it.
+    pub fn show(&self) {
+        self.revealer.set_reveal_child(true);
+    }
 }