Add styling for /me messages

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: {

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;
                 }

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);
 

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',

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',

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;

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

public/x-manifest.cache

@@ -1,5 +1,5 @@
 CACHE MANIFEST
-# 0.0.1 1387217113439
+# 0.0.1 1387232708806
 
 CACHE:
 /app.js