From 51ad0e370842eda3186c70676483ef2df4ef26b8 Mon Sep 17 00:00:00 2001
From: JC Brand <jc@opkode.com>
Date: Wed, 8 Jul 2020 11:14:53 +0200
Subject: [PATCH] Fix toggling of the spoiler form

---
 sass/_chatbox.scss        | 15 +++++++++------
 sass/_chatrooms.scss      |  6 ++++--
 src/components/toolbar.js | 10 ++++++----
 src/converse-chatview.js  |  9 +--------
 src/converse-muc-views.js |  1 +
 src/templates/toolbar.js  |  1 +
 6 files changed, 22 insertions(+), 20 deletions(-)

diff --git a/sass/_chatbox.scss b/sass/_chatbox.scss
index afdec61ed..5f652d71e 100644
--- a/sass/_chatbox.scss
+++ b/sass/_chatbox.scss
@@ -321,6 +321,15 @@
                 width: 100%;
             }
 
+            .chat-textarea, input {
+                &:active, &:focus{
+                    outline-color: var(--chat-head-color);
+                }
+                &.correcting {
+                    background-color: var(--chat-correcting-color);
+                }
+            }
+
             .chat-textarea {
                 color: var(--chat-textarea-color);
                 background-color: var(--chat-textarea-background-color);
@@ -336,15 +345,9 @@
                 min-height: var(--chat-textarea-height);
                 margin-bottom: -4px; // Not clear why this is necessar :(
                 resize: none;
-                &:active, &:focus{
-                    outline-color: var(--chat-head-color);
-                }
                 &.spoiler {
                     height: 42px;
                 }
-                &.correcting {
-                    background-color: var(--chat-correcting-color);
-                }
             }
         }
         .dragresize {
diff --git a/sass/_chatrooms.scss b/sass/_chatrooms.scss
index 71c005010..ca56bcfc5 100644
--- a/sass/_chatrooms.scss
+++ b/sass/_chatrooms.scss
@@ -375,15 +375,17 @@
             .suggestion-box__results--above {
                 bottom: 4.5em;
             }
-            .chat-textarea {
+            .chat-textarea, input {
                 &:active, &:focus{
                     outline-color: var(--chatroom-head-bg-color);
                 }
-                border-bottom-right-radius: 0;
                 &.correcting {
                     background-color: var(--chatroom-correcting-color);
                 }
             }
+            .chat-textarea {
+                border-bottom-right-radius: 0;
+            }
         }
 
         .room-invite {
diff --git a/src/components/toolbar.js b/src/components/toolbar.js
index 3d7609e2c..4108bcc0c 100644
--- a/src/components/toolbar.js
+++ b/src/components/toolbar.js
@@ -20,6 +20,7 @@ export class ChatToolbar extends CustomElement {
     static get properties () {
         return {
             chatview: { type: Object }, // Used by getToolbarButtons hooks
+            composing_spoiler: { type: Boolean },
             hidden_occupants: { type: Boolean },
             is_groupchat: { type: Boolean },
             message_limit: { type: Number },
@@ -100,12 +101,13 @@ export class ChatToolbar extends CustomElement {
     }
 
     getSpoilerButton () {
-        if (!this.is_groupchat && this.model.presence.resources.length === 0) {
+        const model = this.model;
+        if (!this.is_groupchat && model.presence.resources.length === 0) {
             return;
         }
 
         let i18n_toggle_spoiler;
-        if (this.model.get('composing_spoiler')) {
+        if (this.composing_spoiler) {
             i18n_toggle_spoiler = __("Click to write as a normal (non-spoiler) message");
         } else {
             i18n_toggle_spoiler = __("Click to write your message as a spoiler");
@@ -122,9 +124,9 @@ export class ChatToolbar extends CustomElement {
         if (this.is_groupchat) {
             return markup;
         } else {
-            const contact_jid = this.model.get('jid');
+            const contact_jid = model.get('jid');
             const spoilers_promise = Promise.all(
-                this.model.presence.resources.map(
+                model.presence.resources.map(
                     r => api.disco.supports(Strophe.NS.SPOILER, `${contact_jid}/${r.get('name')}`)
                 )).then(results => results.reduce((acc, val) => (acc && val), true));
             return html`${until(spoilers_promise.then(() => markup), '')}`;
diff --git a/src/converse-chatview.js b/src/converse-chatview.js
index 7cb8ab087..8d45c953c 100644
--- a/src/converse-chatview.js
+++ b/src/converse-chatview.js
@@ -189,6 +189,7 @@ converse.plugins.add('converse-chatview', {
                 this.listenTo(this.model, 'destroy', this.remove);
                 this.listenTo(this.model, 'show', this.show);
                 this.listenTo(this.model, 'vcard:change', this.renderHeading);
+                this.listenTo(this.model, 'change:composing_spoiler', this.renderMessageForm);
 
                 if (this.model.contact) {
                     this.listenTo(this.model.contact, 'destroy', this.renderHeading);
@@ -351,8 +352,6 @@ converse.plugins.add('converse-chatview', {
                 const form_container = this.el.querySelector('.message-form-container');
                 render(tpl_chatbox_message_form(
                     Object.assign(this.model.toJSON(), {
-                        '__': __,
-                        'message_limit': api.settings.get('message_limit'),
                         'hint_value': this.el.querySelector('.spoiler-hint')?.value,
                         'label_message': this.model.get('composing_spoiler') ? __('Hidden message') : __('Message'),
                         'label_spoiler_hint': __('Optional hint'),
@@ -954,12 +953,6 @@ converse.plugins.add('converse-chatview', {
                 u.placeCaretAtEnd(textarea);
             },
 
-            toggleComposeSpoilerMessage () {
-                this.model.set('composing_spoiler', !this.model.get('composing_spoiler'));
-                this.renderMessageForm();
-                this.focus();
-            },
-
             onPresenceChanged (item) {
                 const show = item.get('show');
                 const fullname = this.model.getDisplayName();
diff --git a/src/converse-muc-views.js b/src/converse-muc-views.js
index d650de05c..3d98a7038 100644
--- a/src/converse-muc-views.js
+++ b/src/converse-muc-views.js
@@ -456,6 +456,7 @@ converse.plugins.add('converse-muc-views', {
                 this.initDebounced();
 
                 this.listenTo(this.model, 'change', debounce(() => this.renderHeading(), 250));
+                this.listenTo(this.model, 'change:composing_spoiler', this.renderMessageForm);
                 this.listenTo(this.model, 'change:hidden_occupants', this.renderToolbar);
                 this.listenTo(this.model, 'configurationNeeded', this.getAndRenderConfigurationForm);
                 this.listenTo(this.model, 'destroy', this.hide);
diff --git a/src/templates/toolbar.js b/src/templates/toolbar.js
index 909486933..7475469fe 100644
--- a/src/templates/toolbar.js
+++ b/src/templates/toolbar.js
@@ -12,6 +12,7 @@ export default (o) => {
         <converse-chat-toolbar
             .chatview=${o.chatview}
             .model=${o.model}
+            ?composing_spoiler="${o.composing_spoiler}"
             ?hidden_occupants="${o.hidden_occupants}"
             ?is_groupchat="${o.is_groupchat}"
             ?show_call_button="${show_call_button}"