Move chat toolbar into the form and fix the send button

src/plugins/chatview/bottom-panel.js

@@ -3,11 +3,11 @@
  * @typedef {import('shared/chat/emoji-dropdown.js').default} EmojiDropdown
  * @typedef {import('./message-form.js').default} MessageForm
  */
-import './message-form.js';
-import tplBottomPanel from './templates/bottom-panel.js';
-import { CustomElement } from 'shared/components/element.js';
 import { _converse, api } from '@converse/headless';
+import { CustomElement } from 'shared/components/element.js';
+import tplBottomPanel from './templates/bottom-panel.js';
 import { clearMessages } from './utils.js';
+import './message-form.js';
 
 import './styles/chat-bottom-panel.scss';
 

src/plugins/chatview/message-form.js

@@ -34,17 +34,7 @@ export default class MessageForm extends CustomElement {
     }
 
     render () {
-        return tplMessageForm(
-            Object.assign(this.model.toJSON(), {
-                'onDrop': ev => this.onDrop(ev),
-                'hint_value': /** @type {HTMLInputElement} */(this.querySelector('.spoiler-hint'))?.value,
-                'message_value': /** @type {HTMLTextAreaElement} */(this.querySelector('.chat-textarea'))?.value,
-                'onChange': ev => this.model.set({'draft': ev.target.value}),
-                'onKeyDown': ev => this.onKeyDown(ev),
-                'onKeyUp': ev => this.onKeyUp(ev),
-                'onPaste': ev => this.onPaste(ev)
-            })
-        );
+        return tplMessageForm(this);
     }
 
     /**

src/plugins/chatview/templates/bottom-panel.js

@@ -1,30 +1,12 @@
 import { __ } from 'i18n';
-import { api } from '@converse/headless';
 import { html } from 'lit';
 
 
 export default (o) => {
     const unread_msgs = __('You have unread messages');
-    const message_limit = api.settings.get('message_limit');
-    const show_call_button = api.settings.get('visible_toolbar_buttons').call;
-    const show_emoji_button = api.settings.get('visible_toolbar_buttons').emoji;
-    const show_send_button = api.settings.get('show_send_button');
-    const show_spoiler_button = api.settings.get('visible_toolbar_buttons').spoiler;
-    const show_toolbar = api.settings.get('show_toolbar');
     return html`
         ${ o.model.ui.get('scrolled') && o.model.get('num_unread') ?
-                html`<div class="new-msgs-indicator" @click=${ev => o.viewUnreadMessages(ev)}>▼ ${ unread_msgs } ▼</div>` : '' }
-        ${api.settings.get('show_toolbar') ? html`
-            <converse-chat-toolbar
-                class="btn-toolbar chat-toolbar no-text-select"
-                .model=${o.model}
-                ?composing_spoiler="${o.model.get('composing_spoiler')}"
-                ?show_call_button="${show_call_button}"
-                ?show_emoji_button="${show_emoji_button}"
-                ?show_send_button="${show_send_button}"
-                ?show_spoiler_button="${show_spoiler_button}"
-                ?show_toolbar="${show_toolbar}"
-                message_limit="${message_limit}"></converse-chat-toolbar>` : '' }
+            html`<div class="new-msgs-indicator" @click=${ev => o.viewUnreadMessages(ev)}>▼ ${ unread_msgs } ▼</div>` : '' }
         <converse-message-form jid="${o.model.get('jid')}"></converse-message-form>
     `;
 }

src/plugins/chatview/templates/message-form.js

@@ -4,31 +4,54 @@ import { html } from "lit";
 import { resetElementHeight } from '../utils.js';
 
 
-export default (o) => {
-    const label_message = o.composing_spoiler ? __('Hidden message') : __('Message');
+/**
+ * @param {import('../message-form').default} el
+ */
+export default (el) => {
+    const composing_spoiler = el.model.get('composing_spoiler');
+    const label_message = composing_spoiler ? __('Hidden message') : __('Message');
     const label_spoiler_hint = __('Optional hint');
+    const message_limit = api.settings.get('message_limit');
+    const show_call_button = api.settings.get('visible_toolbar_buttons').call;
+    const show_emoji_button = api.settings.get('visible_toolbar_buttons').emoji;
     const show_send_button = api.settings.get('show_send_button');
+    const show_spoiler_button = api.settings.get('visible_toolbar_buttons').spoiler;
+    const show_toolbar = api.settings.get('show_toolbar');
+    const hint_value = /** @type {HTMLInputElement} */(el.querySelector('.spoiler-hint'))?.value;
+    const message_value = /** @type {HTMLTextAreaElement} */(el.querySelector('.chat-textarea'))?.value;
 
     return html`
-        <form class="sendXMPPMessage">
-            <input type="text"
-                   enterkeyhint="send"
-                   placeholder="${label_spoiler_hint || ''}"i
-                   value="${o.hint_value || ''}"
-                   class="${o.composing_spoiler ? '' : 'hidden'} spoiler-hint"/>
-            <textarea
-                autofocus
-                type="text"
-                enterkeyhint="send"
-                @drop=${o.onDrop}
-                @input=${resetElementHeight}
-                @keydown=${o.onKeyDown}
-                @keyup=${o.onKeyUp}
-                @paste=${o.onPaste}
-                @change=${o.onChange}
-                class="chat-textarea
-                    ${ show_send_button ? 'chat-textarea-send-button' : '' }
-                    ${ o.composing_spoiler ? 'spoiler' : '' }"
-                placeholder="${label_message}">${ o.message_value || '' }</textarea>
+        <form class="sendXMPPMessage" @submit=${(ev) => el.onFormSubmitted(ev)}>
+            ${show_toolbar ? html`
+                <converse-chat-toolbar
+                    class="btn-toolbar chat-toolbar no-text-select"
+                    .model=${el.model}
+                    ?composing_spoiler="${composing_spoiler}"
+                    ?show_call_button="${show_call_button}"
+                    ?show_emoji_button="${show_emoji_button}"
+                    ?show_send_button="${show_send_button}"
+                    ?show_spoiler_button="${show_spoiler_button}"
+                    ?show_toolbar="${show_toolbar}"
+                    message_limit="${message_limit}"></converse-chat-toolbar>` : '' }
+
+                <input type="text"
+                    enterkeyhint="send"
+                    placeholder="${label_spoiler_hint || ''}"i
+                    value="${hint_value || ''}"
+                    class="${composing_spoiler ? '' : 'hidden'} spoiler-hint"/>
+                <textarea
+                    autofocus
+                    type="text"
+                    enterkeyhint="send"
+                    @drop=${ev => el.onDrop(ev)}
+                    @input=${resetElementHeight}
+                    @keydown=${ev => el.onKeyDown(ev)}
+                    @keyup=${ev => el.onKeyUp(ev)}
+                    @paste=${ev => el.onPaste(ev)}
+                    @change=${ev => el.model.set({'draft': ev.target.value})}
+                    class="chat-textarea
+                        ${ show_send_button ? 'chat-textarea-send-button' : '' }
+                        ${ composing_spoiler ? 'spoiler' : '' }"
+                    placeholder="${label_message}">${ message_value || '' }</textarea>
         </form>`;
 }

src/plugins/muc-views/message-form.js

@@ -15,17 +15,7 @@ export default class MUCMessageForm extends MessageForm {
     }
 
     render () {
-        return tplMUCMessageForm(
-            Object.assign(this.model.toJSON(), {
-                'hint_value': /** @type {HTMLInputElement} */(this.querySelector('.spoiler-hint'))?.value,
-                'message_value': /** @type {HTMLInputElement} */(this.querySelector('.chat-textarea'))?.value,
-                'onChange': ev => this.model.set({'draft': ev.target.value}),
-                'onDrop': ev => this.onDrop(ev),
-                'onKeyDown': ev => this.onKeyDown(ev),
-                'onKeyUp': ev => this.onKeyUp(ev),
-                'onPaste': ev => this.onPaste(ev),
-                'scrolled': this.model.ui.get('scrolled'),
-            }));
+        return tplMUCMessageForm(this);
     }
 
     shouldAutoComplete () {

src/plugins/muc-views/templates/message-form.js

@@ -4,31 +4,57 @@ import { html } from "lit";
 import { resetElementHeight } from 'plugins/chatview/utils.js';
 
 
-export default (o) => {
-    const label_message = o.composing_spoiler ? __('Hidden message') : __('Message');
+/**
+ * @param {import('../message-form').default} el
+ */
+export default (el) => {
+    const composing_spoiler = el.model.get('composing_spoiler');
+    const label_message = composing_spoiler ? __('Hidden message') : __('Message');
     const label_spoiler_hint = __('Optional hint');
+    const message_limit = api.settings.get('message_limit');
+    const show_call_button = api.settings.get('visible_toolbar_buttons').call;
+    const show_emoji_button = api.settings.get('visible_toolbar_buttons').emoji;
     const show_send_button = api.settings.get('show_send_button');
+    const show_spoiler_button = api.settings.get('visible_toolbar_buttons').spoiler;
+    const show_toolbar = api.settings.get('show_toolbar');
+    const hint_value = /** @type {HTMLInputElement} */(el.querySelector('.spoiler-hint'))?.value;
+    const message_value = /** @type {HTMLInputElement} */(el.querySelector('.chat-textarea'))?.value;
     return html`
         <form class="setNicknameButtonForm hidden">
             <input type="submit" class="btn btn-primary" name="join" value="Join"/>
         </form>
-        <form class="sendXMPPMessage">
-            <input type="text" placeholder="${label_spoiler_hint || ''}" value="${o.hint_value || ''}" class="${o.composing_spoiler ? '' : 'hidden'} spoiler-hint"/>
+        <form class="sendXMPPMessage" @submit=${(ev) => el.onFormSubmitted(ev)}>
+            ${show_toolbar
+                ? html` <converse-chat-toolbar
+                    class="btn-toolbar chat-toolbar no-text-select"
+                    .model=${el.model}
+                    ?hidden_occupants="${el.model.get('hidden_occupants')}"
+                    ?is_groupchat="${el.model.get('is_groupchat')}"
+                    ?show_call_button="${show_call_button}"
+                    ?show_emoji_button="${show_emoji_button}"
+                    ?show_send_button="${show_send_button}"
+                    ?show_spoiler_button="${show_spoiler_button}"
+                    ?show_toolbar="${show_toolbar}"
+                    message_limit="${message_limit}"
+                ></converse-chat-toolbar>`
+                : ''}
+
+            <input type="text" placeholder="${label_spoiler_hint || ''}" value="${hint_value || ''}" class="${composing_spoiler ? '' : 'hidden'} spoiler-hint"/>
             <div class="suggestion-box">
                 <ul class="suggestion-box__results suggestion-box__results--above" hidden=""></ul>
                 <textarea
                     autofocus
                     type="text"
-                    @drop=${o.onDrop}
+                    @drop=${ev => el.onDrop(ev)}
                     @input=${resetElementHeight}
-                    @keydown=${o.onKeyDown}
-                    @keyup=${o.onKeyUp}
-                    @paste=${o.onPaste}
-                    @change=${o.onChange}
+                    @keydown=${ev => el.onKeyDown(ev)}
+                    @keyup=${ev => el.onKeyUp(ev)}
+                    @paste=${ev => el.onPaste(ev)}
+                    @change=${ev => el.model.set({'draft': ev.target.value})}
                     class="chat-textarea suggestion-box__input
                         ${ show_send_button ? 'chat-textarea-send-button' : '' }
-                        ${ o.composing_spoiler ? 'spoiler' : '' }"
-                    placeholder="${label_message}">${ o.message_value || '' }</textarea>
+                        ${ composing_spoiler ? 'spoiler' : '' }"
+                    placeholder="${label_message}">${message_value || '' }</textarea>
                 <span class="suggestion-box__additions visually-hidden" role="status" aria-live="assertive" aria-relevant="additions"></span>
             </div>
         </form>`;

src/plugins/muc-views/templates/muc-bottom-panel.js

@@ -7,29 +7,9 @@ import { html } from 'lit';
 
 const tplCanEdit = (o) => {
     const unread_msgs = __('You have unread messages');
-    const message_limit = api.settings.get('message_limit');
-    const show_call_button = api.settings.get('visible_toolbar_buttons').call;
-    const show_emoji_button = api.settings.get('visible_toolbar_buttons').emoji;
-    const show_send_button = api.settings.get('show_send_button');
-    const show_spoiler_button = api.settings.get('visible_toolbar_buttons').spoiler;
-    const show_toolbar = api.settings.get('show_toolbar');
     return html` ${o.model.ui.get('scrolled') && o.model.get('num_unread')
             ? html`<div class="new-msgs-indicator" @click=${(ev) => o.viewUnreadMessages(ev)}>▼ ${unread_msgs} ▼</div>`
             : ''}
-        ${show_toolbar
-            ? html` <converse-chat-toolbar
-                  class="btn-toolbar chat-toolbar no-text-select"
-                  .model=${o.model}
-                  ?hidden_occupants="${o.model.get('hidden_occupants')}"
-                  ?is_groupchat="${o.is_groupchat}"
-                  ?show_call_button="${show_call_button}"
-                  ?show_emoji_button="${show_emoji_button}"
-                  ?show_send_button="${show_send_button}"
-                  ?show_spoiler_button="${show_spoiler_button}"
-                  ?show_toolbar="${show_toolbar}"
-                  message_limit="${message_limit}"
-              ></converse-chat-toolbar>`
-            : ''}
         <converse-muc-message-form jid=${o.model.get('jid')}></converse-muc-message-form>`;
 };
 

src/shared/chat/styles/toolbar.scss

@@ -60,6 +60,9 @@
             .far, .far:hover,
             .fa, .fa:hover {
                 color: var(--chat-toolbar-btn-color);
+                svg, svg:hover {
+                    fill: var(--chat-toolbar-btn-color);
+                }
             }
             button {
                 &:focus {

src/shared/chat/templates/toolbar.js

@@ -2,16 +2,19 @@ import { __ } from 'i18n';
 import { html } from 'lit';
 import { until } from 'lit/directives/until.js';
 
-function tplSendButton () {
+function tplSendButton() {
     const i18n_send_message = __('Send the message');
-    return html`<button type="submit" class="btn send-button" data-action="sendMessage" title="${ i18n_send_message }">
+    return html`<button type="submit" class="btn send-button" data-action="sendMessage" title="${i18n_send_message}">
         <converse-icon color="var(--toolbar-btn-text-color)" class="fa fa-paper-plane" size="1em"></converse-icon>
-    </button>`
+    </button>`;
 }
 
+/**
+ * @param {import('../toolbar').ChatToolbar} el
+ */
 export default (el) => {
     return html`
         <span class="btn-group toolbar-buttons">${until(el.getButtons(), '')}</span>
-        ${ el.show_send_button ? tplSendButton() : '' }
+        ${el.show_send_button ? tplSendButton() : ''}
     `;
-}
+};

src/shared/chat/toolbar.js

@@ -31,10 +31,11 @@ export class ChatToolbar extends CustomElement {
         super();
         this.model = null;
         this.is_groupchat = null;
-        this.hidden_occupants = null;
-        this.show_spoiler_button = null;
-        this.show_call_button = null;
-        this.show_emoji_button = null;
+        this.hidden_occupants = false;
+        this.show_send_button = false;
+        this.show_spoiler_button = false;
+        this.show_call_button = false;
+        this.show_emoji_button = false;
     }
 
     connectedCallback () {
@@ -91,7 +92,7 @@ export class ChatToolbar extends CustomElement {
 
         const domain = _converse.session.get('domain');
         const http_upload_promise = api.disco.supports(Strophe.NS.HTTPUPLOAD, domain);
-        buttons.push(html`${until(http_upload_promise.then(is_supported => this.getHTTPUploadButton(is_supported)),'')}`);
+        buttons.push(html`${until(http_upload_promise.then(is_supported => this.getHTTPUploadButton(!!is_supported)),'')}`);
 
         /**
          * *Hook* which allows plugins to add more buttons to a chat's toolbar
@@ -107,17 +108,18 @@ export class ChatToolbar extends CustomElement {
         return _converse.api.hook('getToolbarButtons', this, buttons);
     }
 
+    /**
+     * @param {boolean} is_supported
+     */
     getHTTPUploadButton (is_supported) {
         if (is_supported) {
             const i18n_choose_file =  __('Choose a file to send')
-            const color = this.is_groupchat ? '--muc-toolbar-btn-color' : '--chat-toolbar-btn-color';
             return html`
                 <button type="button"
                         class="btn"
                         title="${i18n_choose_file}"
                         @click=${this.toggleFileUpload}>
                     <converse-icon
-                        color="var(${color})"
                         class="fa fa-paperclip"
                         size="1em"></converse-icon>
                 </button>
@@ -167,25 +169,26 @@ export class ChatToolbar extends CustomElement {
         }
     }
 
+    /** @param {MouseEvent} ev */
     toggleFileUpload (ev) {
         ev?.preventDefault?.();
         ev?.stopPropagation?.();
         /** @type {HTMLInputElement} */(this.querySelector('.fileupload')).click();
     }
 
-    /**
-     * @param {InputEvent} evt
-     */
-    onFileSelection (evt) {
-        this.model.sendFiles(/** @type {HTMLInputElement} */(evt.target).files);
+    /** @param {InputEvent} ev */
+    onFileSelection (ev) {
+        this.model.sendFiles(/** @type {HTMLInputElement} */(ev.target).files);
     }
 
+    /** @param {MouseEvent} ev */
     toggleComposeSpoilerMessage (ev) {
         ev?.preventDefault?.();
         ev?.stopPropagation?.();
         this.model.set('composing_spoiler', !this.model.get('composing_spoiler'));
     }
 
+    /** @param {MouseEvent} ev */
     toggleCall (ev) {
         ev?.preventDefault?.();
         ev?.stopPropagation?.();

src/shared/styles/themes/cyberpunk.scss

@@ -132,6 +132,7 @@ converse-root.theme-cyberpunk {
 	--message-text-color: var(--foreground);
 	--modal-background-color: var(--background);
 	--muc-color: var(--orange);
+	--muc-toolbar-btn-color: var(--muc-color);
 	--muc-toolbar-btn-disabled-color: var(--disabled-color);
 	--occupants-background-color: var(--background);
 	--occupants-border-bottom: 0.15em solid var(--muc-color);

src/types/plugins/chatview/templates/message-form.d.ts

@@ -1,3 +1,3 @@
-declare function _default(o: any): import("lit").TemplateResult<1>;
+declare function _default(el: import('../message-form').default): import("lit").TemplateResult<1>;
 export default _default;
 //# sourceMappingURL=message-form.d.ts.map

src/types/plugins/muc-views/templates/message-form.d.ts

@@ -1,3 +1,3 @@
-declare function _default(o: any): import("lit").TemplateResult<1>;
+declare function _default(el: import('../message-form').default): import("lit").TemplateResult<1>;
 export default _default;
 //# sourceMappingURL=message-form.d.ts.map

src/types/shared/chat/templates/toolbar.d.ts

@@ -1,3 +1,3 @@
-declare function _default(el: any): import("lit").TemplateResult<1>;
+declare function _default(el: import('../toolbar').ChatToolbar): import("lit").TemplateResult<1>;
 export default _default;
 //# sourceMappingURL=toolbar.d.ts.map

src/types/shared/chat/toolbar.d.ts

@@ -27,23 +27,28 @@ export class ChatToolbar extends CustomElement {
     };
     model: any;
     is_groupchat: any;
-    hidden_occupants: any;
-    show_spoiler_button: any;
-    show_call_button: any;
-    show_emoji_button: any;
+    hidden_occupants: boolean;
+    show_send_button: boolean;
+    show_spoiler_button: boolean;
+    show_call_button: boolean;
+    show_emoji_button: boolean;
     connectedCallback(): void;
     render(): import("lit").TemplateResult<1>;
     firstUpdated(): void;
     getButtons(): any;
-    getHTTPUploadButton(is_supported: any): import("lit").TemplateResult<1> | "";
-    getSpoilerButton(): import("lit").TemplateResult<1>;
-    toggleFileUpload(ev: any): void;
     /**
-     * @param {InputEvent} evt
+     * @param {boolean} is_supported
      */
-    onFileSelection(evt: InputEvent): void;
-    toggleComposeSpoilerMessage(ev: any): void;
-    toggleCall(ev: any): void;
+    getHTTPUploadButton(is_supported: boolean): import("lit").TemplateResult<1> | "";
+    getSpoilerButton(): import("lit").TemplateResult<1>;
+    /** @param {MouseEvent} ev */
+    toggleFileUpload(ev: MouseEvent): void;
+    /** @param {InputEvent} ev */
+    onFileSelection(ev: InputEvent): void;
+    /** @param {MouseEvent} ev */
+    toggleComposeSpoilerMessage(ev: MouseEvent): void;
+    /** @param {MouseEvent} ev */
+    toggleCall(ev: MouseEvent): void;
 }
 import { CustomElement } from "shared/components/element.js";
 //# sourceMappingURL=toolbar.d.ts.map