Commit 916e300a authored by JC Brand's avatar JC Brand

Updates #1313 and #1793: Send button improvements

parent 9c5fc2e4
# Changelog # Changelog
- #1313: Stylistic improvements to the send button
- #1793: Send button doesn't appear in Firefox in 1:1 chats
## 6.0.0 (2020-01-09) ## 6.0.0 (2020-01-09)
- [enable_smacks](https://conversejs.org/docs/html/configuration.html#enable-smacks) is not set to `true` by default. - [enable_smacks](https://conversejs.org/docs/html/configuration.html#enable-smacks) is not set to `true` by default.
......
...@@ -260,12 +260,16 @@ ...@@ -260,12 +260,16 @@
border-top-left-radius: 0; border-top-left-radius: 0;
border-top-right-radius: 0; border-top-right-radius: 0;
border-bottom-radius: var(--chatbox-border-radius); border-bottom-radius: var(--chatbox-border-radius);
padding: 0.5em; padding-left: 0.5em;
padding-right: 4.5em;
padding-top: 0.5em;
padding-bottom:0.5em;
width: 100%; width: 100%;
border: none; border: none;
min-height: var(--chat-textarea-height); min-height: var(--chat-textarea-height);
margin-bottom: -4px; // Not clear why this is necessar :( margin-bottom: -4px; // Not clear why this is necessar :(
resize: none; resize: none;
text-align: justify;
&:active, &:focus{ &:active, &:focus{
outline-color: var(--chat-head-color); outline-color: var(--chat-head-color);
} }
...@@ -278,16 +282,17 @@ ...@@ -278,16 +282,17 @@
} }
.send-button { .send-button {
position: static; border-radius: 0;
left: var(--send-button-margin); bottom: var(--send-button-bottom);
width: 100%;
background-color: var(--chat-head-color); background-color: var(--chat-head-color);
color: var(--inverse-link-color); color: var(--inverse-link-color);
font-size: 80%; }
height: var(--send-button-height);
bottom: calc(-var(--send-button-height) - var(--send-button-margin));
.chat-toolbar--container {
display: flex;
flex-wrap: nowrap;
} }
.chat-toolbar { .chat-toolbar {
box-sizing: border-box; box-sizing: border-box;
margin: 0; margin: 0;
......
...@@ -313,10 +313,10 @@ converse.plugins.add('converse-chatview', { ...@@ -313,10 +313,10 @@ converse.plugins.add('converse-chatview', {
const form_container = this.el.querySelector('.message-form-container'); const form_container = this.el.querySelector('.message-form-container');
form_container.innerHTML = tpl_chatbox_message_form( form_container.innerHTML = tpl_chatbox_message_form(
Object.assign(this.model.toJSON(), { Object.assign(this.model.toJSON(), {
'__': __,
'message_limit': _converse.message_limit, 'message_limit': _converse.message_limit,
'hint_value': get(this.el.querySelector('.spoiler-hint'), 'value'), 'hint_value': get(this.el.querySelector('.spoiler-hint'), 'value'),
'label_message': this.model.get('composing_spoiler') ? __('Hidden message') : __('Message'), 'label_message': this.model.get('composing_spoiler') ? __('Hidden message') : __('Message'),
'label_send': __('Send'),
'label_spoiler_hint': __('Optional hint'), 'label_spoiler_hint': __('Optional hint'),
'message_value': get(this.el.querySelector('.chat-textarea'), 'value'), 'message_value': get(this.el.querySelector('.chat-textarea'), 'value'),
'show_send_button': _converse.show_send_button, 'show_send_button': _converse.show_send_button,
......
...@@ -3,9 +3,16 @@ ...@@ -3,9 +3,16 @@
<input type="submit" class="btn btn-primary" name="join" value="Join"/> <input type="submit" class="btn btn-primary" name="join" value="Join"/>
</form> </form>
<form class="sendXMPPMessage"> <form class="sendXMPPMessage">
{[ if (o.show_toolbar || o.show_send_button) { ]}
<div class="chat-toolbar--container">
{[ if (o.show_toolbar) { ]} {[ if (o.show_toolbar) { ]}
<ul class="chat-toolbar no-text-select"></ul> <ul class="chat-toolbar no-text-select"></ul>
{[ } ]} {[ } ]}
{[ if (o.show_send_button) { ]}
<button type="submit" class="btn send-button fa fa-paper-plane" title="{{{ o.__('Send the message') }}}"></button>
{[ } ]}
</div>
{[ } ]}
<input type="text" placeholder="{{o.label_spoiler_hint}}" value="{{ o.hint_value }}" <input type="text" placeholder="{{o.label_spoiler_hint}}" value="{{ o.hint_value }}"
class="{[ if (!o.composing_spoiler) { ]} hidden {[ } ]} spoiler-hint"/> class="{[ if (!o.composing_spoiler) { ]} hidden {[ } ]} spoiler-hint"/>
...@@ -18,9 +25,5 @@ ...@@ -18,9 +25,5 @@
{[ if (o.composing_spoiler) { ]} spoiler {[ } ]}" {[ if (o.composing_spoiler) { ]} spoiler {[ } ]}"
placeholder="{{{o.label_message}}}">{{ o.message_value }}</textarea> placeholder="{{{o.label_message}}}">{{ o.message_value }}</textarea>
<span class="suggestion-box__additions visually-hidden" role="status" aria-live="assertive" aria-relevant="additions"></span> <span class="suggestion-box__additions visually-hidden" role="status" aria-live="assertive" aria-relevant="additions"></span>
{[ if (o.show_send_button) { ]}
<button type="submit" class="pure-button send-button">{{{ o.label_send }}}</button>
{[ } ]}
</div> </div>
</form> </form>
...@@ -2,7 +2,6 @@ ...@@ -2,7 +2,6 @@
const common = require("./webpack.common.js"); const common = require("./webpack.common.js");
const merge = require("webpack-merge"); const merge = require("webpack-merge");
const path = require('path'); const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = merge(common, { module.exports = merge(common, {
entry: "@converse/headless/headless.js", entry: "@converse/headless/headless.js",
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment