Fix toggling of the spoiler form

This commit is contained in:
JC Brand 2020-07-08 11:14:53 +02:00
parent 4bf823f6cd
commit 51ad0e3708
6 changed files with 22 additions and 20 deletions

View File

@ -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 {

View File

@ -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 {

View File

@ -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), '')}`;

View File

@ -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();

View File

@ -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);

View File

@ -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}"