Unread chat messages now appear on the minimized chat view.

converse.js

@@ -942,17 +942,6 @@
                 this.scrollDown();
             },
 
-            updateUnreadMessagesCounter: function () {
-                /* If the chatbox is minimized, we show a counter with the
-                 * number of unread messages.
-                 */
-                var $count = this.$el.find('.chat-head-message-count');
-                var count = parseInt($count.data('count') || 0, 10) + 1;
-                $count.html(count).data('count', count);
-                if (!$count.is(':visible')) { $count.show('fast'); }
-                return this;
-            },
-
             clearChatRoomMessages: function (ev) {
                 ev.stopPropagation();
                 var result = confirm(__("Are you sure you want to clear the messages from this room?"));
@@ -987,9 +976,6 @@
                     'extra_classes': msg_dict.delayed && 'delayed' || ''
                 });
                 $content.append($(message).children('.chat-message-content').first().text(text).addHyperlinks().addEmoticons().parent());
-                if (this.model.get('minimized') && (!msg_time.isBefore(this.model.get('time_minimized')))) {
-                    this.updateUnreadMessagesCounter();
-                }
                 this.scrollDown();
             },
 
@@ -2609,18 +2595,45 @@
                 'click .restore-chat': 'restore'
             },
 
+            initialize: function () {
+                this.model.messages.on('add', function (msg) {
+                    this.updateUnreadMessagesCounter(_.clone(msg.attributes));
+                }, this);
+                this.model.on('showSentOTRMessage', this.updateUnreadMessagesCounter, this);
+                this.model.on('showReceivedOTRMessage', this.updateUnreadMessagesCounter, this);
+                this.model.on('change:minimized', this.clearUnreadMessagesCounter, this);
+            },
+
             render: function () {
                 var data = this.model.toJSON();
                 if (this.model.get('chatroom')) {
-                    data['title'] = this.model.get('name');
+                    data.title = this.model.get('name');
                     this.$el.addClass('chat-head-chatroom');
                 } else {
-                    data['title'] = this.model.get('fullname');
+                    data.title = this.model.get('fullname');
                     this.$el.addClass('chat-head-chatbox');
                 }
                 return this.$el.html(converse.templates.trimmed_chat(data));
             },
 
+            clearUnreadMessagesCounter: function () {
+                if (!this.model.get('minimized')) {
+                    this.$el.find('.chat-head-message-count').html(0).data('count', 0).hide();
+                }
+            },
+
+            updateUnreadMessagesCounter: function (msg_dict) {
+                var count, $count;
+                var msg_time = (typeof msg_dict === 'object' && moment(msg_dict.time)) || moment;
+                if (this.model.get('minimized') && (!msg_time.isBefore(this.model.get('time_minimized')))) {
+                    $count = this.$el.find('.chat-head-message-count');
+                    count = parseInt($count.data('count') || 0, 10) + 1;
+                    $count.html(count).data('count', count);
+                    if (!$count.is(':visible')) { $count.show('fast'); }
+                }
+                return this;
+            },
+
             close: function (ev) {
                 if (ev && ev.preventDefault) {
                     ev.preventDefault();

css/converse.css

@@ -841,8 +841,8 @@ dl.add-converse-contact {
   text-shadow: 1px 1px 0 #ccc;
   color: darkred;
   border-radius: 20%;
-  padding: 1px 3px;
-  font-size: 13px;
+  padding: 2px 4px;
+  font-size: 15px;
   text-align: center;
   display: none;
 }

less/converse.less

@@ -920,8 +920,8 @@ dl.add-converse-contact {
     text-shadow: 1px 1px 0 #ccc;
     color: darkred;
     border-radius: 20%;
-    padding: 1px 3px;
-    font-size: 13px;
+    padding: 2px 4px;
+    font-size: 15px;
     text-align: center;
     display: none;
 }

spec/chatbox.js

@@ -488,11 +488,10 @@
                     }, converse));
                     waits(50);
                     runs($.proxy(function () {
-                        var chatview = this.chatboxviews.get(contact_jid);
                         var trimmed_chatboxes = this.chatboxviews.trimmed_chatboxes_view;
                         var trimmedview = trimmed_chatboxes.get(contact_jid);
                         var $count = trimmedview.$el.find('.chat-head-message-count');
-                        expect(chatview.model.get('minimized')).toBeTruthy();
+                        expect(trimmedview.model.get('minimized')).toBeTruthy();
                         expect($count.is(':visible')).toBeTruthy();
                         expect($count.data('count')).toBe(1);
                         expect($count.html()).toBe('1');
@@ -508,21 +507,23 @@
                     }, converse));
                     waits(50);
                     runs($.proxy(function () {
-                        var chatview = this.chatboxviews.get(contact_jid);
-                        var $count = chatview.$el.find('.chat-head-message-count');
-                        expect(chatview.model.get('minimized')).toBeTruthy();
+                        var trimmed_chatboxes = this.chatboxviews.trimmed_chatboxes_view;
+                        var trimmedview = trimmed_chatboxes.get(contact_jid);
+                        var $count = trimmedview.$el.find('.chat-head-message-count');
+                        expect(trimmedview.model.get('minimized')).toBeTruthy();
                         expect($count.is(':visible')).toBeTruthy();
                         expect($count.data('count')).toBe(2);
                         expect($count.html()).toBe('2');
-                        chatview.$el.find('.toggle-chatbox-button').click();
+                        trimmedview.$el.find('.restore-chat').click();
                     }, converse));
                     waits(50);
                     runs($.proxy(function () {
-                        var chatview = this.chatboxviews.get(contact_jid);
-                        var $count = chatview.$el.find('.chat-head-message-count');
-                        expect(chatview.model.get('minimized')).toBeFalsy();
+                        var trimmed_chatboxes = this.chatboxviews.trimmed_chatboxes_view;
+                        var trimmedview = trimmed_chatboxes.get(contact_jid);
+                        var $count = trimmedview.$el.find('.chat-head-message-count');
+                        expect(trimmedview.model.get('minimized')).toBeFalsy();
                         expect($count.is(':visible')).toBeFalsy();
-                        expect($count.data('count')).toBe(0);
+                        expect($count.data('count')).toBeFalsy();
                         expect($count.html()).toBe('0');
                     }, converse));
                 }, converse));