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
This commit is contained in:
Anshul Singhal
JC Brand
parent
011b40abf7
commit
99647438ac
|
|
@ -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]
|
||||
|
|
|
|||
|
|
@ -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
|
||||
-----------
|
||||
|
||||
|
|
|
|||
|
|
@ -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 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
||||
|
|
|
|||
|
|
@ -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?"));
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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'),
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -1,11 +1,14 @@
|
|||
<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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user