More work towards letting users configure chatrooms

Add a configure button on chatrooms when the user is the chatroom owner.

converse.css

@@ -324,18 +324,19 @@ form.search-xmpp-contact input {
     padding: 3px 0 0 0;
 }
 
-.close-chatbox-button {
-    cursor: pointer;
-    float: right;
+a.configure-chatroom-button,
+a.close-chatbox-button {
     margin-top: 0.2em;
     margin-right: 0.5em;
+    cursor: pointer;
+    float: right;
+    width: 12px;
     -moz-box-shadow:inset 0 1px 0 0 #ffffff;
     -webkit-box-shadow:inset 0 1px 0 0 #ffffff;
     box-shadow:inset 0 1px 0 0 #ffffff;
     background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ffffff), color-stop(1, #f6f6f6) );
     background:-moz-linear-gradient( center top, #ffffff 5%, #f6f6f6 100% );
     filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#f6f6f6');
-    background-color:#ffffff;
     -moz-border-radius:6px;
     -webkit-border-radius:6px;
     border-radius:6px;
@@ -345,11 +346,19 @@ form.search-xmpp-contact input {
     font-family:arial;
     font-size:12px;
     font-weight:bold;
-    padding:0 4px;
     text-decoration:none;
     text-shadow:1px 1px 0 #ffffff;
 }
 
+a.configure-chatroom-button {
+    padding:0 4px;
+    background: #ffffff url('images/preferences-system.png') no-repeat center center;
+}
+
+.close-chatbox-button {
+    padding: 0 2px 0 6px;
+}
+
 .close-chatbox-button:hover {
     background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #f6f6f6), color-stop(1, #ffffff) );
     background:-moz-linear-gradient( center top, #f6f6f6 5%, #ffffff 100% );

converse.js

@@ -992,6 +992,7 @@
         className: 'chatroom',
         events: {
             'click a.close-chatbox-button': 'closeChat',
+            'click a.configure-chatroom-button': 'configureChatRoom',
             'keypress textarea.chat-textarea': 'keyPressed'
         },
         info_template: _.template('<div class="chat-event">{{message}}</div>'),
@@ -1039,6 +1040,7 @@
         template: _.template(
                 '<div class="chat-head chat-head-chatroom">' +
                     '<a class="close-chatbox-button">X</a>' +
+                    '<a class="configure-chatroom-button" style="display:none">&nbsp;</a>' +
                     '<div class="chat-title"> {{ name }} </div>' +
                     '<p class="chatroom-topic"><p/>' +
                 '</div>' +
@@ -1097,35 +1099,33 @@
             }
         },
 
+        configureChatRoom: function (ev) {
+            ev.preventDefault();
+            converse.connection.muc.configure(
+                this.model.get('jid'), 
+                $.proxy(this.showRoomConfigOptions, this)
+            );
+        },
+
         onChatRoomPresence: function (presence, room) {
             var nick = room.nick,
                 $presence = $(presence),
-                from = $presence.attr('from'), item;
+                from = $presence.attr('from'), $item;
             if ($presence.attr('type') !== 'error') {
                 if ($presence.find("status[code='201']").length) {
                     // This is a new chatroom. We create an instant
                     // chatroom, and let the user manually set any
                     // configuration setting. (2nd part is TODO)
                     converse.connection.muc.createInstantRoom(room.name);
-                    /* TODO: Find a place for this code (it configures a
-                        * newly created chatroom).
-                        * -------------------------------------------------
+                }
+                // check for status 110 to see if it's our own presence
+                if ($presence.find("status[code='110']").length) {
                     $item = $presence.find('item');
                     if ($item.length) {
                         if ($item.attr('affiliation') == 'owner') {
-                            if (false) {
-                            } else {
-                                converse.connection.muc.configure(
-                                    room.name, 
-                                    $.proxy(this.showRoomConfigOptions, this)
-                                );
-                            }
+                            this.$el.find('a.configure-chatroom-button').show();
                         }
                     }
-                    */
-                }
-                // check for status 110 to see if it's our own presence
-                if ($presence.find("status[code='110']").length) {
                     if ($presence.find("status[code='210']").length) {
                         // check if server changed our nick
                         this.model.set({'nick': Strophe.getResourceFromJid(from)});