From 2d054878621d090763000532fde803e2a1b159e5 Mon Sep 17 00:00:00 2001
From: JC Brand <jc@opkode.com>
Date: Tue, 7 Aug 2018 15:10:27 +0200
Subject: [PATCH] More code reuse between chatboxview and chatroomview

---
 mockup/chatroom.html        |  4 ++++
 sass/_chatbox.scss          |  2 +-
 sass/_chatrooms.scss        |  2 +-
 spec/chatbox.js             |  2 +-
 spec/messages.js            |  4 ++--
 src/converse-muc-views.js   |  8 ++------
 src/templates/chatarea.html | 12 +-----------
 7 files changed, 12 insertions(+), 22 deletions(-)

diff --git a/mockup/chatroom.html b/mockup/chatroom.html
index c8ec12ebe7..8652071dc2 100644
--- a/mockup/chatroom.html
+++ b/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">
diff --git a/sass/_chatbox.scss b/sass/_chatbox.scss
index 4beab2a667..6d0d4bd4a0 100644
--- a/sass/_chatbox.scss
+++ b/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 {
diff --git a/sass/_chatrooms.scss b/sass/_chatrooms.scss
index 1ac1f5d7dd..d538a2596d 100644
--- a/sass/_chatrooms.scss
+++ b/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;
diff --git a/spec/chatbox.js b/spec/chatbox.js
index 60b5e80070..5afc49153b 100644
--- a/spec/chatbox.js
+++ b/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');
 
diff --git a/spec/messages.js b/spec/messages.js
index 1c351218dc..00d62c4cb4 100644
--- a/spec/messages.js
+++ b/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, _));
         }));
 
 
diff --git a/src/converse-muc-views.js b/src/converse-muc-views.js
index 3681d1c8a0..eaeb8ddf7a 100644
--- a/src/converse-muc-views.js
+++ b/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);
                     }
diff --git a/src/templates/chatarea.html b/src/templates/chatarea.html
index adaa53dcfd..1a86e2bb8e 100644
--- a/src/templates/chatarea.html
+++ b/src/templates/chatarea.html
@@ -1,14 +1,4 @@
 <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>