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:
parent
011b40abf7
commit
99647438ac
|
@ -6,6 +6,7 @@
|
||||||
- #628 Fixes the bug in displaying chat status during private chat. [saganshul]
|
- #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]
|
- #628 Changes the message displayed while typing from a different resource of the same user. [smitbose]
|
||||||
- #675 Time format made configurable. [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/
|
- #704 Automatic fetching of registration form when [registration_domain](https://conversejs.org/
|
||||||
docs/html/configurations.html#registration-domain) is set. [smitbose]
|
docs/html/configurations.html#registration-domain) is set. [smitbose]
|
||||||
- #806 The `_converse.listen` API event listeners aren't triggered. [jcbrand]
|
- #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.
|
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.
|
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
|
sounds_path
|
||||||
-----------
|
-----------
|
||||||
|
|
||||||
|
|
|
@ -219,6 +219,9 @@
|
||||||
height: 206px;
|
height: 206px;
|
||||||
height: calc(100% - #{$toolbar-height + $chat-textarea-height +1px});
|
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 */
|
.dropdown { /* status dropdown styles */
|
||||||
background-color: $light-background-color;
|
background-color: $light-background-color;
|
||||||
|
@ -255,6 +258,16 @@
|
||||||
width: 100%;
|
width: 100%;
|
||||||
resize: none;
|
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 {
|
.chat-toolbar {
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
font-size: $font-size;
|
font-size: $font-size;
|
||||||
|
@ -388,4 +401,3 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -13,6 +13,9 @@ $border-color: #CCC !default;
|
||||||
$icon-color: #114327 !default;
|
$icon-color: #114327 !default;
|
||||||
$save-button-color: #436F64 !default;
|
$save-button-color: #436F64 !default;
|
||||||
$chat-textarea-height: 70px !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;
|
$message-them-color: #1A9707 !default;
|
||||||
$roster-height: 194px !default;
|
$roster-height: 194px !default;
|
||||||
|
|
||||||
|
|
|
@ -91,6 +91,7 @@
|
||||||
events: {
|
events: {
|
||||||
'click .close-chatbox-button': 'close',
|
'click .close-chatbox-button': 'close',
|
||||||
'keypress .chat-textarea': 'keyPressed',
|
'keypress .chat-textarea': 'keyPressed',
|
||||||
|
'click .send-button': 'onSendButtonClicked',
|
||||||
'click .toggle-smiley': 'toggleEmoticonMenu',
|
'click .toggle-smiley': 'toggleEmoticonMenu',
|
||||||
'click .toggle-smiley ul li': 'insertEmoticon',
|
'click .toggle-smiley ul li': 'insertEmoticon',
|
||||||
'click .toggle-clear': 'clearMessages',
|
'click .toggle-clear': 'clearMessages',
|
||||||
|
@ -119,6 +120,7 @@
|
||||||
_.extend(this.model.toJSON(), {
|
_.extend(this.model.toJSON(), {
|
||||||
show_toolbar: _converse.show_toolbar,
|
show_toolbar: _converse.show_toolbar,
|
||||||
show_textarea: true,
|
show_textarea: true,
|
||||||
|
show_send_button: _converse.show_send_button,
|
||||||
title: this.model.get('fullname'),
|
title: this.model.get('fullname'),
|
||||||
unread_msgs: __('You have unread messages'),
|
unread_msgs: __('You have unread messages'),
|
||||||
info_close: __('Close this chat box'),
|
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) {
|
clearMessages: function (ev) {
|
||||||
if (ev && ev.preventDefault) { ev.preventDefault(); }
|
if (ev && ev.preventDefault) { ev.preventDefault(); }
|
||||||
var result = confirm(__("Are you sure you want to clear the messages from this chat box?"));
|
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: false,
|
||||||
xhr_custom_status_url: '',
|
xhr_custom_status_url: '',
|
||||||
time_format: 'HH:MM',
|
time_format: 'HH:MM',
|
||||||
|
show_send_button: false
|
||||||
};
|
};
|
||||||
_.assignIn(this, this.default_settings);
|
_.assignIn(this, this.default_settings);
|
||||||
// Allow only whitelisted configuration attributes to be overwritten
|
// Allow only whitelisted configuration attributes to be overwritten
|
||||||
|
|
|
@ -73,6 +73,7 @@
|
||||||
_.extend(this.model.toJSON(), {
|
_.extend(this.model.toJSON(), {
|
||||||
show_toolbar: _converse.show_toolbar,
|
show_toolbar: _converse.show_toolbar,
|
||||||
show_textarea: false,
|
show_textarea: false,
|
||||||
|
show_send_button: _converse.show_send_button,
|
||||||
title: this.model.get('fullname'),
|
title: this.model.get('fullname'),
|
||||||
unread_msgs: __('You have unread messages'),
|
unread_msgs: __('You have unread messages'),
|
||||||
info_close: __('Close this box'),
|
info_close: __('Close this box'),
|
||||||
|
|
|
@ -353,7 +353,8 @@
|
||||||
'click .toggle-occupants a': 'toggleOccupants',
|
'click .toggle-occupants a': 'toggleOccupants',
|
||||||
'click .new-msgs-indicator': 'viewUnreadMessages',
|
'click .new-msgs-indicator': 'viewUnreadMessages',
|
||||||
'click .occupant': 'onOccupantClicked',
|
'click .occupant': 'onOccupantClicked',
|
||||||
'keypress .chat-textarea': 'keyPressed'
|
'keypress .chat-textarea': 'keyPressed',
|
||||||
|
'click .send-button': 'onSendButtonClicked'
|
||||||
},
|
},
|
||||||
|
|
||||||
initialize: function () {
|
initialize: function () {
|
||||||
|
@ -406,7 +407,8 @@
|
||||||
.append(tpl_chatarea({
|
.append(tpl_chatarea({
|
||||||
'unread_msgs': __('You have unread messages'),
|
'unread_msgs': __('You have unread messages'),
|
||||||
'show_toolbar': _converse.show_toolbar,
|
'show_toolbar': _converse.show_toolbar,
|
||||||
'label_message': __('Message')
|
'label_message': __('Message'),
|
||||||
|
'show_send_button': _converse.show_send_button
|
||||||
}))
|
}))
|
||||||
.append(this.occupantsview.$el);
|
.append(this.occupantsview.$el);
|
||||||
this.renderToolbar(tpl_chatroom_toolbar);
|
this.renderToolbar(tpl_chatroom_toolbar);
|
||||||
|
|
|
@ -1,11 +1,14 @@
|
||||||
<div class="chat-area">
|
<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>
|
<div class="new-msgs-indicator hidden">▼ {{{ unread_msgs }}} ▼</div>
|
||||||
<form class="sendXMPPMessage" action="" method="post">
|
<form class="sendXMPPMessage" action="" method="post">
|
||||||
{[ if (show_toolbar) { ]}
|
{[ if (show_toolbar) { ]}
|
||||||
<ul class="chat-toolbar no-text-select"></ul>
|
<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}}}"/>
|
placeholder="{{{label_message}}}"/>
|
||||||
|
{[ if (show_send_button) { ]}
|
||||||
|
<button type="button" class="pure-button send-button">Send</button>
|
||||||
|
{[ } ]}
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -16,7 +16,7 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="chat-body">
|
<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>
|
<div class="new-msgs-indicator hidden">▼ {{{ unread_msgs }}} ▼</div>
|
||||||
{[ if (show_textarea) { ]}
|
{[ if (show_textarea) { ]}
|
||||||
<form class="sendXMPPMessage" action="" method="post">
|
<form class="sendXMPPMessage" action="" method="post">
|
||||||
|
@ -25,8 +25,12 @@
|
||||||
{[ } ]}
|
{[ } ]}
|
||||||
<textarea
|
<textarea
|
||||||
type="text"
|
type="text"
|
||||||
class="chat-textarea"
|
class="chat-textarea {[ if (show_send_button) { ]}chat-textarea-send-button{[ } ]}"
|
||||||
placeholder="{{{label_personal_message}}}"/>
|
placeholder="{{{label_personal_message}}}"/>
|
||||||
|
|
||||||
|
{[ if (show_send_button) { ]}
|
||||||
|
<button type="button" class="pure-button send-button">Send</button>
|
||||||
|
{[ } ]}
|
||||||
</form>
|
</form>
|
||||||
{[ } ]}
|
{[ } ]}
|
||||||
</div>
|
</div>
|
||||||
|
|
Loading…
Reference in New Issue
Block a user