Make MUCs look nicer

2024-12-23 16:18:48 -05:00 · 2013-12-13 16:16:40 -08:00 · 2013-12-13 16:16:40 -08:00 · 2ca32ca3bd
commit 2ca32ca3bd
parent 4f63da4d20
13 changed files with 181 additions and 41 deletions
--- a/clientapp/models/message.js
+++ b/clientapp/models/message.js
@ -23,9 +23,9 @@ module.exports = HumanModel.define({
    },
    derived: {
        mine: {
-            deps: ['from'],
+            deps: ['from', '_mucMine'],
            fn: function () {
-                return me.isMe(this.from);
+                return this._mucMine || me.isMe(this.from);
            }
        },
        sender: {
@ -81,16 +81,12 @@ module.exports = HumanModel.define({
        nick: {
            deps: ['mine', 'type'],
            fn: function () {
-                if (this.mine) {
-                    if (this.type === 'groupchat') {
-                        return me.mucs.get(this.to.bare).nick;
-                    } else {
-                        return 'me';
-                    }
-                }
                if (this.type === 'groupchat') {
                    return this.from.resource;
                }
+                if (this.mine) {
+                    return 'me';
+                }
                return me.getContact(this.from.bare).displayName;
            }
        },
@ -104,12 +100,20 @@ module.exports = HumanModel.define({
            deps: ['edited', 'pending', 'body'],
            cache: false,
            fn: function () {
-                return templates.includes.bareMessage({message: this});
+                if (this.type === 'groupchat') {
+                    return templates.includes.mucBareMessage({message: this});
+                } else {
+                    return templates.includes.bareMessage({message: this});
+                }
            }
        },
        templateHtml: {
            fn: function () {
-                return templates.includes.wrappedMessage({message: this});
+                if (this.type === 'groupchat') {
+                    return templates.includes.mucWrappedMessage({message: this});
+                } else {
+                    return templates.includes.wrappedMessage({message: this});
+                }
            }
        },
        classList: {
@ -128,6 +132,7 @@ module.exports = HumanModel.define({
    },
    session: {
        _created: 'date',
+        _mucMine: 'bool',
        receiptReceived: ['bool', true, false],
        edited: ['bool', true, false],
        delay: 'object'
@ -160,6 +165,10 @@ module.exports = HumanModel.define({
        app.storage.archive.add(data);
    },
    shouldGroupWith: function (previous) {
-        return previous && previous.from.bare === this.from.bare;
+        if (this.type === 'groupchat') {
+            return previous && previous.from.full === this.from.full;
+        } else {
+            return previous && previous.from.bare === this.from.bare;
+        }
    }
 });
--- a/clientapp/models/muc.js
+++ b/clientapp/models/muc.js
@ -61,17 +61,24 @@ module.exports = HumanModel.define({
    addMessage: function (message, notify) {
        message.owner = me.jid.bare;

-        if (notify && (!this.activeContact || (this.activeContact && !app.hasFocus))) {
+        if (notify && (!this.activeContact || (this.activeContact && !app.state.focused)) && message.from.resource !== this.nick) {
            this.unreadCount++;
            app.notifications.create(this.displayName, {
                body: message.body,
                icon: this.avatar,
                tag: this.id,
-                onclick: _.bind(app.navigate, app, '/chat/' + this.jid)
+                onclick: _.bind(app.navigate, app, '/groupchat/' + this.jid)
            });
        }

+        message.acked = true;
+
        this.messages.add(message);
+        if (message.from.resource === this.nick) {
+            message = this.messages.get(message.id); // Grab the existing message object that was updated
+            message._mucMine = true;
+            this.lastSentMessage = message;
+        }

        var newInteraction = new Date(message.created);
        if (!this.lastInteraction || this.lastInteraction < newInteraction) {
--- a/clientapp/pages/groupchat.js
+++ b/clientapp/pages/groupchat.js
@ -1,16 +1,27 @@
 /*global $, app, me, client*/
 "use strict";

+var _ = require('underscore');
 var BasePage = require('./base');
 var templates = require('../templates');
 var Message = require('../views/mucMessage');
 var MessageModel = require('../models/message');
+var chatHelpers = require('../helpers/chatHelpers');


-module.exports = BasePage.extend({
+module.exports = BasePage.extend(chatHelpers).extend({
    template: templates.pages.groupchat,
    initialize: function (spec) {
        this.editMode = false;
+
+        this.listenTo(this, 'pageloaded', this.handlePageLoaded);
+        this.listenTo(this, 'pageunloaded', this.handlePageUnloaded);
+
+        this.listenTo(this.model.messages, 'change:body', this.refreshModel);
+        this.listenTo(this.model.messages, 'change:edited', this.refreshModel);
+        this.listenTo(this.model.messages, 'change:pending', this.refreshModel);
+        this.listenTo(this.model.messages, 'change:mine', this.refreshModel);
+
        this.render();
    },
    events: {
@ -42,14 +53,51 @@ module.exports = BasePage.extend({
        });
    },
    render: function () {
+        if (this.rendered) return this;
+        this.rendered = true;
+
        this.renderAndBind();
        this.typingTimer = null;
        this.$chatInput = this.$('.chatBox textarea');
+        this.$chatBox = this.$('.chatBox');
        this.$messageList = this.$('.messages');
-        this.renderCollection(this.model.messages, Message, this.$('.messages'));
+        this.$scrollContainer = this.$messageList;
+
+        this.listenTo(this.model.messages, 'add', this.handleChatAdded);
+
+        this.renderCollection();
+
+        $(window).on('resize', _.bind(this.handleWindowResize, this));
+
+        this.initializeScroll();
+
        this.registerBindings();
+
        return this;
    },
+    renderCollection: function () {
+        var self = this;
+        var previous;
+        var bottom = this.isBottom() || this.$messageList.is(':empty');
+        this.model.messages.each(function (model, i) {
+            self.appendModel(model);
+        });
+        this.scrollIfPinned();
+    },
+    handleChatAdded: function (model) {
+        this.appendModel(model, true);
+    },
+    handlePageLoaded: function () {
+        this.scrollPageLoad();
+        this.handleWindowResize();
+    },
+    handlePageUnloaded: function () {
+        this.scrollPageUnload();
+    },
+    handleWindowResize: function () {
+        this.scrollIfPinned();
+        this.resizeInput();
+    },
    handleKeyDown: function (e) {
        clearTimeout(this.typingTimer);
        if (e.which === 13 && !e.shiftKey) {
@ -140,7 +188,7 @@ module.exports = BasePage.extend({

            var id = client.sendMessage(message);
            message.id = id;
-            message.from = me.jid;
+            message.from = client.JID(this.model.jid.bare + '/' + this.model.nick);

            if (this.editMode) {
                this.model.lastSentMessage.correct(message);
@ -161,5 +209,27 @@ module.exports = BasePage.extend({
    },
    handleLeave: function () {
        this.model.leave();
+    },
+    appendModel: function (model, preload) {
+        var self = this;
+        var isGrouped = model.shouldGroupWith(this.lastModel);
+        var newEl, first, last;
+
+        if (isGrouped) {
+            newEl = $(model.partialTemplateHtml);
+            last = this.$messageList.find('li').last();
+            last.find('.messageWrapper').append(newEl);
+            last.addClass('chatGroup');
+        } else {
+            newEl = $(model.templateHtml);
+            this.$messageList.append(newEl);
+        }
+        this.lastModel = model;
+
+        this.scrollIfPinned();
+    },
+    refreshModel: function (model) {
+        var existing = this.$('#chat' + model.cid);
+        existing.replaceWith(model.partialTemplateHtml);
    }
 });
--- a/clientapp/templates.js
+++ b/clientapp/templates.js
@ -101,6 +101,21 @@ exports.includes.messageGroup = function anonymous(locals) {
    return buf.join("");
 };

+// mucBareMessage.jade compiled template
+exports.includes.mucBareMessage = function anonymous(locals) {
+    var buf = [];
+    with (locals || {}) {
+        buf.push("<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></div>");
+    }
+    return buf.join("");
+};
+
 // mucListItem.jade compiled template
 exports.includes.mucListItem = function anonymous(locals) {
    var buf = [];
@ -115,11 +130,17 @@ exports.includes.mucListItem = function anonymous(locals) {
    return buf.join("");
 };

-// mucMessage.jade compiled template
-exports.includes.mucMessage = function anonymous(locals) {
+// mucWrappedMessage.jade compiled template
+exports.includes.mucWrappedMessage = function anonymous(locals) {
    var buf = [];
    with (locals || {}) {
-        buf.push('<li><div class="message"><span class="timestamp">' + jade.escape(null == (jade.interp = message.created) ? "" : jade.interp) + '</span><p class="body">' + jade.escape(null == (jade.interp = message.body) ? "" : jade.interp) + '</p><span class="sender">' + jade.escape(null == (jade.interp = message.nick) ? "" : jade.interp) + "</span></div></li>");
+        buf.push('<li><div class="sender"><div class="name">' + jade.escape(null == (jade.interp = message.from.resource) ? "" : jade.interp) + '</div><a href="#" class="messageAvatar"><!--img(src=message.sender.avatar, alt=message.sender.displayName, data-placement="below")--></a></div><div class="messageWrapper"><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></div></div></li>");
    }
    return buf.join("");
 };
@ -128,7 +149,7 @@ exports.includes.mucMessage = function anonymous(locals) {
 exports.includes.wrappedMessage = function anonymous(locals) {
    var buf = [];
    with (locals || {}) {
-        buf.push('<li><a href="#" class="messageAvatar"><img' + jade.attrs({
+        buf.push('<li><div class="sender"><a href="#" class="messageAvatar"><img' + jade.attrs({
            src: message.sender.avatar,
            alt: message.sender.displayName,
            "data-placement": "below"
@ -136,7 +157,7 @@ exports.includes.wrappedMessage = function anonymous(locals) {
            src: true,
            alt: true,
            "data-placement": true
-        }) + '/><span class="name">' + jade.escape(null == (jade.interp = message.sender.displayName + ": &nbsp;") ? "" : jade.interp) + '</span></a><div class="messageWrapper"><div' + jade.attrs({
+        }) + '/></a></div><div class="messageWrapper"><div' + jade.attrs({
            id: "chat" + message.cid,
            "class": "message" + " " + message.classList
        }, {
--- a/clientapp/templates/includes/mucBareMessage.jade
+++ b/clientapp/templates/includes/mucBareMessage.jade
@ -0,0 +1,3 @@
+.message(id='chat'+message.cid, class=message.classList)
+  span.timestamp=message.formattedTime
+  p.body !{message.processedBody}
--- a/clientapp/templates/includes/mucMessage.jade
+++ b/clientapp/templates/includes/mucMessage.jade
@ -1,5 +0,0 @@
-li
-  .message
-    span.timestamp=message.created
-    p.body=message.body
-    span.sender=message.nick
--- a/clientapp/templates/includes/mucWrappedMessage.jade
+++ b/clientapp/templates/includes/mucWrappedMessage.jade
@ -0,0 +1,7 @@
+li
+  .sender
+    .name=message.from.resource
+    a.messageAvatar(href='#')
+      //img(src=message.sender.avatar, alt=message.sender.displayName, data-placement="below")
+  .messageWrapper
+    include mucBareMessage
--- a/clientapp/templates/includes/wrappedMessage.jade
+++ b/clientapp/templates/includes/wrappedMessage.jade
@ -1,6 +1,6 @@
 li
-  a.messageAvatar(href='#')
-    img(src=message.sender.avatar, alt=message.sender.displayName, data-placement="below")
-    span.name=message.sender.displayName + ": &nbsp;"
+  .sender
+    a.messageAvatar(href='#')
+      img(src=message.sender.avatar, alt=message.sender.displayName, data-placement="below")
  .messageWrapper
    include bareMessage
--- a/package.json
+++ b/package.json
@ -23,7 +23,7 @@
        "templatizer": "0.1.2",
        "underscore": "1.5.1",
        "raf-component": "1.1.1",
-        "stanza.io": "2.8.1",
+        "stanza.io": "2.9.0",
        "notify.js": "0.0.3",
        "wildemitter": "0.0.5",
        "attachmediastream": "1.0.1",
--- a/public/css/_variables.styl
+++ b/public/css/_variables.styl
@ -60,4 +60,4 @@ $font-size-h4 = 12px
 $line-height-base = 18px
 $line-height-headings = 26px

-$font-weight-bold = 800
+$font-weight-bold = 800
--- a/public/css/otalk.css
+++ b/public/css/otalk.css
@ -990,6 +990,7 @@ button.secondary:hover:not(:disabled) {
  position: relative;
  bottom: 75px;
  width: 100%;
+  display: table;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
@ -1006,15 +1007,13 @@ button.secondary:hover:not(:disabled) {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  border-bottom: 1px solid #eee;
+  display: table-row;
 }
 .messages li:last-of-type {
  border: none;
 }
 .messages li .messageAvatar {
-  position: absolute;
-  top: 50%;
-  left: 10px;
-  margin-top: -15px;
+  display: inline-block;
 }
 .messages li .messageAvatar img {
  width: 30px;
@ -1031,10 +1030,25 @@ button.secondary:hover:not(:disabled) {
  position: absolute;
  width: 1px;
 }
+.messages .sender {
+  display: table-cell;
+  font-size: 12px;
+  font-weight: bold;
+  color: #565656;
+  padding: 10px;
+  text-align: right;
+  background-color: #f7f7f7;
+  border-top: 1px solid #e1e1e1;
+}
+.messages .sender .name {
+  padding-left: 10px;
+}
 .messages .messageWrapper {
  padding-left: 50px;
  display: table-cell;
  vertical-align: middle;
+  padding: 10px;
+  border-top: 1px solid #eee;
 }
 .messages .message {
  font-size: 12px;
--- a/public/css/pages/chat.styl
+++ b/public/css/pages/chat.styl
@ -108,6 +108,7 @@
  position: relative
  bottom: 75px
  width: 100%
+  display: table
  borderbox()

  li
@ -120,15 +121,13 @@
    display: table
    borderbox()
    border-bottom: 1px solid $gray-lighter
+    display: table-row

    &:last-of-type
      border: none

    .messageAvatar
-      position: absolute
-      top: 50%
-      left: 10px
-      margin-top: -15px
+      display: inline-block

      img
        avatar()
@ -138,10 +137,25 @@
        position: absolute
        width: 1px

+  .sender
+    display: table-cell
+    font-size: 12px
+    font-weight: bold
+    color: $gray
+    padding: 10px
+    text-align: right
+    background-color: #f7f7f7
+    border-top: 1px solid #e1e1e1
+
+    .name
+      padding-left: 10px
+
  .messageWrapper
    padding-left: 50px
    display: table-cell
    vertical-align: middle
+    padding: 10px
+    border-top: 1px solid #eee

  .message
    font-size: $font-size-small
--- a/public/x-manifest.cache
+++ b/public/x-manifest.cache
@ -1,5 +1,5 @@
 CACHE MANIFEST
-# 0.0.1 1384923017253
+# 0.0.1 1386980007554

 CACHE:
 /app.js