[polari/wip/fmuellner/connection-list: 6/8] joinDialog: Overhaul connection page

[Florian Müllner <fmuellner src gnome org>]

commit 226afe6ab6a9acb26b965ac2f999a865e9e4bf1e
Author: Florian Müllner <fmuellner gnome org>
Date:   Wed Feb 3 19:34:19 2016 +0100

    joinDialog: Overhaul connection page
    
    Use the newly added ConnectionsList to allow users to create a new
    connection with a single click on a predefined network. For cases
    where the server is not included in the list or more control is
    needed, the previous UI for creating a connection manually can
    still be accessed through a "Custom Connection" toggle.
    
    https://bugzilla.gnome.org/show_bug.cgi?id=761859

 data/resources/join-room-dialog.ui |   72 ++++++++++++++++++++++++++++----
 src/joinDialog.js                  |   81 ++++++++++++++++++++----------------
 2 files changed, 109 insertions(+), 44 deletions(-)
---
diff --git a/data/resources/join-room-dialog.ui b/data/resources/join-room-dialog.ui
index ba6b82a..3be1286 100644
--- a/data/resources/join-room-dialog.ui
+++ b/data/resources/join-room-dialog.ui
@@ -22,6 +22,7 @@
     <property name="modal">True</property>
     <property name="destroy-with-parent">True</property>
     <property name="default-width">500</property>
+    <property name="default-height">500</property>
     <child type="action">
       <object class="GtkButton" id="cancelButton">
         <property name="label" translatable="yes">_Cancel</property>
@@ -31,7 +32,7 @@
       </object>
     </child>
     <child type="action">
-      <object class="GtkButton" id="confirmButton">
+      <object class="GtkButton" id="joinButton">
         <property name="label" translatable="yes">_Join</property>
         <property name="visible">True</property>
         <property name="can-default">True</property>
@@ -45,7 +46,7 @@
         <property name="orientation">vertical</property>
         <property name="spacing">2</property>
         <child>
-          <object class="GtkStack" id="stack">
+          <object class="GtkStack" id="mainStack">
             <property name="visible">True</property>
             <property name="transition-type">slide-left-right</property>
             <child>
@@ -61,7 +62,7 @@
                   </object>
                 </child>
                 <child>
-                  <object class="GtkLabel" id="connection_label">
+                  <object class="GtkLabel">
                     <property name="visible">True</property>
                     <property name="halign">end</property>
                     <property name="label" translatable="yes">C_onnection</property>
@@ -103,7 +104,7 @@
                   </object>
                 </child>
                 <child>
-                  <object class="GtkLabel" id="name_label">
+                  <object class="GtkLabel">
                     <property name="visible">True</property>
                     <property name="halign">end</property>
                     <property name="margin-top">24</property>
@@ -164,10 +165,65 @@
               </packing>
             </child>
             <child>
-              <object class="Gjs_ConnectionDetails" id="details">
+              <object class="GtkBox">
                 <property name="visible">True</property>
-                <property name="hexpand">True</property>
-                <property name="margin">24</property>
+                <property name="margin">30</property>
+                <property name="margin-bottom">24</property>
+                <property name="orientation">vertical</property>
+                <property name="spacing">18</property>
+                <child>
+                  <object class="GtkStack" id="connectionStack">
+                    <property name="visible">True</property>
+                    <property name="vexpand">True</property>
+                    <property name="transition-type">crossfade</property>
+                    <child>
+                      <object class="Gjs_ConnectionsList" id="connectionsList">
+                        <property name="visible">True</property>
+                        <property name="shadow-type">in</property>
+                      </object>
+                      <packing>
+                        <property name="name">predefined</property>
+                      </packing>
+                    </child>
+                    <child>
+                      <object class="GtkBox">
+                        <property name="visible">True</property>
+                        <property name="orientation">vertical</property>
+                        <property name="spacing">24</property>
+                        <child>
+                          <object class="Gjs_ConnectionDetails" id="details">
+                            <property name="visible">True</property>
+                          </object>
+                        </child>
+                        <child>
+                          <object class="GtkButton" id="addButton">
+                            <property name="label" translatable="yes">_Add</property>
+                            <property name="visible">True</property>
+                            <property name="halign">end</property>
+                            <property name="can-default">True</property>
+                            <property name="receives-default">True</property>
+                            <property name="use-underline">True</property>
+                            <property name="sensitive" bind-source="details"
+                                      bind-property="can-confirm" bind-flags="sync-create"/>
+                          </object>
+                        </child>
+                      </object>
+                      <packing>
+                        <property name="name">custom</property>
+                      </packing>
+                    </child>
+                  </object>
+                </child>
+                <child>
+                  <object class="GtkToggleButton" id="customToggle">
+                    <property name="label" translatable="yes">_Custom Connection</property>
+                    <property name="visible">True</property>
+                    <property name="receives-default">True</property>
+                    <property name="use-underline">True</property>
+                    <property name="focus-on-click">False</property>
+                    <property name="halign">start</property>
+                  </object>
+                </child>
               </object>
               <packing>
                 <property name="name">connection</property>
@@ -179,7 +235,7 @@
     </child>
     <action-widgets>
       <action-widget response="cancel">cancelButton</action-widget>
-      <action-widget response="ok">confirmButton</action-widget>
+      <action-widget response="ok">joinButton</action-widget>
     </action-widgets>
   </template>
 </interface>
diff --git a/src/joinDialog.js b/src/joinDialog.js
index c91eb55..8d45096 100644
--- a/src/joinDialog.js
+++ b/src/joinDialog.js
@@ -21,13 +21,17 @@ const JoinDialog = new Lang.Class({
     Extends: Gtk.Dialog,
     Template: 'resource:///org/gnome/Polari/ui/join-room-dialog.ui',
     InternalChildren: ['cancelButton',
-                       'confirmButton',
-                       'stack',
+                       'joinButton',
+                       'mainStack',
                        'connectionCombo',
                        'connectionButton',
                        'nameEntry',
                        'nameCompletion',
-                       'details'],
+                       'connectionStack',
+                       'connectionsList',
+                       'details',
+                       'addButton',
+                       'customToggle'],
 
     _init: function(params) {
         params['use-header-bar'] = 1;
@@ -80,9 +84,8 @@ const JoinDialog = new Lang.Class({
         this.connect('response', Lang.bind(this,
             function(w, response) {
                 if (response == Gtk.ResponseType.OK)
-                    this._onConfirmClicked();
-                else
-                    this.destroy();
+                    this._joinRoom();
+                this.destroy();
             }));
         this.connect('destroy', Lang.bind(this,
             function() {
@@ -91,7 +94,7 @@ const JoinDialog = new Lang.Class({
             }));
 
         this._updateConnectionCombo();
-        this._updateCanConfirm();
+        this._updateCanJoin();
     },
 
     _setupMainPage: function() {
@@ -105,7 +108,7 @@ const JoinDialog = new Lang.Class({
         this._connectionCombo.sensitive = false;
 
         this._nameEntry.connect('changed',
-                                Lang.bind(this, this._updateCanConfirm));
+                                Lang.bind(this, this._updateCanJoin));
     },
 
     _setupConnectionPage: function() {
@@ -113,14 +116,31 @@ const JoinDialog = new Lang.Class({
             function() {
                 this._setPage(DialogPage.MAIN);
             }));
-
-        this._details.connect('account-created', Lang.bind(this,
-            function(details, account) {
-                this._connectionCombo.set_active_id(account.display_name);
+        this._connectionsList.connect('account-selected', Lang.bind(this,
+            function() {
+                this._setPage(DialogPage.MAIN);
+            }));
+        this._addButton.connect('clicked', Lang.bind(this,
+            function() {
+                this._details.save();
+                this._setPage(DialogPage.MAIN);
             }));
 
-        this._details.connect('notify::can-confirm',
-                              Lang.bind(this, this._updateCanConfirm));
+        this._connectionsList.connect('account-created',
+                                      Lang.bind(this, this._onAccountCreated));
+        this._details.connect('account-created',
+                              Lang.bind(this, this._onAccountCreated));
+
+        this._customToggle.connect('notify::active', Lang.bind(this,
+            function() {
+                let isCustom = this._customToggle.active;
+                this._connectionStack.visible_child_name = isCustom ? 'custom'
+                                                                    : 'predefined';
+                if (isCustom) {
+                    this._addButton.grab_default();
+                    this._details.reset();
+                }
+            }));
     },
 
     _onAccountChanged: function() {
@@ -153,14 +173,8 @@ const JoinDialog = new Lang.Class({
             }));
     },
 
-    _onConfirmClicked: function() {
-        if (this._page == DialogPage.MAIN) {
-            this._joinRoom();
-            this.destroy();
-        } else {
-            this._details.save();
-            this._setPage(DialogPage.MAIN);
-        }
+    _onAccountCreated: function(w, account) {
+        this._connectionCombo.set_active_id(account.display_name);
     },
 
     _joinRoom: function() {
@@ -200,23 +214,19 @@ const JoinDialog = new Lang.Class({
         this._connectionCombo.set_active(activeIndex);
     },
 
-    _updateCanConfirm: function() {
-        let sensitive;
-
-        if (this._page == DialogPage.MAIN) {
+    _updateCanJoin: function() {
+        let sensitive = false;
+        if (this._page == DialogPage.MAIN)
             sensitive = this._connectionCombo.get_active() > -1  &&
                         this._nameEntry.get_text_length() > 0;
-        } else {
-            sensitive = this._details.can_confirm;
-        }
 
-        this._confirmButton.sensitive = sensitive;
+        this._joinButton.sensitive = sensitive;
         this.set_default_response(sensitive ? Gtk.ResponseType.OK
                                             : Gtk.ResponseType.NONE);
     },
 
     get _page() {
-        if (this._stack.visible_child_name == 'connection')
+        if (this._mainStack.visible_child_name == 'connection')
             return DialogPage.CONNECTION;
         else
             return DialogPage.MAIN;
@@ -228,15 +238,14 @@ const JoinDialog = new Lang.Class({
         if (isMain)
             this._nameEntry.grab_focus();
         else
-            this._details.reset();
+            this._customToggle.active = false;
 
         this._backButton.visible = !isMain;
+        this._joinButton.visible = isMain;
         this._cancelButton.visible = isMain;
         this.title = isMain ? _("Join Chat Room")
                             : _("Add Connection");
-        this._confirmButton.label = isMain ? _("_Join")
-                                           : _("_Save");
-        this._stack.visible_child_name = isMain ? 'main' : 'connection';
-        this._updateCanConfirm();
+        this._mainStack.visible_child_name = isMain ? 'main' : 'connection';
+        this._updateCanJoin();
     }
 });