diff --git a/clientapp/models/message.js b/clientapp/models/message.js index acc03d2..8124fca 100644 --- a/clientapp/models/message.js +++ b/clientapp/models/message.js @@ -91,9 +91,13 @@ module.exports = HumanModel.define({ } }, processedBody: { - deps: ['body'], + deps: ['body', 'meAction'], fn: function () { - return htmlify.toHTML(this.body); + var body = this.body; + if (this.meAction) { + body = body.substr(4); + } + return htmlify.toHTML(body); } }, partialTemplateHtml: { @@ -125,9 +129,16 @@ module.exports = HumanModel.define({ if (this.pending) res.push('pending'); if (this.delayed) res.push('delayed'); if (this.edited) res.push('edited'); + if (this.meAction) res.push('meAction'); return res.join(' '); } + }, + meAction: { + deps: ['body'], + fn: function () { + return this.body.indexOf('/me') === 0; + } } }, session: { diff --git a/clientapp/models/resource.js b/clientapp/models/resource.js index 568bb7a..b4d6023 100644 --- a/clientapp/models/resource.js +++ b/clientapp/models/resource.js @@ -30,7 +30,7 @@ module.exports = HumanModel.define({ deps: ['discoInfo'], fn: function () { if (!this.discoInfo) return false; - var features = this.discoInfo.features; + var features = this.discoInfo.features || []; if (features.indexOf('urn:xmpp:jingle:1') === -1) { return false; } diff --git a/clientapp/pages/chat.js b/clientapp/pages/chat.js index 40bba31..18d4005 100644 --- a/clientapp/pages/chat.js +++ b/clientapp/pages/chat.js @@ -20,6 +20,7 @@ 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/views/message.js b/clientapp/views/message.js index 1fc0a87..b57d63d 100644 --- a/clientapp/views/message.js +++ b/clientapp/views/message.js @@ -16,7 +16,8 @@ module.exports = HumanView.extend({ receiptReceived: '.message', pending: '.message', delayed: '.message', - edited: '.message' + edited: '.message', + meAction: '.message' }, textBindings: { body: '.body', diff --git a/clientapp/views/mucMessage.js b/clientapp/views/mucMessage.js index cde5750..5c00dd9 100644 --- a/clientapp/views/mucMessage.js +++ b/clientapp/views/mucMessage.js @@ -13,9 +13,10 @@ module.exports = HumanView.extend({ }, classBindings: { mine: '.message', - acked: '.message', + pending: '.message', delayed: '.message', - edited: '.message' + edited: '.message', + meAction: '.message' }, textBindings: { body: '.body', diff --git a/public/css/otalk.css b/public/css/otalk.css index 7c0362f..aa978bd 100644 --- a/public/css/otalk.css +++ b/public/css/otalk.css @@ -1064,7 +1064,7 @@ button.secondary:hover:not(:disabled) { } .messages .message { font-size: 12px; - margin: 0px; + margin: 2px; display: inline-block; padding-right: 11px; min-width: 20px; @@ -1074,7 +1074,7 @@ button.secondary:hover:not(:disabled) { box-sizing: border-box; } .messages .message:not(.mine) { - color: #12acef; + color: #2d2d2d; } .messages .message.mine { background: #fff; @@ -1091,6 +1091,24 @@ button.secondary:hover:not(:disabled) { .messages .message.pending { color: #ababab; } +.messages .message.meAction { + font-style: italic; + color: #ec008c; + background-color: #fce8f1; + padding: 2px; + padding-left: 8px; + border-radius: 2px; +} +.messages .message.meAction:before { + content: '\2022 '; + font-style: normal; +} +.messages .message.meAction .timestamp { + position: relative; + left: -10px; + font-style: normal; + color: #f8bee0; +} .messages .message .body { display: inline; word-break: break-word; diff --git a/public/css/pages/chat.styl b/public/css/pages/chat.styl index ed8dec7..7ac09e1 100644 --- a/public/css/pages/chat.styl +++ b/public/css/pages/chat.styl @@ -172,7 +172,7 @@ .message font-size: $font-size-small - margin: 0px + margin: 2px display: inline-block padding-right: 11px min-width: 20px @@ -180,7 +180,7 @@ borderbox() &:not(.mine) - color: $blue + color: $gray-dark &.mine background: white @@ -199,6 +199,24 @@ &.pending color: lighten($gray, 50%) + &.meAction + font-style: italic + color: $pink + background-color: $pink-lighter + padding: 2px + padding-left: 8px + border-radius: 2px + + &:before + content: '\2022 ' + font-style: normal + + .timestamp + position: relative + left: -10px + font-style: normal + color: $pink-light + .body display: inline word-break: break-word diff --git a/public/x-manifest.cache b/public/x-manifest.cache index 1e857af..f70b5e9 100644 --- a/public/x-manifest.cache +++ b/public/x-manifest.cache @@ -1,5 +1,5 @@ CACHE MANIFEST -# 0.0.1 1387217113439 +# 0.0.1 1387232708806 CACHE: /app.js