Adds the send button at bottom of chatbox (#796)

Fixes #796 New config option: `show_send_button`

* Adds show_send_button setting to docs

* Change log updated

* Improves send button CSS, style fixes and documentation corrections

* Adds missing setting in rendering template for headlines

docs/CHANGES.md

@@ -6,6 +6,7 @@
 - #628 Fixes the bug in displaying chat status during private chat. [saganshul]
 - #628 Changes the message displayed while typing from a different resource of the same user. [smitbose]
 - #675 Time format made configurable. [smitbose]
+- #682 Add "Send" button to input box in chat dialog window. [saganshul]
 - #704 Automatic fetching of registration form when [registration_domain](https://conversejs.org/
 docs/html/configurations.html#registration-domain) is set. [smitbose]
 - #806 The `_converse.listen` API event listeners aren't triggered. [jcbrand]

docs/source/configuration.rst

@@ -976,6 +976,13 @@ show_only_online_users
 If set to ``true``, only online users will be shown in the contacts roster.
 Users with any other status (e.g. away, busy etc.) will not be shown.
 
+show_send_button
+----------------------
+
+* Default:  ``false``
+
+If set to ``true``, a button will be visible which can be clicked to send a message.
+
 sounds_path
 -----------
 

sass/_chatbox.scss

@@ -219,6 +219,9 @@
             height: 206px;
             height: calc(100% - #{$toolbar-height + $chat-textarea-height +1px});
         }
+        .chat-content-sendbutton {
+            height: calc(100% - #{$toolbar-height + $chat-textarea-height + $send-button-height + 1px});
+        }
 
         .dropdown { /* status dropdown styles */
             background-color: $light-background-color;
@@ -255,6 +258,16 @@
                 width: 100%;
                 resize: none;
             }
+            .chat-textarea-send-button {
+                height: $chat-textarea-height - $send-button-margin-bottom;
+            }
+            .send-button {
+                position: absolute;
+                right: $send-button-margin-right;
+                background-color: #E76F51;
+                color: #fff;
+                font-size: 80%;
+            }
             .chat-toolbar {
                 box-sizing: border-box;
                 font-size: $font-size;
@@ -388,4 +401,3 @@
         }
     }
 }
-

sass/_variables.scss

@@ -13,6 +13,9 @@ $border-color: #CCC !default;
 $icon-color: #114327 !default;
 $save-button-color: #436F64 !default;
 $chat-textarea-height: 70px !default;
+$send-button-height: 30px !default;
+$send-button-margin-bottom: 5px !default;
+$send-button-margin-right: 10px !default;
 $message-them-color: #1A9707 !default;
 $roster-height: 194px !default;
 

src/converse-chatview.js

@@ -91,6 +91,7 @@
                 events: {
                     'click .close-chatbox-button': 'close',
                     'keypress .chat-textarea': 'keyPressed',
+                    'click .send-button': 'onSendButtonClicked',
                     'click .toggle-smiley': 'toggleEmoticonMenu',
                     'click .toggle-smiley ul li': 'insertEmoticon',
                     'click .toggle-clear': 'clearMessages',
@@ -119,6 +120,7 @@
                                 _.extend(this.model.toJSON(), {
                                         show_toolbar: _converse.show_toolbar,
                                         show_textarea: true,
+                                        show_send_button: _converse.show_send_button,
                                         title: this.model.get('fullname'),
                                         unread_msgs: __('You have unread messages'),
                                         info_close: __('Close this chat box'),
@@ -599,6 +601,22 @@
                     }
                 },
 
+                onSendButtonClicked: function(ev) {
+                    /* Event handler for when a send button is clicked in a chat box textarea.
+                     */
+                    ev.preventDefault();
+                    var textarea = this.el.querySelector('.chat-textarea'),
+                        message = textarea.value;
+
+                    textarea.value = '';
+                    textarea.focus();
+                    if (message !== '') {
+                        this.onMessageSubmitted(message);
+                        _converse.emit('messageSend', message);
+                    }
+                    this.setChatState(_converse.ACTIVE);
+                },
+
                 clearMessages: function (ev) {
                     if (ev && ev.preventDefault) { ev.preventDefault(); }
                     var result = confirm(__("Are you sure you want to clear the messages from this chat box?"));

src/converse-core.js

@@ -269,6 +269,7 @@
             xhr_custom_status: false,
             xhr_custom_status_url: '',
             time_format: 'HH:MM',
+            show_send_button: false
         };
         _.assignIn(this, this.default_settings);
         // Allow only whitelisted configuration attributes to be overwritten

src/converse-headline.js

@@ -73,6 +73,7 @@
                                 _.extend(this.model.toJSON(), {
                                         show_toolbar: _converse.show_toolbar,
                                         show_textarea: false,
+                                        show_send_button: _converse.show_send_button,
                                         title: this.model.get('fullname'),
                                         unread_msgs: __('You have unread messages'),
                                         info_close: __('Close this box'),

src/converse-muc.js

@@ -353,7 +353,8 @@
                     'click .toggle-occupants a': 'toggleOccupants',
                     'click .new-msgs-indicator': 'viewUnreadMessages',
                     'click .occupant': 'onOccupantClicked',
-                    'keypress .chat-textarea': 'keyPressed'
+                    'keypress .chat-textarea': 'keyPressed',
+                    'click .send-button': 'onSendButtonClicked'
                 },
 
                 initialize: function () {
@@ -406,7 +407,8 @@
                             .append(tpl_chatarea({
                                     'unread_msgs': __('You have unread messages'),
                                     'show_toolbar': _converse.show_toolbar,
-                                    'label_message': __('Message')
+                                    'label_message': __('Message'),
+                                    'show_send_button': _converse.show_send_button
                                 }))
                             .append(this.occupantsview.$el);
                         this.renderToolbar(tpl_chatroom_toolbar);

src/templates/chatarea.html

 <div class="chat-area">
-    <div class="chat-content"></div>
+    <div class="chat-content {[ if (show_send_button) { ]}chat-content-sendbutton{[ } ]}"></div>
     <div class="new-msgs-indicator hidden">▼ {{{ unread_msgs }}} ▼</div>
     <form class="sendXMPPMessage" action="" method="post">
         {[ if (show_toolbar) { ]}
             <ul class="chat-toolbar no-text-select"></ul>
         {[ } ]}
-        <textarea type="text" class="chat-textarea" 
+        <textarea type="text" class="chat-textarea {[ if (show_send_button) { ]}chat-textarea-send-button{[ } ]}"
             placeholder="{{{label_message}}}"/>
+    {[ if (show_send_button) { ]}
+        <button type="button" class="pure-button send-button">Send</button>
+    {[ } ]}
     </form>
 </div>

src/templates/chatbox.html

@@ -16,7 +16,7 @@
         </div>
     </div>
     <div class="chat-body">
-        <div class="chat-content"></div>
+        <div class="chat-content {[ if (show_send_button) { ]}chat-content-sendbutton{[ } ]}"></div>
         <div class="new-msgs-indicator hidden">▼ {{{ unread_msgs }}} ▼</div>
         {[ if (show_textarea) { ]}
         <form class="sendXMPPMessage" action="" method="post">
@@ -25,8 +25,12 @@
             {[ } ]}
         <textarea
             type="text"
-            class="chat-textarea"
+            class="chat-textarea {[ if (show_send_button) { ]}chat-textarea-send-button{[ } ]}"
             placeholder="{{{label_personal_message}}}"/>
+
+        {[ if (show_send_button) { ]}
+            <button type="button" class="pure-button send-button">Send</button>
+        {[ } ]}
         </form>
         {[ } ]}
     </div>