[gnome-games/wip/exalm/tnum: 9/24] collections-page: Support inline "Add Collection"

[Alexander Mikhaylenko <alexm src gnome org>]

commit 7619c05c4b4a80bac4e2b90d5ffd28c3d186e07d
Author: Neville <nevilleantony98 gmail com>
Date:   Thu Aug 6 23:36:37 2020 +0530

    collections-page: Support inline "Add Collection"
    
    Thumbnails with DummyAddCollection collection will be shown as an
    inline thumbnail to create a new collection in collections main page.
    
    Also style the "New Collection" placeholder thumbnail

 data/gtk-style.css               |  7 +++-
 data/ui/collection-thumbnail.ui  | 84 ++++++++++++++++++++++++----------------
 src/ui/collection-thumbnail.vala |  9 +++++
 src/ui/collections-page.vala     | 12 ++++++
 4 files changed, 77 insertions(+), 35 deletions(-)
---
diff --git a/data/gtk-style.css b/data/gtk-style.css
index fb6f932f5..2ab081243 100644
--- a/data/gtk-style.css
+++ b/data/gtk-style.css
@@ -41,11 +41,14 @@
        padding: 6px 32px;
 }
 
-gamescollectionsmainpage grid {
+gamescollectionsmainpage flowboxchild stack {
        background: mix(@theme_base_color, @theme_bg_color, 0.5);
+       border-radius: 6px;
+}
+
+gamescollectionsmainpage grid {
        min-width: 116px;
        min-height: 116px;
-       border-radius: 6px;
        padding: 6px;
 }
 
diff --git a/data/ui/collection-thumbnail.ui b/data/ui/collection-thumbnail.ui
index 4979482c7..34d4afa68 100644
--- a/data/ui/collection-thumbnail.ui
+++ b/data/ui/collection-thumbnail.ui
@@ -4,47 +4,65 @@
   <template class="GamesCollectionThumbnail" parent="GtkBin">
     <property name="visible">True</property>
     <child>
-      <object class="GtkGrid" id="grid">
+      <object class="GtkStack" id="thumbnail_stack">
         <property name="visible">True</property>
-        <property name="row-spacing">6</property>
-        <property name="column-spacing">6</property>
-        <property name="row-homogeneous">True</property>
-        <property name="column-homogeneous">True</property>
+        <property name="visible-child">grid</property>
         <child>
-          <object class="GtkEventBox">
+          <object class="GtkGrid" id="grid">
             <property name="visible">True</property>
+            <property name="row-spacing">6</property>
+            <property name="column-spacing">6</property>
+            <property name="row-homogeneous">True</property>
+            <property name="column-homogeneous">True</property>
+            <child>
+              <object class="GtkEventBox">
+                <property name="visible">True</property>
+              </object>
+              <packing>
+                <property name="left-attach">0</property>
+                <property name="top-attach">0</property>
+              </packing>
+            </child>
+            <child>
+              <object class="GtkEventBox">
+                <property name="visible">True</property>
+              </object>
+              <packing>
+                <property name="left-attach">1</property>
+                <property name="top-attach">0</property>
+              </packing>
+            </child>
+            <child>
+              <object class="GtkEventBox">
+                <property name="visible">True</property>
+              </object>
+              <packing>
+                <property name="left-attach">0</property>
+                <property name="top-attach">1</property>
+              </packing>
+            </child>
+            <child>
+              <object class="GtkEventBox">
+                <property name="visible">True</property>
+              </object>
+              <packing>
+                <property name="left-attach">1</property>
+                <property name="top-attach">1</property>
+              </packing>
+            </child>
           </object>
-          <packing>
-            <property name="left-attach">0</property>
-            <property name="top-attach">0</property>
-          </packing>
         </child>
         <child>
-          <object class="GtkEventBox">
+          <object class="GtkImage" id="new_collection_image">
             <property name="visible">True</property>
+            <property name="icon-name">list-add-symbolic</property>
+            <property name="halign">center</property>
+            <property name="valign">center</property>
+            <property name="pixel-size">32</property>
+            <style>
+              <class name="dim-label"/>
+            </style>
           </object>
-          <packing>
-            <property name="left-attach">1</property>
-            <property name="top-attach">0</property>
-          </packing>
-        </child>
-        <child>
-          <object class="GtkEventBox">
-            <property name="visible">True</property>
-          </object>
-          <packing>
-            <property name="left-attach">0</property>
-            <property name="top-attach">1</property>
-          </packing>
-        </child>
-        <child>
-          <object class="GtkEventBox">
-            <property name="visible">True</property>
-          </object>
-          <packing>
-            <property name="left-attach">1</property>
-            <property name="top-attach">1</property>
-          </packing>
         </child>
       </object>
     </child>
diff --git a/src/ui/collection-thumbnail.vala b/src/ui/collection-thumbnail.vala
index 72081f318..b43df10b8 100644
--- a/src/ui/collection-thumbnail.vala
+++ b/src/ui/collection-thumbnail.vala
@@ -6,8 +6,12 @@ private class Games.CollectionThumbnail : Gtk.Bin {
        const uint N_ROWS = 2;
        const uint N_COLUMNS = 2;
 
+       [GtkChild]
+       private Gtk.Stack thumbnail_stack;
        [GtkChild]
        private Gtk.Grid grid;
+       [GtkChild]
+       private Gtk.Image new_collection_image;
 
        private ulong games_changed_id = 0;
 
@@ -20,6 +24,11 @@ private class Games.CollectionThumbnail : Gtk.Bin {
 
                        _collection = value;
 
+                       if (collection.get_collection_type () == Collection.CollectionType.PLACEHOLDER) {
+                               thumbnail_stack.visible_child = new_collection_image;
+                               return;
+                       }
+
                        games_changed_id = collection.games_changed.connect (on_games_changed);
                }
        }
diff --git a/src/ui/collections-page.vala b/src/ui/collections-page.vala
index 2105aae37..1f5274c83 100644
--- a/src/ui/collections-page.vala
+++ b/src/ui/collections-page.vala
@@ -17,6 +17,7 @@ private class Games.CollectionsPage : Gtk.Bin {
        private CollectionEmpty collection_empty_subpage;
 
        private Collection current_collection;
+       private CollectionManager collection_manager;
 
        private bool _is_collection_empty;
        public bool is_collection_empty {
@@ -45,6 +46,8 @@ private class Games.CollectionsPage : Gtk.Bin {
        public string collection_title { get; set; }
 
        construct {
+               collection_manager = Application.get_default ().get_collection_manager ();
+
                collections_main_page.gamepad_accepted.connect (() => {
                        collections_subpage.select_default_game (Gtk.DirectionType.RIGHT);
                });
@@ -130,6 +133,15 @@ private class Games.CollectionsPage : Gtk.Bin {
 
        [GtkCallback]
        private void on_collection_activated (Collection collection) {
+               if (collection.get_collection_type () ==
+                   Collection.CollectionType.NEW_COLLECTION_PLACEHOLDER) {
+                               var dialog = new CollectionActionWindow ();
+                               dialog.transient_for = get_toplevel () as ApplicationWindow;
+                               dialog.modal = true;
+                               dialog.visible = true;
+                               return;
+               }
+
                current_collection = collection;
                collection_title = collection.get_title ();
                collections_deck.visible_child = collections_subpage_stack;