Add initial experience greeting

Introducing EmptyBoxes, a new actor/widget that is shown when there is
no boxes in the collection view. This is as per the design:

https://raw.github.com/gnome-design-team/gnome-mockups/master/boxes/boxes-empty.png

Issues:

* The 'application-x-appliance-symbolic' icon just landed in git master
  of gnome-icon-theme-symbolic so maybe we want to keep a private copy
  of that to not bump our requirement.

https://bugzilla.gnome.org/show_bug.cgi?id=686936

4 files changed, 86 insertions, 1 deletions

diff --git a/data/gtk-style.css b/data/gtk-style.css
index 31f18dc..ab149d8 100644
--- a/data/gtk-style.css
+++ b/data/gtk-style.css
@@ -179,6 +179,15 @@ GtkIconView.boxes-icon-view {
     -GdMainIconView-icon-size: 40;
 }
 
+.boxes-empty-image {
+    color: #2e3436;
+    icon-shadow: 0 -1px rgba(0,0,0,0.3);
+}
+
+.boxes-empty-details-label {
+    color: #555753;
+}
+
 GtkIconView.boxes-icon-view.check {
     background-image: url("assets/grid-selection-unchecked.svg");
     background-color: transparent;
diff --git a/src/Makefile.am b/src/Makefile.am
index 276a524..42bc73c 100644
--- a/src/Makefile.am
+++ b/src/Makefile.am
@@ -112,6 +112,7 @@ gnome_boxes_SOURCES =				\
 	wizard-source.vala			\
 	wizard.vala				\
 	downloader.vala				\
+	empty-boxes.vala			\
 	$(NULL)
 
 gnome_boxes_LDADD =				\
diff --git a/src/app.vala b/src/app.vala
index 1834fb0..6518ba8 100644
--- a/src/app.vala
+++ b/src/app.vala
@@ -66,6 +66,7 @@ private class Boxes.App: Boxes.UI {
     public Wizard wizard;
     public Properties properties;
     public DisplayPage display_page;
+    public EmptyBoxes empty_boxes;
     public string? uri { get; set; }
     public Collection collection;
     public CollectionFilter filter;
@@ -593,6 +594,7 @@ private class Boxes.App: Boxes.UI {
         selectionbar = new Selectionbar ();
         wizard = new Wizard ();
         properties = new Properties ();
+        empty_boxes = new EmptyBoxes ();
 
         var vbox_actor = new Clutter.Actor ();
         vbox_actor.name = "top-vbox";
@@ -677,9 +679,11 @@ private class Boxes.App: Boxes.UI {
 
         content_bin_actor.add (wizard.actor);
         content_bin_actor.add (properties.actor);
+        below_bin_actor.add_child (empty_boxes.actor);
 
         properties.actor.hide ();
         selectionbar.actor.hide ();
+        empty_boxes.actor.hide ();
 
         notebook.show_all ();
 
@@ -708,7 +712,7 @@ private class Boxes.App: Boxes.UI {
     public override void ui_state_changed () {
         // The order is important for some widgets here (e.g properties must change its state before wizard so it can
         // flush any deferred changes for wizard to pick-up when going back from properties to wizard (review).
-        foreach (var ui in new Boxes.UI[] { sidebar, searchbar, topbar, view, properties, wizard }) {
+        foreach (var ui in new Boxes.UI[] { sidebar, searchbar, topbar, view, properties, wizard, empty_boxes }) {
             ui.ui_state = ui_state;
         }
 
diff --git a/src/empty-boxes.vala b/src/empty-boxes.vala
new file mode 100644
index 0000000..124888e
--- /dev/null
+++ b/src/empty-boxes.vala
@@ -0,0 +1,71 @@
+// This file is part of GNOME Boxes. License: LGPLv2+
+
+private class Boxes.EmptyBoxes : Boxes.UI {
+    public override Clutter.Actor actor { get { return gtk_actor; } }
+
+    private GtkClutter.Actor gtk_actor;
+    private Gtk.Grid grid;
+
+    public EmptyBoxes () {
+        grid = new Gtk.Grid ();
+        grid.orientation = Gtk.Orientation.HORIZONTAL;
+        grid.column_spacing = 12;
+        grid.hexpand = true;
+        grid.vexpand = true;
+        grid.halign = Gtk.Align.CENTER;
+        grid.valign = Gtk.Align.CENTER;
+        grid.row_homogeneous = true;
+        grid.get_style_context ().add_class ("dim-label");
+
+        var image = new Gtk.Image.from_icon_name ("application-x-appliance-symbolic", Gtk.IconSize.DIALOG);
+        image.get_style_context ().add_class ("boxes-empty-image");
+        image.pixel_size = 96;
+        grid.add (image);
+
+        var labels_grid = new Gtk.Grid ();
+        labels_grid.orientation = Gtk.Orientation.VERTICAL;
+        grid.add (labels_grid);
+
+        var label = new Gtk.Label ("<b><span size=\"large\">" +
+                                   _("No boxes found") +
+                                   "</span></b>");
+        label.use_markup = true;
+        label.halign = Gtk.Align.START;
+        label.vexpand = true;
+        labels_grid.add (label);
+
+        label = new Gtk.Label (_("Create one using the button on the top left."));
+        label.get_style_context ().add_class ("boxes-empty-details-label");
+        label.halign = Gtk.Align.START;
+        label.vexpand = true;
+        label.xalign = 0;
+        label.max_width_chars = 24;
+        label.wrap = true;
+        labels_grid.add (label);
+
+        gtk_actor = new GtkClutter.Actor.with_contents (grid);
+        gtk_actor.get_widget ().get_style_context ().add_class ("boxes-bg");
+        gtk_actor.opacity = 255;
+        gtk_actor.x_align = Clutter.ActorAlign.FILL;
+        gtk_actor.y_align = Clutter.ActorAlign.FILL;
+        gtk_actor.x_expand = true;
+        gtk_actor.y_expand = true;
+
+        grid.show_all ();
+
+        App.app.ready.connect (update_visibility);
+        App.app.collection.item_added.connect (update_visibility);
+        App.app.collection.item_removed.connect (update_visibility);
+    }
+
+    public override void ui_state_changed () {
+        update_visibility ();
+    }
+
+    private void update_visibility () {
+        var visible = (ui_state == UIState.COLLECTION || ui_state == UIState.NONE) &&
+                      App.app.collection.items.length == 0;
+        if (visible != gtk_actor.visible)
+            fade_actor (gtk_actor, visible? 255 : 0);
+    }
+}