[polari/wip/fmuellner/connection-list: 3/8] connections: Move error information into properties dialog

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

commit 6c9d5c342844f85e689820fbc5741dded467b477
Author: Florian Müllner <fmuellner gnome org>
Date:   Wed Feb 3 23:14:27 2016 +0100

    connections: Move error information into properties dialog
    
    The ConnectionDetails widget is used both for creating new connections
    in the join dialog and for editing existing ones from the properties
    dialog, but only in the latter case we may show the error information.
    However it still imposes spacing on the details grid even when hidden,
    which makes it harder to adapt the grid to the different parents in the
    future - just move the error information into the dialog that uses it.
    
    https://bugzilla.gnome.org/show_bug.cgi?id=761859

 data/resources/connection-details.ui    |  217 +++++++++++++------------------
 data/resources/connection-properties.ui |   29 ++++
 data/resources/join-room-dialog.ui      |    1 +
 src/connections.js                      |   81 +++++++-----
 4 files changed, 167 insertions(+), 161 deletions(-)
---
diff --git a/data/resources/connection-details.ui b/data/resources/connection-details.ui
index b7206aa..d31ef2e 100644
--- a/data/resources/connection-details.ui
+++ b/data/resources/connection-details.ui
@@ -1,139 +1,102 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <interface>
-  <template class="Gjs_ConnectionDetails" parent="GtkBox">
+  <template class="Gjs_ConnectionDetails" parent="GtkGrid">
     <property name="visible">True</property>
-    <property name="orientation">vertical</property>
+    <property name="row-spacing">6</property>
+    <property name="column-spacing">12</property>
     <child>
-      <object class="GtkGrid" id="grid">
+      <object class="GtkLabel" id="name_label">
         <property name="visible">True</property>
-        <property name="margin">24</property>
-        <property name="row-spacing">6</property>
-        <property name="column-spacing">12</property>
-        <child>
-          <object class="GtkLabel" id="name_label">
-            <property name="visible">True</property>
-            <property name="halign">end</property>
-            <property name="label" translatable="yes">_Name</property>
-            <property name="use-underline">True</property>
-            <property name="mnemonic-widget">nameEntry</property>
-          </object>
-        </child>
-        <child>
-          <object class="GtkEntry" id="nameEntry">
-            <property name="visible">True</property>
-            <property name="hexpand">True</property>
-            <property name="activates-default">True</property>
-            <property name="placeholder-text" translatable="yes">optional</property>
-          </object>
-        </child>
-        <child>
-          <object class="GtkLabel" id="server_label">
-            <property name="visible">True</property>
-            <property name="halign">end</property>
-            <property name="label" translatable="yes">_Server</property>
-            <property name="use-underline">True</property>
-            <property name="mnemonic-widget">serverEntry</property>
-          </object>
-          <packing>
-            <property name="left-attach">0</property>
-            <property name="top-attach">1</property>
-          </packing>
-        </child>
-        <child>
-          <object class="GtkEntry" id="serverEntry">
-            <property name="visible">True</property>
-            <property name="hexpand">True</property>
-            <property name="activates-default">True</property>
-          </object>
-          <packing>
-            <property name="left-attach">1</property>
-            <property name="top-attach">1</property>
-          </packing>
-        </child>
-        <child>
-          <object class="GtkLabel" id="nickname_label">
-            <property name="visible">True</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">0</property>
-            <property name="top-attach">2</property>
-          </packing>
-        </child>
-        <child>
-          <object class="GtkEntry" id="nickEntry">
-            <property name="visible">True</property>
-            <property name="hexpand">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">1</property>
-            <property name="top-attach">2</property>
-          </packing>
-        </child>
-        <child>
-          <object class="GtkLabel" id="realname_label">
-            <property name="visible">True</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">0</property>
-            <property name="top-attach">3</property>
-          </packing>
-        </child>
-        <child>
-          <object class="GtkEntry" id="realnameEntry">
-            <property name="visible">True</property>
-            <property name="hexpand">True</property>
-            <property name="activates-default">True</property>
-            <property name="width-chars">30</property>
-            <property name="placeholder-text" translatable="yes">optional</property>
-          </object>
-          <packing>
-            <property name="left-attach">1</property>
-            <property name="top-attach">3</property>
-          </packing>
-        </child>
+        <property name="halign">end</property>
+        <property name="label" translatable="yes">_Name</property>
+        <property name="use-underline">True</property>
+        <property name="mnemonic-widget">nameEntry</property>
       </object>
     </child>
     <child>
-      <object class="GtkBox" id="errorBox">
-        <property name="visible">False</property>
-        <property name="orientation">horizontal</property>
-        <property name="sensitive">False</property>
-        <property name="vexpand">True</property>
-        <style>
-          <class name="polari-error-information"/>
-        </style>
-        <child>
-          <object class="GtkImage" id="errorIcon">
-            <property name="visible">True</property>
-            <property name="icon-name">dialog-error-symbolic</property>
-            <property name="icon-size">5</property>
-            <property name="margin">12</property>
-            <property name="margin-start">24</property>
-          </object>
-        </child>
-        <child>
-          <object class="GtkLabel" id="errorLabel">
-            <property name="visible">True</property>
-            <property name="xalign">0</property>
-            <property name="wrap">true</property>
-            <property name="vexpand">true</property>
-            <property name="margin">12</property>
-            <property name="margin-end">24</property>
-          </object>
-        </child>
+      <object class="GtkEntry" id="nameEntry">
+        <property name="visible">True</property>
+        <property name="hexpand">True</property>
+        <property name="activates-default">True</property>
+        <property name="placeholder-text" translatable="yes">optional</property>
+      </object>
+    </child>
+    <child>
+      <object class="GtkLabel" id="server_label">
+        <property name="visible">True</property>
+        <property name="halign">end</property>
+        <property name="label" translatable="yes">_Server</property>
+        <property name="use-underline">True</property>
+        <property name="mnemonic-widget">serverEntry</property>
+      </object>
+      <packing>
+        <property name="left-attach">0</property>
+        <property name="top-attach">1</property>
+      </packing>
+    </child>
+    <child>
+      <object class="GtkEntry" id="serverEntry">
+        <property name="visible">True</property>
+        <property name="hexpand">True</property>
+        <property name="activates-default">True</property>
+      </object>
+      <packing>
+        <property name="left-attach">1</property>
+        <property name="top-attach">1</property>
+      </packing>
+    </child>
+    <child>
+      <object class="GtkLabel" id="nickname_label">
+        <property name="visible">True</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">0</property>
+        <property name="top-attach">2</property>
+      </packing>
+    </child>
+    <child>
+      <object class="GtkEntry" id="nickEntry">
+        <property name="visible">True</property>
+        <property name="hexpand">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">1</property>
+        <property name="top-attach">2</property>
+      </packing>
+    </child>
+    <child>
+      <object class="GtkLabel" id="realname_label">
+        <property name="visible">True</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">0</property>
+        <property name="top-attach">3</property>
+      </packing>
+    </child>
+    <child>
+      <object class="GtkEntry" id="realnameEntry">
+        <property name="visible">True</property>
+        <property name="hexpand">True</property>
+        <property name="activates-default">True</property>
+        <property name="width-chars">30</property>
+        <property name="placeholder-text" translatable="yes">optional</property>
       </object>
+      <packing>
+        <property name="left-attach">1</property>
+        <property name="top-attach">3</property>
+      </packing>
     </child>
   </template>
 </interface>
diff --git a/data/resources/connection-properties.ui b/data/resources/connection-properties.ui
index dbffb9e..91e9166 100644
--- a/data/resources/connection-properties.ui
+++ b/data/resources/connection-properties.ui
@@ -27,10 +27,39 @@
       <object class="GtkBox">
         <property name="can-focus">False</property>
         <property name="orientation">vertical</property>
+        <property name="spacing">24</property>
         <property name="border-width">0</property>
         <child>
           <object class="Gjs_ConnectionDetails" id="details">
             <property name="visible">True</property>
+            <property name="margin">24</property>
+          </object>
+        </child>
+        <child>
+          <object class="GtkBox" id="errorBox">
+            <property name="visible">True</property>
+            <style>
+              <class name="polari-error-information"/>
+            </style>
+            <child>
+              <object class="GtkImage" id="image1">
+                <property name="visible">True</property>
+                <property name="icon-name">dialog-error-symbolic</property>
+                <property name="icon-size">5</property>
+                <property name="margin">12</property>
+                <property name="margin-start">24</property>
+              </object>
+            </child>
+            <child>
+              <object class="GtkLabel" id="errorLabel">
+                <property name="visible">True</property>
+                <property name="vexpand">True</property>
+                <property name="wrap">True</property>
+                <property name="xalign">0</property>
+                <property name="margin">12</property>
+                <property name="margin-end">24</property>
+              </object>
+            </child>
           </object>
         </child>
       </object>
diff --git a/data/resources/join-room-dialog.ui b/data/resources/join-room-dialog.ui
index 9b91332..ba6b82a 100644
--- a/data/resources/join-room-dialog.ui
+++ b/data/resources/join-room-dialog.ui
@@ -167,6 +167,7 @@
               <object class="Gjs_ConnectionDetails" id="details">
                 <property name="visible">True</property>
                 <property name="hexpand">True</property>
+                <property name="margin">24</property>
               </object>
               <packing>
                 <property name="name">connection</property>
diff --git a/src/connections.js b/src/connections.js
index b1b407f..f047c88 100644
--- a/src/connections.js
+++ b/src/connections.js
@@ -6,17 +6,20 @@ const Tp = imports.gi.TelepathyGLib;
 const Lang = imports.lang;
 const Signals = imports.signals;
 
+const ErrorHint = {
+    NONE: 0,
+    SERVER: 1,
+    NICK: 2
+};
+
 const ConnectionDetails = new Lang.Class({
     Name: 'ConnectionDetails',
-    Extends: Gtk.Box,
+    Extends: Gtk.Grid,
     Template: 'resource:///org/gnome/Polari/ui/connection-details.ui',
     InternalChildren: ['nameEntry',
                        'serverEntry',
                        'nickEntry',
-                       'realnameEntry',
-                       'errorBox',
-                       'errorIcon',
-                       'errorLabel'],
+                       'realnameEntry'],
     Properties: { 'can-confirm': GObject.ParamSpec.boolean('can-confirm',
                                                            'can-confirm',
                                                            'can-confirm',
@@ -45,22 +48,16 @@ const ConnectionDetails = new Lang.Class({
         this.reset();
     },
 
-    _syncErrorMessage: function() {
-        let status = this._account.connection_status;
-        let reason = this._account.connection_status_reason;
-
-        if (status == Tp.ConnectionStatus.DISCONNECTED &&
-            reason != Tp.ConnectionStatusReason.REQUESTED) {
-            switch (this._account.connection_error) {
-                case Tp.error_get_dbus_name(Tp.Error.CONNECTION_REFUSED):
-                case Tp.error_get_dbus_name(Tp.Error.NETWORK_ERROR): {
-                    this._errorLabel.label = _("Polari disconnected due to a network error. Please check if 
the address field is correct.");
-                    this._serverEntry.get_style_context().add_class('error');
-                    this._errorBox.visible = true;
-                    break;
-                }
-            }
-        }
+    setErrorHint: function(hint) {
+        if (hint == ErrorHint.SERVER)
+            this._serverEntry.get_style_context().add_class('error');
+        else
+            this._serverEntry.get_style_context().remove_class('error');
+
+        if (hint == ErrorHint.NICK)
+            this._nickEntry.get_style_context().add_class('error');
+        else
+            this._nickEntry.get_style_context().remove_class('error');
     },
 
     _getParams: function() {
@@ -124,22 +121,11 @@ const ConnectionDetails = new Lang.Class({
     },
 
     set account(account) {
-        if (this._connectionStatusChangedId)
-            this._account.disconnect(this._connectionStatusChangedId);
-        this._connectionStatusChangedId = 0;
-
         this._account = account;
 
         this.reset();
-
-        if (this._account) {
+        if (this._account)
             this._populateFromAccount(this._account);
-
-            this._connectionStatusChangedId =
-                this._account.connect('notify::connection-status',
-                                      Lang.bind(this, this._syncErrorMessage));
-            this._syncErrorMessage();
-        }
     },
 
     save: function() {
@@ -215,7 +201,9 @@ const ConnectionProperties = new Lang.Class({
     Name: 'ConnectionProperties',
     Extends: Gtk.Dialog,
     Template: 'resource:///org/gnome/Polari/ui/connection-properties.ui',
-    InternalChildren: ['details'],
+    InternalChildren: ['details',
+                       'errorBox',
+                       'errorLabel'],
 
     _init: function(account) {
         /* Translators: %s is a connection name */
@@ -231,5 +219,30 @@ const ConnectionProperties = new Lang.Class({
                     this._details.save();
             }));
         this.set_default_response(Gtk.ResponseType.OK);
+
+        account.connect('notify::connection-status',
+                        Lang.bind(this, this._syncErrorMessage));
+        this._syncErrorMessage(account);
+    },
+
+    _syncErrorMessage: function(account) {
+        let status = account.connection_status;
+        let reason = account.connection_status_reason;
+
+        this._errorBox.hide();
+        this._details.setErrorHint(ErrorHint.NONE);
+
+        if (status != Tp.ConnectionStatus.DISCONNECTED ||
+            reason == Tp.ConnectionStatusReason.REQUESTED)
+            return;
+
+        switch (account.connection_error) {
+            case Tp.error_get_dbus_name(Tp.Error.CONNECTION_REFUSED):
+            case Tp.error_get_dbus_name(Tp.Error.NETWORK_ERROR):
+                this._errorBox.show();
+                this._errorLabel.label = _("Polari disconnected due to a network error. Please check if the 
address field is correct.");
+                this._details.setErrorHint(ErrorHint.SERVER);
+                break;
+        }
     }
 });