[polari] ui: Display number of users in show-user-list button

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

commit 017d635e269aeaea5f7f393c97171bffad84a46f
Author: Florian Müllner <fmuellner gnome org>
Date:   Wed Oct 23 18:14:41 2013 +0200

    ui: Display number of users in show-user-list button
    
    The number of users in a room is useful information (for instance
    for quick judgement regarding the room's activity), which we
    currently only expose inside the user list.
    Replace the icon of the show-user-list button with the number of
    users to make this information always available.
    
    https://bugzilla.gnome.org/show_bug.cgi?id=710705

 data/resources/application.css |    4 ++++
 data/resources/main-window.ui  |   15 ++++-----------
 src/mainWindow.js              |   21 ++++++++++++++++++++-
 3 files changed, 28 insertions(+), 12 deletions(-)
---
diff --git a/data/resources/application.css b/data/resources/application.css
index b989bd4..6af03af 100644
--- a/data/resources/application.css
+++ b/data/resources/application.css
@@ -127,3 +127,7 @@
     border-image: none;
     border-color: transparent;
 }
+
+.polari-user-list-button {
+    padding: 0px 4px;
+}
diff --git a/data/resources/main-window.ui b/data/resources/main-window.ui
index 02dc0d5..44c66dc 100644
--- a/data/resources/main-window.ui
+++ b/data/resources/main-window.ui
@@ -187,20 +187,13 @@
                 <property name="visible">True</property>
                 <property name="can_focus">True</property>
                 <property name="focus_on_click">False</property>
-                <property name="halign">end</property>
-                <property name="valign">center</property>
                 <property name="action_name">app.user-list</property>
+                <!-- be at least as wide as icon buttons - 16px + padding -->
+                <property name="width-request">32</property>
                 <style>
-                  <class name="image-button"/>
+                  <class name="polari-user-list-button"/>
+                  <class name="text-button"/>
                 </style>
-                <child>
-                  <object class="GtkImage" id="image3">
-                    <property name="visible">True</property>
-                    <property name="can_focus">False</property>
-                    <property name="icon_name">system-users-symbolic</property>
-                    <property name="icon_size">1</property>
-                  </object>
-                </child>
               </object>
               <packing>
                 <property name="pack_type">end</property>
diff --git a/src/mainWindow.js b/src/mainWindow.js
index 1384fcb..ae32dfe 100644
--- a/src/mainWindow.js
+++ b/src/mainWindow.js
@@ -48,6 +48,8 @@ const MainWindow = new Lang.Class({
                                   Lang.bind(this, this._roomRemoved));
         this._roomManager.connect('active-changed',
                                   Lang.bind(this, this._activeRoomChanged));
+        this._roomManager.connect('active-state-changed',
+                                  Lang.bind(this, this._updateUserListLabel));
 
         this._rooms = {};
         this._entries = {};
@@ -57,6 +59,7 @@ const MainWindow = new Lang.Class({
 
         this._displayNameChangedId = 0;
         this._topicChangedId = 0;
+        this._membersChangedId = 0;
         this._configureId = 0;
 
         this._titlebarRight = builder.get_object('titlebar_right');
@@ -220,7 +223,6 @@ const MainWindow = new Lang.Class({
             });
     },
 
-
     _roomAdded: function(roomManager, room) {
         let chatView = new ChatView.ChatView(room);
         this._rooms[room.id] = chatView;
@@ -245,9 +247,11 @@ const MainWindow = new Lang.Class({
         if (this._room) {
             this._room.disconnect(this._displayNameChangedId);
             this._room.disconnect(this._topicChangedId);
+            this._room.disconnect(this._membersChangedId);
         }
         this._displayNameChangedId = 0;
         this._topicChangedId = 0;
+        this._membersChangedId = 0;
 
         this._room = room;
         this._revealer.reveal_child = room != null;
@@ -256,6 +260,7 @@ const MainWindow = new Lang.Class({
 
         this._inputStack.set_visible_child_name(this._room ? this._room.id
                                                            : 'placeholder');
+        this._updateUserListLabel();
 
         if (!this._room)
             return; // finished
@@ -266,6 +271,9 @@ const MainWindow = new Lang.Class({
         this._topicChangedId =
             this._room.connect('notify::topic',
                                Lang.bind(this, this._updateTitlebar));
+        this._membersChangedId =
+            this._room.connect('members-changed',
+                               Lang.bind(this, this._updateUserListLabel));
 
         this._chatStack.set_visible_child_name(this._room.id);
     },
@@ -290,6 +298,17 @@ const MainWindow = new Lang.Class({
             });
     },
 
+    _updateUserListLabel: function() {
+        let numMembers = 0;
+
+        if (this._room &&
+            this._room.channel &&
+            this._room.channel.has_interface(Tp.IFACE_CHANNEL_INTERFACE_GROUP))
+            numMembers = this._room.channel.group_dup_members_contacts().length;
+
+        this._showUserListButton.label = '%d'.format(numMembers);
+    },
+
     _updateTitlebar: function() {
         let subtitle = '';
         if (this._room && this._room.topic) {