diff --git a/clientapp/models/message.js b/clientapp/models/message.js index 8124fca..57261ea 100644 --- a/clientapp/models/message.js +++ b/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, '' + existing + ''); + } + 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; diff --git a/clientapp/models/muc.js b/clientapp/models/muc.js index d2a2ec5..9c91939 100644 --- a/clientapp/models/muc.js +++ b/clientapp/models/muc.js @@ -61,22 +61,33 @@ 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++; - app.notifications.create(this.displayName, { - body: message.body, - icon: this.avatar, - tag: this.id, - onclick: _.bind(app.navigate, app, '/groupchat/' + this.jid) - }); + if (message.mentions) { + app.notifications.create(this.displayName, { + body: message.body, + icon: this.avatar, + tag: this.id, + 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; } diff --git a/clientapp/pages/chat.js b/clientapp/pages/chat.js index 18d4005..40bba31 100644 --- a/clientapp/pages/chat.js +++ b/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); diff --git a/clientapp/pages/groupchat.js b/clientapp/pages/groupchat.js index 8377998..aa7bc3a 100644 --- a/clientapp/pages/groupchat.js +++ b/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' }, diff --git a/clientapp/templates.js b/clientapp/templates.js index cb0f784..91aca71 100644 --- a/clientapp/templates.js +++ b/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('
  • ' + jade.escape(null == (jade.interp = contact.displayName) ? "" : jade.interp) + '
    ' + jade.escape(null == (jade.interp = contact.unreadCount) ? "" : jade.interp) + "
  • "); + buf.push('
  • ' + jade.escape(null == (jade.interp = contact.displayName) ? "" : jade.interp) + '
    ' + jade.escape(null == (jade.interp = contact.unreadCount) ? "" : jade.interp) + "
  • "); } 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('

    '); + buf.push('

    '); } return buf.join(""); }; diff --git a/clientapp/templates/includes/mucListItem.jade b/clientapp/templates/includes/mucListItem.jade index 83b778a..7983741 100644 --- a/clientapp/templates/includes/mucListItem.jade +++ b/clientapp/templates/includes/mucListItem.jade @@ -1,4 +1,3 @@ li.contact - img.avatar(src=contact.avatar) .name=contact.displayName .unread=contact.unreadCount diff --git a/clientapp/templates/pages/groupchat.jade b/clientapp/templates/pages/groupchat.jade index 0d86005..c38440c 100644 --- a/clientapp/templates/pages/groupchat.jade +++ b/clientapp/templates/pages/groupchat.jade @@ -1,7 +1,6 @@ section.page.chat section.conversation header - img.avatar h1.name .controls button.primary.joinRoom Join diff --git a/public/css/otalk.css b/public/css/otalk.css index d896f8c..01e2cd9 100644 --- a/public/css/otalk.css +++ b/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; diff --git a/public/css/pages/chat.styl b/public/css/pages/chat.styl index 4465cc7..fcc4b00 100644 --- a/public/css/pages/chat.styl +++ b/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%) diff --git a/public/x-manifest.cache b/public/x-manifest.cache index 7fd2e9d..ab8790a 100644 --- a/public/x-manifest.cache +++ b/public/x-manifest.cache @@ -1,5 +1,5 @@ CACHE MANIFEST -# 0.0.1 1387250191209 +# 0.0.1 1387253893324 CACHE: /app.js