New blue style

clientapp/app.js

@@ -122,6 +122,9 @@ module.exports = {
         // to start with the active class already before appending to DOM.
         container.append(view.render(animation === 'none').el);
         view.show(animation);
+    },
+    serverConfig: function () {
+        return SERVER_CONFIG;
     }
 };
 

clientapp/models/me.js

@@ -63,8 +63,14 @@ module.exports = HumanModel.define({
                 if (!this.stream) return '';
                 return URL.createObjectURL(this.stream);
             }
+        },
+        organization: {
+            deps: ['orga'],
+            fn: function () {
+                return app.serverConfig().name || 'Otalk';
             }
         },
+    },
     setActiveContact: function (jid) {
         var prev = this.getContact(this._activeContact);
         if (prev) {
@@ -125,6 +131,7 @@ module.exports = HumanModel.define({
 
         app.storage.profiles.get(this.jid.bare, function (err, profile) {
             if (!err) {
+                self.nick = self.jid.local;
                 self.status = profile.status;
                 self.avatarID = profile.avatarID;
             }

clientapp/models/muc.js

@@ -16,6 +16,10 @@ module.exports = HumanModel.define({
         if (attrs.jid) {
             this.id = attrs.jid.full;
         }
+        var self = this;
+        this.resources.bind("add remove reset", function(){
+            self.membersCount = self.resources.length;
+        });
     },
     type: 'muc',
     props: {
@@ -32,7 +36,8 @@ module.exports = HumanModel.define({
         lastSentMessage: 'object',
         unreadCount: ['number', false, 0],
         persistent: ['bool', false, false],
-        joined: ['bool', true, false]
+        joined: ['bool', true, false],
+        membersCount: ['number', false, 0],
     },
     derived: {
         displayName: {
@@ -52,7 +57,7 @@ module.exports = HumanModel.define({
                     else
                       return '99+'
                 }
-                return '0';
+                return '';
             }
         },
         displaySubject: {

clientapp/pages/chat.js

@@ -29,7 +29,6 @@ module.exports = BasePage.extend({
     events: {
         'keydown textarea': 'handleKeyDown',
         'keyup textarea': 'handleKeyUp',
-        'click .remove': 'handleRemoveClick',
         'click .call': 'handleCallClick',
         'click .accept': 'handleAcceptClick',
         'click .end': 'handleEndClick',
@@ -46,8 +45,8 @@ module.exports = BasePage.extend({
     },
     classBindings: {
         chatState: 'header',
-        idle: 'header',
+        idle: '.user_presence',
-        show: 'header',
+        show: '.user_presence',
         onCall: '.conversation'
     },
     show: function (animation) {
@@ -76,7 +75,7 @@ module.exports = BasePage.extend({
         this.listenTo(this.model.messages, 'add', this.handleChatAdded);
         this.listenToAndRun(this.model, 'change:jingleResources', this.handleJingleResourcesChanged);
 
-        $(window).on('resize', _.bind(this.resizeInput, this));
+        //$(window).on('resize', _.bind(this.resizeInput, this));
 
         this.registerBindings(me, {
             srcBindings: {
@@ -88,11 +87,7 @@ module.exports = BasePage.extend({
     },
     handlePageLoaded: function () {
         this.staydown.checkdown();
-        this.resizeInput();
+        //this.resizeInput();
-    },
-    handleRemoveClick: function (e) {
-      me.removeContact(this.model.jid);
-      app.navigate('/');
     },
     handleCallClick: function (e) {
         e.preventDefault();
@@ -102,6 +97,7 @@ module.exports = BasePage.extend({
     renderCollection: function () {
         var self = this;
         this.$messageList.empty();
+        this.lastDate = '';
         this.model.messages.each(function (model, i) {
             self.appendModel(model);
         });
@@ -133,7 +129,7 @@ module.exports = BasePage.extend({
         }
     },
     handleKeyUp: function (e) {
-        this.resizeInput();
+        //this.resizeInput();
         if (this.typing && this.$chatInput.val().length === 0) {
             this.typing = false;
             this.$chatInput.removeClass('typing');
@@ -215,10 +211,16 @@ module.exports = BasePage.extend({
         this.$('button.call').prop('disabled', !resources.length);
     },
     appendModel: function (model, preload) {
-        var self = this;
-        var isGrouped = model.shouldGroupWith(this.lastModel);
         var newEl, first, last;
 
+        var messageDay = Date.create(model.timestamp).format('{month} {ord}, {yyyy}');
+        if (messageDay !== this.lastDate) {
+            var dayDivider = $(templates.includes.dayDivider({day_name: messageDay}));
+            this.staydown.append(dayDivider[0]);
+            this.lastDate = messageDay;
+        }
+
+        var isGrouped = model.shouldGroupWith(this.lastModel);
         if (isGrouped) {
             newEl = $(model.partialTemplateHtml);
             last = this.$messageList.find('li').last();

clientapp/pages/groupchat.js

@@ -28,18 +28,18 @@ module.exports = BasePage.extend({
     events: {
         'keydown textarea': 'handleKeyDown',
         'keyup textarea': 'handleKeyUp',
-        'click .joinRoom': 'handleJoin',
-        'click .leaveRoom': 'handleLeave',
         'click .status': 'clickStatusChange',
         'blur .status': 'blurStatusChange',
-        'keydown .status': 'keyDownStatusChange'
+        'keydown .status': 'keyDownStatusChange',
+        'click #members_toggle': 'clickMembersToggle'
     },
     classBindings: {
         joined: '.controls'
     },
     textBindings: {
         displayName: 'header .name',
-        subject: 'header .status'
+        subject: 'header .status',
+        membersCount: '#members_toggle_count'
     },
     show: function (animation) {
         BasePage.prototype.show.apply(this, [animation]);
@@ -73,7 +73,7 @@ module.exports = BasePage.extend({
 
         this.listenTo(this.model.messages, 'add', this.handleChatAdded);
 
-        $(window).on('resize', _.bind(this.resizeInput, this));
+        //$(window).on('resize', _.bind(this.resizeInput, this));
 
         this.registerBindings();
 
@@ -81,6 +81,7 @@ module.exports = BasePage.extend({
     },
     renderMessages: function () {
         var self = this;
+        this.lastDate = '';
         this.model.messages.each(function (model, i) {
             self.appendModel(model);
         });
@@ -91,7 +92,7 @@ module.exports = BasePage.extend({
     },
     handlePageLoaded: function () {
         this.staydown.checkdown();
-        this.resizeInput();
+        //this.resizeInput();
     },
     handleKeyDown: function (e) {
         if (e.which === 13 && !e.shiftKey) {
@@ -122,7 +123,7 @@ module.exports = BasePage.extend({
         }
     },
     handleKeyUp: function (e) {
-        this.resizeInput();
+        //this.resizeInput();
         if (this.typing && this.$chatInput.val().length === 0) {
             this.typing = false;
             this.paused = false;
@@ -208,12 +209,6 @@ module.exports = BasePage.extend({
         this.$chatInput.removeClass('editing');
         this.$chatInput.val('');
     },
-    handleJoin: function () {
-        this.model.join();
-    },
-    handleLeave: function () {
-        this.model.leave();
-    },
     clickStatusChange: function (e) {
         tempSubject = e.target.textContent;
     },
@@ -230,11 +225,24 @@ module.exports = BasePage.extend({
             return false;
         }
     },
+    clickMembersToggle: function (e) {
+        var roster = $('.groupRoster');
+        if (roster.css('visibility') == 'hidden')
+            roster.css('visibility', 'visible');
+        else
+            roster.css('visibility', 'hidden');
+    },
     appendModel: function (model, preload) {
-        var self = this;
-        var isGrouped = model.shouldGroupWith(this.lastModel);
         var newEl, first, last;
 
+        var messageDay = Date.create(model.timestamp).format('{month} {ord}, {yyyy}');
+        if (messageDay !== this.lastDate) {
+            var dayDivider = $(templates.includes.dayDivider({day_name: messageDay}));
+            this.staydown.append(dayDivider[0]);
+            this.lastDate = messageDay;
+        }
+
+        var isGrouped = model.shouldGroupWith(this.lastModel);
         if (isGrouped) {
             newEl = $(model.partialTemplateHtml);
             last = this.$messageList.find('li').last();

clientapp/templates.js

@@ -13,7 +13,7 @@ exports.pages = {};
 exports.body = function anonymous(locals) {
     var buf = [];
     with (locals || {}) {
-        buf.push('<body><div id="connectionOverlay"><aside id="connectionStatus" class="box"><p>You\'re currently<strong>disconnected</strong></p><button class="primary reconnect">Reconnect</button></aside></div><div id="updateBar"><p>Update available!</p><button class="primary upgrade">Upgrade</button></div><div id="wrapper"><aside id="menu"><section id="roster"><h1>Roster</h1><input type="text" id="addcontact" class="inline"/><button class="primary small addContact">Add</button><ul id="contactrequests"></ul><nav></nav></section><section id="bookmarks"><h1>Rooms</h1><input type="text" id="joinmuc" class="inline"/><button class="primary small joinMUC">Add</button><nav></nav></section></aside><header id="me"><h1><img class="avatar"/><span class="name"></span><span contenteditable="true" class="status"></span></h1><a href="/" class="button secondary settings"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewbox="0 0 25 25" height="25" width="25"><g transform="scale(0.4)"><path d="M37.418,34.3c-2.1-2.721-2.622-6.352-1.292-9.604c0.452-1.107,1.104-2.1,1.902-2.951 c-0.753-0.877-1.573-1.697-2.507-2.387l-2.609,1.408c-1.05-0.629-2.194-1.112-3.414-1.421l-0.845-2.833 c-0.75-0.112-1.512-0.188-2.287-0.188c-0.783,0-1.54,0.075-2.288,0.188l-0.851,2.833c-1.215,0.309-2.355,0.792-3.41,1.421 l-2.614-1.408c-1.229,0.912-2.318,2-3.228,3.231l1.404,2.612c-0.628,1.053-1.11,2.193-1.419,3.411l-2.832,0.849 c-0.114,0.75-0.187,1.508-0.187,2.287c0,0.778,0.073,1.537,0.187,2.286l2.832,0.848c0.309,1.22,0.791,2.36,1.419,3.413l-1.404,2.61 c0.909,1.231,1.999,2.321,3.228,3.231l2.614-1.406c1.055,0.628,2.195,1.11,3.41,1.42l0.851,2.832 c0.748,0.114,1.505,0.188,2.288,0.188c0.775,0,1.537-0.074,2.287-0.188l0.845-2.832c1.224-0.31,2.364-0.792,3.414-1.42l0.062,0.033 l2.045-3.02L37.418,34.3z M26.367,36.776c-2.777,0-5.027-2.253-5.027-5.027c0-2.775,2.25-5.028,5.027-5.028 c2.774,0,5.024,2.253,5.024,5.028C31.391,34.523,29.141,36.776,26.367,36.776z"></path><path d="M51.762,24.505l-1.125-0.459l-1.451,3.55c-0.814,1.993-2.832,3.054-4.505,2.37l-0.355-0.144 c-1.673-0.686-2.37-2.856-1.558-4.849l1.451-3.551l-1.125-0.46c-2.225,0.608-4.153,2.2-5.092,4.501 c-1.225,2.997-0.422,6.312,1.771,8.436l-2.958,6.812l-2.204,3.249l-0.007,2.281l5.275,2.154l1.593-1.633l0.7-3.861l2.901-6.836 c3.049,0.018,5.947-1.785,7.174-4.779C53.186,28.983,52.924,26.499,51.762,24.505z"></path></g></svg>Settings</a></header></div><main id="pages"></main></body>');
+        buf.push('<body><div id="connectionOverlay"><aside id="connectionStatus" class="box"><p>You\'re currently<strong>disconnected</strong></p><button class="primary reconnect">Reconnect</button></aside></div><div id="updateBar"><p>Update available!</p><button class="primary upgrade">Upgrade</button></div><div id="wrapper"><aside id="menu"><section id="organization"><span id="orga_name"></span></section><section id="bookmarks"><h1>Rooms</h1><nav></nav><input type="text" placeholder="add a room" id="joinmuc" class="inline"/></section><section id="roster"><h1>Direct messages</h1><ul id="contactrequests"></ul><nav></nav><input type="text" placeholder="add a contact" id="addcontact" class="inline"/></section></aside><header id="topbar"><a href="/" class="button secondary settings"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewbox="0 0 25 25" height="25" width="25"><g transform="scale(0.4)"><path d="M37.418,34.3c-2.1-2.721-2.622-6.352-1.292-9.604c0.452-1.107,1.104-2.1,1.902-2.951 c-0.753-0.877-1.573-1.697-2.507-2.387l-2.609,1.408c-1.05-0.629-2.194-1.112-3.414-1.421l-0.845-2.833 c-0.75-0.112-1.512-0.188-2.287-0.188c-0.783,0-1.54,0.075-2.288,0.188l-0.851,2.833c-1.215,0.309-2.355,0.792-3.41,1.421 l-2.614-1.408c-1.229,0.912-2.318,2-3.228,3.231l1.404,2.612c-0.628,1.053-1.11,2.193-1.419,3.411l-2.832,0.849 c-0.114,0.75-0.187,1.508-0.187,2.287c0,0.778,0.073,1.537,0.187,2.286l2.832,0.848c0.309,1.22,0.791,2.36,1.419,3.413l-1.404,2.61 c0.909,1.231,1.999,2.321,3.228,3.231l2.614-1.406c1.055,0.628,2.195,1.11,3.41,1.42l0.851,2.832 c0.748,0.114,1.505,0.188,2.288,0.188c0.775,0,1.537-0.074,2.287-0.188l0.845-2.832c1.224-0.31,2.364-0.792,3.414-1.42l0.062,0.033 l2.045-3.02L37.418,34.3z M26.367,36.776c-2.777,0-5.027-2.253-5.027-5.027c0-2.775,2.25-5.028,5.027-5.028 c2.774,0,5.024,2.253,5.024,5.028C31.391,34.523,29.141,36.776,26.367,36.776z"></path><path d="M51.762,24.505l-1.125-0.459l-1.451,3.55c-0.814,1.993-2.832,3.054-4.505,2.37l-0.355-0.144 c-1.673-0.686-2.37-2.856-1.558-4.849l1.451-3.551l-1.125-0.46c-2.225,0.608-4.153,2.2-5.092,4.501 c-1.225,2.997-0.422,6.312,1.771,8.436l-2.958,6.812l-2.204,3.249l-0.007,2.281l5.275,2.154l1.593-1.633l0.7-3.861l2.901-6.836 c3.049,0.018,5.947-1.785,7.174-4.779C53.186,28.983,52.924,26.499,51.762,24.505z"></path></g></svg>Settings</a></header><main id="pages"></main><div id="footer"><div id="me"><div><img class="avatar"/></div><span class="name"></span><span contenteditable="true" spellcheck="false" class="status"></span></div></div></div></body>');
     }
     return buf.join("");
 };
@@ -37,7 +37,7 @@ exports.includes.bareMessage = function anonymous(locals) {
         }, {
             "class": true,
             id: true
-        }) + '><span class="timestamp">' + jade.escape(null == (jade.interp = message.formattedTime) ? "" : jade.interp) + '</span><p class="body">' + ((jade.interp = message.processedBody) == null ? "" : jade.interp) + "</p>");
+        }) + '><p class="body">' + ((jade.interp = message.processedBody) == null ? "" : jade.interp) + "</p>");
         var urls = message.urls;
         buf.push('<section class="embeds">');
         (function() {
@@ -104,12 +104,7 @@ exports.includes.call = function anonymous(locals) {
 exports.includes.contactListItem = function anonymous(locals) {
     var buf = [];
     with (locals || {}) {
-        buf.push('<li class="contact"><div class="wrap"><img' + jade.attrs({
+        buf.push('<li class="contact joined"><div class="wrap"><i class="remove fa fa-times-circle"></i><i class="presence fa fa-circle"></i><div class="user"><span class="name">' + jade.escape(null == (jade.interp = contact.displayName) ? "" : jade.interp) + '</span><span class="idleTime">' + jade.escape(null == (jade.interp = contact.idleSince) ? "" : jade.interp) + '</span></div><div class="unread">' + jade.escape(null == (jade.interp = contact.unreadCount) ? "" : jade.interp) + "</div></div></li>");
-            src: contact.avatar,
-            "class": "avatar"
-        }, {
-            src: true
-        }) + '/><div class="user"><span class="name">' + jade.escape(null == (jade.interp = contact.displayName) ? "" : jade.interp) + '</span><span class="idleTime">' + jade.escape(null == (jade.interp = contact.idleSince) ? "" : jade.interp) + '</span></div><div class="unread">' + jade.escape(null == (jade.interp = contact.unreadCount) ? "" : jade.interp) + '</div><div class="status">' + jade.escape(null == (jade.interp = contact.status) ? "" : jade.interp) + "</div></div></li>");
     }
     return buf.join("");
 };
@@ -127,7 +122,16 @@ exports.includes.contactListItemResource = function anonymous(locals) {
 exports.includes.contactRequest = function anonymous(locals) {
     var buf = [];
     with (locals || {}) {
-        buf.push('<li><div class="jid"></div><button class="primary small approve">Approve</button><button class="secondary small deny">Deny</button></li>');
+        buf.push('<li><div class="jid"></div><div class="response"><button class="primary small approve">Approve</button><button class="secondary small deny">Deny</button></div></li>');
+    }
+    return buf.join("");
+};
+
+// dayDivider.jade compiled template
+exports.includes.dayDivider = function anonymous(locals) {
+    var buf = [];
+    with (locals || {}) {
+        buf.push('<li class="day_divider"><hr/><div class="day_divider_name">' + jade.escape((jade.interp = day_name) == null ? "" : jade.interp) + "</div></li>");
     }
     return buf.join("");
 };
@@ -231,7 +235,7 @@ exports.includes.mucBareMessage = function anonymous(locals) {
         }, {
             "class": true,
             id: true
-        }) + '><span class="timestamp">' + jade.escape(null == (jade.interp = message.formattedTime) ? "" : jade.interp) + '</span><p class="body">' + ((jade.interp = message.processedBody) == null ? "" : jade.interp) + "</p>");
+        }) + '><p class="body">' + ((jade.interp = message.processedBody) == null ? "" : jade.interp) + "</p>");
         var urls = message.urls;
         buf.push('<section class="embeds">');
         (function() {
@@ -289,7 +293,7 @@ exports.includes.mucBareMessage = function anonymous(locals) {
 exports.includes.mucListItem = function anonymous(locals) {
     var buf = [];
     with (locals || {}) {
-        buf.push('<li class="contact"><div class="unread">' + jade.escape(null == (jade.interp = contact.unreadCount) ? "" : jade.interp) + '</div><div class="name">' + jade.escape(null == (jade.interp = contact.displayName) ? "" : jade.interp) + '</div><button class="primary small joinRoom">Join</button><button class="secondary small leaveRoom">Leave</button></li>');
+        buf.push('<li class="contact"><div class="wrap"><i class="remove fa fa-times-circle"></i><i class="join fa fa-sign-in"></i><span class="prefix">#</span><div class="unread">' + jade.escape(null == (jade.interp = contact.unreadCount) ? "" : jade.interp) + '</div><span class="name">' + jade.escape(null == (jade.interp = contact.displayName) ? "" : jade.interp) + "</span></div></li>");
     }
     return buf.join("");
 };
@@ -307,13 +311,21 @@ exports.includes.mucRosterItem = function anonymous(locals) {
 exports.includes.mucWrappedMessage = function anonymous(locals) {
     var buf = [];
     with (locals || {}) {
-        buf.push('<li><div class="sender"><div class="name">' + jade.escape(null == (jade.interp = message.from.resource) ? "" : jade.interp) + '</div></div><div class="messageWrapper"><div' + jade.attrs({
+        buf.push('<li><div class="sender"><a href="#" class="messageAvatar"><img' + jade.attrs({
+            src: "https://gravatar.com/avatar",
+            alt: message.from.resource,
+            "data-placement": "below"
+        }, {
+            src: true,
+            alt: true,
+            "data-placement": true
+        }) + '/></a></div><div class="messageWrapper"><div class="message_header"><div class="name">' + jade.escape((jade.interp = message.from.resource) == null ? "" : jade.interp) + '</div><div class="date">' + jade.escape((jade.interp = Date.create(message.timestamp).format("{h}:{mm} {tt}")) == null ? "" : jade.interp) + "</div></div><div" + jade.attrs({
             id: "chat" + message.cid,
             "class": "message" + " " + message.classList
         }, {
             "class": true,
             id: true
-        }) + '><span class="timestamp">' + jade.escape(null == (jade.interp = message.formattedTime) ? "" : jade.interp) + '</span><p class="body">' + ((jade.interp = message.processedBody) == null ? "" : jade.interp) + "</p>");
+        }) + '><p class="body">' + ((jade.interp = message.processedBody) == null ? "" : jade.interp) + "</p>");
         var urls = message.urls;
         buf.push('<section class="embeds">');
         (function() {
@@ -379,13 +391,13 @@ exports.includes.wrappedMessage = function anonymous(locals) {
             src: true,
             alt: true,
             "data-placement": true
-        }) + '/></a></div><div class="messageWrapper"><div' + jade.attrs({
+        }) + '/></a></div><div class="messageWrapper"><div class="message_header"><div class="name">' + jade.escape((jade.interp = message.sender.displayName) == null ? "" : jade.interp) + '</div><div class="date">' + jade.escape((jade.interp = Date.create(message.timestamp).format("{h}:{mm} {tt}")) == null ? "" : jade.interp) + "</div></div><div" + jade.attrs({
             id: "chat" + message.cid,
             "class": "message" + " " + message.classList
         }, {
             "class": true,
             id: true
-        }) + '><span class="timestamp">' + jade.escape(null == (jade.interp = message.formattedTime) ? "" : jade.interp) + '</span><p class="body">' + ((jade.interp = message.processedBody) == null ? "" : jade.interp) + "</p>");
+        }) + '><p class="body">' + ((jade.interp = message.processedBody) == null ? "" : jade.interp) + "</p>");
         var urls = message.urls;
         buf.push('<section class="embeds">');
         (function() {
@@ -470,7 +482,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><h1><span class="status"></span><span class="name"></span><button class="primary small call">Call</button><button class="secondary small remove">Remove</button></h1><div class="tzo"></div><div class="activeCall"><video autoplay="autoplay" class="remote"></video><video autoplay="autoplay" muted="muted" class="local"></video><aside class="button-wrap"><button class="accept primary">Accept</button><button class="end secondary">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><span class="prefix">@</span><span class="name"></span><i class="user_presence fa fa-circle"></i><span class="status"></span></h1><div class="tzo"></div></header><ul class="messages scroll-container"></ul><div class="activeCall"><div class="container"><video autoplay="autoplay" class="remote"></video><video autoplay="autoplay" muted="muted" class="local"></video><aside class="button-wrap"><button class="accept primary">Accept</button><button class="end secondary">End</button><div class="button-group outlined"><button class="mute">Mute</button><button class="unmute">Unmute</button></div></aside></div></div><div class="chatBox"><form class="formwrap"><textarea name="chatInput" type="text" placeholder="Send a message..." autocomplete="off"></textarea></form><button class="primary small call">Call</button></div></section></section>');
     }
     return buf.join("");
 };
@@ -479,7 +491,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="group conversation"><header class="online"><h1><span class="name"></span><span contenteditable="true" class="status"></span></h1><div class="controls"><button class="primary small joinRoom">Join</button><button class="secondary small leaveRoom">Leave</button></div></header><ul class="messages"></ul><ul class="groupRoster"></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="group conversation"><header class="online"><h1><span class="prefix">#</span><span class="name"></span><i class="channel_actions fa fa-chevron-down"></i><span contenteditable="true" spellcheck="false" class="status"></span></h1></header><ul class="messages"></ul><a id="members_toggle"><i class="fa fa-user"></i><span id="members_toggle_count"></span></a><ul class="groupRoster"></ul><div class="chatBox"><form class="formwrap"><textarea name="chatInput" type="text" placeholder="Send a message..." autocomplete="off"></textarea></form></div></section></section>');
     }
     return buf.join("");
 };

clientapp/templates/body.jade

@@ -10,22 +10,18 @@ body
     button.primary.upgrade Upgrade
   #wrapper
     aside#menu
-      section#roster
+      section#organization
-        h1 Roster
+        span#orga_name
-        input(type="text", class="inline")#addcontact
-        button.primary.small.addContact Add
-        ul#contactrequests
-        nav
       section#bookmarks
         h1 Rooms
-        input(type="text", class="inline")#joinmuc
-        button.primary.small.joinMUC Add
         nav
-    header#me
+        input(type="text", class="inline", placeholder="add a room")#joinmuc
-      h1
+      section#roster
-        img.avatar
+        h1 Direct messages
-        span.name
+        ul#contactrequests
-        span.status(contenteditable="true")
+        nav
+        input(type="text", class="inline", placeholder="add a contact")#addcontact
+    header#topbar
       a(href="/", class="button secondary settings")
         svg(version='1.1', xmlns='http://www.w3.org/2000/svg', xmlns:xlink='http://www.w3.org/1999/xlink', viewbox="0 0 25 25", height="25", width="25")
           g(transform='scale(0.4)')
@@ -33,3 +29,9 @@ body
             path(d='M51.762,24.505l-1.125-0.459l-1.451,3.55c-0.814,1.993-2.832,3.054-4.505,2.37l-0.355-0.144 c-1.673-0.686-2.37-2.856-1.558-4.849l1.451-3.551l-1.125-0.46c-2.225,0.608-4.153,2.2-5.092,4.501 c-1.225,2.997-0.422,6.312,1.771,8.436l-2.958,6.812l-2.204,3.249l-0.007,2.281l5.275,2.154l1.593-1.633l0.7-3.861l2.901-6.836 c3.049,0.018,5.947-1.785,7.174-4.779C53.186,28.983,52.924,26.499,51.762,24.505z')
         | Settings
     main#pages
+    #footer
+      #me
+        div
+          img.avatar
+        span.name
+        span.status(contenteditable="true", spellcheck="false")

clientapp/templates/includes/bareMessage.jade

@@ -1,5 +1,4 @@
 .message(id='chat'+message.cid, class=message.classList)
-  span.timestamp=message.formattedTime
   p.body !{message.processedBody}
   - var urls = message.urls
   section.embeds

clientapp/templates/includes/contactListItem.jade

@@ -1,8 +1,8 @@
-li.contact
+li.contact.joined
   .wrap
-    img.avatar(src=contact.avatar)
+    i.remove.fa.fa-times-circle
+    i.presence.fa.fa-circle
     .user
       span.name=contact.displayName
       span.idleTime=contact.idleSince
     .unread=contact.unreadCount
-    .status=contact.status

clientapp/templates/includes/contactRequest.jade

@@ -1,4 +1,5 @@
 li
   .jid
+  .response
       button.primary.small.approve Approve
       button.secondary.small.deny Deny

clientapp/templates/includes/dayDivider.jade

@@ -0,0 +1,3 @@
+li.day_divider
+  hr
+  div.day_divider_name #{day_name}

clientapp/templates/includes/mucBareMessage.jade

@@ -1,5 +1,4 @@
 .message(id='chat'+message.cid, class=message.classList)
-  span.timestamp=message.formattedTime
   p.body !{message.processedBody}
   - var urls = message.urls
   section.embeds

clientapp/templates/includes/mucListItem.jade

@@ -1,5 +1,7 @@
 li.contact
+  .wrap
+    i.remove.fa.fa-times-circle
+    i.join.fa.fa-sign-in
+    span.prefix #
     .unread=contact.unreadCount
-  .name=contact.displayName
+    span.name=contact.displayName
-  button.primary.small.joinRoom Join
-  button.secondary.small.leaveRoom Leave

clientapp/templates/includes/mucWrappedMessage.jade

@@ -1,5 +1,9 @@
 li
   .sender
-    .name=message.from.resource
+    a.messageAvatar(href='#')
+      img(src="https://gravatar.com/avatar", alt=message.from.resource, data-placement="below")
   .messageWrapper
+    .message_header
+      .name #{message.from.resource}
+      .date #{Date.create(message.timestamp).format('{h}:{mm} {tt}')}
     include mucBareMessage

clientapp/templates/includes/wrappedMessage.jade

@@ -3,4 +3,7 @@ li
     a.messageAvatar(href='#')
       img(src=message.sender.avatar, alt=message.sender.displayName, data-placement="below")
   .messageWrapper
+    .message_header
+      .name #{message.sender.displayName}
+      .date #{Date.create(message.timestamp).format('{h}:{mm} {tt}')}
     include bareMessage

clientapp/templates/pages/chat.jade

@@ -2,12 +2,14 @@ section.page.chat
   section.conversation
     header
       h1
-        span.status
+        span.prefix @
         span.name
-        button.primary.small.call Call
+        i.user_presence.fa.fa-circle
-        button.secondary.small.remove Remove
+        span.status
       .tzo
+    ul.messages.scroll-container
     .activeCall
+      .container
         video.remote(autoplay)
         video.local(autoplay, muted)
         aside.button-wrap
@@ -16,7 +18,7 @@ section.page.chat
           .button-group.outlined
             button.mute Mute
             button.unmute Unmute
-    ul.messages.scroll-container
     .chatBox
-      form
+      form.formwrap
         textarea(name='chatInput', type='text', placeholder='Send a message...', autocomplete='off')
+      button.primary.small.call Call

clientapp/templates/pages/groupchat.jade

@@ -2,13 +2,15 @@ section.page.chat
   section.group.conversation
     header.online
       h1
+        span.prefix #
         span.name
-        span.status(contenteditable="true")
+        i.channel_actions.fa.fa-chevron-down
-      .controls
+        span.status(contenteditable="true", spellcheck="false")
-        button.primary.small.joinRoom Join
-        button.secondary.small.leaveRoom Leave
     ul.messages
+    a#members_toggle
+      i.fa.fa-user
+      span#members_toggle_count
     ul.groupRoster
     .chatBox
-      form
+      form.formwrap
         textarea(name='chatInput', type='text', placeholder='Send a message...', autocomplete='off')

clientapp/views/contactListItem.js

@@ -19,20 +19,27 @@ module.exports = HumanView.extend({
     },
     textBindings: {
         displayName: '.name',
-        status: '.status',
         displayUnreadCount: '.unread'
     },
     srcBindings: {
-        avatar: '.avatar'
     },
     events: {
-        'click': 'handleClick'
+        'click': 'handleClick',
+        'click .remove': 'handleRemoveContact'
     },
     render: function () {
         this.renderAndBind({contact: this.model});
         return this;
     },
     handleClick: function () {
+        if (me.contacts.get(this.model.jid)) {
             app.navigate('chat/' + this.model.jid);
         }
+    },
+    handleRemoveContact: function() {
+        me.removeContact(this.model.jid);
+        if (app.history.fragment === 'chat/' + this.model.jid) {
+            app.navigate('/');
+        }
+    }
 });

clientapp/views/main.js

@@ -24,9 +24,7 @@ module.exports = HumanView.extend({
         'click .embed': 'handleEmbedClick',
         'click .reconnect': 'handleReconnect',
         'click .logout': 'handleLogout',
-        'click .addContact': 'handleAddContact',
         'keydown #addcontact': 'keyDownAddContact',
-        'click .joinMUC': 'handleJoinMUC',
         'keydown #joinmuc': 'keyDownJoinMUC',
         'blur #me .status': 'handleStatusChange',
         'keydown .status': 'keyDownStatus'
@@ -47,7 +45,8 @@ module.exports = HumanView.extend({
         this.registerBindings(me, {
             textBindings: {
                 displayName: '#me .name',
-                status: '#me .status'
+                status: '#me .status',
+                organization: '#organization #orga_name',
             },
             srcBindings: {
                 avatar: '#me .avatar'

clientapp/views/mucListItem.js

@@ -20,8 +20,8 @@ module.exports = HumanView.extend({
     },
     events: {
         'click .name': 'handleClick',
-        'click .joinRoom': 'handleJoinRoom',
+        'click .join': 'handleJoinRoom',
-        'click .leaveRoom': 'handleLeaveRoom'
+        'click .remove': 'handleLeaveRoom'
     },
     render: function () {
         this.renderAndBind({contact: this.model});

dev_config.json

@@ -13,6 +13,7 @@
         "secret": "shhhhhh don't tell anyone ok?"
     },
     "server": {
+        "name": "Otalk",
         "domain": "localhost",
         "wss": "wss://localhost:5281/xmpp-websocket/",
         "muc": "chat.localhost",

public/css/_mixins.styl

@@ -38,9 +38,9 @@ borderbox()
 // avatars
 
 avatar()
-  width: 30px
+  width: 36px
-  height: 30px
+  height: 36px
-  roundall(50px)
+  roundall(0.2rem)
 
 // this if for the content flash and hardware acceleration bugs in webkit
 webkit-transition-fix()

public/css/_variables.styl

@@ -25,9 +25,10 @@ $pink-lighter = #fce8f1
 
 // Greens
 
-$green = #43bb6e
+$green = #4C9689
 $green-light = lighten($green, 70%)
 $green-lighter = lighten($green, 94%)
+$green-lighterer = #B2D5C9
 
 // Reds
 
@@ -41,13 +42,69 @@ $orange = #f18902
 $orange-light = lighten($orange, 50%)
 $orange-lighter = lighten($orange, 85%)
 
+// Brown
+
+$brown = #4D394B
+$brown-light = #AB9BA9
+$brown-lighter = lighten($brown, 20%)
+$brown-dark = #3E313C
+$brown-darker = #372C36
+$brown-darkerer = #625361
+
+// Gray
+
+$gray-dark = #555459
+$gray = #9E9EA6
+$gray-light = #BABBBF
+$gray-lighter = #E0E0E0
+
+// Black
+
+$black = #3D3C40
+
+
+// Style
+
+$sidebarTopAndBottomBg = #1A233F
+$sidebarOrgaName = #fff
+$sidebarBorder = #121A33
+$sidebarBg = #3D486B
+$sidebarText = #ABB6DA
+
+$sidebarNames = #C1DCEC
+
+$sidebarInputBg = $sidebarBg
+$sidebarInputBorder = #626F9C
+$sidebarInputText = $sidebarNames
+
+$sidebarSelectionBg = #94B021
+$sidebarSelectionText = #fff
+
+$sidebarUnreadBg = $sidebarSelectionBg
+$sidebarUnreadText = $sidebarSelectionText
+
+$sidebarHover = $sidebarTopAndBottomBg
+
+$sidebarRequestBg = $sidebarHover
+$sidebarRequestBorder = $sidebarHover
+
+$sidebarStatusText = $sidebarNames
+$sidebarStatusBorder = $sidebarInputBorder
+
+$settingsBg = #fff
+$settingsText = $sidebarBg
+$settingsHoverBg = $sidebarBg
+$settingsHoverText = #fff
+
 // Font families
 
+$font-family-lato = 'Lato', sans-serif
 $font-family-gotham = 'Gotham SSm A', 'Gotham SSm B', Helvetica, Arial, sans-serif
 
 // Font sizes
 
-$font-size-large = 16px
+$font-size-large = 17px
+$font-size-message = 15px
 $font-size-base = 14px
 $font-size-small = 12px
 $font-size-smaller = 10px
@@ -60,4 +117,6 @@ $font-size-h4 = 12px
 $line-height-base = 18px
 $line-height-headings = 26px
 
-$font-weight-bold = 800
+$font-weight-classic = 500
+$font-weight-bold = 700
+$font-weight-bolder = 900

public/css/components/buttons.styl

@@ -8,7 +8,6 @@ button
 
 .button, button
   display: inline-block
-  border-radius: 3px
   padding: 0 15px
   height: 35px
   background: $gray-lighter
@@ -16,7 +15,9 @@ button
   font-weight: $font-weight-bold
   text-align: center
   text-decoration: none
-  color: $gray-light
+  color: $gray
+  border: 1px solid $gray-light
+  border-radius: 3px
   text-overflow: ellipsis
   vertical-align: middle
   user-select()
@@ -49,22 +50,22 @@ button
     color: white
 
   &.primary
-    background: $pink
+    background: $green
 
     &:hover:not(:disabled)
-      background: darken($pink, 10%)
+      background: darken($green, 10%)
 
     &:disabled
-      background: $pink-light
+      background: $green-light
 
   &.secondary
-    background: $blue
+    background: $red
 
     &:disabled
-      background: $blue-light
+      background: $red-light
 
     &:hover:not(:disabled)
-      background: darken($blue, 10%)
+      background: darken($red, 10%)
 
 .button-group
 
@@ -86,7 +87,7 @@ button
     border-radius: 3px
 
     button, .button
-      border: 1px solid lighten($gray-light, 70%)
+      border: 1px solid $gray-light
 
     &.primary
 

public/css/components/forms.styl

@@ -49,10 +49,6 @@ input[type=text], input[type=email], input[type=password], input[type=search], i
 
   &:focus
     outline: none
-    border: 1px solid $blue-light
-    box-shadow: 0 0 5px $blue-light
-    transition: all .3s ease-in
-    -webkit-transition: all .3s ease-in
 
   &:disabled
     background: lighten($gray-lighter, 60%)

public/css/components/layout.styl

@@ -1,17 +1,16 @@
 @import '../_variables'
 @import '../_mixins'
 
+html
+  font-size: 100%
+
 body
   background: white
-  color: $gray
+  font-family: $font-family-lato
-  font-family: $font-family-gotham
   font-size: $font-size-base
   font-weight: 400
   -webkit-font-smoothing: antialiased
 
-h1, h2, h3, h4
-  color: darken($gray, 30%)
-
 h4
   margin-top: 0
   font-size: $font-size-h4
@@ -28,6 +27,6 @@ a
   position: absolute
   top: 0px
   right: 0px
-  left: 270px
+  left: 220px
   height: 100%
   borderbox()

public/css/otalk.styl

@@ -14,3 +14,4 @@
 @import 'pages/aux'
 @import 'pages/callbar'
 @import 'pages/header'
+@import 'pages/footer'

public/css/pages/chat.styl

@@ -14,75 +14,13 @@
 
   header
     padding: 0px
-    padding-left: 6px
-    border-bottom: 1px solid darken($gray-lighter, 10%)
     position: fixed
-    top: 40px
+    top: 0px
     right: 0px
-    left: 270px
+    left: 220px
-    z-index: 10
+    right: 90px
-    borderbox()
+    height: 55px
-    background: lighten($gray-light, 93%)
+    z-index: 101
-
-    &:before
-      content: ''
-      position: absolute
-      left: 5px
-      top: 18px
-      height: 4px
-      width: 4px
-      margin-top: -3px
-      border: 1px solid transparent
-      roundall(10px)
-
-    &.online,
-    &.chat
-      &:before
-        background: $green
-        border-color: $green
-
-    &.dnd:before
-      background: $red
-      border-color: $red
-
-    &.away:before,
-    &.xa:before
-      background: $orange
-      border-color: $orange
-
-    &.offline:before
-      background: $gray-dark
-
-    &.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: lighten($gray-light, 30%)
-      border-color: lighten($gray-light, 30%)
-
-    &.idle:before
-      background: transparent
-
-    .controls
-      float: right
-
-      .leaveRoom
-        display: none
-
-      .joinRoom
-        display: block
-
-      button
-        margin-top: 5px
-
-      &.joined
-        .joinRoom
-          display: none
-
-        .leaveRoom
-          display: block
 
     .avatar
       margin-right: 5px
@@ -93,48 +31,100 @@
       vertical-align: top
 
     h1
-      font-size: 12px
-      margin: 5px
-      margin-left: 10px
       padding: 0px
+      margin: 0px
+      top: 0px
       white-space: nowrap
-      max-width: 80%
       display: inline-block
-      height: 25px
+      height: 53px
-      line-height: 25px
+
+      &:hover .prefix
+        color: $gray-dark
+
+    .prefix, .name, .user_presence, .channel_actions, .status
+      display: inline-block
+      color: $gray-dark
+      padding: 0px
+      text-rendering: optimizelegibility
+      top: 0px
+      vertical-align: middle
+
+    .prefix
+      color: $gray
+      font-size: $font-size-h2
+      font-weight: $font-weight-classic
+      margin-left: 25px
+      line-height: 53px
+      cursor: pointer
 
     .name
-      font-size: 12px
+      font-size: $font-size-h2
-      border-width: 0px
+      font-weight: $font-weight-bolder
-      padding: 0px
-      display: inline-block
       overflow: hidden
+      text-overflow: ellipsis
+      padding-left: 3px
+      line-height: 53px
+      cursor: pointer
+
+    .user_presence, .channel_actions
+      font-size: $font-size-small
+      color: $gray
+      padding-left: 8px
+      line-height: 53px
+      cursor: pointer
+
+    .user_presence
+      padding-top: 5px
+
+        &.online
+          color: $green
+          opacity: 1
+
+        &.offline
+          color: $gray-dark
+          opacity: 0.5
+
+        &.dnd
+          color: $red
+
+        &.away, &.xa
+          color: $orange
+
+        &.composing
+          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
+          color: lighten($gray-dark, 30%)
+
+        &.idle:before
+          background: transparent
+
+    .channel_actions
+      opacity: 1
 
     .status
-      font-weight: normal
+      color: $gray
-      font-size: 12px
+      font-weight: $font-weight-classic
-      border-width: 0px
+      font-size: $font-size-h3
-      padding: 0px
+      line-height: 18px
-      max-width: 80%
+      margin-left: 15px
-      padding-left: 5px
+      padding-top: 5px
       white-space: nowrap
       overflow: hidden
       text-overflow: ellipsis
       transition: all .25s
-      display: inline-block
       allowselect()
 
       &:empty:before
-        content: '- No subject'
+        content: ''
 
-      &:not(:empty):before
+      &:focus
-        content: '- '
+        border-radius: 0.25rem
-
+        border: 1px solid $gray
-      &:before,
+        padding: 5px
-      &:empty:focus:before
+        outline: none
-        content: '-'
-        padding-left: 5px
-        padding-right: 5px
 
     .tzo:not(:empty)
       position: absolute
@@ -155,62 +145,158 @@
         content: 'Current Time: '
         font-weight: bold
 
-    .call, .remove
+    .call
-      display: inline-block
+      display: block
-      margin-top: -17px
+      width: 50px
-      margin-left: 10px
+      height: 38px
+      position: absolute
+      top: 0px
+      right: 11px
 
   .activeCall
+    display: none
     transition(height 250ms)
     height: 0px
-      position: relative
+    position: absolute
-      top: 0px
+    bottom: 4rem
+    width: 100%
+    min-width: 610px
+    box-sizing: border-box
+    padding: 0px 73px 0px 24px
+
+    .container
+      width: 100%
+      height: 100%
+      border: 1px solid $gray-lighter
+      border-bottom: none
+      border-radius: 0.2rem 0.2rem 0 0
+      background-color: $gray-lighter
 
     .remote
       position: absolute
-        top: 60px
+      top: 20px
-        left: 10px
+      left: 40px
-        height: 50%
+      height: 65%
+      border: 2px solid $gray-light
 
     .local
       position: absolute
       bottom: 10px
-        right: 10px
+      right: 80px
       height: 20%
-        border: 2px solid $gray-lighter
+      border: 2px solid $gray-light
       transform(scaleX(-1))
 
     .button-wrap
       position: absolute
-        left: 10px
+      left: 118px
-        bottom: 10px
+      bottom: 26px
 
       .button-group
         margin-left: 5px
-
-  // while on video call the parent has
-  // this class so we animate the height
-  .activeCall
-    display: none
   &.onCall
     .activeCall
       display: block
-      height: 400px
+      height: 20rem
+    .messages
+      bottom: 24rem
+
+  .chatBox
+    background-color: #fff
+    bottom: 0px
+    position: fixed
+    right: 0px
+    left: 221px
+    height: 4rem
+    z-index: 302
+    transition: none
+    -webkit-transition: none
+
+    .formwrap
+      transition: none
+      -webkit-transition: none
+      position: relative
+      height:38px
+      left: 24px
+      margin-right: 93px
+
+    textarea
+      display: inline-block
+      vertical-align: middle
+      background: none repeat scroll 0% 0% padding-box #fff
+      font-size: $font-size-base
+      border-width: 2px
+      border-style: solid
+      border-color: $gray-lighter
+      border-image: none
+      border-radius: 0px 0.2rem 0.2rem 0px
+      font-family: "Lato",sans-serif
+      margin: 0
+      color: #3D3C40
+      overflow-y: hidden
+      box-shadow: none
+      outline: 0px none
+      position: absolute
+      bottom: 0px
+      height: 38px
+      padding: 9px 5px 9px 8px
+      max-height: 10rem
+      resize: none !important
+
+      &.editing
+        background-color: #fffcea
+        border: 1px solid #efe391
+        color: #d2bd2d
+      &:focus
+        box-shadow: none
 
 .messages
   margin: 0px
-  padding: 0px
+  padding: 0px 1.5rem
   overflow-y: auto
   overflow-x: hidden
   position: absolute
   top: 0px
   right: 0px
-  bottom: 55px
+  bottom: 4rem
-  margin-top: 75px
+  margin-top: 54px
   width: 100%
   borderbox()
   -webkit-overflow-scrolling: touch
 
+  li.day_divider
+    display: block
+    background: none repeat scroll 0% 0% #fff
+    font-size: 1rem
+    color: #555459
+    font-weight: 900
+    text-align: center
+    cursor: default
+    clear: both
+    position: relative
+    line-height: 1.2rem
+    margin: 1.5rem 0px
+    padding: 0
+    min-height: 0
+
+    hr
+      position: absolute
+      width: 100%
+      top: 0.6rem
+      margin: 0px
+      border-width: 1px 0px 0px 0px
+      border-style: solid none
+      border-color: #ddd
+
+    .day_divider_name
+      background: none repeat scroll 0% 0% #fff
+      text-transform: capitalize
+      text-align: center
+      padding: 0px 1rem
+      display: inline-block
+      margin: 0px auto
+      position: relative
+
   li
     position: relative
     list-style: none
@@ -218,8 +304,6 @@
     width: 100%
     min-height: 50px
     display: table
-    borderbox()
-    border-bottom: 1px solid $gray-lighter
     display: table-row
 
     &:last-of-type
@@ -227,6 +311,7 @@
 
     .messageAvatar
       display: inline-block
+      outline: none
 
       img
         avatar()
@@ -247,15 +332,13 @@
       box-shadow: rgba(0, 0, 0, .25) 0 2px 3px
 
   .sender
-    display: table-cell
     font-size: 12px
     font-weight: bold
     color: $gray
-    padding: 5px
     text-align: right
-    border-top: 1px solid #eee
     white-space: nowrap
-    vertical-align: middle
+    vertical-align: top
+    margin-top: 5px
 
     .name
       padding-left: 10px
@@ -263,16 +346,36 @@
 
   .messageWrapper
     display: table-cell
-    padding: 5px
+    padding: 0px 0px 12px 15px
-    border-top: 1px solid #eee
     width: 99%
-    vertical-align: middle
+    vertical-align: top
+
+    .message_header
+
+      .name
+        display: inline-block
+        font-weight: $font-weight-bolder
+        font-size: $font-size-message
+        color: $black
+        line-height: 22px
+        cursor: pointer
+
+      .date
+        display: inline-block
+        margin-left: 0.25rem
+        color: $gray-light
+        font-size: $font-size-small
+        width: 60px
+        line-height: 22px
+        text-transform: uppercase
+        cursor: pointer
 
   .message
-    font-size: $font-size-small
+    font-size: $font-size-message
-    margin: 2px
+    line-height: 22px
+    color: $black
+    margin: 0px 0px 2px 0px
     display: inline-block
-    padding-right: 3px
     min-width: 20px
     width: 100%
     borderbox()
@@ -280,28 +383,6 @@
     &:not(.mine)
       color: $gray-dark
 
-    &.mine
-      .timestamp
-        color: darken($gray-lighter, 20%)
-
-    &.mine.pendingReceipt:not(.delayed)
-      .timestamp:after
-        content: '\26A0'
-        color: $orange
-
-    &.delayed
-      .timestamp:before
-        content: '@ '
-
-    &.edited
-      .timestamp:before
-        content: 'edited '
-
-    &.mine.delivered
-      .timestamp:after
-        content: '\2713' !important
-        color: $green !important
-
     &.pending
       color: lighten($gray, 50%)
 
@@ -349,42 +430,28 @@
     .sender
       display: block
 
-.chatBox
-  borderbox()
-  bottom: 0px
-  position: fixed
-  right: 0px
-  left: 270px
-  z-index: 200
-  transition: none
-  -webkit-transition: none
-
-  form
-    border-top: 1px solid #eee
-    background: lighten($gray-light, 93%)
-    padding: 11px
-    transition: none
-    -webkit-transition: none
-
-  .formwrap
-    borderbox()
-    width: 100%
-    padding-right: 80px
-    position: relative
-
-  textarea
-    height: 30px
-    padding: 6px 10px
-    transition: none
-    -webkit-transition: none
-
-    &.editing
-      background-color: #fffcea
-      border: 1px solid #efe391
-      color: #d2bd2d
-
-
 .group.conversation
+  h1
+    .status
+      &:empty:before
+        content: 'No subject'
+
+  .chatBox .formwrap
+    margin-right: 35px
+
+  #members_toggle
+    position: absolute
+    top: 60px
+    right: 20px
+    cursor: pointer
+    color: $gray
+    font-size: $font-size-h3
+
+    &:hover
+      color: #439FE0
+
+    #members_toggle_count
+      margin-left: 5px
 
   .groupRoster
     width: 150px
@@ -393,34 +460,46 @@
     overflow-y: auto
     overflow-x: hidden
     position: absolute
-    top: 0px
+    top: 80px
-    right: 0px
+    right: 20px
-    bottom: 50px
-    padding-top: 80px
-    padding-bottom: 10px
     borderbox()
+    box-shadow: 0px 2px 10px rgba(64, 54, 63, 0.25)
     -webkit-overflow-scrolling: touch
-    background: lighten($gray, 95%)
+    border: 1px solid #ddd
-    border-left: 1px solid #eee
+    border-radius: 0.25rem
+    background-color: #fff
+    z-index: 100
+    visibility: hidden
+    padding: 5px 30px 5px 5px
 
     li
       padding: 3px
       margin: 0px
-      font-size: 12px
+      border-radius: 0.25rem
       position: relative
+      cursor: pointer
+
+      &:hover
+        background-color: #439FE0
 
         .name
-        padding-left: 10px
+          color: #fff
+
+      .name
+        padding-left: 14px
+        color: $gray
+        font-size: 14px
+        font-weight: bold
 
       &:before
         content: ''
         position: absolute
         left: 4px
-        top: 11px
+        top: 12px
         height: 4px
         width: 4px
         margin-top: -3px
-        border: 1px solid transparent
+        border: 2px solid transparent
         roundall(10px)
 
       &.online,
@@ -428,6 +507,11 @@
         &:before
           background: $green
           border-color: $green
+        &:not(:hover) .name
+          color: $gray-dark
+
+        &:not(:hover).active .name
+          color $red
 
       &.dnd:before
         background: $red

public/css/pages/footer.styl

@@ -0,0 +1,63 @@
+@import '../_variables'
+@import '../_mixins'
+
+#footer
+  bottom: 0px
+  left: 0px
+  background-color: $sidebarTopAndBottomBg
+  width:100%
+  height: 4rem;
+  position: fixed
+  z-index: 301
+
+  #me
+    border-top: 2px solid $sidebarBorder
+    padding: 7px 0px 9px 8px;
+
+  .avatar
+    float:left
+    width: 48px
+    height: 48px
+    background: rgba(0,0,0,0)
+    background-color: transparent
+    vertical-align: middle
+    margin: 0px 0.5rem 0px 0px;
+
+  .name,
+  .status
+    display: block
+    width: 145px
+    overflow: hidden
+    text-overflow: ellipsis
+
+  .name
+    color: #fff
+    font-size: $font-size-large
+    font-weight: $font-weight-bolder
+
+  .status
+    color: $sidebarStatusText
+    font-weight: normal
+    font-size: $font-size-base
+    line-height: $font-size-base
+    border-width: 0px
+    margin: 0px
+    padding: 0px
+    line-height: 18px
+    height: 18px
+    white-space: nowrap
+    transition: all .25s
+    allowselect()
+
+    &:focus
+      border-radius: 0.25rem
+      border: 1px solid $sidebarStatusBorder
+      outline: none
+      padding: 2px
+
+    &:empty:before
+      content: 'Update your status'
+
+    &:before,
+    &:empty:focus:before
+      content: ''

public/css/pages/header.styl

@@ -1,68 +1,17 @@
 @import '../_variables'
 @import '../_mixins'
 
-#me
+#topbar
   position: fixed
-  left: 270px
+  left: 220px
   top: 0px
-  height: 40px
+  height: 54px
   width: 100%
   background-color: #fff
-  border-bottom: 1px solid darken($gray-lighter, 10%)
   z-index: 100
   noselect()
   color: #fff
 
-  .avatar
-    width: 30px
-    height: 30px
-    vertical-align: middle
-    margin-right: 5px
-    roundall(15px)
-
-  h1
-    font-size: 13px
-    line-height: 12px
-    margin: 5px
-    padding: 0px
-    white-space: nowrap
-    max-width: 75%
-
-  .status
-    font-weight: normal
-    font-size: 12px
-    line-height: 12px
-    border-width: 0px
-    margin: 0px
-    padding: 0px
-    line-height: 20px
-    height: 20px
-    max-width: 75%
-    white-space: nowrap
-    overflow: hidden
-    text-overflow: ellipsis
-    transition: all .25s
-    allowselect()
-
-    &:empty:before
-      content: '- Update your status'
-
-    &:before,
-    &:empty:focus:before
-      content: '-'
-      padding-left: 5px
-      padding-right: 5px
-
-    &:empty
-      font-style: italic
-
-  .name,
-  .status
-    &:focus
-      background-color: #fffcea
-      border: 1px solid #efe391
-      color: #d2bd2d
-
   .settings
     position: fixed
     padding-left: 30px
@@ -70,9 +19,10 @@
     height: 30px
     right: 5px
     top: 5px
-    background-color: #fff
+    background-color: $settingsBg
-    color: #12acef
+    color: $settingsText
     transition: none
+    border: 0
 
     svg
       position: absolute
@@ -80,11 +30,11 @@
       left: 5px
       margin: 0px
       margin-top: -13px
-      fill: #12acef
+      fill: $settingsText
 
     &:hover
-      background-color: #12acef
+      background-color: $settingsHoverBg
-      color: #fff
+      color: $settingsHoverText
 
       svg
         fill: #fff

public/css/pages/roster.styl

@@ -6,15 +6,31 @@
   top: 0px
   bottom: 0px
   left: 0px
-  width: 270px
+  width: 220px
-  background-color: $blue-saturated-darker
+  background-color: $sidebarBg
-  border-right: 1px solid $gray-lighter
+  color: $sidebarText
+  border-right: 1px solid $sidebarBorder
   z-index: 300
   overflow-y: auto;
   overflow-x: hidden;
   webkit-transition-fix()
   noselect()
 
+  #organization
+    width: 220px
+    height: 53px
+    background-color: $sidebarTopAndBottomBg
+    border-bottom: 2px solid $sidebarBorder
+    margin-bottom: 10px
+
+    #orga_name
+      color: $sidebarOrgaName
+      font-size: $font-size-large
+      font-weight: $font-weight-bolder
+      line-height: 53px;
+      vertical-align: middle
+      margin-left: 20px
+
   .main
     margin: 10px 0 0 0
     text-align: center
@@ -37,19 +53,32 @@
         position: relative
 
   h1
-    font-size: $font-size-small
+    font-size: $font-size-base
     margin: 0
-    padding: 20px 10px
+    padding: 4px 20px
-    color: white
     text-transform: uppercase
 
 #roster,
 #bookmarks
+  margin-right: 20px
+  margin-bottom: 25px
 
   #contactrequests
     margin: 0px
     padding-left: 0px
-    background: $blue-saturated
+
+    li
+      width: 180px
+      height: 68px
+      margin-left: 20px
+      margin-bottom: 10px
+      padding-bottom: 4px
+      background: $sidebarRequestBg
+      border-radius: 0.25rem
+      border: 2px solid $sidebarRequestBorder
+
+      .response
+        text-align: center
 
   .jid
     display: inline-block
@@ -62,79 +91,88 @@
 
   #addcontact,
   #joinmuc
-    margin: 0px 10px 5px 10px
+    margin: 8px 20px 5px 20px
     padding: 0px 10px
     width: 178px
     height: 25px
     font-size: $font-size-small
+    background-color: $sidebarInputBg
+    border-radius: 0.25rem
+    border: 1px solid $sidebarInputBorder
+    color: $sidebarInputText
 
   li
     list-style-type: none
-    padding: 7px 10px 7px 10px
+    padding: 4px 10px
     margin: 0px
+    border-radius: 0px 0.25rem 0.25rem 0px;
     position: relative
-    min-height: 40px
+    height: 25px
-    font-size: $font-size-small
+    font-size: $font-size-base
-    color: #fff
     cursor: pointer
-    transition: all .3s ease-in 0
-    -webkit-transition: all .3s ease-in 0
-    -moz-transition: all .3s ease-in 0
     width: 100%
     borderbox()
-
+    color: $sidebarNames
-    .wrap
-      vertical-align: middle
-      padding-left: 40px
 
     &:hover
-      background: $blue-saturated
+      background: $sidebarHover
 
-    &.online, &.chat, &.dnd, &.away, &.xa
+    &.joined
-      &:after
+      &:hover:not(.hasUnread) .remove
-        content: ''
+        visibility: visible
-        position: absolute
-        top: 50%
-        right: 15px
-        height: 6px
-        width: 6px
-        margin-top: -4px
-        border: 1px solid transparent
-        roundall(10px)
 
-    &.online,
+    &:not(.joined)
-    &.chat
+      &:hover:not(.hasUnread) .join
-      &:after
+        visibility: visible
-        background: $green
-        border-color: $green
 
-    &.dnd
+    &.hasUnread, &.hasUnread .prefix
-      &:after
+      font-weight: $font-weight-bolder
-        background: $red
+      color: #fff
-        border-color: $red
 
-    &.away,
+    &:not(.activeContact).offline,
-    &.xa
+    &:not(.activeContact).chat
-      &:after
+      .presence
-        background: $orange
+        color: $brown-light
-        border-color: $orange
 
-    &.offline:not(:hover)
+    &:not(.activeContact).dnd
-      .name
+      .presence
-        color: darken($gray-light, 40%)
+        color: $red
+        opacity: 1
 
-      .status
+    &:not(.activeContact).away,
-        color: darken($gray-light, 65%)
+    &:not(.activeContact).xa
-
+      .presence
-      img
+        color: $orange
-        opacity: .25
+        opacity: 1
 
     &.activeContact, &.offline.activeContact
-      background: white
+      background: $sidebarSelectionBg
-      font-weight: $font-weight-bold
+      .prefix
-
+        color: $green-lighterer
+        opacity: 1
+      &:not(.dnd):not(.away):not(.online) .presence
+        color: $brown-darkerer
+        opacity: 1
+      .remove, .join
+        color: #fff
       .name
-        color: $gray
+        color: #fff
+
+    &:not(.activeContact).online
+      .presence
+        color: $green
+        opacity: 1
+
+    &.online, &.dnd, &.away
+      .name
+        font-style : normal
+
+    &.activeContact
+      &.online .presence,
+      &.dnd .presence,
+      &.away .presence
+        color: #fff
+        opacity: 1
 
     &.composing
       &:after
@@ -154,34 +192,30 @@
         background: transparent
 
       .name
-        color: $gray-light
+        color: $sidebarNames
         max-width: 60%
 
       .user
         width: 95%
 
-    img
+    .presence
-      opacity: 1
+      font-size: 10px
-
+      display: inline-block
-    .avatar
+      margin-top: -10px
-      vertical-align: top
+      vertical-align: middle
-      margin-right: 5px
+      opacity: 0.5
-      margin-top: -15px
-      position: absolute
-      left: 10px
-      top: 20px
-      avatar()
-      noselect()
 
     .user
-      color: white
+      display: inline-block
-      width: 100%
+      width: 120px
       line-height: 100%
       overflow: hidden
       text-overflow: ellipsis
+      height: $font-size-base+3
+      font-style: italic
+      text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.25)
 
     .status
-      color: $gray-light
       font-size: $font-size-small
       font-weight: 400
       line-height: 12px
@@ -191,35 +225,53 @@
       display: inline-block
       margin-left: 5px
       font-size: $font-size-small
-      color: darken($gray-light, 50%)
+      color: darken($brown-light, 50%)
 
     .name
-      display: inline-block
+      width: 100%
-      text-overflow: ellipsis
+      line-height: 100%
       overflow: hidden
-
+      text-overflow: ellipsis
-    &.persistent
+      height: $font-size-base+3
-      .name
+      text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.3)
-        color: red
+      position: absolute
+      left: 32px
+      max-width: 140px
 
     .unread
       display: none
-      color: white
+      color: $sidebarUnreadText
-      height: 22px
+      height: 16px
-      width: 30px
+      width: 18px
-      padding-top: 8px
+      roundall(5px)
-      roundall(30px)
       position: absolute
-      top: 5px
+      padding-top:2px
-      left: 10px
+      right: 5px
-      font-size: $font-size-small
+      top: 3px
+      font-size: $font-size-smaller
       font-weight: $font-weight-bold
       text-align: center
-      background: rgba(0, 174, 239, .8)
+      background: $sidebarUnreadBg
 
     .unread:not(:empty)
       display: block
 
+    .remove, .join
+      position: absolute
+      right: 7px
+      top: 5px
+      font-size: $font-size-base
+      display: inline-block
+      font-family: FontAwesome
+      visibility: hidden
+
+    .prefix
+      font-weight: 300
+      opacity: 0.5
+      position: relative
+      left: -15px
+      text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.25);
+
     button
       margin: -15px 0px 0px 5px
 
@@ -237,15 +289,12 @@
         display: inline-block
 
 #roster
-
+  .wrap
-  .name
+    padding-left: 10px
-    width: 180px
 
 #bookmarks
-
+  .wrap
-  .name
+    padding-left: 24px
-    width: 120px
-    padding: 5px 10px 5px 40px
 
 @keyframes pulsate
   0%

public/css/pages/settings.styl

@@ -4,7 +4,7 @@
 // Settings
 .main > div
   padding: 20px
-  padding-top: 50px
+  padding-top: 64px
   border-bottom: 1px solid $gray-lighter
 
   &:last-of-type

server.js

@@ -31,7 +31,8 @@ var clientApp = new Moonboots({
         __dirname + '/clientapp/libraries/jquery.js',
         __dirname + '/clientapp/libraries/ui.js',
         __dirname + '/clientapp/libraries/resampler.js',
-        __dirname + '/clientapp/libraries/IndexedDBShim.min.js'
+        __dirname + '/clientapp/libraries/IndexedDBShim.min.js',
+        __dirname + '/clientapp/libraries/sugar-1.2.1-dates.js'
     ],
     browserify: {
         debug: false