[gnome-games] savestate-listbox-row: Animate adding and deleting
- From: Alexander Mikhaylenko <alexm src gnome org>
- To: commits-list gnome org
- Cc:
- Subject: [gnome-games] savestate-listbox-row: Animate adding and deleting
- Date: Thu, 15 Aug 2019 18:42:05 +0000 (UTC)
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 ();
[
Date Prev][
Date Next] [
Thread Prev][
Thread Next]
[
Thread Index]
[
Date Index]
[
Author Index]