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); };
             }
         };
 

css/converse.css

@@ -478,7 +478,7 @@
     border-left: 1px solid #176679; }
   #conversejs .chat-content {
     position: relative;
-    padding: 8px;
+    padding: 0.5em;
     font-size: 13px;
     color: #6C4C44;
     overflow-y: auto;
@@ -486,7 +486,7 @@
     background-color: #ffffff;
     line-height: 1.3em;
     height: 206px;
-    height: calc(100% - 89px); }
+    height: calc(100% - 96px); }
   #conversejs .chat-info {
     color: #6C4C44; }
   #conversejs .chat-error {
@@ -875,55 +875,75 @@
       padding: 4px 7px 0 5px; }
   #conversejs .chatroom {
     width: 300px; }
-    #conversejs .chatroom .box-flyout {
-      width: 300px; }
     @media screen and (max-width: 480px) {
       #conversejs .chatroom {
         width: 100%; }
         #conversejs .chatroom .box-flyout {
+          min-width: 100%;
           width: 100%; } }
+    #conversejs .chatroom .box-flyout {
+      min-width: 300px;
+      width: 300px; }
+      #conversejs .chatroom .box-flyout .chatroom-body {
+        height: 289px;
+        border-bottom-left-radius: 4px;
+        border-bottom-right-radius: 4px;
+        height: -webkit-calc(100% - 44px);
+        height: calc(100% - 44px);
+        background-color: white;
+        border-top: 0;
+        display: table;
+        table-layout: fixed;
+        width: 100%; }
+        #conversejs .chatroom .box-flyout .chatroom-body .chat-area {
+          word-wrap: break-word;
+          display: table-cell;
+          height: 100%;
+          min-width: 200px; }
+          #conversejs .chatroom .box-flyout .chatroom-body .chat-area .chat-content {
+            padding: 0.5em 0.5em 0 0.5em; }
+        #conversejs .chatroom .box-flyout .chatroom-body .participants {
+          display: table-cell;
+          vertical-align: top;
+          background-color: white;
+          overflow-y: auto;
+          overflow-x: hidden;
+          border-left: 1px solid #AAA;
+          border-bottom-right-radius: 4px;
+          width: 100px;
+          height: 100%; }
+          #conversejs .chatroom .box-flyout .chatroom-body .participants.hidden {
+            display: none; }
+          #conversejs .chatroom .box-flyout .chatroom-body .participants .participant-list {
+            list-style: none; }
+            #conversejs .chatroom .box-flyout .chatroom-body .participants .participant-list li {
+              cursor: default;
+              display: block;
+              font-size: 12px;
+              font-weight: bold;
+              overflow: hidden;
+              padding: 2px 5px;
+              text-overflow: ellipsis;
+              white-space: nowrap;
+              width: 100px; }
+              #conversejs .chatroom .box-flyout .chatroom-body .participants .participant-list li.moderator {
+                color: #8f2831; }
+          #conversejs .chatroom .box-flyout .chatroom-body .participants label {
+            font-size: 12px;
+            font-style: italic;
+            margin: 5px;
+            display: block; }
     #conversejs .chatroom label {
       margin-left: 2px;
       font-size: 12px; }
-    #conversejs .chatroom .participant-list {
-      list-style: none; }
-      #conversejs .chatroom .participant-list li {
-        cursor: default;
-        display: block;
-        font-size: 12px;
-        font-weight: bold;
-        overflow: hidden;
-        padding: 2px 5px;
-        text-overflow: ellipsis;
-        white-space: nowrap; }
-        #conversejs .chatroom .participant-list li.moderator {
-          color: #8f2831; }
     #conversejs .chatroom .chat-textarea {
       border-bottom-right-radius: 0; }
-    #conversejs .chatroom .chat-area {
-      float: left;
-      height: 100%;
-      min-width: 200px; }
     #conversejs .chatroom .invited-contact {
       margin: -1px 0 0 -1px;
       width: 100px;
       border: 1px solid #999; }
     #conversejs .chatroom .invited-contact.tt-input {
       background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH3gkBCjE0uzKkOgAAAidJREFUKM+N0k+IEnEUB/D3cyscdagkWpHV0WGWREXm0AgOGkSJ07kh2UXYU5cOewm6Bp0KXG/tpSCv6hyEFQIhMEaE3yERYfwTOoqKGLQxDAbqYadLgu7J7/XxeY/3ez8EACDLsgljfMfj8ZxUKhXXYDAAnueBoqgyAMipVOovXAuSZdnUaDQeDofDs16vFyUIAjRNUwmCoG02G1AUdZ5IJN7GYrHfm3AvEAjcnUwmX0ajUdRqtV74fL6sruufKYoa6bp+fzabPUMI7ZfL5eImNHk8npNerxc1m80XHMe98fv9H3K5XDkSibxjWfb1arWaYoyPMMbCFqxUKi6CIODw8LDmdDq7oigaAACiKK5omv7KcdylpmlIkiTHFlRVFTRNUxVFqa/ROqIoGoqi5A3DgFartfU4Jp7ngSAI2uVyPZIk6dZmUZKk2w6H4xghBPF4HK7vWLbZbDCdTp+rqvpUkiS0RvV6/bTf7x8wDHMViURqm/AGAMgURZ232+1X1Wr102KxuEwmk3lZlo/7/f7BcrkkSZKs2e12tHXH/x/gHsY4jTE+0jQNGYYBCCFgGOaKJMkfjUaDZximGQ6HXzSbzZ+ZTMbY6oIxFgqFgqPT6YAgCMBxXM1ut6N0Op0fj8chi8XyjWXZ98Fg8DuCHZLNZh+USqWP8/n8idvt/hUKhV7u7QK9Xu8fmqanAJBQVXUfAGY7TQQAKBaLN8fjsdDtdh/run72Dzhf7XLe2UevAAAAAElFTkSuQmCC) no-repeat right 3px center; }
-    #conversejs .chatroom .participants {
-      float: right;
-      background-color: white;
-      overflow-y: auto;
-      overflow-x: hidden;
-      border-left: 1px solid #AAA;
-      border-bottom-right-radius: 4px;
-      width: 100px;
-      height: 100%; }
-      #conversejs .chatroom .participants label {
-        font-size: 12px;
-        font-style: italic;
-        margin: 5px;
-        display: block; }
   #conversejs .chatroom-form,
   #conversejs .controlbox-pane {
     background-color: white;
@@ -1093,24 +1113,21 @@
           text-decoration: none; }
         #conversejs .chat-head #controlbox-tabs li a:hover {
           color: #6C4C44; }
-  #conversejs div#chatrooms {
+  #conversejs #chatrooms {
     overflow-y: auto; }
   #conversejs form.sendXMPPMessage {
     -moz-background-clip: padding;
-    -moz-border-radius: 4px;
     -webkit-background-clip: padding-box;
-    -webkit-border-radius: 4px;
+    border-bottom-left-radius: 4px;
+    border-bottom-right-radius: 4px;
     background-clip: padding-box;
     background: white;
-    border-radius: 4px;
-    border-top-left-radius: 0;
-    border-top-right-radius: 0;
     border-top: 1px solid #BBB;
     border: 0;
     margin: 0;
     padding: 0;
     position: relative;
-    height: 87px;
+    height: 95px;
     min-width: 200px; }
     @media screen and (max-width: 480px) {
       #conversejs form.sendXMPPMessage {
@@ -1119,78 +1136,78 @@
       border-bottom-left-radius: 4px;
       border-bottom-right-radius: 4px;
       border: 0;
-      height: 62px;
+      height: 70px;
       padding: 0.5em;
       width: 100%;
       resize: none; }
-  #conversejs .chat-toolbar {
-    font-size: 14px;
-    margin: 0;
-    padding: 5px;
-    height: 25px;
-    display: block;
-    background-color: beige; }
-    #conversejs .chat-toolbar a {
-      color: #436F64; }
-    #conversejs .chat-toolbar .unencrypted a,
-    #conversejs .chat-toolbar .unencrypted {
-      color: #8f2831; }
-    #conversejs .chat-toolbar .unverified a,
-    #conversejs .chat-toolbar .unverified {
-      color: #cf5300; }
-    #conversejs .chat-toolbar .private a,
-    #conversejs .chat-toolbar .private {
-      color: #4b7003; }
-    #conversejs .chat-toolbar .toggle-participants,
-    #conversejs .chat-toolbar .toggle-clear,
-    #conversejs .chat-toolbar .toggle-otr {
-      float: right; }
-    #conversejs .chat-toolbar li {
-      display: inline-block;
-      list-style: none;
-      padding: 0 3px 0 3px;
-      cursor: pointer;
-      margin-top: 1px; }
-    #conversejs .chat-toolbar li:hover {
-      cursor: pointer; }
-    #conversejs .chat-toolbar ul {
-      background: #fff;
-      bottom: 100%;
-      box-shadow: -1px -1px 2px 0 rgba(0, 0, 0, 0.4);
-      display: none;
-      font-size: 12px;
-      margin: 0 0 1px 0;
-      position: absolute;
-      right: 0; }
-      #conversejs .chat-toolbar ul li {
-        cursor: pointer;
-        list-style: none;
-        position: relative; }
-        #conversejs .chat-toolbar ul li a:hover {
-          color: #8f2831; }
-    #conversejs .chat-toolbar .toggle-smiley {
-      color: #436F64;
-      padding-left: 5px; }
-      #conversejs .chat-toolbar .toggle-smiley ul li {
-        font-size: 14px;
-        padding: 5px;
-        z-index: 98; }
-      #conversejs .chat-toolbar .toggle-smiley ul li:hover {
-        background-color: #E1E6E5; }
-    #conversejs .chat-toolbar .toggle-otr ul li {
-      padding: 7px;
-      background-color: white;
+    #conversejs form.sendXMPPMessage .chat-toolbar {
+      font-size: 14px;
+      margin: 0;
+      padding: 5px;
+      height: 25px;
       display: block;
-      z-index: 99; }
-      #conversejs .chat-toolbar .toggle-otr ul li a {
-        -moz-transition: background-color 0.2s ease-in-out;
-        -webkit-transition: background-color 0.2s ease-in-out;
-        transition: background-color 0.2s ease-in-out;
+      background-color: beige; }
+      #conversejs form.sendXMPPMessage .chat-toolbar a {
+        color: #436F64; }
+      #conversejs form.sendXMPPMessage .chat-toolbar .unencrypted a,
+      #conversejs form.sendXMPPMessage .chat-toolbar .unencrypted {
+        color: #8f2831; }
+      #conversejs form.sendXMPPMessage .chat-toolbar .unverified a,
+      #conversejs form.sendXMPPMessage .chat-toolbar .unverified {
+        color: #cf5300; }
+      #conversejs form.sendXMPPMessage .chat-toolbar .private a,
+      #conversejs form.sendXMPPMessage .chat-toolbar .private {
+        color: #4b7003; }
+      #conversejs form.sendXMPPMessage .chat-toolbar .toggle-participants,
+      #conversejs form.sendXMPPMessage .chat-toolbar .toggle-clear,
+      #conversejs form.sendXMPPMessage .chat-toolbar .toggle-otr {
+        float: right; }
+      #conversejs form.sendXMPPMessage .chat-toolbar li {
+        display: inline-block;
+        list-style: none;
+        padding: 0 3px 0 3px;
+        cursor: pointer;
+        margin-top: 1px; }
+      #conversejs form.sendXMPPMessage .chat-toolbar li:hover {
+        cursor: pointer; }
+      #conversejs form.sendXMPPMessage .chat-toolbar ul {
+        background: #fff;
+        bottom: 100%;
+        box-shadow: -1px -1px 2px 0 rgba(0, 0, 0, 0.4);
+        display: none;
+        font-size: 12px;
+        margin: 0 0 1px 0;
+        position: absolute;
+        right: 0; }
+        #conversejs form.sendXMPPMessage .chat-toolbar ul li {
+          cursor: pointer;
+          list-style: none;
+          position: relative; }
+          #conversejs form.sendXMPPMessage .chat-toolbar ul li a:hover {
+            color: #8f2831; }
+      #conversejs form.sendXMPPMessage .chat-toolbar .toggle-smiley {
+        color: #436F64;
+        padding-left: 5px; }
+        #conversejs form.sendXMPPMessage .chat-toolbar .toggle-smiley ul li {
+          font-size: 14px;
+          padding: 5px;
+          z-index: 98; }
+        #conversejs form.sendXMPPMessage .chat-toolbar .toggle-smiley ul li:hover {
+          background-color: #E1E6E5; }
+      #conversejs form.sendXMPPMessage .chat-toolbar .toggle-otr ul li {
+        padding: 7px;
+        background-color: white;
         display: block;
-        padding: 1px;
-        text-decoration: none; }
-    #conversejs .chat-toolbar .toggle-otr ul li:hover {
-      background-color: #E1E6E5; }
+        z-index: 99; }
+        #conversejs form.sendXMPPMessage .chat-toolbar .toggle-otr ul li a {
+          -moz-transition: background-color 0.2s ease-in-out;
+          -webkit-transition: background-color 0.2s ease-in-out;
+          transition: background-color 0.2s ease-in-out;
+          display: block;
+          padding: 1px;
+          text-decoration: none; }
+      #conversejs form.sendXMPPMessage .chat-toolbar .toggle-otr ul li:hover {
+        background-color: #E1E6E5; }
   #conversejs .chat-toolbar-text {
     font-size: 12px;
     padding-right: 3px;

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/chatroom2.html

@@ -0,0 +1,309 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <title id="pageTitle">Converse.js: Mockup</title>
+    <meta charset="utf-8">
+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+    <meta name="description" content="Converse.js: Mockup" />
+    <link type="text/css" href="../css/theme.css" rel="stylesheet" media="screen" />
+    <link type="text/css" href="../css/converse.css" rel="stylesheet" media="screen" />
+    <script src="../components/jquery/dist/jquery.min.js"></script>
+</head>
+<body id="page-top" data-spy="scroll" data-target=".navbar-custom">
+
+<!-- HEADER -->
+<div id="header_wrap" class="outer">
+    <header class="inner">
+        <h1 id="project_title"><a href="http://conversejs.org">Converse.js</a></h1>
+        <h2 id="project_tagline">Static Mockup</h2>
+    </header>
+</div>
+
+<div id="conversejs">
+    <a id="toggle-controlbox" href="#" class="toggle-controlbox">
+        <span class="conn-feedback">Toggle Chat</span>
+        <span style="display: none" id="online-count">(0)</span>
+    </a>
+
+    <div class="chatroom" id="4a77380f1cd9d392627b0e1469688f9ca44e9392">
+        <div class="flyout box-flyout">
+            <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="chatroom-body">
+                <div class="chat-area">
+                    <div class="chat-content">
+                        <div class="chat-message ">
+                            <span class="chat-message-room">18:50 luke:&nbsp;</span>
+                            <span class="chat-message-content">leia: hi :)</span>
+                        </div>
+                        <div class="chat-message ">
+                            <span class="chat-message-room">19:40 leia:&nbsp;</span>
+                            <span class="chat-message-content">
+                                I'll be gone for a while, will be back in about an hour</span>
+                        </div>
+                        <time class="chat-date" datetime="2013-06-04T00:00:00.000Z">Tue Jun 04 2013</time>
+                        <div class="chat-message ">
+                            <span class="chat-message-room">19:40 Obi-wan Kenobi, Jedi Master:&nbsp;</span>
+                            <span class="chat-message-content">
+                                I'll be gone for a while, will be back in about an hour</span>
+                        </div>
+                        <div class="chat-message">
+                            <span class="chat-message-me">19:42 me:&nbsp;</span>
+                            <span class="chat-message-content">Supercalifragilisticexpialidociousstillnotlongenough</span>
+                        </div>
+                        <div class="chat-message ">
+                            <span class="chat-message-room">19:43 Obi-wan Kenobi, Jedi Master:&nbsp;</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 smiley">
+                                <ul>
+                                    <li><a class="icon-smiley" href="#" data-emoticon=":)"></a></li>
+                                    <li><a class="icon-wink" href="#" data-emoticon=";)"></a></li>
+                                    <li><a class="icon-grin" href="#" data-emoticon=":D"></a></li>
+                                    <li><a class="icon-tongue" href="#" data-emoticon=":P"></a></li>
+                                    <li><a class="icon-cool" href="#" data-emoticon="8)"></a></li>
+                                    <li><a class="icon-evil" href="#" data-emoticon=">:)"></a></li>
+                                    <li><a class="icon-confused" href="#" data-emoticon=":S"></a></li>
+                                    <li><a class="icon-wondering" href="#" data-emoticon=":\"></a></li>
+                                    <li><a class="icon-angry" href="#" data-emoticon=">:("></a></li>
+                                    <li><a class="icon-sad" href="#" data-emoticon=":("></a></li>
+                                    <li><a class="icon-shocked" href="#" data-emoticon=":O"></a></li>
+                                    <li><a class="icon-thumbs-up" href="#" data-emoticon="(^.^)b"></a></li>
+                                    <li><a class="icon-heart" href="#" data-emoticon="<3"></a></li>
+                                </ul>
+                            </li>
+                            <li class="toggle-participants"><a class="icon-hide-users" title="Hide the list of participants"></a></li>
+                            <li class="toggle-clear"><a class="icon-remove" title="Clear all messages"></a></li>
+                        </ul>
+                        <textarea type="text" class="chat-textarea" placeholder="Message"></textarea>
+                    </form>
+                </div>
+                <div class="participants">
+                    <form class="room-invite">
+                        <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>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>
+                        <li class="participant" title="This user can send messages in this room">leia</li>
+                        <li class="moderator" title="This user is a moderator">luke</li>
+                    </ul>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <div class="chatroom" id="6d8627960a0cb066d9216742f3edccc3dbbf85a9">
+        <div class="flyout box-flyout">
+            <div class="dragresize"></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" style="display:none">&nbsp;</a>
+                <div class="chat-title"> Restricted Chatroom</div>
+                <p class="chatroom-topic"></p>
+                <p></p>
+            </div>
+            <div class="chat-body">
+                <div class="chatroom-form-container">
+                    <form class="chatroom-form">
+                        <!-- TODO: Make this a long form that scrolls -->
+                        <legend>This chatroom requires a password</legend>
+                        <label>Password:</label>
+                        <input type="password" name="password">
+                    </form>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <div id="minimized-chats">
+        <a id="toggle-minimized-chats" href="#">
+            Minimized <span id="minimized-count">(0)</span>
+            <span class="unread-message-count" href="#" style="display:block">322</span>
+        </a>
+        <div class="flyout minimized-chats-flyout">
+            <div class="chat-head chat-head-chatroom">
+                <a class="close-chatbox-button icon-close"></a>
+                <a class="chat-head-message-count" href="#" style="display:block">3</a>
+                <div class="chat-title">
+                    <a href="#" class="restore-chat" title="Click to maximize this chat">
+                        Restricted Chatroom
+                    </a>
+                </div>
+            </div>
+            <div class="chat-head chat-head-chatbox">
+                <a class="close-chatbox-button icon-close"></a>
+                <a class="chat-head-message-count" href="#" style="display:block">42</a>
+                <div class="chat-title">
+                    <a href="#" class="restore-chat" title="Click to maximize this chat">
+                        JC Brand
+                    </a>
+                </div>
+            </div>
+            <div class="chat-head chat-head-chatroom">
+                <a class="close-chatbox-button icon-close"></a>
+                <div class="chat-title">
+                    <a href="#" class="restore-chat" title="Click to maximize this chat">
+                        My Chatroom
+                    </a>
+                </div>
+            </div>
+            <div class="chat-head chat-head-chatbox"><a class="close-chatbox-button icon-close"></a>
+                <div class="chat-title">
+                    <a href="#" class="restore-chat" title="Click to maximize this chat">
+                        Annegreet Gomez
+                    </a>
+                </div>
+            </div>
+            <div class="chat-head chat-head-chatbox">
+                <a class="close-chatbox-button icon-close"></a>
+                <a class="chat-head-message-count" href="#" style="display:block">842</a>
+                <div class="chat-title">
+                    <a href="#" class="restore-chat" title="Click to maximize this chat">
+                        Asmaa Haakman
+                    </a>
+                </div>
+            </div>
+            <div class="chat-head chat-head-chatbox"><a class="close-chatbox-button icon-close"></a>
+                <div class="chat-title">
+                    <a href="#" class="restore-chat" title="Click to maximize this chat">
+                        Candice van der Knijff
+                    </a>
+                </div>
+            </div>
+            <div class="chat-head chat-head-chatbox"><a class="close-chatbox-button icon-close"></a>
+                <div class="chat-title">
+                    <a href="#" class="restore-chat" title="Click to maximize this chat">
+                        Laura Grunewald
+                    </a>
+                </div>
+            </div>
+            <div class="chat-head chat-head-chatbox"><a class="close-chatbox-button icon-close"></a>
+                <div class="chat-title">
+                    <a href="#" class="restore-chat">
+                        Lena Grunewald
+                    </a>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+
+<script>
+$(document).ready(function () {
+    $('a[href=#chatrooms]').click(function (ev) { 
+        switchTab(ev);
+    });
+    $('a[href=#users]').click(function (ev) {
+        switchTab(ev); 
+    });
+    $('a[href=#register]').click(function (ev) { 
+        switchTab(ev);
+    });
+
+    $("a.choose-xmpp-status").click(function (ev) {
+        ev.preventDefault();
+        $(ev.target).parent().parent().siblings('dd').find('ul').toggle('fast');
+    });
+
+    $("a.change-xmpp-status-message").click(function (ev) {
+        ev.preventDefault();
+        var form = ''+
+                '<form id="set-custom-xmpp-status">' +
+                    '<input type="text" class="custom-xmpp-status" placeholder="Custom status"/>' +
+                    '<button type="submit">Save</button>' +
+                '</form>';
+
+        $(ev.target).closest('.xmpp-status').replaceWith(form);
+        $(ev.target).closest('.custom-xmpp-status').focus().focus();
+    });
+
+    $('.toggle-xmpp-contact-form').click(function (ev) {
+        ev.preventDefault();
+        $(ev.target).parent().parent().find('.search-xmpp').toggle('fast', function () {
+            if ($(this).is(':visible')) {
+                $(this).find('input.username').focus();
+            }
+        });
+    });
+
+    var switchTab = function (ev) {
+        ev.preventDefault();
+        var $tab = $(ev.target),
+            $sibling = $tab.parent().siblings('li').children('a'),
+            $tab_panel = $($tab.attr('href')),
+            $sibling_panel = $($sibling.attr('href'));
+
+        $sibling_panel.hide();
+        $sibling.removeClass('current');
+        $tab.addClass('current');
+        $tab_panel.show();
+    }
+
+    $(function() {
+        $('.close-chatbox-button').click(function(ev) {
+            var $grandparent = $(ev.target).parent().parent().parent();
+            $grandparent.hide(300, function () {
+                // Webkit fix
+                document.getElementById('conversejs').style.display = 'none';
+                document.getElementById('conversejs').offsetHeight; // no need to store this anywhere, the reference is enough
+                document.getElementById('conversejs').style.display = 'block';
+            });
+        });
+
+        $('.toggle-participants a').click(function (ev) {
+            var $el = $(ev.target);
+            if ($el.hasClass("icon-hide-users")) {
+                $el.removeClass('icon-hide-users').addClass('icon-show-users');
+                $('div.participants').animate({width: 0}).hide();
+                $el.closest('.chat-area').animate({width: '100%'});
+                $el.closest('form.sendXMPPMessage').animate({width: '100%'});
+            } else {
+                $el.removeClass('icon-show-users').addClass('icon-hide-users');
+                $el.closest('.chat-area').animate({width: '200px'}, function () {
+                    $('div.participants').css({width: '100px'}).show();
+                });
+                $el.closest('form.sendXMPPMessage').animate({width: '200px'});
+            }
+        });
+
+        $('.toggle-chatbox-button').click(function(ev) {
+            var $grandparent = $(ev.target).parent().parent().parent();
+            $grandparent.fadeOut('fast');
+        });
+
+        // Clickable Dropdown
+        $('.toggle-otr').click(function(e) {
+            $('.toggle-otr ul').slideToggle(200);
+            e.stopPropagation();
+        });
+
+        $('.toggle-smiley').click(function(e) {
+            $(e.target).find('ul').slideToggle(200);
+            e.stopPropagation();
+        });
+        $(document).click(function() {
+            if ($('.toggle-otr ul').is(':visible')) {
+                $('.toggle-otr ul', this).slideUp(200);
+            }
+            if ($('.toggle-smiley ul').is(':visible')) {
+                $('.toggle-smiley ul', this).slideUp(200);
+            }
+        });
+    });
+});
+</script>
+</html>

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/_core.scss

@@ -415,45 +415,41 @@
     }
   }
 
-  .tt-dropdown-menu {
-    margin: 0 1px 0 1px;
-    width: 96px;
-    max-height: 250px;
-    overflow-x: hidden;
-    overflow-y: auto;
-    text-overflow: ellipsis;
-    background: #27774A;
-    border-bottom-right-radius: $chatbox-border-radius;
-    border-bottom-left-radius: $chatbox-border-radius;
-  }
-
-  .chat-blink {
-    background-color: #176679;
-    border-right: 1px solid #176679;
-    border-left: 1px solid #176679;
-  }
-
-  .chat-content {
-    position: relative;
-    padding: 8px;
-    font-size: 13px;
-    color: $text-color;
-    overflow-y: auto;
-    border: 0;
-    background-color: #ffffff;
-    line-height: 1.3em;
-    height: 206px;
-    height: calc(100% - #{$toolbar-height + $chat-textarea-height + 2});
-  }
-
-  .chat-info {
-    color: $text-color;
-  }
-
-  .chat-error {
-    color: $warning-color;
-    font-weight: bold;
-  }
+    .tt-dropdown-menu {
+        margin: 0 1px 0 1px;
+        width: 96px;
+        max-height: 250px;
+        overflow-x: hidden;
+        overflow-y: auto;
+        text-overflow: ellipsis;
+        background: #27774A;
+        border-bottom-right-radius: $chatbox-border-radius;
+        border-bottom-left-radius: $chatbox-border-radius;
+    }
+    .chat-blink {
+        background-color: #176679;
+        border-right: 1px solid #176679;
+        border-left: 1px solid #176679;
+    }
+    .chat-content {
+        position: relative;
+        padding: 0.5em;
+        font-size: 13px;
+        color: $text-color;
+        overflow-y: auto;
+        border: 0;
+        background-color: #ffffff;
+        line-height: 1.3em;
+        height: 206px;
+        height: calc(100% - #{$toolbar-height + $chat-textarea-height +1px});
+    }
+    .chat-info {
+        color: $text-color;
+    }
+    .chat-error {
+        color: $warning-color;
+        font-weight: bold;
+    }
 
   .chat-error,
   .chat-info,
@@ -989,98 +985,119 @@
     }
   }
 
-  .chatroom {
-    width: $chatroom-width;
-    .box-flyout {
-      width: $chatroom-width;
-    }
-    @media screen and (max-width: $mobile-landscape-length) {
-      width: $mobile-chat-width;
-      .box-flyout {
-        width: $mobile-chat-width;
-      }
-    }
+    .chatroom {
+        width: $chatroom-width;
+        @media screen and (max-width: $mobile-landscape-length) {
+            width: $mobile-chat-width;
+            .box-flyout {
+                min-width: $mobile-chat-width;
+                width: $mobile-chat-width;
+            }
+        }
+        .box-flyout {
+            min-width: $chatroom-width;
+            width: $chatroom-width;
+            .chatroom-body {
+                height: 289px;
+                @include border-bottom-radius($chatbox-border-radius);
+                @include calc(height, '100% - #{$chat-head-height}');
+                background-color: white;
+                border-top: 0;
+                display: table;
+                table-layout: fixed;
+                width: 100%;
+                .chat-area {
+                    word-wrap: break-word; 
+                    display: table-cell;
+                    height: 100%;
+                    min-width: $chat-width;
+                    .chat-content {
+                        padding: 0.5em 0.5em 0 0.5em; // Work around a weird box-sizing issue in Chromium related to bottom padding.
+                    }
+                }
+                .participants {
+                    display: table-cell;
+                    vertical-align: top;
+                    background-color: white;
+                    overflow-y: auto;
+                    overflow-x: hidden;
+                    border-left: 1px solid #AAA;
+                    border-bottom-right-radius: $chatbox-border-radius;
+                    width: 100px;
+                    height: 100%;
+                    &.hidden {
+                        display: none;
+                    }
+                    .participant-list {
+                        list-style: none;
+                        li {
+                            cursor: default;
+                            display: block;
+                            font-size: 12px;
+                            font-weight: bold;
+                            overflow: hidden;
+                            padding: 2px 5px;
+                            text-overflow: ellipsis;
+                            white-space: nowrap;
+                            width: 100px;
+                            &.moderator {
+                                color: #8f2831;
+                            }
+                        }
+                    }
+                    label {
+                        font-size: 12px;
+                        font-style: italic;
+                        margin: 5px;
+                        display: block;
+                    }
+                }
+            }
+        }
 
-    label {
-      margin-left: 2px;
-      font-size: 12px;
-    }
-    .participant-list {
-      list-style: none;
-      li {
-        cursor: default;
-        display: block;
-        font-size: 12px;
-        font-weight: bold;
-        overflow: hidden;
-        padding: 2px 5px;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-        &.moderator {
-          color: #8f2831;
+        label {
+            margin-left: 2px;
+            font-size: 12px;
+        }
+        .chat-textarea {
+            border-bottom-right-radius: 0;
+        }
+        .invited-contact {
+            margin: -1px 0 0 -1px;
+            width: 100px;
+            border: 1px solid #999;
+        }
+        .invited-contact.tt-input {
+            background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH3gkBCjE0uzKkOgAAAidJREFUKM+N0k+IEnEUB/D3cyscdagkWpHV0WGWREXm0AgOGkSJ07kh2UXYU5cOewm6Bp0KXG/tpSCv6hyEFQIhMEaE3yERYfwTOoqKGLQxDAbqYadLgu7J7/XxeY/3ez8EACDLsgljfMfj8ZxUKhXXYDAAnueBoqgyAMipVOovXAuSZdnUaDQeDofDs16vFyUIAjRNUwmCoG02G1AUdZ5IJN7GYrHfm3AvEAjcnUwmX0ajUdRqtV74fL6sruufKYoa6bp+fzabPUMI7ZfL5eImNHk8npNerxc1m80XHMe98fv9H3K5XDkSibxjWfb1arWaYoyPMMbCFqxUKi6CIODw8LDmdDq7oigaAACiKK5omv7KcdylpmlIkiTHFlRVFTRNUxVFqa/ROqIoGoqi5A3DgFartfU4Jp7ngSAI2uVyPZIk6dZmUZKk2w6H4xghBPF4HK7vWLbZbDCdTp+rqvpUkiS0RvV6/bTf7x8wDHMViURqm/AGAMgURZ232+1X1Wr102KxuEwmk3lZlo/7/f7BcrkkSZKs2e12tHXH/x/gHsY4jTE+0jQNGYYBCCFgGOaKJMkfjUaDZximGQ6HXzSbzZ+ZTMbY6oIxFgqFgqPT6YAgCMBxXM1ut6N0Op0fj8chi8XyjWXZ98Fg8DuCHZLNZh+USqWP8/n8idvt/hUKhV7u7QK9Xu8fmqanAJBQVXUfAGY7TQQAKBaLN8fjsdDtdh/run72Dzhf7XLe2UevAAAAAElFTkSuQmCC ) no-repeat right 3px center;
         }
-      }
-    }
-    .chat-textarea {
-      border-bottom-right-radius: 0;
-    }
-    .chat-area {
-      float: left;
-      height: 100%;
-      min-width: $chat-width;
-    }
-    .invited-contact {
-      margin: -1px 0 0 -1px;
-      width: 100px;
-      border: 1px solid #999;
-    }
-    .invited-contact.tt-input {
-      background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH3gkBCjE0uzKkOgAAAidJREFUKM+N0k+IEnEUB/D3cyscdagkWpHV0WGWREXm0AgOGkSJ07kh2UXYU5cOewm6Bp0KXG/tpSCv6hyEFQIhMEaE3yERYfwTOoqKGLQxDAbqYadLgu7J7/XxeY/3ez8EACDLsgljfMfj8ZxUKhXXYDAAnueBoqgyAMipVOovXAuSZdnUaDQeDofDs16vFyUIAjRNUwmCoG02G1AUdZ5IJN7GYrHfm3AvEAjcnUwmX0ajUdRqtV74fL6sruufKYoa6bp+fzabPUMI7ZfL5eImNHk8npNerxc1m80XHMe98fv9H3K5XDkSibxjWfb1arWaYoyPMMbCFqxUKi6CIODw8LDmdDq7oigaAACiKK5omv7KcdylpmlIkiTHFlRVFTRNUxVFqa/ROqIoGoqi5A3DgFartfU4Jp7ngSAI2uVyPZIk6dZmUZKk2w6H4xghBPF4HK7vWLbZbDCdTp+rqvpUkiS0RvV6/bTf7x8wDHMViURqm/AGAMgURZ232+1X1Wr102KxuEwmk3lZlo/7/f7BcrkkSZKs2e12tHXH/x/gHsY4jTE+0jQNGYYBCCFgGOaKJMkfjUaDZximGQ6HXzSbzZ+ZTMbY6oIxFgqFgqPT6YAgCMBxXM1ut6N0Op0fj8chi8XyjWXZ98Fg8DuCHZLNZh+USqWP8/n8idvt/hUKhV7u7QK9Xu8fmqanAJBQVXUfAGY7TQQAKBaLN8fjsdDtdh/run72Dzhf7XLe2UevAAAAAElFTkSuQmCC ) no-repeat right 3px center;
-    }
-    .participants {
-      float: right;
-      background-color: white;
-      overflow-y: auto;
-      overflow-x: hidden;
-      border-left: 1px solid #AAA;
-      border-bottom-right-radius: $chatbox-border-radius;
-      width: 100px;
-      height: 100%;
-      label {
-        font-size: 12px;
-        font-style: italic;
-        margin: 5px;
-        display: block;
-      }
     }
-  }
-
-  .chatroom-form,
-  .controlbox-pane {
-    background-color: white;
-    border-bottom-left-radius: $chatbox-border-radius;
-    border-bottom-right-radius: $chatbox-border-radius;
-    border: 0;
-    font-size: $font-size;
-    overflow-y: auto;
-    position: absolute;
-    text-align: center;
-    width: 100%;
-    height: 289px;
-    @include calc(height, '100% - #{$chat-head-height}');
-  }
 
-  .controlbox-pane {
-    overflow-y: hidden;
-    overflow-x: hidden;
-    dd {
-      margin-left: 0;
-      margin-bottom: 0;
-      &.odd {
-        background-color: #DCEAC5;
-      }
+    .chatroom-form,
+    .controlbox-pane {
+        background-color: white;
+        border-bottom-left-radius: $chatbox-border-radius;
+        border-bottom-right-radius: $chatbox-border-radius;
+        border: 0;
+        font-size: $font-size;
+        overflow-y: auto;
+        position: absolute;
+        text-align: center;
+        width: 100%;
+        height: 289px;
+        @include calc(height, '100% - #{$chat-head-height}');
+    }
+
+    .controlbox-pane {
+        overflow-y: hidden;
+        overflow-x: hidden;
+        dd {
+            margin-left: 0;
+            margin-bottom: 0;
+            &.odd {
+                background-color: #DCEAC5;
+            }
+        }
     }
-  }
 
   #converse-register {
     background: white;
@@ -1278,139 +1295,125 @@
     }
   }
 
-  div#chatrooms {
-    overflow-y: auto;
-  }
-
-  form.sendXMPPMessage {
-    -moz-background-clip: padding;
-    -moz-border-radius: $chatbox-border-radius;
-    -webkit-background-clip: padding-box;
-    -webkit-border-radius: $chatbox-border-radius;
-    background-clip: padding-box;
-    background: white;
-    border-radius: $chatbox-border-radius;
-    border-top-left-radius: 0;
-    border-top-right-radius: 0;
-    border-top: 1px solid #BBB;
-    border: 0;
-    margin: 0;
-    padding: 0;
-    position: relative;
-    height: #{$chat-textarea-height + $toolbar-height};
-    min-width: $chat-width;
-    @media screen and (max-width: $mobile-landscape-length) {
-        width: 100%;
-    }
-    .chat-textarea {
-      @include border-bottom-radius(4px);
-      border: 0;
-      height: $chat-textarea-height;
-      padding: 0.5em;
-      width: 100%;
-      resize: none;
-    }
-  }
-
-  .chat-toolbar {
-    font-size: $font-size;
-    margin: 0;
-    padding: 5px;
-    height: $toolbar-height;
-    display: block;
-    background-color: $light-background-color;
-
-    a {
-      color: $link-color;
-    }
-
-    .unencrypted a,
-    .unencrypted {
-      color: #8f2831;
-    }
-
-    .unverified a,
-    .unverified {
-      color: #cf5300;
+    #chatrooms {
+        overflow-y: auto;
     }
 
-    .private a,
-    .private {
-      color: #4b7003;
-    }
-
-    .toggle-participants,
-    .toggle-clear,
-    .toggle-otr {
-      float: right;
-    }
-
-    li {
-      display: inline-block;
-      list-style: none;
-      padding: 0 3px 0 3px;
-      cursor: pointer;
-      margin-top: 1px;
-    }
-    li:hover {
-      cursor: pointer;
-    }
-
-    ul {
-      background: #fff;
-      bottom: 100%;
-      box-shadow: -1px -1px 2px 0 rgba(0, 0, 0, 0.4);
-      display: none;
-      font-size: 12px;
-      margin: 0 0 1px 0;
-      position: absolute;
-      right: 0;
-      li {
-        cursor: pointer;
-        list-style: none;
+    form.sendXMPPMessage {
+        -moz-background-clip: padding;
+        -webkit-background-clip: padding-box;
+        @include border-bottom-radius($chatbox-border-radius);
+        background-clip: padding-box;
+        background: white;
+        border-top: 1px solid #BBB;
+        border: 0;
+        margin: 0;
+        padding: 0;
         position: relative;
-        a:hover {
-          color: #8f2831;
-        }
-      }
-    }
-
-    .toggle-smiley {
-      color: $link-color;
-      padding-left: 5px;
-      ul {
-        li {
-          font-size: $font-size;
-          padding: 5px;
-          z-index: 98;
+        height: #{$chat-textarea-height + $toolbar-height};
+        min-width: $chat-width;
+        @media screen and (max-width: $mobile-landscape-length) {
+            width: 100%;
         }
-        li:hover {
-          background-color: $highlight-color;
+        .chat-textarea {
+            @include border-bottom-radius($chatbox-border-radius);
+            border: 0;
+            height: $chat-textarea-height;
+            padding: 0.5em;
+            width: 100%;
+            resize: none;
         }
-      }
-    }
-
-    .toggle-otr {
-      ul {
-        li {
-          padding: 7px;
-          background-color: white;
-          display: block;
-          z-index: 99;
-          a {
-            -moz-transition: background-color 0.2s ease-in-out;
-            -webkit-transition: background-color 0.2s ease-in-out;
-            transition: background-color 0.2s ease-in-out;
+        .chat-toolbar {
+            font-size: $font-size;
+            margin: 0;
+            padding: 5px;
+            height: $toolbar-height;
             display: block;
-            padding: 1px;
-            text-decoration: none;
-          }
-        }
-        li:hover {
-          background-color: $highlight-color;
+            background-color: $light-background-color;
+            a {
+                color: $link-color;
+            }
+            .unencrypted a,
+            .unencrypted {
+                color: #8f2831;
+            }
+            .unverified a,
+            .unverified {
+                color: #cf5300;
+            }
+            .private a,
+            .private {
+                color: #4b7003;
+            }
+            .toggle-participants,
+            .toggle-clear,
+            .toggle-otr {
+                float: right;
+            }
+            li {
+                display: inline-block;
+                list-style: none;
+                padding: 0 3px 0 3px;
+                cursor: pointer;
+                margin-top: 1px;
+            }
+            li:hover {
+                cursor: pointer;
+            }
+            ul {
+                background: #fff;
+                bottom: 100%;
+                box-shadow: -1px -1px 2px 0 rgba(0, 0, 0, 0.4);
+                display: none;
+                font-size: 12px;
+                margin: 0 0 1px 0;
+                position: absolute;
+                right: 0;
+                li {
+                    cursor: pointer;
+                    list-style: none;
+                    position: relative;
+                    a:hover {
+                        color: #8f2831;
+                    }
+                }
+            }
+            .toggle-smiley {
+                color: $link-color;
+                padding-left: 5px;
+                ul {
+                    li {
+                        font-size: $font-size;
+                        padding: 5px;
+                        z-index: 98;
+                    }
+                    li:hover {
+                        background-color: $highlight-color;
+                    }
+                }
+            }
+            .toggle-otr {
+                ul {
+                    li {
+                        padding: 7px;
+                        background-color: white;
+                        display: block;
+                        z-index: 99;
+                        a {
+                            -moz-transition: background-color 0.2s ease-in-out;
+                            -webkit-transition: background-color 0.2s ease-in-out;
+                            transition: background-color 0.2s ease-in-out;
+                            display: block;
+                            padding: 1px;
+                            text-decoration: none;
+                        }
+                    }
+                    li:hover {
+                        background-color: $highlight-color;
+                    }
+                }
+            }
         }
-      }
-    }
   }
 
   .chat-toolbar-text {

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>