[gnome-games] savestate-listbox-row: Animate adding and deleting

[Alexander Mikhaylenko <alexm src gnome org>]

commit df4c48e9f6f6920fa43ce229ea5a6c9638ef8641
Author: Alexander Mikhaylenko <exalm7659 gmail com>
Date:   Thu Aug 15 23:28:14 2019 +0500

    savestate-listbox-row: Animate adding and deleting
    
    Pack row contents into a GtkRevealer. When populating the list,
    immediately reveal it before adding to the listbox. When adding a new row,
    add it first, then reveal the child, so that it animates. When deleting a
    row, unreveal the child, then delete the row after the animation ends.

 data/ui/savestate-listbox-row.ui  | 70 +++++++++++++++++++++------------------
 src/ui/savestate-listbox-row.vala | 15 +++++++++
 src/ui/savestates-list.vala       |  7 ++--
 3 files changed, 58 insertions(+), 34 deletions(-)
---
diff --git a/data/ui/savestate-listbox-row.ui b/data/ui/savestate-listbox-row.ui
index 7fdc3d4c..4da12bbc 100644
--- a/data/ui/savestate-listbox-row.ui
+++ b/data/ui/savestate-listbox-row.ui
@@ -7,51 +7,57 @@
       <class name="savestate-row"/>
     </style>
     <child>
-      <object class="GtkBox">
+      <object class="GtkRevealer" id="revealer">
         <property name="visible">true</property>
-        <property name="margin">2</property>
-        <child>
-          <object class="GtkImage" id="image">
-            <property name="visible">true</property>
-            <property name="valign">start</property>
-            <style>
-              <class name="savestate-thumbnail"/>
-            </style>
-          </object>
-        </child>
+        <property name="reveal-child">False</property>
         <child>
           <object class="GtkBox">
             <property name="visible">true</property>
-            <property name="orientation">vertical</property>
-            <property name="margin-start">6</property>
-            <property name="margin-top">3</property>
-            <property name="margin-bottom">6</property>
-            <property name="margin-end">3</property>
-            <property name="spacing">6</property>
-            <property name="vexpand">True</property>
+            <property name="margin">2</property>
             <child>
-              <object class="GtkLabel" id="name_label">
+              <object class="GtkImage" id="image">
                 <property name="visible">true</property>
-                <property name="wrap">true</property>
-                <property name="wrap-mode">word-char</property>
-                <property name="xalign">0</property>
-                <property name="yalign">0.75</property>
-                <property name="vexpand">True</property>
+                <property name="valign">start</property>
                 <style>
-                  <class name="savestate-name"/>
+                  <class name="savestate-thumbnail"/>
                 </style>
               </object>
             </child>
             <child>
-              <object class="GtkLabel" id="date_label">
+              <object class="GtkBox">
                 <property name="visible">true</property>
-                <property name="wrap">true</property>
-                <property name="xalign">0</property>
-                <property name="yalign">0.25</property>
+                <property name="orientation">vertical</property>
+                <property name="margin-start">6</property>
+                <property name="margin-top">3</property>
+                <property name="margin-bottom">6</property>
+                <property name="margin-end">3</property>
+                <property name="spacing">6</property>
                 <property name="vexpand">True</property>
-                <style>
-                  <class name="savestate-date"/>
-                </style>
+                <child>
+                  <object class="GtkLabel" id="name_label">
+                    <property name="visible">true</property>
+                    <property name="wrap">true</property>
+                    <property name="wrap-mode">word-char</property>
+                    <property name="xalign">0</property>
+                    <property name="yalign">0.75</property>
+                    <property name="vexpand">True</property>
+                    <style>
+                      <class name="savestate-name"/>
+                    </style>
+                  </object>
+                </child>
+                <child>
+                  <object class="GtkLabel" id="date_label">
+                    <property name="visible">true</property>
+                    <property name="wrap">true</property>
+                    <property name="xalign">0</property>
+                    <property name="yalign">0.25</property>
+                    <property name="vexpand">True</property>
+                    <style>
+                      <class name="savestate-date"/>
+                    </style>
+                  </object>
+                </child>
               </object>
             </child>
           </object>
diff --git a/src/ui/savestate-listbox-row.vala b/src/ui/savestate-listbox-row.vala
index d2b6bdc8..08e1b1dd 100644
--- a/src/ui/savestate-listbox-row.vala
+++ b/src/ui/savestate-listbox-row.vala
@@ -4,12 +4,16 @@
 private class Games.SavestateListBoxRow : Gtk.ListBoxRow {
        public const int THUMBNAIL_SIZE = 64;
 
+       public delegate void RemoveCallback ();
+
        [GtkChild]
        private Gtk.Image image;
        [GtkChild]
        private Gtk.Label name_label;
        [GtkChild]
        private Gtk.Label date_label;
+       [GtkChild]
+       private Gtk.Revealer revealer;
 
        private Savestate _savestate;
        public Savestate savestate {
@@ -77,5 +81,16 @@ private class Games.SavestateListBoxRow : Gtk.ListBoxRow {
                name_label.label = name;
                savestate.set_name (name);
        }
+
+       public void reveal () {
+               revealer.reveal_child = true;
+       }
+
+       public void remove_animated () {
+               revealer.reveal_child = false;
+               revealer.notify["child-revealed"].connect(() => {
+                       get_parent ().remove (this);
+               });
+       }
 }
 
diff --git a/src/ui/savestates-list.vala b/src/ui/savestates-list.vala
index 8b3ad6f3..233cb0f2 100644
--- a/src/ui/savestates-list.vala
+++ b/src/ui/savestates-list.vala
@@ -63,6 +63,7 @@ private class Games.SavestatesList : Gtk.Box {
 
                                list_box.insert (savestate_row, 1);
                                select_savestate_row (savestate_row);
+                               savestate_row.reveal ();
                        }
                        else {
                                // Savestate creation failed
@@ -89,6 +90,8 @@ private class Games.SavestatesList : Gtk.Box {
                var savestates = _runner.get_savestates ();
                foreach (var savestate in savestates) {
                        var list_row = new SavestateListBoxRow (savestate);
+                       // Reveal it early so that it doesn't animate
+                       list_row.reveal ();
 
                        list_box.add (list_row);
                }
@@ -140,10 +143,10 @@ private class Games.SavestatesList : Gtk.Box {
                var savestate = savestate_row.savestate;
 
                runner.delete_savestate (savestate);
-               list_box.remove (selected_row);
+               savestate_row.remove_animated ();
 
                // Select and preview a new row
-               var next_row = list_box.get_row_at_index (selected_row_index);
+               var next_row = list_box.get_row_at_index (selected_row_index + 1);
 
                if (next_row == null) { // The last row in the list has been deleted
                        var nr_rows = list_box.get_children ().length ();