[frogr] Introduce an "empty state" for when no pictures have been loaded yet

[Mario Sanchez Prada <msanchez src gnome org>]

commit a28185d47f458c98d69d228e583aa5d10c01df61
Author: Mario Sanchez Prada <msanchez gnome org>
Date:   Mon Jan 22 11:07:16 2018 +0000

    Introduce an "empty state" for when no pictures have been loaded yet
    
    Credits to Nick Richards for the nice suggestion to improve the initial
    state, guiding new users to the "Add" button to get started with frogr.

 data/gtkbuilder/frogr-main-view.ui |   99 +++++++++++++++++++++++++++++++-----
 src/frogr-main-view.c              |   17 ++++++-
 2 files changed, 101 insertions(+), 15 deletions(-)
---
diff --git a/data/gtkbuilder/frogr-main-view.ui b/data/gtkbuilder/frogr-main-view.ui
index 682cddb..13b2f70 100644
--- a/data/gtkbuilder/frogr-main-view.ui
+++ b/data/gtkbuilder/frogr-main-view.ui
@@ -1,41 +1,113 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<!-- Generated with glade 3.16.1 -->
+<!-- Generated with glade 3.20.2 -->
 <interface domain="frogr">
-  <requires lib="gtk+" version="3.4"/>
+  <requires lib="gtk+" version="3.16"/>
   <object class="GtkBox" id="main_window_vbox">
     <property name="visible">True</property>
     <property name="can_focus">False</property>
     <property name="orientation">vertical</property>
     <child>
       <object class="GtkToolbar" id="toolbar">
-        <property name="visible">False</property>
         <property name="can_focus">False</property>
       </object>
       <packing>
         <property name="expand">False</property>
         <property name="fill">True</property>
-        <property name="position">1</property>
+        <property name="position">0</property>
       </packing>
     </child>
     <child>
-      <object class="GtkScrolledWindow" id="scrolled_window">
+      <object class="GtkStack" id="main_stack">
         <property name="visible">True</property>
-        <property name="can_focus">True</property>
-        <property name="shadow_type">etched-in</property>
+        <property name="can_focus">False</property>
         <child>
-          <object class="GtkIconView" id="icon_view">
+          <object class="GtkBox" id="empty_state_vbox">
+            <property name="visible">True</property>
+            <property name="can_focus">False</property>
+            <property name="halign">center</property>
+            <property name="valign">center</property>
+            <property name="hexpand">True</property>
+            <property name="vexpand">True</property>
+            <property name="orientation">vertical</property>
+            <property name="spacing">6</property>
+            <child>
+              <object class="GtkImage" id="empty_state_logo">
+                <property name="visible">True</property>
+                <property name="can_focus">False</property>
+                <property name="pixel_size">96</property>
+                <property name="icon_name">org.gnome.frogr-symbolic</property>
+                <property name="icon_size">6</property>
+              </object>
+              <packing>
+                <property name="expand">False</property>
+                <property name="fill">True</property>
+                <property name="position">0</property>
+              </packing>
+            </child>
+            <child>
+              <object class="GtkLabel" id="empty_state_title">
+                <property name="visible">True</property>
+                <property name="can_focus">False</property>
+                <property name="label" translatable="yes">No pictures loaded</property>
+                <attributes>
+                  <attribute name="weight" value="bold"/>
+                  <attribute name="scale" value="1.2"/>
+                </attributes>
+              </object>
+              <packing>
+                <property name="expand">False</property>
+                <property name="fill">True</property>
+                <property name="position">1</property>
+              </packing>
+            </child>
+            <child>
+              <object class="GtkLabel" id="empty_state_subtitle">
+                <property name="visible">True</property>
+                <property name="can_focus">False</property>
+                <property name="label" translatable="yes">To upload pictures to flickr, first you need to 
load them here by clicking on the &lt;b&gt;"Add"&lt;/b&gt; button from the toolbar.</property>
+                <property name="use_markup">True</property>
+                <property name="wrap">True</property>
+                <property name="width_chars">35</property>
+                <property name="max_width_chars">30</property>
+              </object>
+              <packing>
+                <property name="expand">False</property>
+                <property name="fill">True</property>
+                <property name="position">2</property>
+              </packing>
+            </child>
+          </object>
+          <packing>
+            <property name="name">page1</property>
+            <property name="title" translatable="yes">page1</property>
+          </packing>
+        </child>
+        <child>
+          <object class="GtkScrolledWindow" id="scrolled_window">
             <property name="visible">True</property>
             <property name="can_focus">True</property>
-            <property name="margin">0</property>
-            <signal name="button-press-event" handler="_on_icon_view_button_press_event" swapped="no"/>
-            <signal name="key-press-event" handler="_on_icon_view_key_press_event" swapped="no"/>
+            <property name="shadow_type">etched-in</property>
+            <child>
+              <object class="GtkIconView" id="icon_view">
+                <property name="visible">True</property>
+                <property name="can_focus">True</property>
+                <property name="margin">6</property>
+                <signal name="button-press-event" handler="_on_icon_view_button_press_event" swapped="no"/>
+                <signal name="key-press-event" handler="_on_icon_view_key_press_event" swapped="no"/>
+              </object>
+            </child>
           </object>
+          <packing>
+            <property name="name">page0</property>
+            <property name="title" translatable="yes">page0</property>
+            <property name="position">1</property>
+          </packing>
         </child>
       </object>
       <packing>
         <property name="expand">True</property>
         <property name="fill">True</property>
-        <property name="position">2</property>
+        <property name="position">1</property>
       </packing>
     </child>
     <child>
@@ -46,8 +118,7 @@
       <packing>
         <property name="expand">False</property>
         <property name="fill">True</property>
-        <property name="padding">0</property>
-        <property name="position">3</property>
+        <property name="position">2</property>
       </packing>
     </child>
   </object>
diff --git a/src/frogr-main-view.c b/src/frogr-main-view.c
index bcc1965..a6e5d05 100644
--- a/src/frogr-main-view.c
+++ b/src/frogr-main-view.c
@@ -105,6 +105,9 @@ struct _FrogrMainView {
 #if USE_HEADER_BAR
   GtkWidget *header_bar;
 #endif
+  GtkWidget *main_stack;
+  GtkWidget *scrolled_window;
+  GtkWidget *empty_state_vbox;
   GtkWidget *icon_view;
   GtkWidget *status_bar;
 
@@ -380,6 +383,10 @@ _initialize_ui (FrogrMainView *self)
   gtk_window_set_hide_titlebar_when_maximized (GTK_WINDOW (self), TRUE);
 #endif
 
+  self->main_stack = GTK_WIDGET (gtk_builder_get_object (builder, "main_stack"));
+  self->scrolled_window = GTK_WIDGET (gtk_builder_get_object (builder, "scrolled_window"));
+  self->empty_state_vbox = GTK_WIDGET (gtk_builder_get_object (builder, "empty_state_vbox"));
+
   icon_view = GTK_WIDGET (gtk_builder_get_object (builder, "icon_view"));
   self->icon_view = icon_view;
 
@@ -1989,8 +1996,16 @@ _model_picture_removed (FrogrController *controller,
 static void
 _model_changed (FrogrController *controller, gpointer data)
 {
+  FrogrMainView *self = FROGR_MAIN_VIEW (data);
+
   /* Reflect that the current state is 'dirty' in the title */
-  _update_window_title (FROGR_MAIN_VIEW (data), TRUE);
+  _update_window_title (self, TRUE);
+
+  /* Select the right page of the stack */
+  if (frogr_model_n_pictures (self->model) > 0)
+    gtk_stack_set_visible_child (GTK_STACK (self->main_stack), self->scrolled_window);
+  else
+    gtk_stack_set_visible_child (GTK_STACK (self->main_stack), self->empty_state_vbox);
 }
 
 static void