Fix CSS and horizontal dragresize for chat rooms.

- Rename .chat-body to .chatroom-body
- Upate SASS for chat rooms
- Hide the room occupants view by toggling the class "hidden"
- The chatroom chat area and occupants list are now shown as table cells.

converse.js

@@ -2869,7 +2869,7 @@
 
             renderChatArea: function () {
                 if (!this.$('.chat-area').length) {
-                    this.$('.chat-body').empty()
+                    this.$('.chatroom-body').empty()
                         .append(
                             converse.templates.chatarea({
                                 'show_toolbar': converse.show_toolbar,
@@ -2895,13 +2895,13 @@
                 if (!this.model.get('hidden_occupants')) {
                     this.model.save({hidden_occupants: true});
                     $el.removeClass('icon-hide-users').addClass('icon-show-users');
-                    this.$('form.sendXMPPMessage, .chat-area').animate({width: '100%'});
-                    this.$('div.participants').animate({width: 0}, this.scrollDown.bind(this));
+                    this.$('div.participants').addClass('hidden');
+                    this.scrollDown();
                 } else {
                     this.model.save({hidden_occupants: false});
                     $el.removeClass('icon-show-users').addClass('icon-hide-users');
-                    this.$('.chat-area, form.sendXMPPMessage').css({width: ''});
-                    this.$('div.participants').show().animate({width: 'auto'}, this.scrollDown.bind(this));
+                    this.$('div.participants').removeClass('hidden');
+                    this.scrollDown();
                 }
             },
 
@@ -3223,7 +3223,7 @@
                     function () {
                         $(this).remove();
                         that.$el.find('.chat-area').show();
-                        that.$el.find('.participants').show();
+                        that.$el.find('.participants').removeClass('hidden');
                     });
             },
 
@@ -3242,7 +3242,7 @@
                     function () {
                         $(this).remove();
                         that.$el.find('.chat-area').show();
-                        that.$el.find('.participants').show();
+                        that.$el.find('.participants').removeClass('hidden');
                     });
             },
 
@@ -3251,8 +3251,8 @@
                 if (this.$el.find('div.chatroom-form-container').length) {
                     return;
                 }
-                this.$('.chat-body').children().hide();
-                this.$('.chat-body').append(
+                this.$('.chatroom-body').children().hide();
+                this.$('.chatroom-body').append(
                     $('<div class="chatroom-form-container">'+
                         '<form class="chatroom-form">'+
                         '<span class="spinner centered"/>'+
@@ -3275,9 +3275,9 @@
             },
 
             renderPasswordForm: function () {
-                this.$('.chat-body').children().hide();
+                this.$('.chatroom-body').children().hide();
                 this.$('span.centered.spinner').remove();
-                this.$('.chat-body').append(
+                this.$('.chatroom-body').append(
                     converse.templates.chatroom_password_form({
                         heading: __('This chatroom requires a password'),
                         label_password: __('Password: '),
@@ -3290,7 +3290,7 @@
                 this.$('.chat-area').hide();
                 this.$('.participants').hide();
                 this.$('span.centered.spinner').remove();
-                this.$('.chat-body').append($('<p>'+msg+'</p>'));
+                this.$('.chatroom-body').append($('<p>'+msg+'</p>'));
             },
 
             /* http://xmpp.org/extensions/xep-0045.html
@@ -3462,8 +3462,6 @@
                         ($presence.attr('from') == this.model.get('id')+'/'+Strophe.escapeNode(nick));
                     if (this.model.get('connection_status') !== Strophe.Status.CONNECTED) {
                         this.model.set('connection_status', Strophe.Status.CONNECTED);
-                        this.$('span.centered.spinner').remove();
-                        this.$el.find('.chat-body').children().show();
                     }
                     this.showStatusMessages(pres, is_self);
                 }
@@ -6073,8 +6071,8 @@
 
         this.setUpXMLLogging = function () {
             if (this.debug) {
-                this.connection.xmlInput = function (body) { console.log(body.outerHTML); };
-                this.connection.xmlOutput = function (body) { console.log(body.outerHTML); };
+                this.connection.xmlInput = function (body) { console.log(body); };
+                this.connection.xmlOutput = function (body) { console.log(body); };
             }
         };
 

mockup/chatroom.html

@@ -31,7 +31,7 @@
                 <p class="chatroom-topic"></p>
                 <p></p>
             </div>
-            <div class="chat-body">
+            <div class="chatroom-body">
                 <div class="chatroom-form-container">
                     <form class="chatroom-form">
                         <legend>Configuration for discuss@conference.conversejs.com</legend>

mockup/index.html

@@ -361,16 +361,17 @@ JID: rassie.erasmus@localhost">Rassie Erasmus</span>
 
     <div class="chatroom" id="4a77380f1cd9d392627b0e1469688f9ca44e9392">
         <div class="flyout box-flyout">
-            <div class="dragresize"></div>
+            <div class="dragresize dragresize-top"></div>
+            <div class="dragresize dragresize-topleft"></div>
+            <div class="dragresize dragresize-left"></div>
             <div class="chat-head chat-head-chatroom">
                 <a class="close-chatbox-button icon-close"></a>
                 <a class="toggle-chatbox-button icon-minus"></a>
                 <a class="configure-chatroom-button icon-wrench" style=""></a>
-
                 <div class="chat-title"> Chatroom </div>
                 <p class="chatroom-topic">May the force be with you</p>
             </div>
-            <div class="chat-body">
+            <div class="chatroom-body">
                 <div class="chat-area">
                     <div class="chat-content">
                         <div class="chat-message ">
@@ -397,10 +398,9 @@ JID: rassie.erasmus@localhost">Rassie Erasmus</span>
                             <span class="chat-message-content">Another message to check that scrolling works.</span>
                         </div>
                     </div>
-
                     <form class="sendXMPPMessage" action="" method="post">
                         <ul class="chat-toolbar no-text-select">
-                            <li class="toggle-smiley icon-happy" title="Insert a smilery">
+                            <li class="toggle-smiley icon-happy" title="Insert a smiley">
                                 <ul>
                                     <li><a class="icon-smiley" href="#" data-emoticon=":)"></a></li>
                                     <li><a class="icon-wink" href="#" data-emoticon=";)"></a></li>
@@ -425,9 +425,9 @@ JID: rassie.erasmus@localhost">Rassie Erasmus</span>
                 </div>
                 <div class="participants">
                     <form class="room-invite">
-                        <input class="invited-contact tt-input" placeholder="Invite..." type="text"/>
+                        <span class="twitter-typeahead" style="position: relative; display: inline-block; direction: ltr;"><input class="invited-contact tt-hint" type="text" readonly="" autocomplete="off" spellcheck="false" tabindex="-1" style="position: absolute; top: 0px; left: 0px; border-color: transparent; box-shadow: none; opacity: 1;"><input class="invited-contact tt-input" placeholder="Invite..." type="text" autocomplete="off" spellcheck="false" dir="auto" style="position: relative; vertical-align: top; background-color: transparent;"><pre aria-hidden="true" style="position: absolute; visibility: hidden; white-space: pre;"></pre><span class="tt-dropdown-menu" style="position: absolute; top: 100%; z-index: 100; display: none; left: 0px; right: auto;"><div class="tt-dataset-contacts-dataset"></div></span></span>
                     </form>
-                    <label>Participants:</label>
+                    <label>Occupants:</label>
                     <ul class="participant-list">
                         <li class="participant" title="This user can send messages in this room">Obi-wan Kenobi, Jedi Master</li>
                         <li class="participant" title="This user can send messages in this room">jabber the hut</li>

sass/_variables.scss

@@ -15,7 +15,7 @@
   $chat-head-inverse-text-color: white !default;
   $chat-head-height: 44px !default;
   $save-button-color: #436F64 !default;
-  $chat-textarea-height: 62px !default;
+  $chat-textarea-height: 70px !default;
   $toolbar-height: 25px !default;
   $toolbar-color: beige !default;
   $message-them-color: #346121 !default;

spec/chatroom.js

@@ -404,7 +404,7 @@
                 view.onChatRoomPresence(presence, {nick: 'dummy', name: 'lounge@localhost'});
                 expect(view.$('.chat-area').is(':visible')).toBeFalsy();
                 expect(view.$('.participants').is(':visible')).toBeFalsy();
-                var $chat_body = view.$('.chat-body');
+                var $chat_body = view.$('.chatroom-body');
                 expect($chat_body.html().trim().indexOf('<p>You have been kicked from this room</p><p>The reason given is: "Avaunt, you cullion!"</p>')).not.toBe(-1);
             }.bind(converse));
 
@@ -576,7 +576,7 @@
                 });
                 waits(250);
                 runs(function () {
-                    var $chat_body = view.$el.find('.chat-body');
+                    var $chat_body = view.$el.find('.chatroom-body');
                     expect(view.renderPasswordForm).toHaveBeenCalled();
                     expect($chat_body.find('form.chatroom-form').length).toBe(1);
                     expect($chat_body.find('legend').text()).toBe('This chatroom requires a password');
@@ -595,7 +595,7 @@
                 var view = this.chatboxviews.get('problematic@muc.localhost');
                 spyOn(view, 'showErrorMessage').andCallThrough();
                 view.onChatRoomPresence(presence, {'nick': 'dummy'});
-                expect(view.$el.find('.chat-body p').text()).toBe('You are not on the member list of this room');
+                expect(view.$el.find('.chatroom-body p').text()).toBe('You are not on the member list of this room');
             }.bind(converse));
 
             it("will show an error message if the user has been banned", function () {
@@ -610,7 +610,7 @@
                 var view = this.chatboxviews.get('problematic@muc.localhost');
                 spyOn(view, 'showErrorMessage').andCallThrough();
                 view.onChatRoomPresence(presence, {'nick': 'dummy'});
-                expect(view.$el.find('.chat-body p').text()).toBe('You have been banned from this room');
+                expect(view.$el.find('.chatroom-body p').text()).toBe('You have been banned from this room');
             }.bind(converse));
 
             it("will show an error message if no nickname was specified for the user", function () {
@@ -625,7 +625,7 @@
                 var view = this.chatboxviews.get('problematic@muc.localhost');
                 spyOn(view, 'showErrorMessage').andCallThrough();
                 view.onChatRoomPresence(presence, {'nick': 'dummy'});
-                expect(view.$el.find('.chat-body p').text()).toBe('No nickname was specified');
+                expect(view.$el.find('.chatroom-body p').text()).toBe('No nickname was specified');
             }.bind(converse));
 
             it("will show an error message if the user is not allowed to have created the room", function () {
@@ -640,7 +640,7 @@
                 var view = this.chatboxviews.get('problematic@muc.localhost');
                 spyOn(view, 'showErrorMessage').andCallThrough();
                 view.onChatRoomPresence(presence, {'nick': 'dummy'});
-                expect(view.$el.find('.chat-body p').text()).toBe('You are not allowed to create new rooms');
+                expect(view.$el.find('.chatroom-body p').text()).toBe('You are not allowed to create new rooms');
             }.bind(converse));
 
             it("will show an error message if the user's nickname doesn't conform to room policy", function () {
@@ -655,7 +655,7 @@
                 var view = this.chatboxviews.get('problematic@muc.localhost');
                 spyOn(view, 'showErrorMessage').andCallThrough();
                 view.onChatRoomPresence(presence, {'nick': 'dummy'});
-                expect(view.$el.find('.chat-body p').text()).toBe("Your nickname doesn't conform to this room's policies");
+                expect(view.$el.find('.chatroom-body p').text()).toBe("Your nickname doesn't conform to this room's policies");
             }.bind(converse));
 
             it("will show an error message if the user's nickname is already taken", function () {
@@ -670,7 +670,7 @@
                 var view = this.chatboxviews.get('problematic@muc.localhost');
                 spyOn(view, 'showErrorMessage').andCallThrough();
                 view.onChatRoomPresence(presence, {'nick': 'dummy'});
-                expect(view.$el.find('.chat-body p').text()).toBe("Your nickname is already taken");
+                expect(view.$el.find('.chatroom-body p').text()).toBe("Your nickname is already taken");
             }.bind(converse));
 
             it("will show an error message if the room doesn't yet exist", function () {
@@ -685,7 +685,7 @@
                 var view = this.chatboxviews.get('problematic@muc.localhost');
                 spyOn(view, 'showErrorMessage').andCallThrough();
                 view.onChatRoomPresence(presence, {'nick': 'dummy'});
-                expect(view.$el.find('.chat-body p').text()).toBe("This room does not (yet) exist");
+                expect(view.$el.find('.chatroom-body p').text()).toBe("This room does not (yet) exist");
             }.bind(converse));
 
             it("will show an error message if the room has reached it's maximum number of occupants", function () {
@@ -700,7 +700,7 @@
                 var view = this.chatboxviews.get('problematic@muc.localhost');
                 spyOn(view, 'showErrorMessage').andCallThrough();
                 view.onChatRoomPresence(presence, {'nick': 'dummy'});
-                expect(view.$el.find('.chat-body p').text()).toBe("This room has reached it's maximum number of occupants");
+                expect(view.$el.find('.chatroom-body p').text()).toBe("This room has reached it's maximum number of occupants");
             }.bind(converse));
         }.bind(converse));
     }.bind(converse, mock, test_utils));

src/templates/chatroom.html

@@ -9,5 +9,5 @@
         <div class="chat-title"> {{ _.escape(name) }} </div>
         <p class="chatroom-topic"><p/>
     </div>
-    <div class="chat-body"><span class="spinner centered"/></div>
+    <div class="chatroom-body"><span class="spinner centered"/></div>
 </div>