More work towards making chatroom configurable

Added a form with inputs for the configuration options (not yet usable)

converse.css

@@ -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 {

converse.js

@@ -1044,7 +1044,7 @@
                     '<div class="chat-title"> {{ name }} </div>' +
                     '<p class="chatroom-topic"><p/>' +
                 '</div>' +
-                '<div>' +
+                '<div class="chat-body">' +
                     '<div class="chat-area">' +
                         '<div class="chat-content"></div>' +
                         '<form class="sendXMPPMessage" action="" method="post">' +
@@ -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)