Clean up, add support for mention highlights in MUC

clientapp/models/message.js

@@ -91,13 +91,18 @@ module.exports = HumanModel.define({
             }
         },
         processedBody: {
-            deps: ['body', 'meAction'],
+            deps: ['body', 'meAction', 'mentions'],
             fn: function () {
                 var body = this.body;
                 if (this.meAction) {
                     body = body.substr(4);
                 }
-                return htmlify.toHTML(body);
+                body = htmlify.toHTML(body);
+                if (this.mentions) {
+                    var existing = htmlify.toHTML(this.mentions);
+                    body = body.replace(existing, '<span class="mention">' + existing + '</span>');
+                }
+                return body;
             }
         },
         partialTemplateHtml: {
@@ -146,7 +151,8 @@ module.exports = HumanModel.define({
         _mucMine: 'bool',
         receiptReceived: ['bool', true, false],
         edited: ['bool', true, false],
-        delay: 'object'
+        delay: 'object',
+        mentions: ['string', false, '']
     },
     correct: function (msg) {
         if (this.from.full !== msg.from.full) return false;

clientapp/models/muc.js

@@ -61,8 +61,18 @@ module.exports = HumanModel.define({
     addMessage: function (message, notify) {
         message.owner = me.jid.bare;
 
-        if (notify && (!this.activeContact || (this.activeContact && !app.state.focused)) && message.from.resource !== this.nick) {
+        var mine = message.from.resource === this.nick;
+
+        if (mine) {
+            message._mucMine = true;
+        }
+        if (!mine && message.body.toLowerCase().indexOf(this.nick.toLowerCase()) >= 0) {
+            message.mentions = this.nick;
+        }
+
+        if (notify && (!this.activeContact || (this.activeContact && !app.state.focused)) && !mine) {
             this.unreadCount++;
+            if (message.mentions) {
                 app.notifications.create(this.displayName, {
                     body: message.body,
                     icon: this.avatar,
@@ -70,13 +80,14 @@ module.exports = HumanModel.define({
                     onclick: _.bind(app.navigate, app, '/groupchat/' + this.jid)
                 });
             }
+        }
 
         message.acked = true;
 
         this.messages.add(message);
-        if (message.from.resource === this.nick) {
-            message = this.messages.get(message.id); // Grab the existing message object that was updated
-            message._mucMine = true;
+        if (mine) {
+            // Grab and save the existing message object that was updated
+            message = this.messages.get(message.id);
             this.lastSentMessage = message;
         }
 

clientapp/pages/chat.js

@@ -20,7 +20,6 @@ module.exports = BasePage.extend(chatHelpers).extend({
         this.listenTo(this, 'pageunloaded', this.handlePageUnloaded);
 
         this.listenTo(this.model.messages, 'change:body', this.refreshModel);
-        this.listenTo(this.model.messages, 'change:meAction', this.refreshModel);
         this.listenTo(this.model.messages, 'change:edited', this.refreshModel);
         this.listenTo(this.model.messages, 'change:pending', this.refreshModel);
 

clientapp/pages/groupchat.js

@@ -20,7 +20,6 @@ module.exports = BasePage.extend(chatHelpers).extend({
         this.listenTo(this.model.messages, 'change:body', this.refreshModel);
         this.listenTo(this.model.messages, 'change:edited', this.refreshModel);
         this.listenTo(this.model.messages, 'change:pending', this.refreshModel);
-        this.listenTo(this.model.messages, 'change:mine', this.refreshModel);
 
         this.render();
     },
@@ -33,9 +32,6 @@ module.exports = BasePage.extend(chatHelpers).extend({
     classBindings: {
         joined: '.controls'
     },
-    srcBindings: {
-        avatar: 'header .avatar'
-    },
     textBindings: {
         displayName: 'header .name'
     },

clientapp/templates.js

@@ -120,12 +120,7 @@ exports.includes.mucBareMessage = function anonymous(locals) {
 exports.includes.mucListItem = function anonymous(locals) {
     var buf = [];
     with (locals || {}) {
-        buf.push('<li class="contact"><img' + jade.attrs({
-            src: contact.avatar,
-            "class": "avatar"
-        }, {
-            src: true
-        }) + '/><div class="name">' + jade.escape(null == (jade.interp = contact.displayName) ? "" : jade.interp) + '</div><div class="unread">' + jade.escape(null == (jade.interp = contact.unreadCount) ? "" : jade.interp) + "</div></li>");
+        buf.push('<li class="contact"><div class="name">' + jade.escape(null == (jade.interp = contact.displayName) ? "" : jade.interp) + '</div><div class="unread">' + jade.escape(null == (jade.interp = contact.unreadCount) ? "" : jade.interp) + "</div></li>");
     }
     return buf.join("");
 };
@@ -208,7 +203,7 @@ exports.pages.chat = function anonymous(locals) {
 exports.pages.groupchat = function anonymous(locals) {
     var buf = [];
     with (locals || {}) {
-        buf.push('<section class="page chat"><section class="conversation"><header><img class="avatar"/><h1 class="name"></h1><div class="controls"><button class="primary joinRoom">Join</button><button class="secondary leaveRoom">Leave</button></div></header><ul class="messages"></ul><div class="chatBox"><form><textarea name="chatInput" type="text" placeholder="Send a message..." autocomplete="off"></textarea></form></div></section></section>');
+        buf.push('<section class="page chat"><section class="conversation"><header><h1 class="name"></h1><div class="controls"><button class="primary joinRoom">Join</button><button class="secondary leaveRoom">Leave</button></div></header><ul class="messages"></ul><div class="chatBox"><form><textarea name="chatInput" type="text" placeholder="Send a message..." autocomplete="off"></textarea></form></div></section></section>');
     }
     return buf.join("");
 };

clientapp/templates/includes/mucListItem.jade

@@ -1,4 +1,3 @@
 li.contact
-  img.avatar(src=contact.avatar)
   .name=contact.displayName
   .unread=contact.unreadCount

clientapp/templates/pages/groupchat.jade

@@ -1,7 +1,6 @@
 section.page.chat
   section.conversation
     header
-      img.avatar
       h1.name
       .controls
         button.primary.joinRoom Join

public/css/otalk.css

@@ -1046,7 +1046,7 @@ button.secondary:hover:not(:disabled) {
   font-size: 12px;
   font-weight: bold;
   color: #565656;
-  padding: 10px;
+  padding: 5px;
   text-align: right;
   background-color: #f7f7f7;
   border-top: 1px solid #e1e1e1;
@@ -1056,10 +1056,8 @@ button.secondary:hover:not(:disabled) {
   padding-left: 10px;
 }
 .messages .messageWrapper {
-  padding-left: 50px;
   display: table-cell;
-  vertical-align: middle;
-  padding: 10px;
+  padding: 5px;
   border-top: 1px solid #eee;
   width: 99%;
 }
@@ -1094,8 +1092,8 @@ button.secondary:hover:not(:disabled) {
 }
 .messages .message.meAction {
   font-style: italic;
-  color: #ec008c;
-  background-color: #fce8f1;
+  color: #12acef;
+  background-color: #e7f7fd;
   padding: 2px;
   padding-left: 8px;
   border-radius: 2px;
@@ -1108,12 +1106,20 @@ button.secondary:hover:not(:disabled) {
   position: relative;
   left: -10px;
   font-style: normal;
-  color: #f8bee0;
+  color: #88d5f7;
 }
 .messages .message .body {
   display: inline;
   word-break: break-word;
 }
+.messages .message .body .mention {
+  color: #ec008c;
+  background-color: #fce8f1;
+  padding: 1px;
+  font-weight: bold;
+  border-radius: 4px;
+  border: 1px solid #ee7db0;
+}
 .messages .message .timestamp {
   font-size: 10px;
   color: #88d5f7;

public/css/pages/chat.styl

@@ -155,7 +155,7 @@
     font-size: 12px
     font-weight: bold
     color: $gray
-    padding: 10px
+    padding: 5px
     text-align: right
     background-color: #f7f7f7
     border-top: 1px solid #e1e1e1
@@ -165,10 +165,8 @@
       padding-left: 10px
 
   .messageWrapper
-    padding-left: 50px
     display: table-cell
-    vertical-align: middle
-    padding: 10px
+    padding: 5px
     border-top: 1px solid #eee
     width: 99%
 
@@ -203,8 +201,8 @@
 
     &.meAction
       font-style: italic
-      color: $pink
-      background-color: $pink-lighter
+      color: $blue
+      background-color: $blue-lighter
       padding: 2px
       padding-left: 8px
       border-radius: 2px
@@ -217,12 +215,20 @@
         position: relative
         left: -10px
         font-style: normal
-        color: $pink-light
+        color: $blue-light
 
     .body
       display: inline
       word-break: break-word
 
+      .mention
+        color: $pink
+        background-color: $pink-lighter
+        padding: 1px
+        font-weight: bold
+        border-radius: 4px
+        border: 1px solid darken($pink-lighter, 25%)
+
     .timestamp
       font-size: $font-size-smaller
       color: lighten($blue, 50%)

public/x-manifest.cache

@@ -1,5 +1,5 @@
 CACHE MANIFEST
-# 0.0.1 1387250191209
+# 0.0.1 1387253893324
 
 CACHE:
 /app.js