Refine styles

clientapp/helpers/xmppEventHandlers.js

@@ -4,7 +4,7 @@
 var _ = require('underscore');
 var async = require('async');
 var crypto = require('crypto');
-var log = require('andlog');
+var bows = require('bows');
 var uuid = require('node-uuid');
 var HumanModel = require('human-model');
 var Contact = require('../models/contact');
@@ -13,11 +13,16 @@ var Message = require('../models/message');
 var Call = require('../models/call');
 
 
+var log = bows('Otalk');
+var ioLogIn = bows('<< in');
+var ioLogOut = bows('>> out');
+
+
 var discoCapsQueue = async.queue(function (pres, cb) {
     var jid = pres.from;
     var caps = pres.caps;
 
-    log.debug('Checking storage for ' + caps.ver);
+    log.info('Checking storage for ' + caps.ver);
 
     var contact = me.getContact(jid);
     var resource = null;
@@ -26,28 +31,26 @@ var discoCapsQueue = async.queue(function (pres, cb) {
     }
 
     app.storage.disco.get(caps.ver, function (err, existing) {
-        log.debug(err, existing);
         if (existing) {
-            log.debug('Already found info for ' + caps.ver);
+            log.info('Already found info for ' + caps.ver);
             if (resource) resource.discoInfo = existing;
             return cb();
         }
-        log.debug('getting info for ' + caps.ver + ' from ' + jid);
+        log.info('getting info for ' + caps.ver + ' from ' + jid);
         client.getDiscoInfo(jid, caps.node + '#' + caps.ver, function (err, result) {
-            log.debug(caps.ver, err, result);
             if (err) {
-                log.debug('Couldnt get info for ' + caps.ver);
+                log.error('Couldnt get info for ' + caps.ver);
                 return cb();
             }
             if (client.verifyVerString(result.discoInfo, caps.hash, caps.ver)) {
-                log.debug('Saving info for ' + caps.ver);
+                log.info('Saving info for ' + caps.ver);
                 var data = result.discoInfo.toJSON();
                 app.storage.disco.add(caps.ver, data, function () {
                     if (resource) resource.discoInfo = existing;
                     cb();
                 });
             } else {
-                log.debug('Couldnt verify info for ' + caps.ver + ' from ' + jid);
+                log.info('Couldnt verify info for ' + caps.ver + ' from ' + jid);
                 cb();
             }
         });
@@ -58,9 +61,10 @@ var discoCapsQueue = async.queue(function (pres, cb) {
 module.exports = function (client, app) {
 
     client.on('*', function (name, data) {
-        log.debug(name, data);
+        if (name === 'raw:incoming') {
-        if (name === 'raw:outgoing') {
+            ioLogIn.debug(data.toString());
-            log.debug(data.toString());
+        } else if (name === 'raw:outgoing') {
+            ioLogOut.debug(data.toString());
         }
     });
 
@@ -93,7 +97,7 @@ module.exports = function (client, app) {
     });
 
     client.on('auth:failed', function () {
-        log.debug('auth failed');
+        log.warning('auth failed');
         window.location = '/login';
     });
 
@@ -287,6 +291,13 @@ module.exports = function (client, app) {
         }
     });
 
+    client.on('groupchat:subject', function (msg) {
+        var contact = me.getContact(msg.from, msg.to);
+        if (contact) {
+            contact.subject = msg.subject;
+        }
+    });
+
     client.on('replace', function (msg) {
         msg = msg.toJSON();
         msg.mid = msg.id;
@@ -336,7 +347,7 @@ module.exports = function (client, app) {
 
     client.on('disco:caps', function (pres) {
         if (pres.caps.hash) {
-            log.debug('Caps from ' + pres.from + ' ver: ' + pres.caps.ver);
+            log.info('Caps from ' + pres.from + ' ver: ' + pres.caps.ver);
             discoCapsQueue.push(pres);
         }
     });

clientapp/models/muc.js

@@ -4,6 +4,7 @@
 var _ = require('underscore');
 var async = require('async');
 var uuid = require('node-uuid');
+var htmlify = require('../helpers/htmlify');
 var HumanModel = require('human-model');
 var Resources = require('./resources');
 var Messages = require('./messages');
@@ -25,6 +26,7 @@ module.exports = HumanModel.define({
         jid: 'object'
     },
     session: {
+        subject: 'string',
         activeContact: ['bool', true, false],
         lastInteraction: 'data',
         lastSentMessage: 'object',
@@ -47,6 +49,12 @@ module.exports = HumanModel.define({
                 return '';
             }
         },
+        displaySubject: {
+            deps: ['subject'],
+            fn: function () {
+                return htmlify.toHTML(this.subject);
+            }
+        },
         hasUnread: {
             deps: ['unreadCount'],
             fn: function () {

clientapp/pages/chat.js

@@ -36,10 +36,14 @@ module.exports = BasePage.extend(chatHelpers).extend({
     },
     textBindings: {
         displayName: 'header .name',
-        formattedTZO: 'header .tzo'
+        formattedTZO: 'header .tzo',
+        status: 'header .status'
     },
     classBindings: {
-        onCall: '.messages'
+        chatState: 'header',
+        idle: 'header',
+        show: 'header',
+        onCall: '.conversation'
     },
     show: function (animation) {
         BasePage.prototype.show.apply(this, [animation]);
@@ -104,10 +108,10 @@ module.exports = BasePage.extend(chatHelpers).extend({
         });
         this.scrollIfPinned();
     },
-    handleWindowResize: function () {
+    handleWindowResize: _.debounce(function () {
         this.scrollIfPinned();
         this.resizeInput();
-    },
+    }),
     handleKeyDown: function (e) {
         if (e.which === 13 && !e.shiftKey) {
             this.sendChat();

clientapp/pages/groupchat.js

@@ -31,7 +31,8 @@ module.exports = BasePage.extend(chatHelpers).extend({
         joined: '.controls'
     },
     textBindings: {
-        displayName: 'header .name'
+        displayName: 'header .name',
+        subject: 'header .status'
     },
     show: function (animation) {
         BasePage.prototype.show.apply(this, [animation]);

clientapp/templates.js

@@ -194,7 +194,7 @@ exports.misc.growlMessage = function anonymous(locals) {
 exports.pages.chat = 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="tzo"></div><button class="primary small call">call</button><div class="activeCall"><video autoplay="autoplay" class="remote"></video><video autoplay="autoplay" muted="muted" class="local"></video><aside class="button-wrap"><button class="end primary">End</button><div class="button-group outlined"><button class="mute">Mute</button><button class="unmute">Unmute</button></div></aside></div></header><ul class="messages scroll-container"></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="status"></div><div class="idleTime"></div><div class="tzo"></div><button class="primary small call">call</button><div class="activeCall"><video autoplay="autoplay" class="remote"></video><video autoplay="autoplay" muted="muted" class="local"></video><aside class="button-wrap"><button class="end primary">End</button><div class="button-group outlined"><button class="mute">Mute</button><button class="unmute">Unmute</button></div></aside></div></header><ul class="messages scroll-container"></ul><div class="chatBox"><form><textarea name="chatInput" type="text" placeholder="Send a message..." autocomplete="off"></textarea></form></div></section></section>');
     }
     return buf.join("");
 };
@@ -203,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><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 class="online"><h1 class="name"></h1><div class="status"></div><div class="controls"><button class="primary small joinRoom">Join</button><button class="secondary small 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/pages/chat.jade

@@ -1,8 +1,9 @@
 section.page.chat
   section.conversation
     header
-      img.avatar
       h1.name
+      .status
+      .idleTime
       .tzo
       button.primary.small.call call
       .activeCall

clientapp/templates/pages/groupchat.jade

@@ -1,10 +1,11 @@
 section.page.chat
   section.conversation
-    header
+    header.online
       h1.name
+      .status
       .controls
-        button.primary.joinRoom Join
+        button.primary.small.joinRoom Join
-        button.secondary.leaveRoom Leave
+        button.secondary.small.leaveRoom Leave
     ul.messages
     .chatBox
       form

package.json

@@ -7,7 +7,7 @@
         "url": "git@github.com:andyet/otalk.git"
     },
     "dependencies": {
-        "andlog": "0.0.4",
+        "bows": "",
         "async": "0.2.9",
         "backbone": "1.0.0",
         "express": "3.3.7",
@@ -22,7 +22,7 @@
         "human-view": "1.2.0",
         "templatizer": "0.1.2",
         "underscore": "1.5.1",
-        "stanza.io": "2.9.3",
+        "stanza.io": "2.9.4",
         "notify.js": "0.0.3",
         "wildemitter": "0.0.5",
         "attachmediastream": "1.0.1",

public/css/otalk.css

@@ -878,7 +878,8 @@ button.secondary:hover:not(:disabled) {
   box-sizing: border-box;
 }
 .conversation header {
-  padding: 5px;
+  padding: 0px;
+  padding-left: 8px;
   border-bottom: 2px solid #eee;
   position: fixed;
   right: 0px;
@@ -889,6 +890,59 @@ button.secondary:hover:not(:disabled) {
   box-sizing: border-box;
   background: #f7f7f7;
 }
+.conversation header.online:not(.idle):before,
+.conversation header.chat:before,
+.conversation header.dnd:before,
+.conversation header.away:before,
+.conversation header.xa:before {
+  content: '';
+  position: absolute;
+  top: 50%;
+  height: 8px;
+  width: 8px;
+  margin-top: -4px;
+  -moz-border-radius: 10px;
+  -webkit-border-radius: 10px;
+  -khtml-border-radius: 10px;
+  -o-border-radius: 10px;
+  -border-radius: 10px;
+  border-radius: 10px;
+}
+.conversation header.online:before,
+.conversation header.chat:before {
+  background: #43bb6e;
+}
+.conversation header.dnd:before {
+  background: #de0a32;
+}
+.conversation header.away:before,
+.conversation header.xa:before {
+  background: #f18902;
+}
+.conversation header.offline:not(:hover) .name {
+  color: #515151;
+}
+.conversation header.offline:not(:hover) .status {
+  color: #2f2f2f;
+}
+.conversation header.offline:not(:hover) .avatar {
+  opacity: 0.25;
+}
+.conversation header.composing:before {
+  animation: pulsate 1.5s infinite ease-in;
+  -webkit-animation: pulsate 1.5s infinite ease-in;
+  -moz-animation: pulsate 1.5s infinite ease-in;
+}
+.conversation header.paused:before {
+  background: #878787;
+}
+.conversation header.idle {
+  padding-right: 15px;
+}
+.conversation header.idle .name {
+  color: #878787;
+  max-width: 60%;
+}
 .conversation header .controls {
   float: right;
 }
@@ -898,10 +952,13 @@ button.secondary:hover:not(:disabled) {
 .conversation header .controls .joinRoom {
   display: block;
 }
-.conversation header .joined .joinRoom {
+.conversation header .controls button {
+  margin-top: 4px;
+}
+.conversation header .controls.joined .joinRoom {
   display: none;
 }
-.conversation header .joined .leaveRoom {
+.conversation header .controls.joined .leaveRoom {
   display: block;
 }
 .conversation header .avatar {
@@ -924,17 +981,33 @@ button.secondary:hover:not(:disabled) {
   float: left;
 }
 .conversation header .name {
-  margin: 15px;
+  margin: 10px;
+  margin-left: 15px;
+  margin-right: 5px;
   padding: 0px;
-  margin-left: 45px;
   font-size: 14px;
   line-height: 14px;
   max-width: 50%;
 }
+.conversation header .status {
+  margin: 10px;
+  margin-left: 0px;
+  padding: 0px;
+  font-size: 14px;
+  line-height: 14px;
+  max-width: 75%;
+  float: left;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.conversation header .status:not(:empty):before {
+  content: '- ';
+}
 .conversation header .tzo:not(:empty) {
   position: absolute;
   right: 15px;
-  top: 28px;
+  top: 18px;
   height: 20px;
   margin-top: -10px;
   padding: 0 5px;
@@ -944,15 +1017,18 @@ button.secondary:hover:not(:disabled) {
   -o-border-radius: 3px;
   -border-radius: 3px;
   border-radius: 3px;
-  text-transform: uppercase;
   font-size: 12px;
   font-weight: 800;
   line-height: 20px;
   color: #898989;
   background: #eee;
 }
+.conversation header .tzo:not(:empty):before {
+  content: 'Current Time: ';
+  font-weight: bold;
+}
 .conversation header .call {
-  margin-top: 9px;
+  margin-top: 4px;
   text-transform: capitalize;
 }
 .conversation header .activeCall {
@@ -996,7 +1072,7 @@ button.secondary:hover:not(:disabled) {
   position: absolute;
   top: 0px;
   bottom: 0px;
-  padding-top: 55px;
+  padding-top: 35px;
   padding-bottom: 55px;
   width: 100%;
   -moz-box-sizing: border-box;

public/css/pages/chat.styl

@@ -16,7 +16,8 @@
   borderbox()
 
   header
-    padding: 5px
+    padding: 0px
+    padding-left: 8px
     border-bottom: 2px solid $gray-lighter
     position: fixed
     right: 0px
@@ -25,6 +26,56 @@
     borderbox()
     background: lighten($gray-light, 93%)
 
+    &.online:not(.idle), &.chat, &.dnd, &.away, &.xa
+      &:before
+        content: ''
+        position: absolute
+        top: 50%
+        height: 8px
+        width: 8px
+        margin-top: -4px
+        roundall(10px)
+
+    &.online,
+    &.chat
+      &:before
+        background: $green
+
+    &.dnd
+      &:before
+        background: $red
+
+    &.away,
+    &.xa
+      &:before
+        background: $orange
+
+    &.offline:not(:hover)
+      .name
+        color: darken($gray-light, 40%)
+
+      .status
+        color: darken($gray-light, 65%)
+
+      .avatar
+        opacity: .25
+
+    &.composing
+      &:before
+        animation: pulsate 1.5s infinite ease-in
+        -webkit-animation: pulsate 1.5s infinite ease-in
+        -moz-animation: pulsate 1.5s infinite ease-in
+
+    &.paused
+      &:before
+        background: $gray-light
+
+    &.idle
+      padding-right: 15px
+      .name
+        color: $gray-light
+        max-width: 60%
+
     .controls
       float: right
 
@@ -34,12 +85,15 @@
       .joinRoom
         display: block
 
-    .joined
+      button
-      .joinRoom
+        margin-top: 4px
-        display: none
 
-      .leaveRoom
+      &.joined
-        display: block
+        .joinRoom
+          display: none
+
+        .leaveRoom
+          display: block
 
     .avatar
       margin-right: 5px
@@ -53,30 +107,49 @@
       float: left
 
     .name
-      margin: 15px
+      margin: 10px
+      margin-left: 15px
+      margin-right: 5px
       padding: 0px
-      margin-left: 45px
       font-size: $font-size-base
       line-height: 14px
       max-width: 50%
 
+    .status
+      margin: 10px
+      margin-left: 0px
+      padding: 0px
+      font-size: $font-size-base
+      line-height: 14px
+      max-width: 75%
+      float: left
+      overflow: hidden
+      text-overflow: ellipsis
+      white-space: nowrap
+
+      &:not(:empty):before
+        content: '- '
+
     .tzo:not(:empty)
       position: absolute
       right: 15px
-      top: 28px
+      top: 18px
       height: 20px
       margin-top: -10px
       padding: 0 5px
       roundall(3px)
-      text-transform: uppercase
       font-size: $font-size-small
       font-weight: $font-weight-bold
       line-height: 20px
       color: lighten($gray, 30%)
       background: $gray-lighter
 
+      &:before
+        content: 'Current Time: '
+        font-weight: bold
+
     .call
-      margin-top: 9px
+      margin-top: 4px
       text-transform: capitalize
 
     .activeCall
@@ -121,7 +194,7 @@
   position: absolute
   top: 0px
   bottom: 0px
-  padding-top: 55px
+  padding-top: 35px
   padding-bottom: 55px
   width: 100%
   borderbox()

public/x-manifest.cache

@@ -1,5 +1,5 @@
 CACHE MANIFEST
-# 0.0.1 1387497051758
+# 0.0.1 1387522881010
 
 CACHE:
 /app.js