Chapril/xmpp.chapril.org-conversejs
Chapril/xmpp.chapril.org-conversejs
25
0
Fork 0
Code Issues Pull Requests Projects Releases Activity

More work towards making chatroom configurable

Browse Source 
Added a form with inputs for the configuration options (not yet usable)
This commit is contained in:
JC Brand 2013-05-11 18:14:06 +02:00
parent 0914887b4f
commit b470d2a571
2 changed files with 64 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
converse.css
View File

@ -63,6 +63,12 @@ img.spinner {
background-color: #2D617A;
}
.chatroom .chat-body {
height: 272px;
background-color: white;
border-radius: 4px;
}
.chatroom .chat-area {
float: left;
width: 200px;
@ -376,6 +382,34 @@ a.configure-chatroom-button {
padding-top: 0.5em;
}
.configure-chatroom-container {
color: #666;
padding: 5px;
height: 262px;
overflow-y: auto;
border-bottom-right-radius: 4px;
border-bottom-left-radius: 4px;
}
.configure-chatroom {
background: white;
font-size: 12px;
padding: 0;
}
.configure-chatroom legend {
font-size: 14px;
font-weight: bold;
}
.configure-chatroom label {
font-weight: bold;
}
.configure-chatroom input {
display: block;
}
#converse-roster dd.odd {
background-color: #DCEAC5; /* Make this difference */
}
@ -557,6 +591,8 @@ dd.available-chatroom:hover a.open-room {
height:272px;
width: 199px;
padding: 0;
border-bottom-right-radius: 4px;
border-bottom-left-radius: 4px;
}
.oc-chat-content dd {
@ -672,6 +708,8 @@ div#settings {
font-size: 14px;
width: 199px;
background-color: white;
border-bottom-right-radius: 4px;
border-bottom-left-radius: 4px;
}
form.sendXMPPMessage {

42
converse.js
View File

@ -1044,17 +1044,17 @@
'<div class="chat-title"> {{ name }} </div>' +
'<p class="chatroom-topic"><p/>' +
'</div>' +
'<div>' +
'<div class="chat-area">' +
'<div class="chat-content"></div>' +
'<form class="sendXMPPMessage" action="" method="post">' +
'<textarea type="text" class="chat-textarea" ' +
'placeholder="Message"/>' +
'</form>' +
'</div>' +
'<div class="participants">' +
'<ul class="participant-list"></ul>' +
'</div>' +
'<div class="chat-body">' +
'<div class="chat-area">' +
'<div class="chat-content"></div>' +
'<form class="sendXMPPMessage" action="" method="post">' +
'<textarea type="text" class="chat-textarea" ' +
'placeholder="Message"/>' +
'</form>' +
'</div>' +
'<div class="participants">' +
'<ul class="participant-list"></ul>' +
'</div>' +
'</div>'),
initialize: function () {
@ -1084,23 +1084,33 @@
showRoomConfigOptions: function (stanza) {
// FIXME: Show a proper configuration form
var $chat_content = this.$el.find('.chat-content'),
var $form= this.$el.find('form.configure-chatroom'),
$stanza = $(stanza),
$fields = $stanza.find('field'),
title = $stanza.find('title').text(),
instructions = $stanza.find('instructions').text(),
i;
$chat_content.append(title);
$chat_content.append(instructions);
$form.append($('<legend>').text(title));
if (instructions != title) {
$form.append($('<p>').text(instructions));
}
for (i=0; i<$fields.length; i++) {
$field = $($fields[i]);
$chat_content.append('<label>'+$field.attr('label')+'</label>');
// $chat_content.append('<input type="text" name=">'+$field.attr('label')+'</label>');
if ($field.attr('label')) {
$form.append('<label>'+$field.attr('label')+'</label>');
$form.append('<input type="text">');
}
}
},
configureChatRoom: function (ev) {
ev.preventDefault();
this.$el.find('.chat-area').hide();
this.$el.find('.participants').hide();
this.$el.find('.chat-body').append(
$('<div class="configure-chatroom-container">'+
'<form class="configure-chatroom"></form>'+
'</div>'));
converse.connection.muc.configure(
this.model.get('jid'),
$.proxy(this.showRoomConfigOptions, this)