[polari] roomList: Use template for headers

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

commit fd293d6742b6a340b3fecbe7c251a6ef4071bcf9
Author: Florian Müllner <fmuellner gnome org>
Date:   Sun Aug 30 01:51:45 2015 +0200

    roomList: Use template for headers
    
    Since commit 320f87932d0, room list headers are used for status/error
    reporting - the header widgets got quite complex in the process, so
    using templates makes for a nice cleanup.

 data/org.gnome.Polari.data.gresource.xml |    1 +
 data/resources/room-list-header.ui       |  101 ++++++++++++++++++++++++++++++
 src/roomList.js                          |   87 +++++++------------------
 3 files changed, 126 insertions(+), 63 deletions(-)
---
diff --git a/data/org.gnome.Polari.data.gresource.xml b/data/org.gnome.Polari.data.gresource.xml
index 91c4de2..ddda70e 100644
--- a/data/org.gnome.Polari.data.gresource.xml
+++ b/data/org.gnome.Polari.data.gresource.xml
@@ -7,6 +7,7 @@
     <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>
     <file alias="message-user-dialog.ui" preprocess="xml-stripblanks">resources/message-user-dialog.ui</file>
+    <file alias="room-list-header.ui" preprocess="xml-stripblanks">resources/room-list-header.ui</file>
     <file alias="user-list-details.ui" preprocess="xml-stripblanks">resources/user-list-details.ui</file>
     <file alias="application.css">resources/application.css</file>
   </gresource>
diff --git a/data/resources/room-list-header.ui b/data/resources/room-list-header.ui
new file mode 100644
index 0000000..3063d68
--- /dev/null
+++ b/data/resources/room-list-header.ui
@@ -0,0 +1,101 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<interface>
+  <template class="Gjs_RoomListHeader" parent="GtkMenuButton">
+    <property name="popover">errorPopover</property>
+    <property name="margin-bottom">4</property>
+    <property name="margin-start">7</property>
+    <property name="margin-end">7</property>
+    <property name="focus-on-click">False</property>
+    <property name="visible">True</property>
+    <style>
+      <class name="room-list-header"/>
+    </style>
+    <child>
+      <object class="GtkBox">
+        <property name="spacing">2</property>
+        <property name="visible">True</property>
+        <child>
+          <object class="GtkLabel" id="label">
+            <property name="xalign">0</property>
+            <property name="hexpand">True</property>
+            <property name="max-width-chars">15</property>
+            <property name="ellipsize">end</property>
+            <property name="visible">True</property>
+          </object>
+        </child>
+        <child>
+          <object class="GtkStack" id="iconStack">
+            <property name="transition-type">crossfade</property>
+            <property name="margin-end">4</property>
+            <property name="valign">center</property>
+            <property name="visible">True</property>
+            <child>
+              <object class="GtkImage">
+                <property name="icon_name">dialog-error-symbolic</property>
+                <property name="visible">True</property>
+              </object>
+              <packing>
+                <property name="name">error</property>
+              </packing>
+            </child>
+            <child>
+              <object class="GtkSpinner">
+                <property name="active">True</property>
+                <property name="visible">True</property>
+              </object>
+              <packing>
+                <property name="name">connecting</property>
+              </packing>
+            </child>
+            <child>
+              <object class="GtkBox">
+                <property name="visible">True</property>
+              </object>
+              <packing>
+                <property name="name">none</property>
+              </packing>
+            </child>
+          </object>
+        </child>
+      </object>
+    </child>
+  </template>
+  <object class="GtkPopover" id="errorPopover">
+    <property name="position">bottom</property>
+    <child>
+      <object class="GtkBox">
+        <property name="orientation">vertical</property>
+        <property name="margin">12</property>
+        <property name="spacing">3</property>
+        <property name="visible">True</property>
+        <child>
+          <object class="GtkLabel">
+            <property name="label" translatable="yes">Connection Error</property>
+            <property name="wrap">True</property>
+            <property name="max-width-chars">30</property>
+            <property name="xalign">0</property>
+            <property name="visible">True</property>
+            <attributes>
+              <attribute name="weight" value="PANGO_WEIGHT_BOLD"/>
+            </attributes>
+          </object>
+        </child>
+        <child>
+          <object class="GtkLabel" id="popoverLabel">
+            <property name="wrap">True</property>
+            <property name="max-width-chars">30</property>
+            <property name="xalign">0</property>
+            <property name="visible">True</property>
+          </object>
+        </child>
+        <child>
+          <object class="GtkButton" id="popoverButton">
+            <property name="margin-top">15</property>
+            <property name="halign">end</property>
+            <property name="visible">True</property>
+          </object>
+        </child>
+      </object>
+    </child>
+  </object>
+</interface>
diff --git a/src/roomList.js b/src/roomList.js
index 660f093..40ff90a 100644
--- a/src/roomList.js
+++ b/src/roomList.js
@@ -140,75 +140,36 @@ const RoomRow = new Lang.Class({
 
 const RoomListHeader = new Lang.Class({
     Name: 'RoomListHeader',
-
-    _init: function(account) {
-        this._account = account;
+    Extends: Gtk.MenuButton,
+    Template: 'resource:///org/gnome/Polari/room-list-header.ui',
+    InternalChildren: ['label',
+                       'iconStack',
+                       'errorPopover',
+                       'popoverLabel',
+                       'popoverButton'],
+
+    _init: function(params) {
+        this._account = params.account;
+        delete params.account;
 
         this._networkMonitor = Gio.NetworkMonitor.get_default();
-
         this._app = Gio.Application.get_default();
 
-        this.widget = new Gtk.Button({ sensitive: false, margin_bottom: 4,
-                                       margin_start: 7, margin_end: 7,
-                                       hexpand: true, focus_on_click: false })
-        this.widget.get_style_context().remove_class('button');
-        this.widget.get_style_context().add_class('room-list-header');
-        this.widget.connect('clicked', Lang.bind(this, function () {
-            this._popover.show_all();
-        }));
-
-        let headerBox = new Gtk.Box({ spacing: 2, hexpand: true,
-                                      orientation: Gtk.Orientation.HORIZONTAL });
-        this.widget.add(headerBox);
-        let label = new Gtk.Label({ xalign: 0, hexpand: true, max_width_chars: 15,
-                                    ellipsize: Pango.EllipsizeMode.END });
-        this.widget.get_style_context().remove_class('button');
-        account.bind_property('display-name', label, 'label',
-                              GObject.BindingFlags.SYNC_CREATE);
-        headerBox.add(label);
-
-        this._iconStack = new Gtk.Stack({ vhomogeneous: true, valign: Gtk.Align.CENTER,
-                                          margin_end: 4 });
-        this._iconStack.transition_type = Gtk.StackTransitionType.CROSSFADE;
-
-        let errorIcon = new Gtk.Image({ icon_name: 'dialog-error-symbolic',
-                                        halign: Gtk.Align.END });
-
-        this._popover = new Gtk.Popover({ modal: true,
-                                          position: Gtk.PositionType.BOTTOM });
-        let popoverBox = new Gtk.Box({ orientation: Gtk.Orientation.VERTICAL,
-                                       margin: 12, spacing: 3 });
-        this._popoverLabel = new Gtk.Label({ wrap: true, max_width_chars: 30,
-                                             halign: Gtk.Align.START, xalign: 0 });
-        this._popoverTitle = new Gtk.Label({ wrap: true, max_width_chars: 30,
-                                             use_markup: true, xalign: 0,
-                                             halign: Gtk.Align.START });
-        this._popoverTitle.label = '<b>' + _("Connection Error") + '</b>';
-        this._popoverButton = new Gtk.Button({ valign: Gtk.Align.CENTER, hexpand: true,
-                                               margin_top: 15, halign: Gtk.Align.END });
+        this.parent(params);
+
+        this.get_style_context().remove_class('button');
+
+        this._errorPopover.relative_to = this._iconStack;
         this._popoverButton.connect('clicked', Lang.bind(this,
             function() {
-                this._popover.hide();
+                this._errorPopover.hide();
             }));
-        popoverBox.add(this._popoverTitle);
-        popoverBox.add(this._popoverLabel);
-        popoverBox.add(this._popoverButton);
-        this._popover.add(popoverBox);
-        this._popover.relative_to = errorIcon;
-
-        this._iconStack.add_named(errorIcon, 'error');
-
-        let connecting = new Gtk.Spinner({ active: true, halign: Gtk.Align.START });
-        this._iconStack.add_named(connecting, 'connecting');
-
-        this._iconStack.add_named(new Gtk.Box(), 'none');
-
-        this._account.connect('notify::connection-status', Lang.bind(this, 
this._updateConnectionStatusIcon));
-        headerBox.add(this._iconStack);
-        this.widget.show_all();
 
+        this._account.bind_property('display-name', this._label, 'label',
+                                    GObject.BindingFlags.SYNC_CREATE);
+        this._account.connect('notify::connection-status',
+                              Lang.bind(this, this._updateConnectionStatusIcon));
         this._updateConnectionStatusIcon();
-
     },
 
     _updateConnectionStatusIcon: function() {
@@ -282,7 +243,7 @@ const RoomListHeader = new Lang.Class({
                     break;
             }
         }
-        this.widget.sensitive = isError;
+        this.sensitive = isError;
         this._iconStack.visible_child_name = child;
     },
 });
@@ -452,8 +413,8 @@ const RoomList = new Lang.Class({
         if (row.get_header())
             return;
 
-        let roomListHeader = new RoomListHeader(account);
-        row.set_header(roomListHeader.widget);
+        let roomListHeader = new RoomListHeader({ account: account });
+        row.set_header(roomListHeader);
     },
 
     _sort: function(row1, row2) {