[gnome-games] ui: Add the SavestateListBoxRow widget

[Alexander Mikhaylenko <alexm src gnome org>]

commit 3e1ec750b91ef73e86f4d69891e651992580c52c
Author: Yetizone <andreii lisita gmail com>
Date:   Wed Aug 7 18:39:54 2019 +0300

    ui: Add the SavestateListBoxRow widget

 data/gtk-style.css                 |  4 +++
 data/org.gnome.Games.gresource.xml |  1 +
 data/ui/savestate-listbox-row.ui   | 56 +++++++++++++++++++++++++++++
 src/meson.build                    |  1 +
 src/ui/savestate-listbox-row.vala  | 73 ++++++++++++++++++++++++++++++++++++++
 5 files changed, 135 insertions(+)
---
diff --git a/data/gtk-style.css b/data/gtk-style.css
index c4cfd62c..e1e66c52 100644
--- a/data/gtk-style.css
+++ b/data/gtk-style.css
@@ -8,6 +8,10 @@
        background-color: @theme_base_color;
 }
 
+.savestate-row {
+  padding: 0px;
+}
+
 gamesgamethumbnail {
        background-color: mix (@theme_base_color, @theme_bg_color, 0.5);
        border-width: 1px;
diff --git a/data/org.gnome.Games.gresource.xml b/data/org.gnome.Games.gresource.xml
index 2a73870a..91fef297 100644
--- a/data/org.gnome.Games.gresource.xml
+++ b/data/org.gnome.Games.gresource.xml
@@ -48,6 +48,7 @@
     <file preprocess="xml-stripblanks">ui/reset-controller-mapping-dialog.ui</file>
     <file preprocess="xml-stripblanks">ui/resume-dialog.ui</file>
     <file preprocess="xml-stripblanks">ui/resume-failed-dialog.ui</file>
+    <file preprocess="xml-stripblanks">ui/savestate-listbox-row.ui</file>
     <file preprocess="xml-stripblanks">ui/search-bar.ui</file>
     <file preprocess="xml-stripblanks">ui/shortcuts-window.ui</file>
   </gresource>
diff --git a/data/ui/savestate-listbox-row.ui b/data/ui/savestate-listbox-row.ui
new file mode 100644
index 00000000..5fc58d0b
--- /dev/null
+++ b/data/ui/savestate-listbox-row.ui
@@ -0,0 +1,56 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<interface>
+  <requires lib="gtk+" version="3.24"/>
+  <template class="GamesSavestateListBoxRow" parent="GtkListBoxRow">
+    <property name="visible">true</property>
+    <child>
+      <object class="GtkBox">
+        <property name="visible">true</property>
+        <child>
+          <object class="GtkImage" id="image">
+            <property name="visible">true</property>
+            <style>
+              <class name="savestate-thumbnail"/>
+            </style>
+          </object>
+        </child>
+        <child>
+          <object class="GtkBox">
+            <property name="visible">true</property>
+            <property name="orientation">vertical</property>
+            <property name="margin">12</property>
+            <property name="spacing">12</property>
+            <property name="valign">center</property>
+            <child>
+              <object class="GtkLabel" id="name_label">
+                <property name="visible">true</property>
+                <property name="wrap">true</property>
+                <property name="xalign">0</property>
+                <attributes>
+                  <!-- "1.2" is the value of "large" -->
+                  <attribute name="scale" value="1.2"/>
+                </attributes>
+              </object>
+            </child>
+            <child>
+              <object class="GtkLabel" id="date_label">
+                <property name="visible">true</property>
+                <property name="wrap">true</property>
+                <property name="xalign">0</property>
+                <style>
+                  <class name="dim-label"/>
+                </style>
+                <attributes>
+                  <attribute name="scale" value="0.8"/>
+                </attributes>
+              </object>
+            </child>
+          </object>
+        </child>
+      </object>
+    </child>
+    <style>
+      <class name="savestate-row"/>
+    </style>
+  </template>
+</interface>
diff --git a/src/meson.build b/src/meson.build
index a08f60cf..021e7427 100644
--- a/src/meson.build
+++ b/src/meson.build
@@ -180,6 +180,7 @@ vala_sources = [
   'ui/reset-controller-mapping-dialog.vala',
   'ui/resume-dialog.vala',
   'ui/resume-failed-dialog.vala',
+  'ui/savestate-listbox-row.vala',
   'ui/search-bar.vala',
   'ui/shortcuts-window.vala',
   'ui/ui-view.vala',
diff --git a/src/ui/savestate-listbox-row.vala b/src/ui/savestate-listbox-row.vala
new file mode 100644
index 00000000..51b1cdb3
--- /dev/null
+++ b/src/ui/savestate-listbox-row.vala
@@ -0,0 +1,73 @@
+// This file is part of GNOME Games. License: GPL-3.0+.
+
+[GtkTemplate (ui = "/org/gnome/Games/ui/savestate-listbox-row.ui")]
+private class Games.SavestateListBoxRow : Gtk.ListBoxRow {
+       [GtkChild]
+       private Gtk.Image image;
+       [GtkChild]
+       private Gtk.Label name_label;
+       [GtkChild]
+       private Gtk.Label date_label;
+
+       private Savestate _savestate;
+       public Savestate savestate {
+               get { return _savestate; }
+               set {
+                       _savestate = value;
+
+                       if (savestate.is_automatic ())
+                               name_label.label = _("Autosave");
+                       else {
+                               name_label.label = savestate.get_name ();
+                       }
+
+                       var creation_date = savestate.get_creation_date ();
+
+                       /* Translators: this is the day number followed
+             * by the abbreviated month name followed by the year followed
+             * by a time in 24h format i.e. "3 Feb 2015 23:04:00" */
+            /* xgettext:no-c-format */
+                       var creation_date_str = creation_date.format (_("%-e %b %Y %X"));
+                       date_label.label = creation_date_str;
+
+                       // Load the savestate thumbnail
+                       var screenshot_path = savestate.get_screenshot_path ();
+                       var screenshot_width = 0;
+                       var screenshot_height = 0;
+
+                       Gdk.Pixbuf.get_file_info (screenshot_path, out screenshot_width, out 
screenshot_height);
+
+                       var aspect_ratio = ((double) screenshot_width) / screenshot_height;
+
+                       // Calculate the thumbnail width and height
+                       const int thumbnail_max_width_height = 64;
+                       var thumbnail_width = screenshot_width;
+                       var thumbnail_height = screenshot_height;
+
+                       if (screenshot_width > screenshot_height && screenshot_width != 
thumbnail_max_width_height) {
+                               thumbnail_width = thumbnail_max_width_height;
+                               thumbnail_height = (int) (thumbnail_max_width_height / aspect_ratio);
+                       }
+
+                       if (screenshot_height > screenshot_width && screenshot_height != 
thumbnail_max_width_height) {
+                               thumbnail_height = thumbnail_max_width_height;
+                               thumbnail_width = (int) (thumbnail_max_width_height * aspect_ratio);
+                       }
+
+                       Gdk.Pixbuf thumbnail = null;
+
+                       try {
+                               thumbnail = new Gdk.Pixbuf.from_file_at_scale (screenshot_path, 
thumbnail_width, thumbnail_height, false);
+                               image.set_from_pixbuf (thumbnail);
+                       }
+                       catch (Error e) {
+                               warning ("Failed to load savestate thumbnail: %s", e.message);
+                       }
+               }
+       }
+
+       public SavestateListBoxRow (Savestate savestate) {
+               Object (savestate: savestate);
+       }
+}
+