[polari/wip/fmuellner/roomlist-filtering: 3/12] serverRoomList: Include search entry and spinner

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

commit 60d59f324aa696a83ab73c2d30b8e31e2e8c45a0
Author: Florian Müllner <fmuellner gnome org>
Date:   Sat Mar 11 01:43:32 2017 +0100

    serverRoomList: Include search entry and spinner
    
    Those widgets are currently added by the join dialog, however it
    makes more sense for the serverRoomList to handle them itself:
    
     - we will soon hook up the entry to filter the list of rooms
       as intended by the design; this will tie entry and list at
       least as strong together as spinner and list already are,
       so keeping them in the same composite widget is much cleaner
       than passing state back and forth via properties, signals and
       functions
    
     - in the future, we want to reuse the room list during
       initial setup; having to duplicate all the code for
       loading indication, filtering and entering custom rooms
       would seriously suck
    
    https://bugzilla.gnome.org/show_bug.cgi?id=779940

 data/resources/join-room-dialog.ui |   40 +----------
 data/resources/server-room-list.ui |  142 ++++++++++++++++++++++-------------
 src/joinDialog.js                  |   23 +-----
 src/serverRoomManager.js           |   29 +++++++-
 4 files changed, 119 insertions(+), 115 deletions(-)
---
diff --git a/data/resources/join-room-dialog.ui b/data/resources/join-room-dialog.ui
index dbaef15..170669b 100644
--- a/data/resources/join-room-dialog.ui
+++ b/data/resources/join-room-dialog.ui
@@ -82,46 +82,8 @@
                   </object>
                 </child>
                 <child>
-                  <object class="GtkBox">
+                  <object class="Gjs_ServerRoomList" id="serverRoomList">
                     <property name="visible">True</property>
-                    <property name="orientation">vertical</property>
-                    <style>
-                      <class name="linked"/>
-                      <class name="frame"/>
-                    </style>
-                    <child>
-                      <object class="GtkBox">
-                        <property name="visible">True</property>
-                        <style>
-                          <class name="polari-listbox-filterbar"/>
-                        </style>
-                        <child>
-                          <object class="GtkSearchEntry" id="nameEntry">
-                            <property name="visible">True</property>
-                            <property name="hexpand">True</property>
-                            <property name="margin">60</property>
-                            <property name="margin-top">6</property>
-                            <property name="margin-bottom">6</property>
-                            <property name="margin-end">22</property>
-                            <property name="activates-default">True</property>
-                            <property name="placeholder-text" translatable="yes">Enter room name to 
add</property>
-                          </object>
-                        </child>
-                        <child>
-                          <object class="GtkSpinner" id="spinner">
-                            <property name="visible">True</property>
-                            <property name="margin-end">22</property>
-                          </object>
-                        </child>
-                      </object>
-                    </child>
-                    <child>
-                      <object class="Gjs_ServerRoomList" id="serverRoomList">
-                        <property name="visible">True</property>
-                        <property name="vexpand">True</property>
-                        <property name="hscrollbar-policy">never</property>
-                      </object>
-                    </child>
                   </object>
                   <packing>
                     <property name="width">3</property>
diff --git a/data/resources/server-room-list.ui b/data/resources/server-room-list.ui
index 18bdbf7..cb28240 100644
--- a/data/resources/server-room-list.ui
+++ b/data/resources/server-room-list.ui
@@ -12,58 +12,94 @@
       <column type="gboolean"/>
     </columns>
   </object>
-  <template class="Gjs_ServerRoomList" parent="GtkScrolledWindow">
-    <property name="vexpand">True</property>
-    <property name="hscrollbar-policy">never</property>
-      <child>
-        <object class="GtkTreeView" id="list">
-          <property name="visible">True</property>
-          <property name="model">store</property>
-          <property name="activate-on-single-click">True</property>
-          <property name="enable-grid-lines">horizontal</property>
-          <property name="headers-visible">False</property>
-          <style>
-            <class name="polari-server-room-list"/>
-          </style>
-          <child>
-            <object class="GtkTreeViewColumn">
-              <child>
-                <object class="GtkCellRendererToggle"/>
-                <attributes>
-                  <attribute name="active">0</attribute>
-                  <attribute name="sensitive">3</attribute>
-                </attributes>
-                <cell-packing>
-                  <property name="expand">False</property>
-                </cell-packing>
-              </child>
-              <child>
-                <object class="GtkCellRendererText">
-                  <property name="ellipsize">end</property>
-                </object>
-                <attributes>
-                  <attribute name="text">1</attribute>
-                  <attribute name="sensitive">3</attribute>
-                </attributes>
-                <cell-packing>
-                  <property name="expand">True</property>
-                </cell-packing>
-              </child>
-              <child>
-                <object class="GtkCellRendererText">
-                  <property name="xalign">1.0</property>
-                </object>
-                <attributes>
-                  <attribute name="text">2</attribute>
-                  <attribute name="sensitive">3</attribute>
-                </attributes>
-                <cell-packing>
-                  <property name="expand">False</property>
-                </cell-packing>
-              </child>
-            </object>
-          </child>
-        </object>
-      </child>
+  <template class="Gjs_ServerRoomList" parent="GtkBox">
+    <property name="orientation">vertical</property>
+    <style>
+      <class name="linked"/>
+      <class name="frame"/>
+    </style>
+    <child>
+      <object class="GtkBox">
+        <property name="visible">True</property>
+        <style>
+          <class name="polari-listbox-filterbar"/>
+        </style>
+        <child>
+          <object class="GtkSearchEntry" id="filterEntry">
+            <property name="visible">True</property>
+            <property name="hexpand">True</property>
+            <property name="margin">60</property>
+            <property name="margin-top">6</property>
+            <property name="margin-bottom">6</property>
+            <property name="margin-end">22</property>
+            <property name="activates-default">True</property>
+            <property name="placeholder-text" translatable="yes">Enter room name to add</property>
+          </object>
+        </child>
+        <child>
+          <object class="GtkSpinner" id="spinner">
+            <property name="visible">True</property>
+            <property name="margin-end">22</property>
+          </object>
+        </child>
+      </object>
+    </child>
+    <child>
+      <object class="GtkScrolledWindow">
+        <property name="visible">True</property>
+        <property name="vexpand">True</property>
+        <property name="hscrollbar-policy">never</property>
+        <child>
+          <object class="GtkTreeView" id="list">
+            <property name="visible">True</property>
+            <property name="model">store</property>
+            <property name="activate-on-single-click">True</property>
+            <property name="enable-grid-lines">horizontal</property>
+            <property name="headers-visible">False</property>
+            <style>
+              <class name="polari-server-room-list"/>
+            </style>
+            <child>
+              <object class="GtkTreeViewColumn">
+                <child>
+                  <object class="GtkCellRendererToggle"/>
+                  <attributes>
+                    <attribute name="active">0</attribute>
+                    <attribute name="sensitive">3</attribute>
+                  </attributes>
+                  <cell-packing>
+                    <property name="expand">False</property>
+                  </cell-packing>
+                </child>
+                <child>
+                  <object class="GtkCellRendererText">
+                    <property name="ellipsize">end</property>
+                  </object>
+                  <attributes>
+                    <attribute name="text">1</attribute>
+                    <attribute name="sensitive">3</attribute>
+                  </attributes>
+                  <cell-packing>
+                    <property name="expand">True</property>
+                  </cell-packing>
+                </child>
+                <child>
+                  <object class="GtkCellRendererText">
+                    <property name="xalign">1.0</property>
+                  </object>
+                  <attributes>
+                    <attribute name="text">2</attribute>
+                    <attribute name="sensitive">3</attribute>
+                  </attributes>
+                  <cell-packing>
+                    <property name="expand">False</property>
+                  </cell-packing>
+                </child>
+              </object>
+            </child>
+          </object>
+        </child>
+      </object>
+    </child>
   </template>
 </interface>
diff --git a/src/joinDialog.js b/src/joinDialog.js
index 2b6c992..ba110de 100644
--- a/src/joinDialog.js
+++ b/src/joinDialog.js
@@ -28,8 +28,6 @@ const JoinDialog = new Lang.Class({
                        'filterEntry',
                        'connectionsList',
                        'serverRoomList',
-                       'nameEntry',
-                       'spinner',
                        'details',
                        'addButton',
                        'customToggle'],
@@ -111,19 +109,8 @@ const JoinDialog = new Lang.Class({
                                       Lang.bind(this, this._onAccountChanged));
         this._connectionCombo.sensitive = false;
 
-        this._nameEntry.connect('changed',
-                                Lang.bind(this, this._updateCanJoin));
-        this._nameEntry.connect('stop-search', Lang.bind(this,
-            function() {
-                if (this._nameEntry.text.length > 0)
-                    this._nameEntry.text = '';
-                else
-                    this.response(Gtk.ResponseType.CANCEL);
-            }));
         this._serverRoomList.connect('notify::can-join',
                                      Lang.bind(this, this._updateCanJoin));
-        this._serverRoomList.bind_property('loading', this._spinner, 'active',
-                                            GObject.BindingFlags.SYNC_CREATE);
     },
 
     _setupConnectionPage: function() {
@@ -176,8 +163,6 @@ const JoinDialog = new Lang.Class({
     },
 
     _onAccountChanged: function() {
-        this._nameEntry.set_text('');
-
         let selected = this._connectionCombo.get_active_text();
         let account = this._accounts[selected];
         if (!account)
@@ -197,9 +182,6 @@ const JoinDialog = new Lang.Class({
         let account = this._accounts[selected];
 
         let toJoinRooms = this._serverRoomList.selectedRooms;
-        if (this._nameEntry.get_text_length() > 0)
-            toJoinRooms.push(this._nameEntry.get_text());
-
         toJoinRooms.forEach(function(room) {
             if (room[0] != '#')
                 room = '#' + room;
@@ -238,8 +220,7 @@ const JoinDialog = new Lang.Class({
 
         if (this._page == DialogPage.MAIN)
             sensitive = this._connectionCombo.get_active() > -1  &&
-                        (this._nameEntry.get_text_length() > 0 ||
-                        this._serverRoomList.can_join);
+                        this._serverRoomList.can_join;
 
         this._joinButton.sensitive = sensitive;
         this.set_default_response(sensitive ? Gtk.ResponseType.OK
@@ -258,7 +239,7 @@ const JoinDialog = new Lang.Class({
         let isAccountsEmpty = !this._hasAccounts;
 
         if (isMain)
-            this._nameEntry.grab_focus();
+            this._serverRoomList.focusEntry();
         else
             this._customToggle.active = false;
 
diff --git a/src/serverRoomManager.js b/src/serverRoomManager.js
index 6f02b33..17003ab 100644
--- a/src/serverRoomManager.js
+++ b/src/serverRoomManager.js
@@ -109,9 +109,11 @@ const RoomListColumn = {
 
 const ServerRoomList = new Lang.Class({
     Name: 'ServerRoomList',
-    Extends: Gtk.ScrolledWindow,
+    Extends: Gtk.Box,
     Template: 'resource:///org/gnome/Polari/ui/server-room-list.ui',
-    InternalChildren: ['list'],
+    InternalChildren: ['filterEntry',
+                       'list',
+                       'spinner'],
     Properties: { 'can-join': GObject.ParamSpec.boolean('can-join',
                                                         'can-join',
                                                         'can-join',
@@ -134,16 +136,30 @@ const ServerRoomList = new Lang.Class({
             this.setAccount(null);
         });
 
+        this._filterEntry.connect('changed', () => { this.notify('can-join'); });
+        this._filterEntry.connect('stop-search', () => {
+            if (this._filterEntry.get_text_length() > 0)
+                this._filterEntry.set_text('');
+            else if (this.get_toplevel() instanceof Gtk.Dialog)
+                this.get_toplevel().response(Gtk.ResponseType.CANCEL);
+        });
+
         this._list.connect('row-activated', (view, path, column) => {
             this._toggleChecked(path);
         });
 
+        this.bind_property('loading', this._spinner, 'active',
+                           GObject.BindingFlags.SYNC_CREATE);
+
         this._manager = getDefault();
         this._manager.connect('loading-changed',
                               Lang.bind(this, this._onLoadingChanged));
     },
 
     get can_join() {
+        if (this._filterEntry.get_text_length() > 0)
+            return true;
+
         let canJoin = false;
         this._list.model.foreach((model, path, iter) => {
             canJoin = model.get_value(iter, RoomListColumn.SENSITIVE) &&
@@ -160,6 +176,10 @@ const ServerRoomList = new Lang.Class({
 
     get selectedRooms() {
         let rooms = [];
+
+        if (this._filterEntry.get_text_length() > 0)
+            rooms.push(this._filterEntry.get_text());
+
         let [valid, iter] = this._list.model.get_iter_first();
         for (; valid; valid = this._list.model.iter_next(iter)) {
             if (!this._list.model.get_value(iter, RoomListColumn.SENSITIVE) ||
@@ -177,9 +197,14 @@ const ServerRoomList = new Lang.Class({
         this._account = account;
         this._pendingInfos = [];
         this._list.model.clear();
+        this._filterEntry.set_text('');
         this._onLoadingChanged(this._manager, account);
     },
 
+    focusEntry: function() {
+        this._filterEntry.grab_focus();
+    },
+
     _onLoadingChanged: function(mgr, account) {
         if (account != this._account)
             return;