[polari/wip/bastianilso/initial-setup-2: 2/2] Connections: Add placeholder text when state is empty

[Bastian Ilsø Hougaard <bastianilso src gnome org>]

commit 485bca3c0aecfdc9efd468e8881a1574b32e9347
Author: Bastian Ilsø <bastianilso src gnome org>
Date:   Sat Jul 18 23:45:45 2015 +0200

    Connections: Add placeholder text when state is empty
    
    As part of the effort to improve the initial setup experience
    in Polari, a message is now shown telling the user how to
    add a new connection as a convenience. The message is only
    visible should when no connections have been added.
    
    https://bugzilla.gnome.org/show_bug.cgi?id=711832

 data/resources/connection-list-dialog.ui |   37 ++++++++++++++++++++++-------
 src/connections.js                       |   14 ++++++++---
 2 files changed, 38 insertions(+), 13 deletions(-)
---
diff --git a/data/resources/connection-list-dialog.ui b/data/resources/connection-list-dialog.ui
index e5244a3..30ed131 100644
--- a/data/resources/connection-list-dialog.ui
+++ b/data/resources/connection-list-dialog.ui
@@ -25,20 +25,39 @@
             <property name="margin_bottom">12</property>
             <property name="orientation">vertical</property>
             <child>
-              <object class="GtkScrolledWindow" id="scrolledwindow">
+              <object class="GtkStack" id="stack">
                 <property name="visible">True</property>
-                <property name="can_focus">True</property>
-                <property name="hexpand">True</property>
-                <property name="vexpand">True</property>
-                <property name="hscrollbar_policy">never</property>
-                <property name="shadow_type">in</property>
+                <property name="visible_child">scrolledwindow</property>
+                <property name="homogeneous">True</property>
+                <property name="transition_type">crossfade</property>
                 <child>
-                  <object class="GtkListBox" id="accounts_list">
+                  <object class="GtkLabel" id="empty_state">
+                    <property name="label" translatable="yes">Use the + button to add a new 
connection.</property>
+                    <property name="hexpand">True</property>
+                    <property name="vexpand">True</property>
+                    <property name="visible">True</property>
+                    <style>
+                      <class name="frame"/>
+                    </style>
+                  </object>
+                </child>
+                <child>
+                  <object class="GtkScrolledWindow" id="scrolledwindow">
                     <property name="visible">True</property>
                     <property name="can_focus">True</property>
-                    <property name="selection_mode">single</property>
+                    <property name="hexpand">True</property>
+                    <property name="vexpand">True</property>
+                    <property name="hscrollbar_policy">never</property>
+                    <property name="shadow_type">in</property>
                     <child>
-                      <placeholder/>
+                      <object class="GtkListBox" id="accounts_list">
+                        <property name="visible">True</property>
+                        <property name="can_focus">True</property>
+                        <property name="selection_mode">single</property>
+                        <child>
+                          <placeholder/>
+                        </child>
+                      </object>
                     </child>
                   </object>
                 </child>
diff --git a/src/connections.js b/src/connections.js
index b7fc45c..7fbd200 100644
--- a/src/connections.js
+++ b/src/connections.js
@@ -41,7 +41,6 @@ const ConnectionsDialog = new Lang.Class({
 
         this._listBox = builder.get_object('accounts_list');
         this._stack = builder.get_object('stack');
-
         this._listBox.set_sort_func(function(row1, row2) {
             return row1._account.display_name < row2._account.display_name ? -1 : 1;
         });
@@ -50,10 +49,12 @@ const ConnectionsDialog = new Lang.Class({
         let context = toolbar.get_style_context();
         context.set_junction_sides(Gtk.JunctionSides.TOP);
 
-        let scrolledwindow = builder.get_object('scrolledwindow');
-        context = scrolledwindow.get_style_context();
+        this._scrolledwindow = builder.get_object('scrolledwindow');
+        context = this._scrolledwindow.get_style_context();
         context.set_junction_sides(Gtk.JunctionSides.BOTTOM);
 
+        this._emptyState = builder.get_object('empty_state');
+
         let addButton = builder.get_object('add_button');
         addButton.connect('clicked', Lang.bind(this, this._addConnection));
 
@@ -65,6 +66,9 @@ const ConnectionsDialog = new Lang.Class({
         editButton.connect('clicked', Lang.bind(this, this._editConnection));
         editButton.sensitive = false;
 
+        if (this._listBox.get_children() == 0)
+            this._stack.visible_child = this._emptyState;
+
         this._listBox.connect('row-selected',
             function(w, row) {
                 remButton.sensitive = row != null;
@@ -74,6 +78,7 @@ const ConnectionsDialog = new Lang.Class({
     },
 
     _addAccount: function(account) {
+        this._stack.visible_child = this._scrolledwindow;
         let row = new Gtk.ListBoxRow();
         row._account = account;
 
@@ -128,8 +133,9 @@ const ConnectionsDialog = new Lang.Class({
         for (let i = 0; i < rows.length; i++)
             if (rows[i]._account == account) {
                 rows[i].destroy();
-                return;
             }
+        if (this._listBox.get_children() == 0)
+            this._stack.visible_child = this._emptyState;
     },
 
     _addConnection: function() {