Show number of unread messages on the "Rooms" tab

css/converse.css

@@ -1905,6 +1905,14 @@
     padding: 0 0 5px 5px; }
     #conversejs #controlbox form.search-xmpp-contact input {
       width: 8em; }
+  #conversejs #controlbox .msgs-indicator {
+    background-color: #D24E2B;
+    color: white;
+    font-size: 12px;
+    float: right;
+    font-weight: normal;
+    padding: 0 4px;
+    text-shadow: none; }
   #conversejs #controlbox a.subscribe-to-user {
     padding-left: 2em;
     font-weight: bold; }
@@ -2091,6 +2099,8 @@
           height: 55px;
           cursor: default;
           color: #818479; }
+        #conversejs #controlbox #controlbox-tabs li a .msgs-indicator {
+          border-top-right-radius: 4px; }
   #conversejs #controlbox .fancy-dropdown {
     border: 1px solid #B1BFC4;
     height: 25px;
@@ -2193,14 +2203,8 @@
 #conversejs #controlbox .available-chatroom .pulse {
   padding: 0;
   margin: 0; }
-#conversejs #controlbox .available-chatroom.unread-msgs .msgs-indicactor {
-  background-color: #D24E2B;
-  color: white;
-  border-radius: 10%;
-  font-size: 12px;
-  font-weight: normal;
-  padding: 0 4px;
-  text-shadow: none; }
+#conversejs #controlbox .available-chatroom.unread-msgs .msgs-indicator {
+  border-radius: 10%; }
 
 #conversejs #converse-roster {
   text-align: left;
@@ -2328,16 +2332,9 @@
             opacity: 0; }
           #conversejs #converse-roster .roster-contacts dd .open-chat.unread-msgs .avatar.avatar-online .pulse {
             border: 0.7em solid #2A9D8F; }
-        #conversejs #converse-roster .roster-contacts dd .open-chat .msgs-indicactor {
-          background-color: #D24E2B;
-          color: white;
-          border-radius: 10%;
-          float: right;
-          font-size: 11px;
+        #conversejs #converse-roster .roster-contacts dd .open-chat .msgs-indicator {
           margin-left: -3em;
-          font-weight: normal;
-          padding: 0 4px;
-          text-shadow: none; }
+          border-radius: 10%; }
         #conversejs #converse-roster .roster-contacts dd .open-chat .contact-name {
           padding: 0;
           margin: 0;

dev.html

@@ -55,11 +55,11 @@
         converse.initialize({
             auto_away: 300,
             i18n: locales['af'],
-            auto_join_rooms: [
-                'discuss@conference.conversejs.org',
-                'prosody@conference.prosody.im',
-                'jdev@conference.jabber.org'
-            ],
+            // auto_join_rooms: [
+            //     'discuss@conference.conversejs.org',
+            //     'prosody@conference.prosody.im',
+            //     'jdev@conference.jabber.org'
+            // ],
             notify_all_room_messages: [
                 'discuss@conference.conversejs.org'
             ],

sass/_controlbox.scss

@@ -32,6 +32,17 @@
                 width: 8em;
             }
         }
+
+        .msgs-indicator {
+            background-color: $warning-color;
+            color: white;
+            font-size: $font-size-small;
+            float: right;
+            font-weight: normal;
+            padding: 0 4px;
+            text-shadow: none;
+        }
+
         a.subscribe-to-user {
             padding-left: 2em;
             font-weight: bold;
@@ -288,6 +299,9 @@
                         cursor: default;
                         color: $text-color;
                     }
+                    .msgs-indicator {
+                        border-top-right-radius: $chatbox-border-radius;
+                    }
                 }
             }
         }

sass/_roomslist.scss

@@ -6,14 +6,8 @@
                 margin: 0;
             }
             &.unread-msgs {
-                .msgs-indicactor {
-                    background-color: $warning-color;
-                    color: white;
+                .msgs-indicator {
                     border-radius: 10%;
-                    font-size: $font-size-small;
-                    font-weight: normal;
-                    padding: 0 4px;
-                    text-shadow: none;
                 }
             }
         }

sass/_roster.scss

@@ -154,16 +154,9 @@
                     }
                 }
 
-				.msgs-indicactor {
-					background-color: $warning-color;
-                    color: white;
-					border-radius: 10%;
-					float: right;
-					font-size: 11px;
+				.msgs-indicator {
                     margin-left: -3em;
-					font-weight: normal;
-					padding: 0 4px;
-                    text-shadow: none;
+                    border-radius: 10%;
 				}
 
                 .contact-name {

spec/chatbox.js

@@ -1995,7 +1995,7 @@
                     var msg = test_utils.createChatMessage(_converse, sender_jid, 'This message will be unread');
                     _converse.chatboxes.onMessage(msg);
 
-                    var msgIndicatorSelector = 'a.open-chat:contains("' + chatbox.get('fullname') + '") .msgs-indicactor',
+                    var msgIndicatorSelector = 'a.open-chat:contains("' + chatbox.get('fullname') + '") .msgs-indicator',
                         $msgIndicator = $(_converse.rosterview.$el.find(msgIndicatorSelector));
 
                     expect($msgIndicator.text()).toBe('1');
@@ -2026,7 +2026,7 @@
                     var msg = test_utils.createChatMessage(_converse, sender_jid, 'This message will be unread');
                     _converse.chatboxes.onMessage(msg);
 
-                    var msgIndicatorSelector = 'a.open-chat:contains("' + chatbox.get('fullname') + '") .msgs-indicactor',
+                    var msgIndicatorSelector = 'a.open-chat:contains("' + chatbox.get('fullname') + '") .msgs-indicator',
                         $msgIndicator = $(_converse.rosterview.$el.find(msgIndicatorSelector));
 
                     expect($msgIndicator.text()).toBe('1');
@@ -2052,7 +2052,7 @@
                     test_utils.openChatBoxFor(_converse, sender_jid);
                     var chatbox = _converse.chatboxes.get(sender_jid);
                     var chatboxview = _converse.chatboxviews.get(sender_jid);
-                    var msgsIndicatorSelector = 'a.open-chat:contains("' + chatbox.get('fullname') + '") .msgs-indicactor';
+                    var msgsIndicatorSelector = 'a.open-chat:contains("' + chatbox.get('fullname') + '") .msgs-indicator';
                     var selectMsgsIndicator = function () { return $(_converse.rosterview.$el.find(msgsIndicatorSelector)); };
                     var msgFactory = function () { 
                         return test_utils.createChatMessage(_converse, sender_jid, 'This message will be received as unread, but eventually will be read'); 
@@ -2087,7 +2087,7 @@
                     var msgFactory = function () { 
                         return test_utils.createChatMessage(_converse, sender_jid, 'This message will be received as unread, but eventually will be read');
                     };
-                    var msgsIndicatorSelector = 'a.open-chat:contains("' + chatbox.get('fullname') + '") .msgs-indicactor',
+                    var msgsIndicatorSelector = 'a.open-chat:contains("' + chatbox.get('fullname') + '") .msgs-indicator',
                         selectMsgsIndicator = function () { return $(_converse.rosterview.$el.find(msgsIndicatorSelector)); };
 
                     chatbox.save('scrolled', true);
@@ -2117,7 +2117,7 @@
                     var msgFactory = function () { 
                         return test_utils.createChatMessage(_converse, sender_jid, 'This message will be received as unread, but eventually will be read');
                     };
-                    var msgsIndicatorSelector = 'a.open-chat:contains("' + chatbox.get('fullname') + '") .msgs-indicactor',
+                    var msgsIndicatorSelector = 'a.open-chat:contains("' + chatbox.get('fullname') + '") .msgs-indicator',
                         selectMsgsIndicator = function () { return $(_converse.rosterview.$el.find(msgsIndicatorSelector)); };
 
                     chatbox.save('scrolled', true);

spec/chatroom.js

@@ -2061,5 +2061,44 @@
                 expect(delta.length).toBe(0);
             }));
         });
+
+        describe("The \"Rooms\" Panel", function () {
+
+            it("shows the number of unread mentions received", mock.initConverse(function (_converse) {
+                var room_jid = 'kitchen@conference.shakespeare.lit';
+                test_utils.openAndEnterChatRoom(
+                    _converse, 'kitchen', 'conference.shakespeare.lit', 'fires');
+                test_utils.openContactsPanel(_converse);
+                var roomspanel = _converse.chatboxviews.get('controlbox').roomspanel;
+                var view = _converse.chatboxviews.get(room_jid);
+                view.model.set({'minimized': true});
+
+                var contact_jid = mock.cur_names[5].replace(/ /g,'.').toLowerCase() + '@localhost';
+                var message = 'fires: Your attention is required';
+                var nick = mock.chatroom_names[0],
+                    msg = $msg({
+                        from: room_jid+'/'+nick,
+                        id: (new Date()).getTime(),
+                        to: 'dummy@localhost',
+                        type: 'groupchat'
+                    }).c('body').t(message).tree();
+                view.handleMUCMessage(msg);
+
+                expect(_.includes(roomspanel.tab_el.firstChild.classList, 'unread-msgs')).toBeTruthy();
+                expect(roomspanel.tab_el.querySelector('.msgs-indicator').textContent).toBe('1');
+
+                msg = $msg({
+                    from: room_jid+'/'+nick,
+                    id: (new Date()).getTime(),
+                    to: 'dummy@localhost',
+                    type: 'groupchat'
+                }).c('body').t(message).tree();
+                view.handleMUCMessage(msg);
+                expect(roomspanel.tab_el.querySelector('.msgs-indicator').textContent).toBe('2');
+
+                view.model.set({'minimized': false});
+                expect(_.includes(roomspanel.tab_el.firstChild.classList, 'unread-msgs')).toBeFalsy();
+            }));
+        });
     });
 }));

spec/controlbox.js

@@ -1172,7 +1172,7 @@
             it("can list rooms publically available on the server", mock.initConverse(function (_converse) {
                 test_utils.openControlBox();
                 var panel = _converse.chatboxviews.get('controlbox').roomspanel;
-                panel.$tabs.find('li').last().find('a').click(); // Click the chatrooms tab
+                $(panel.tabs).find('li').last().find('a').click(); // Click the chatrooms tab
                 panel.model.set({'muc_domain': 'muc.localhost'}); // Make sure the domain is set
                 // See: http://xmpp.org/extensions/xep-0045.html#disco-rooms
                 expect($('#available-chatrooms').children('dt').length).toBe(0);

spec/roomslist.js

@@ -112,7 +112,7 @@
                     type: 'groupchat'
                 }).c('body').t('romeo: Your attention is required').tree()
             );
-            var indicator_el = _converse.rooms_list_view.el.querySelector(".msgs-indicactor");
+            var indicator_el = _converse.rooms_list_view.el.querySelector(".msgs-indicator");
             expect(indicator_el.textContent).toBe('1');
 
             view.handleMUCMessage(
@@ -123,12 +123,12 @@
                     type: 'groupchat'
                 }).c('body').t('romeo: and another thing...').tree()
             );
-            indicator_el = _converse.rooms_list_view.el.querySelector(".msgs-indicactor");
+            indicator_el = _converse.rooms_list_view.el.querySelector(".msgs-indicator");
             expect(indicator_el.textContent).toBe('2');
 
             // When the chat gets maximized again, the unread indicators are removed
             view.model.set({'minimized': false});
-            indicator_el = _converse.rooms_list_view.el.querySelector(".msgs-indicactor");
+            indicator_el = _converse.rooms_list_view.el.querySelector(".msgs-indicator");
             expect(_.isNull(indicator_el));
             room_el = _converse.rooms_list_view.el.querySelector(".available-chatroom");
             expect(_.includes(room_el.classList, 'unread-msgs')).toBeFalsy();

src/converse-muc.js

@@ -164,7 +164,7 @@
                                 b64_sha1('converse.roomspanel'+_converse.bare_jid))
                         }))()
                     });
-                    this.roomspanel.render().model.fetch();
+                    this.roomspanel.insertIntoDOM().model.fetch();
                     if (!this.roomspanel.model.get('nick')) {
                         this.roomspanel.model.save({
                             nick: Strophe.getNodeFromJid(_converse.bare_jid)
@@ -2375,37 +2375,43 @@
                 },
 
                 initialize: function (cfg) {
-                    this.$parent = cfg.$parent;
+                    this.parent_el = cfg.$parent[0];
+                    this.tab_el = document.createElement('li');
                     this.model.on('change:muc_domain', this.onDomainChange, this);
                     this.model.on('change:nick', this.onNickChange, this);
+                    _converse.chatboxes.on('change:num_unread', this.render, this);
                 },
 
                 render: function () {
-                    this.$parent.append(
-                        this.$el.html(
-                            tpl_room_panel({
-                                'server_input_type': _converse.hide_muc_server && 'hidden' || 'text',
-                                'server_label_global_attr': _converse.hide_muc_server && ' hidden' || '',
-                                'label_room_name': __('Room name'),
-                                'label_nickname': __('Nickname'),
-                                'label_server': __('Server'),
-                                'label_join': __('Join Room'),
-                                'label_show_rooms': __('Show rooms')
-                            })
-                        ));
-                    this.$tabs = this.$parent.parent().find('#controlbox-tabs');
-
+                    this.el.innerHTML = tpl_room_panel({
+                        'server_input_type': _converse.hide_muc_server && 'hidden' || 'text',
+                        'server_label_global_attr': _converse.hide_muc_server && ' hidden' || '',
+                        'label_room_name': __('Room name'),
+                        'label_nickname': __('Nickname'),
+                        'label_server': __('Server'),
+                        'label_join': __('Join Room'),
+                        'label_show_rooms': __('Show rooms')
+                    });
                     var controlbox = _converse.chatboxes.get('controlbox');
-                    this.$tabs.append(tpl_chatrooms_tab({
+                    var is_current = controlbox.get('active-panel') === ROOMS_PANEL_ID;
+                    this.tab_el.innerHTML = tpl_chatrooms_tab({
                         'label_rooms': __('Rooms'),
-                        'is_current': controlbox.get('active-panel') === ROOMS_PANEL_ID
-                    }));
-                    if (controlbox.get('active-panel') !== ROOMS_PANEL_ID) {
-                        this.$el.addClass('hidden');
+                        'is_current': is_current,
+                        'num_unread': _.sum(_converse.chatboxes.pluck('num_unread'))
+                    });
+                    if (!is_current) {
+                        this.el.classList.add('hidden');
                     }
                     return this;
                 },
 
+                insertIntoDOM: function () {
+                    this.parent_el.appendChild(this.render().el);
+                    this.tabs = this.parent_el.parentNode.querySelector('#controlbox-tabs');
+                    this.tabs.appendChild(this.tab_el);
+                    return this;
+                },
+
                 onDomainChange: function (model) {
                     var $server = this.$el.find('input.new-chatroom-server');
                     $server.val(model.get('muc_domain'));

src/templates/chatrooms_tab.html

@@ -1,4 +1,9 @@
-<li><a class="s {[ if (is_current) { ]} current {[ } ]}"
+<a class="s
+   {[ if (is_current) { ]} current {[ } ]}
+   {[ if (num_unread) { ]} unread-msgs {[ } ]}"
        data-id="chatrooms" href="#chatrooms">
     {{label_rooms}}
-</a></li>
+    {[ if (num_unread) { ]}
+        <span class="msgs-indicator">{{{ num_unread }}}</span>
+    {[ } ]}
+</a>

src/templates/rooms_list_item.html

@@ -1,6 +1,6 @@
 <dd class="available-chatroom {[ if (num_unread_general) { ]} unread-msgs {[ } ]}" data-room-jid="{{{jid}}}">
 {[ if (num_unread) { ]}
-    <span class="msgs-indicactor">{{{ num_unread }}}</span>
+    <span class="msgs-indicator">{{{ num_unread }}}</span>
 {[ } ]}
 <a class="open-room" data-room-jid="{{{jid}}}" title="{{{open_title}}}" href="#">{{{name}}}</a>
 <a class="right close-room icon-remove"

src/templates/roster_item.html

@@ -9,7 +9,7 @@
     </div>
     <span class="contact-name unread-msgs">{{{fullname}}}</span>
     {[ if (num_unread) { ]}
-    <span class="msgs-indicactor">{{{ num_unread }}}</span>
+    <span class="msgs-indicator">{{{ num_unread }}}</span>
     {[ } ]}
 </a>
 {[ if (allow_contact_removal) { ]}