diff --git a/CHANGES.md b/CHANGES.md index 7fab60f04..25e44fa0c 100644 --- a/CHANGES.md +++ b/CHANGES.md @@ -1,5 +1,8 @@ # 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) - [enable_smacks](https://conversejs.org/docs/html/configuration.html#enable-smacks) is not set to `true` by default. diff --git a/sass/_chatbox.scss b/sass/_chatbox.scss index 338328a08..1a95388c0 100644 --- a/sass/_chatbox.scss +++ b/sass/_chatbox.scss @@ -260,12 +260,16 @@ border-top-left-radius: 0; border-top-right-radius: 0; 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%; border: none; min-height: var(--chat-textarea-height); margin-bottom: -4px; // Not clear why this is necessar :( resize: none; + text-align: justify; &:active, &:focus{ outline-color: var(--chat-head-color); } @@ -278,16 +282,17 @@ } .send-button { - position: static; - left: var(--send-button-margin); - width: 100%; + border-radius: 0; + bottom: var(--send-button-bottom); background-color: var(--chat-head-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 { box-sizing: border-box; margin: 0; diff --git a/src/converse-chatview.js b/src/converse-chatview.js index 56076c4d1..98dd0113f 100644 --- a/src/converse-chatview.js +++ b/src/converse-chatview.js @@ -313,10 +313,10 @@ converse.plugins.add('converse-chatview', { const form_container = this.el.querySelector('.message-form-container'); form_container.innerHTML = tpl_chatbox_message_form( Object.assign(this.model.toJSON(), { + '__': __, 'message_limit': _converse.message_limit, 'hint_value': get(this.el.querySelector('.spoiler-hint'), 'value'), 'label_message': this.model.get('composing_spoiler') ? __('Hidden message') : __('Message'), - 'label_send': __('Send'), 'label_spoiler_hint': __('Optional hint'), 'message_value': get(this.el.querySelector('.chat-textarea'), 'value'), 'show_send_button': _converse.show_send_button, diff --git a/src/templates/chatbox_message_form.html b/src/templates/chatbox_message_form.html index 75362d162..64895ea41 100644 --- a/src/templates/chatbox_message_form.html +++ b/src/templates/chatbox_message_form.html @@ -3,9 +3,16 @@
+ {[ if (o.show_toolbar || o.show_send_button) { ]} +
{[ if (o.show_toolbar) { ]} {[ } ]} + {[ if (o.show_send_button) { ]} + + {[ } ]} +
+ {[ } ]} @@ -18,9 +25,5 @@ {[ if (o.composing_spoiler) { ]} spoiler {[ } ]}" placeholder="{{{o.label_message}}}">{{ o.message_value }} - - {[ if (o.show_send_button) { ]} - - {[ } ]}
diff --git a/webpack.headless.js b/webpack.headless.js index be1c9f1cc..fb4383f24 100644 --- a/webpack.headless.js +++ b/webpack.headless.js @@ -2,7 +2,6 @@ const common = require("./webpack.common.js"); const merge = require("webpack-merge"); const path = require('path'); -const MiniCssExtractPlugin = require('mini-css-extract-plugin'); module.exports = merge(common, { entry: "@converse/headless/headless.js",