[polari] connections: Turn ConnectionDetails into a template

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

commit 2e6956e307eae0bf2e2726c719ee1899172fc121
Author: Florian Müllner <fmuellner gnome org>
Date:   Mon Feb 23 13:50:26 2015 +0100

    connections: Turn ConnectionDetails into a template
    
    Ripping out the connection-details widget from a dialog ui was really
    just a workaround for not having templates. We do now, so we can start
    using a cleaner approach here.

 data/org.gnome.Polari.data.gresource.xml    |    2 +-
 data/resources/connection-details-dialog.ui |  184 ---------------------------
 data/resources/connection-details.ui        |  150 ++++++++++++++++++++++
 src/connections.js                          |   66 +++++-----
 src/joinDialog.js                           |    6 +-
 5 files changed, 185 insertions(+), 223 deletions(-)
---
diff --git a/data/org.gnome.Polari.data.gresource.xml b/data/org.gnome.Polari.data.gresource.xml
index 4dca49b..2d00f0d 100644
--- a/data/org.gnome.Polari.data.gresource.xml
+++ b/data/org.gnome.Polari.data.gresource.xml
@@ -2,7 +2,7 @@
 <gresources>
   <gresource prefix="/org/gnome/Polari">
     <file alias="gtk/menus.ui" preprocess="xml-stripblanks">resources/menus.ui</file>
-    <file alias="connection-details-dialog.ui" 
preprocess="xml-stripblanks">resources/connection-details-dialog.ui</file>
+    <file alias="connection-details.ui" preprocess="xml-stripblanks">resources/connection-details.ui</file>
     <file alias="connection-list-dialog.ui" 
preprocess="xml-stripblanks">resources/connection-list-dialog.ui</file>
     <file alias="join-room-dialog.ui" preprocess="xml-stripblanks">resources/join-room-dialog.ui</file>
     <file alias="main-window.ui" preprocess="xml-stripblanks">resources/main-window.ui</file>
diff --git a/data/resources/connection-details.ui b/data/resources/connection-details.ui
new file mode 100644
index 0000000..7d16247
--- /dev/null
+++ b/data/resources/connection-details.ui
@@ -0,0 +1,150 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<interface>
+  <template class="Gjs_ConnectionDetails" parent="GtkGrid">
+    <property name="visible">True</property>
+    <property name="can_focus">False</property>
+    <property name="margin_start">24</property>
+    <property name="margin_end">24</property>
+    <property name="margin_top">24</property>
+    <property name="margin_bottom">24</property>
+    <property name="row_spacing">12</property>
+    <property name="column_spacing">12</property>
+    <child>
+      <object class="GtkLabel" id="margin">
+        <property name="visible">True</property>
+        <property name="width_request">24</property>
+      </object>
+      <packing>
+        <property name="left_attach">0</property>
+        <property name="top_attach">0</property>
+        <property name="width">1</property>
+        <property name="height">1</property>
+      </packing>
+    </child>
+    <child>
+      <object class="GtkLabel" id="server_label">
+        <property name="visible">True</property>
+        <property name="can_focus">False</property>
+        <property name="halign">end</property>
+        <property name="label" translatable="yes">_Address</property>
+        <property name="use_underline">True</property>
+        <property name="mnemonic_widget">serverEntry</property>
+      </object>
+      <packing>
+        <property name="left_attach">1</property>
+        <property name="top_attach">0</property>
+        <property name="width">1</property>
+        <property name="height">1</property>
+      </packing>
+    </child>
+    <child>
+      <object class="GtkLabel" id="description_label">
+        <property name="visible">True</property>
+        <property name="can_focus">False</property>
+        <property name="halign">end</property>
+        <property name="label" translatable="yes">_Description</property>
+        <property name="use_underline">True</property>
+        <property name="mnemonic_widget">descEntry</property>
+      </object>
+      <packing>
+        <property name="left_attach">1</property>
+        <property name="top_attach">1</property>
+        <property name="width">1</property>
+        <property name="height">1</property>
+      </packing>
+    </child>
+    <child>
+      <object class="GtkLabel" id="nickname_label">
+        <property name="visible">True</property>
+        <property name="can_focus">False</property>
+        <property name="halign">end</property>
+        <property name="margin_top">24</property>
+        <property name="label" translatable="yes">_Nickname</property>
+        <property name="use_underline">True</property>
+        <property name="mnemonic_widget">nickEntry</property>
+      </object>
+      <packing>
+        <property name="left_attach">1</property>
+        <property name="top_attach">2</property>
+        <property name="width">1</property>
+        <property name="height">1</property>
+      </packing>
+    </child>
+    <child>
+      <object class="GtkLabel" id="realname_label">
+        <property name="visible">True</property>
+        <property name="can_focus">False</property>
+        <property name="halign">end</property>
+        <property name="label" translatable="yes">_Real Name</property>
+        <property name="use_underline">True</property>
+        <property name="mnemonic_widget">realnameEntry</property>
+      </object>
+      <packing>
+        <property name="left_attach">1</property>
+        <property name="top_attach">3</property>
+        <property name="width">1</property>
+        <property name="height">1</property>
+      </packing>
+    </child>
+    <child>
+      <object class="GtkEntry" id="realnameEntry">
+        <property name="visible">True</property>
+        <property name="hexpand">True</property>
+        <property name="can_focus">True</property>
+        <property name="activates_default">True</property>
+        <property name="placeholder_text" translatable="yes">optional</property>
+      </object>
+      <packing>
+        <property name="left_attach">2</property>
+        <property name="top_attach">3</property>
+        <property name="width">1</property>
+        <property name="height">1</property>
+      </packing>
+    </child>
+    <child>
+      <object class="GtkEntry" id="nickEntry">
+        <property name="visible">True</property>
+        <property name="hexpand">True</property>
+        <property name="can_focus">True</property>
+        <property name="can_default">True</property>
+        <property name="margin_top">24</property>
+        <property name="activates_default">True</property>
+      </object>
+      <packing>
+        <property name="left_attach">2</property>
+        <property name="top_attach">2</property>
+        <property name="width">1</property>
+        <property name="height">1</property>
+      </packing>
+    </child>
+    <child>
+      <object class="GtkEntry" id="descEntry">
+        <property name="visible">True</property>
+        <property name="hexpand">True</property>
+        <property name="can_focus">True</property>
+        <property name="activates_default">True</property>
+        <property name="placeholder_text" translatable="yes">optional</property>
+      </object>
+      <packing>
+        <property name="left_attach">2</property>
+        <property name="top_attach">1</property>
+        <property name="width">1</property>
+        <property name="height">1</property>
+      </packing>
+    </child>
+    <child>
+      <object class="GtkEntry" id="serverEntry">
+        <property name="visible">True</property>
+        <property name="hexpand">True</property>
+        <property name="can_focus">True</property>
+        <property name="activates_default">True</property>
+      </object>
+      <packing>
+        <property name="left_attach">2</property>
+        <property name="top_attach">0</property>
+        <property name="width">1</property>
+        <property name="height">1</property>
+      </packing>
+    </child>
+  </template>
+</interface>
diff --git a/src/connections.js b/src/connections.js
index e361ed3..180764e 100644
--- a/src/connections.js
+++ b/src/connections.js
@@ -167,14 +167,33 @@ const ConnectionsDialog = new Lang.Class({
 
 const ConnectionDetails = new Lang.Class({
     Name: 'ConnectionDetails',
+    Extends: Gtk.Grid,
+    Template: 'resource:///org/gnome/Polari/connection-details.ui',
+    InternalChildren: ['serverEntry',
+                       'descEntry',
+                       'nickEntry',
+                       'realnameEntry'],
+    Properties: { 'can-confirm': GObject.ParamSpec.boolean('can-confirm',
+                                                           'can-confirm',
+                                                           'can-confirm',
+                                                           GObject.ParamFlags.READABLE,
+                                                           false)},
+
+    _init: function(params) {
+        if (params) {
+            this._account = params.account;
+            delete params.account;
+        }
+
+        this.parent(params);
 
-    _init: function(account) {
-        this._createWidget();
-
-        this._account = account;
+        this._serverEntry.connect('changed',
+                                  Lang.bind(this, this._onCanConfirmChanged));
+        this._nickEntry.connect('changed',
+                                Lang.bind(this, this._onCanConfirmChanged));
 
-        if (account)
-            this._populateFromAccount(account);
+        if (this._account)
+            this._populateFromAccount(this._account);
     },
 
     _getParams: function() {
@@ -202,26 +221,8 @@ const ConnectionDetails = new Lang.Class({
         this._realnameEntry.text = '';
     },
 
-    _createWidget: function() {
-        let builder = new Gtk.Builder();
-        builder.add_from_resource('/org/gnome/Polari/connection-details-dialog.ui');
-
-        this.widget = builder.get_object('connection_details_content');
-        this.widget.unparent();
-
-        this._serverEntry = builder.get_object('server_entry');
-        this._descEntry = builder.get_object('description_entry');
-        this._nickEntry = builder.get_object('nickname_entry');
-        this._realnameEntry = builder.get_object('realname_entry');
-
-        this._serverEntry.connect('changed',
-                                  Lang.bind(this, this._onCanConfirmChanged));
-        this._nickEntry.connect('changed',
-                                Lang.bind(this, this._onCanConfirmChanged));
-    },
-
     _onCanConfirmChanged: function() {
-        this.emit('can-confirm-changed');
+        this.notify('can-confirm');
     },
 
     _populateFromAccount: function(account) {
@@ -315,7 +316,6 @@ const ConnectionDetails = new Lang.Class({
         return [details, removed];
     }
 });
-Signals.addSignalMethods(ConnectionDetails.prototype);
 
 
 const ConnectionDetailsDialog = new Lang.Class({
@@ -341,14 +341,10 @@ const ConnectionDetailsDialog = new Lang.Class({
                                                      Gtk.ResponseType.OK);
         this._confirmButton.get_style_context().add_class('suggested-action');
 
-        this._details = new ConnectionDetails(account);
-        this._details.connect('can-confirm-changed',
-                              Lang.bind(this, this._updateCanConfirm));
-        this.widget.get_content_area().add(this._details.widget);
-        this._updateCanConfirm();
-    },
-
-    _updateCanConfirm: function() {
-        this._confirmButton.sensitive = this._details.canConfirm;
+        this._details = new ConnectionDetails({ account: account });
+        this._details.bind_property('can-confirm',
+                                    this._confirmButton, 'sensitive',
+                                    GObject.BindingFlags.SYNC_CREATE);
+        this.widget.get_content_area().add(this._details);
     }
 });
diff --git a/src/joinDialog.js b/src/joinDialog.js
index 98b3f82..3db996c 100644
--- a/src/joinDialog.js
+++ b/src/joinDialog.js
@@ -70,9 +70,9 @@ const JoinDialog = new Lang.Class({
 
         this._stack = builder.get_object('stack');
 
-        this._details = new Connections.ConnectionDetails(null);
-        this._stack.add_named(this._details.widget, 'connection');
-        this._details.connect('can-confirm-changed',
+        this._details = new Connections.ConnectionDetails();
+        this._stack.add_named(this._details, 'connection');
+        this._details.connect('notify::can-confirm',
                               Lang.bind(this, this._updateCanConfirm));
 
         this._connectionButton = builder.get_object('add_connection_button');