Updates #1313 and #1793: Send button improvements

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.

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;

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,

src/templates/chatbox_message_form.html

@@ -3,9 +3,16 @@
     <input type="submit" class="btn btn-primary" name="join" value="Join"/>
 </form>
 <form class="sendXMPPMessage">
+    {[ if (o.show_toolbar || o.show_send_button) { ]}
+    <div class="chat-toolbar--container">
     {[ if (o.show_toolbar) { ]}
         <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 }}"
            class="{[ if (!o.composing_spoiler) { ]} hidden {[ } ]} spoiler-hint"/>
 
@@ -18,9 +25,5 @@
                 {[ if (o.composing_spoiler) { ]} spoiler {[ } ]}"
             placeholder="{{{o.label_message}}}">{{ o.message_value }}</textarea>
         <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>
 </form>

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",