More code reuse between chatboxview and chatroomview

mockup/chatroom.html

@@ -283,6 +283,10 @@
                                     </div>
 								</div>
 
+                                <div class="message chat-info chat-state-notification"
+                                    data-isodate="2018-04-36T18:21:36+02:00" 
+                                    data-csn="romeo@capulet.lit">Romeo Montague is typing</div>
+
                             </div>
                             <div class="new-msgs-indicator">▼ You have unread messages ▼</div>
                             <form class="sendXMPPMessage">

sass/_chatbox.scss

@@ -272,7 +272,7 @@
                 margin: 0;
                 padding: 0.25em;
                 display: block;
-                border-top: 8px solid $chat-head-color;
+                border-top: 4px solid $chat-head-color;
                 background-color: white;
                 color: $chat-head-color;
                 .fa, .fa:hover {

sass/_chatrooms.scss

@@ -263,7 +263,7 @@
         .sendXMPPMessage {
             .chat-toolbar {
                 background-color: white;
-                border-top: 8px solid $chatroom-head-color;
+                border-top: 4px solid $chatroom-head-color;
                 color: $chatroom-head-color;
                 .fa, .fa:hover {
                     color: $chatroom-head-color;

spec/chatbox.js

@@ -707,7 +707,7 @@
                         .then(function () {
                             var view = _converse.chatboxviews.get(sender_jid);
                             // Check that the notification appears inside the chatbox in the DOM
-                            var events = view.el.querySelectorAll('.chat-state-notification');
+                            let events = view.el.querySelectorAll('.chat-state-notification');
                             expect(events.length).toBe(1);
                             expect(events[0].textContent).toEqual(mock.cur_names[1] + ' is typing');
 

spec/messages.js

@@ -1864,7 +1864,7 @@
 
         it("is specially marked when you are mentioned in it",
                 mock.initConverseWithPromises(
-                    null, ['rosterGroupsFetched'], {},
+                    null, ['rosterGroupsFetched', 'chatBoxesFetched'], {},
                     function (done, _converse) {
 
             test_utils.createContacts(_converse, 'current');
@@ -1882,7 +1882,7 @@
                 view.model.onMessage(msg);
                 expect($(view.el).find('.chat-msg').hasClass('mentioned')).toBeTruthy();
                 done();
-            });
+            }).catch(_.partial(console.error, _));
         }));
 
 

src/converse-muc-views.js

@@ -583,6 +583,7 @@
                     this.el.innerHTML = tpl_chatroom();
                     this.renderHeading();
                     this.renderChatArea();
+                    this.renderMessageForm();
                     if (this.model.get('connection_status') !== converse.ROOMSTATUS.ENTERED) {
                         this.showSpinner();
                     }
@@ -600,14 +601,9 @@
                     if (_.isNull(this.el.querySelector('.chat-area'))) {
                         const container_el = this.el.querySelector('.chatroom-body');
                         container_el.insertAdjacentHTML('beforeend', tpl_chatarea({
-                            'label_message': __('Message'),
-                            'label_send': __('Send'),
-                            'show_send_button': _converse.show_send_button,
-                            'show_toolbar': _converse.show_toolbar,
-                            'unread_msgs': __('You have unread messages')
+                            'show_send_button': _converse.show_send_button
                         }));
                         container_el.insertAdjacentElement('beforeend', this.occupantsview.el);
-                        this.renderToolbar(tpl_chatroom_toolbar);
                         this.content = this.el.querySelector('.chat-content');
                         this.toggleOccupants(null, true);
                     }

src/templates/chatarea.html

 <div class="chat-area col">
     <div class="chat-content {[ if (o.show_send_button) { ]}chat-content-sendbutton{[ } ]}"></div>
-    <div class="new-msgs-indicator hidden">▼ {{{ o.unread_msgs }}} ▼</div>
-    <form class="sendXMPPMessage">
-        {[ if (o.show_toolbar) { ]}
-            <ul class="chat-toolbar no-text-select"></ul>
-        {[ } ]}
-        <textarea type="text" class="chat-textarea {[ if (o.show_send_button) { ]}chat-textarea-send-button{[ } ]}"
-                  placeholder="{{{o.label_message}}}"></textarea>
-    {[ if (o.show_send_button) { ]}
-        <button type="submit" class="pure-button send-button">{{{ o.label_send }}}</button>
-    {[ } ]}
-    </form>
+    <div class="message-form-container"/>
 </div>