[polari/wip/fmuellner/design-review: 8/15] joinDialog: Add back confirm button to save new account

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

commit 5c2b2e1834019ef7697323d76f8aec284456fadc
Author: Florian Müllner <fmuellner gnome org>
Date:   Tue Feb 23 10:01:19 2016 +0100

    joinDialog: Add back confirm button to save new account

 data/resources/join-room-dialog.ui |   13 -----------
 src/connections.js                 |   33 ++++++++++++++++++++-------
 src/joinDialog.js                  |   43 ++++++++++++++++++++++-------------
 3 files changed, 51 insertions(+), 38 deletions(-)
---
diff --git a/data/resources/join-room-dialog.ui b/data/resources/join-room-dialog.ui
index bb8ffcd..950c81e 100644
--- a/data/resources/join-room-dialog.ui
+++ b/data/resources/join-room-dialog.ui
@@ -33,7 +33,6 @@
     </child>
     <child type="action">
       <object class="GtkButton" id="joinButton">
-        <property name="label" translatable="yes">_Join</property>
         <property name="visible">True</property>
         <property name="can-default">True</property>
         <property name="has-default">True</property>
@@ -222,18 +221,6 @@
                             <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>
diff --git a/src/connections.js b/src/connections.js
index 5313429..1add08f 100644
--- a/src/connections.js
+++ b/src/connections.js
@@ -30,7 +30,7 @@ const ConnectionRow = new Lang.Class({
 
         this.parent(params);
 
-        this.bind_property('sensitive', this, 'activatable',
+        this.bind_property('sensitive', this, 'selectable',
                            GObject.BindingFlags.SYNC_CREATE);
 
         let box = new Gtk.Box({ spacing: 12, margin: 12 });
@@ -59,8 +59,12 @@ const ConnectionRow = new Lang.Class({
 const ConnectionsList = new Lang.Class({
     Name: 'ConnectionsList',
     Extends: Gtk.ScrolledWindow,
-    Signals: { 'account-created': { param_types: [Tp.Account.$gtype] },
-               'account-selected': {}},
+    Properties: { 'can-confirm': GObject.ParamSpec.boolean('can-confirm',
+                                                           'can-confirm',
+                                                           'can-confirm',
+                                                           GObject.ParamFlags.READABLE,
+                                                           false)},
+    Signals: { 'account-created': { param_types: [Tp.Account.$gtype] }},
 
     _init: function(params) {
         this.parent(params);
@@ -68,8 +72,8 @@ const ConnectionsList = new Lang.Class({
         this.hscrollbar_policy = Gtk.PolicyType.NEVER;
 
         this._list = new Gtk.ListBox({ visible: true });
-        this._list.connect('row-activated',
-                           Lang.bind(this, this._onRowActivated));
+        this._list.connect('row-selected',
+                           Lang.bind(this, this._onCanConfirmChanged));
         this.add(this._list);
 
         this._rows = new Map();
@@ -94,15 +98,23 @@ const ConnectionsList = new Lang.Class({
         this._networksChanged();
     },
 
+    get can_confirm() {
+        return this._list.get_selected_row() != null;
+    },
+
+    _onCanConfirmChanged: function() {
+        this.notify('can-confirm');
+    },
+
     setFilter: function(filter) {
+        this._list.select_row(null);
         this._filterTerms = filter.trim().toLowerCase().replace(/\s+/g, ' ').split(' ');
         this._list.invalidate_filter();
     },
 
     activateFirst: function() {
         let row = this._list.get_row_at_y(0);
-        if (row)
-            row.activate();
+        this._list.select_row(row);
     },
 
     _filterRows: function(row) {
@@ -139,7 +151,11 @@ const ConnectionsList = new Lang.Class({
             }));
     },
 
-    _onRowActivated: function(list, row) {
+    save: function() {
+        if (!this.can_confirm)
+            return
+
+        let row = this._list.get_selected_row();
         let name = this._networksManager.getNetworkName(row.id);
         let req = new Tp.AccountRequest({ account_manager: Tp.AccountManager.dup(),
                                           connection_manager: 'idle',
@@ -159,7 +175,6 @@ const ConnectionsList = new Lang.Class({
                 if (account) // TODO: Handle errors
                     this.emit('account-created', account);
             }));
-        this.emit('account-selected');
     },
 
     _setAccountRowSensitive: function(account, sensitive) {
diff --git a/src/joinDialog.js b/src/joinDialog.js
index 9194786..7557774 100644
--- a/src/joinDialog.js
+++ b/src/joinDialog.js
@@ -31,7 +31,6 @@ const JoinDialog = new Lang.Class({
                        'filterEntry',
                        'connectionsList',
                        'details',
-                       'addButton',
                        'customToggle'],
 
     _init: function(params) {
@@ -83,8 +82,9 @@ const JoinDialog = new Lang.Class({
         this.connect('response', Lang.bind(this,
             function(w, response) {
                 if (response == Gtk.ResponseType.OK)
-                    this._joinRoom();
-                this.destroy();
+                    this._onConfirmClicked();
+                else
+                    this.destroy();
             }));
         this.connect('destroy', Lang.bind(this,
             function() {
@@ -124,30 +124,24 @@ const JoinDialog = new Lang.Class({
             function() {
                 this._setPage(DialogPage.MAIN);
             }));
-        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._connectionsList.connect('account-created',
                                       Lang.bind(this, this._onAccountCreated));
         this._details.connect('account-created',
                               Lang.bind(this, this._onAccountCreated));
+        this._connectionsList.connect('notify::can-confirm',
+                                      Lang.bind(this, this._updateCanJoin));
+        this._details.connect('notify::can-confirm',
+                              Lang.bind(this, this._updateCanJoin));
 
         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();
+                if (isCustom)
                     this._details.reset();
-                }
+                this._updateCanJoin();
             }));
 
         this._filterEntry.connect('search-changed', Lang.bind(this,
@@ -198,6 +192,19 @@ const JoinDialog = new Lang.Class({
             }));
     },
 
+    _onConfirmClicked: function() {
+        if (this._page == DialogPage.MAIN) {
+            this._joinRoom();
+            this.destroy();
+        } else {
+            if (this._customToggle.active)
+                this._details.save();
+            else
+                this._connectionsList.save();
+            this._setPage(DialogPage.MAIN);
+        }
+    },
+
     _onAccountCreated: function(w, account) {
         this._connectionCombo.set_active_id(account.display_name);
     },
@@ -244,6 +251,9 @@ const JoinDialog = new Lang.Class({
         if (this._page == DialogPage.MAIN)
             sensitive = this._connectionCombo.get_active() > -1  &&
                         this._nameEntry.get_text_length() > 0;
+        else
+            sensitive = this._customToggle.active ? this._details.can_confirm
+                                                  : this._connectionsList.can_confirm;
 
         this._joinButton.sensitive = sensitive;
         this.set_default_response(sensitive ? Gtk.ResponseType.OK
@@ -266,11 +276,12 @@ const JoinDialog = new Lang.Class({
         else
             this._customToggle.active = false;
 
-        this._joinButton.visible = isMain;
         this._cancelButton.visible = isMain || isAccountsEmpty;
         this._backButton.visible = !(isMain || isAccountsEmpty);
         this.title = isMain ? _("Join Chat Room")
                             : _("Add Network");
+        this._joinButton.label = isMain ? _("_Join")
+                                        : _("_Connect");
         this._mainStack.visible_child_name = isMain ? 'main' : 'connection';
         this._updateCanJoin();
     }