From 877d35ecb4208942c155f9ae36ec73ab2dad8fe7 Mon Sep 17 00:00:00 2001
From: Lance Stout <lancestout@gmail.com>
Date: Mon, 16 Dec 2013 14:28:13 -0800
Subject: [PATCH] Add styling for /me messages

---
 clientapp/models/message.js   | 15 +++++++++++++--
 clientapp/models/resource.js  |  2 +-
 clientapp/pages/chat.js       |  1 +
 clientapp/views/message.js    |  3 ++-
 clientapp/views/mucMessage.js |  5 +++--
 public/css/otalk.css          | 22 ++++++++++++++++++++--
 public/css/pages/chat.styl    | 22 ++++++++++++++++++++--
 public/x-manifest.cache       |  2 +-
 8 files changed, 61 insertions(+), 11 deletions(-)

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