mirror of
https://github.com/moparisthebest/kaiwa
synced 2024-12-23 16:18:48 -05:00
Add muc roster
This commit is contained in:
parent
21b9216093
commit
5fa6bc1324
@ -18,6 +18,18 @@ module.exports = HumanModel.define({
|
||||
timezoneOffset: 'number'
|
||||
},
|
||||
derived: {
|
||||
mucDisplayName: {
|
||||
deps: ['id'],
|
||||
fn: function () {
|
||||
return this.id.split('/')[1] || '';
|
||||
}
|
||||
},
|
||||
idle: {
|
||||
deps: ['idleSince'],
|
||||
fn: function () {
|
||||
return !!this.idleSince;
|
||||
}
|
||||
},
|
||||
supportsChatStates: {
|
||||
deps: ['discoInfo'],
|
||||
fn: function () {
|
||||
|
@ -4,6 +4,7 @@
|
||||
var _ = require('underscore');
|
||||
var BasePage = require('./base');
|
||||
var templates = require('../templates');
|
||||
var MUCRosterItem = require('../views/mucRosterItem');
|
||||
var Message = require('../views/mucMessage');
|
||||
var MessageModel = require('../models/message');
|
||||
var chatHelpers = require('../helpers/chatHelpers');
|
||||
@ -62,7 +63,8 @@ module.exports = BasePage.extend(chatHelpers).extend({
|
||||
|
||||
this.listenTo(this.model.messages, 'add', this.handleChatAdded);
|
||||
|
||||
this.renderCollection();
|
||||
this.renderMessages();
|
||||
this.renderCollection(this.model.resources, MUCRosterItem, this.$('.groupRoster'));
|
||||
|
||||
$(window).on('resize', _.bind(this.handleWindowResize, this));
|
||||
|
||||
@ -72,7 +74,7 @@ module.exports = BasePage.extend(chatHelpers).extend({
|
||||
|
||||
return this;
|
||||
},
|
||||
renderCollection: function () {
|
||||
renderMessages: function () {
|
||||
var self = this;
|
||||
var previous;
|
||||
var bottom = this.isBottom() || this.$messageList.is(':empty');
|
||||
|
@ -125,6 +125,15 @@ exports.includes.mucListItem = function anonymous(locals) {
|
||||
return buf.join("");
|
||||
};
|
||||
|
||||
// mucRosterItem.jade compiled template
|
||||
exports.includes.mucRosterItem = function anonymous(locals) {
|
||||
var buf = [];
|
||||
with (locals || {}) {
|
||||
buf.push('<li class="online"><div class="name"></div></li>');
|
||||
}
|
||||
return buf.join("");
|
||||
};
|
||||
|
||||
// mucWrappedMessage.jade compiled template
|
||||
exports.includes.mucWrappedMessage = function anonymous(locals) {
|
||||
var buf = [];
|
||||
@ -203,7 +212,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 class="online"><h1><span class="name"></span><span 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><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="name"></span><span 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>');
|
||||
}
|
||||
return buf.join("");
|
||||
};
|
||||
|
@ -6,4 +6,3 @@ li.contact
|
||||
span.idleTime=contact.idleSince
|
||||
.unread=contact.unreadCount
|
||||
.status=contact.status
|
||||
|
||||
|
2
clientapp/templates/includes/mucRosterItem.jade
Normal file
2
clientapp/templates/includes/mucRosterItem.jade
Normal file
@ -0,0 +1,2 @@
|
||||
li.online
|
||||
.name
|
@ -1,5 +1,5 @@
|
||||
section.page.chat
|
||||
section.conversation
|
||||
section.group.conversation
|
||||
header.online
|
||||
h1
|
||||
span.name
|
||||
@ -8,6 +8,7 @@ section.page.chat
|
||||
button.primary.small.joinRoom Join
|
||||
button.secondary.small.leaveRoom Leave
|
||||
ul.messages
|
||||
ul.groupRoster
|
||||
.chatBox
|
||||
form
|
||||
textarea(name='chatInput', type='text', placeholder='Send a message...', autocomplete='off')
|
||||
|
23
clientapp/views/mucRosteritem.js
Normal file
23
clientapp/views/mucRosteritem.js
Normal file
@ -0,0 +1,23 @@
|
||||
/*global $, app, me*/
|
||||
"use strict";
|
||||
|
||||
var _ = require('underscore');
|
||||
var HumanView = require('human-view');
|
||||
var templates = require('../templates');
|
||||
|
||||
|
||||
module.exports = HumanView.extend({
|
||||
template: templates.includes.mucRosterItem,
|
||||
classBindings: {
|
||||
show: '',
|
||||
chatState: '',
|
||||
idle: ''
|
||||
},
|
||||
textBindings: {
|
||||
mucDisplayName: '.name'
|
||||
},
|
||||
render: function () {
|
||||
this.renderAndBind({contact: this.model});
|
||||
return this;
|
||||
}
|
||||
});
|
@ -1069,8 +1069,8 @@ button.secondary:hover:not(:disabled) {
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
top: 0px;
|
||||
right: 0px;
|
||||
bottom: 55px;
|
||||
padding-top: 75px;
|
||||
-moz-box-sizing: border-box;
|
||||
@ -1238,6 +1238,75 @@ button.secondary:hover:not(:disabled) {
|
||||
border: 1px solid #efe391;
|
||||
color: #d2bd2d;
|
||||
}
|
||||
.group.conversation .messages {
|
||||
right: 150px;
|
||||
}
|
||||
.group.conversation .groupRoster {
|
||||
width: 150px;
|
||||
margin: 0px;
|
||||
padding: 0px;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
right: 0px;
|
||||
bottom: 50px;
|
||||
padding-top: 80px;
|
||||
padding-bottom: 10px;
|
||||
-moz-box-sizing: border-box;
|
||||
-webkit-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
background: #f7f7f7;
|
||||
border-left: 1px solid #d6d6d6;
|
||||
}
|
||||
.group.conversation .groupRoster li {
|
||||
padding: 3px;
|
||||
margin: 0px;
|
||||
font-size: 12px;
|
||||
position: relative;
|
||||
}
|
||||
.group.conversation .groupRoster li .name {
|
||||
padding-left: 10px;
|
||||
}
|
||||
.group.conversation .groupRoster li:before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 4px;
|
||||
top: 11px;
|
||||
height: 6px;
|
||||
width: 6px;
|
||||
margin-top: -3px;
|
||||
-moz-border-radius: 10px;
|
||||
-webkit-border-radius: 10px;
|
||||
-khtml-border-radius: 10px;
|
||||
-o-border-radius: 10px;
|
||||
-border-radius: 10px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
.group.conversation .groupRoster li.online:before,
|
||||
.group.conversation .groupRoster li.chat:before {
|
||||
background: #43bb6e;
|
||||
}
|
||||
.group.conversation .groupRoster li.dnd:before {
|
||||
background: #de0a32;
|
||||
}
|
||||
.group.conversation .groupRoster li.away:before,
|
||||
.group.conversation .groupRoster li.xa:before {
|
||||
background: #f18902;
|
||||
}
|
||||
.group.conversation .groupRoster li.offline:before {
|
||||
background: #2d2d2d;
|
||||
}
|
||||
.group.conversation .groupRoster li.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;
|
||||
}
|
||||
.group.conversation .groupRoster li.paused:before,
|
||||
.group.conversation .groupRoster li.idle:before {
|
||||
background: #ababab;
|
||||
}
|
||||
.main > div {
|
||||
padding: 20px;
|
||||
border-bottom: 1px solid #eee;
|
||||
|
@ -187,8 +187,8 @@
|
||||
overflow-y: auto
|
||||
overflow-x: hidden
|
||||
position: absolute
|
||||
width: 100%
|
||||
top: 0px
|
||||
right: 0px
|
||||
bottom: 55px
|
||||
padding-top: 75px
|
||||
borderbox()
|
||||
@ -340,3 +340,69 @@
|
||||
background-color: #fffcea
|
||||
border: 1px solid #efe391
|
||||
color: #d2bd2d
|
||||
|
||||
|
||||
.group.conversation
|
||||
|
||||
.messages
|
||||
right: 150px
|
||||
|
||||
.groupRoster
|
||||
width: 150px
|
||||
margin: 0px
|
||||
padding: 0px
|
||||
overflow-y: auto
|
||||
overflow-x: hidden
|
||||
position: absolute
|
||||
top: 0px
|
||||
right: 0px
|
||||
bottom: 50px
|
||||
padding-top: 80px
|
||||
padding-bottom: 10px
|
||||
borderbox()
|
||||
-webkit-overflow-scrolling: touch
|
||||
background: lighten($gray, 95%)
|
||||
border-left: 1px solid darken($gray-lighter, 10%)
|
||||
|
||||
li
|
||||
padding: 3px
|
||||
margin: 0px
|
||||
font-size: 12px
|
||||
position: relative
|
||||
|
||||
.name
|
||||
padding-left: 10px
|
||||
|
||||
&:before
|
||||
content: ''
|
||||
position: absolute
|
||||
left: 4px
|
||||
top: 11px
|
||||
height: 6px
|
||||
width: 6px
|
||||
margin-top: -3px
|
||||
roundall(10px)
|
||||
|
||||
&.online,
|
||||
&.chat
|
||||
&:before
|
||||
background: $green
|
||||
|
||||
&.dnd:before
|
||||
background: $red
|
||||
|
||||
&.away:before,
|
||||
&.xa:before
|
||||
background: $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,
|
||||
&.idle:before
|
||||
background: lighten($gray-light, 30%)
|
||||
|
@ -1,5 +1,5 @@
|
||||
CACHE MANIFEST
|
||||
# 0.0.1 1387579027983
|
||||
# 0.0.1 1388530344722
|
||||
|
||||
CACHE:
|
||||
/app.js
|
||||
|
Loading…
Reference in New Issue
Block a user