Commit 51ad0e37 authored by JC Brand's avatar JC Brand

Fix toggling of the spoiler form

parent 4bf823f6
...@@ -321,6 +321,15 @@ ...@@ -321,6 +321,15 @@
width: 100%; width: 100%;
} }
.chat-textarea, input {
&:active, &:focus{
outline-color: var(--chat-head-color);
}
&.correcting {
background-color: var(--chat-correcting-color);
}
}
.chat-textarea { .chat-textarea {
color: var(--chat-textarea-color); color: var(--chat-textarea-color);
background-color: var(--chat-textarea-background-color); background-color: var(--chat-textarea-background-color);
...@@ -336,15 +345,9 @@ ...@@ -336,15 +345,9 @@
min-height: var(--chat-textarea-height); min-height: var(--chat-textarea-height);
margin-bottom: -4px; // Not clear why this is necessar :( margin-bottom: -4px; // Not clear why this is necessar :(
resize: none; resize: none;
&:active, &:focus{
outline-color: var(--chat-head-color);
}
&.spoiler { &.spoiler {
height: 42px; height: 42px;
} }
&.correcting {
background-color: var(--chat-correcting-color);
}
} }
} }
.dragresize { .dragresize {
......
...@@ -375,15 +375,17 @@ ...@@ -375,15 +375,17 @@
.suggestion-box__results--above { .suggestion-box__results--above {
bottom: 4.5em; bottom: 4.5em;
} }
.chat-textarea { .chat-textarea, input {
&:active, &:focus{ &:active, &:focus{
outline-color: var(--chatroom-head-bg-color); outline-color: var(--chatroom-head-bg-color);
} }
border-bottom-right-radius: 0;
&.correcting { &.correcting {
background-color: var(--chatroom-correcting-color); background-color: var(--chatroom-correcting-color);
} }
} }
.chat-textarea {
border-bottom-right-radius: 0;
}
} }
.room-invite { .room-invite {
......
...@@ -20,6 +20,7 @@ export class ChatToolbar extends CustomElement { ...@@ -20,6 +20,7 @@ export class ChatToolbar extends CustomElement {
static get properties () { static get properties () {
return { return {
chatview: { type: Object }, // Used by getToolbarButtons hooks chatview: { type: Object }, // Used by getToolbarButtons hooks
composing_spoiler: { type: Boolean },
hidden_occupants: { type: Boolean }, hidden_occupants: { type: Boolean },
is_groupchat: { type: Boolean }, is_groupchat: { type: Boolean },
message_limit: { type: Number }, message_limit: { type: Number },
...@@ -100,12 +101,13 @@ export class ChatToolbar extends CustomElement { ...@@ -100,12 +101,13 @@ export class ChatToolbar extends CustomElement {
} }
getSpoilerButton () { 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; return;
} }
let i18n_toggle_spoiler; 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"); i18n_toggle_spoiler = __("Click to write as a normal (non-spoiler) message");
} else { } else {
i18n_toggle_spoiler = __("Click to write your message as a spoiler"); i18n_toggle_spoiler = __("Click to write your message as a spoiler");
...@@ -122,9 +124,9 @@ export class ChatToolbar extends CustomElement { ...@@ -122,9 +124,9 @@ export class ChatToolbar extends CustomElement {
if (this.is_groupchat) { if (this.is_groupchat) {
return markup; return markup;
} else { } else {
const contact_jid = this.model.get('jid'); const contact_jid = model.get('jid');
const spoilers_promise = Promise.all( 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')}`) r => api.disco.supports(Strophe.NS.SPOILER, `${contact_jid}/${r.get('name')}`)
)).then(results => results.reduce((acc, val) => (acc && val), true)); )).then(results => results.reduce((acc, val) => (acc && val), true));
return html`${until(spoilers_promise.then(() => markup), '')}`; return html`${until(spoilers_promise.then(() => markup), '')}`;
......
...@@ -189,6 +189,7 @@ converse.plugins.add('converse-chatview', { ...@@ -189,6 +189,7 @@ converse.plugins.add('converse-chatview', {
this.listenTo(this.model, 'destroy', this.remove); this.listenTo(this.model, 'destroy', this.remove);
this.listenTo(this.model, 'show', this.show); this.listenTo(this.model, 'show', this.show);
this.listenTo(this.model, 'vcard:change', this.renderHeading); this.listenTo(this.model, 'vcard:change', this.renderHeading);
this.listenTo(this.model, 'change:composing_spoiler', this.renderMessageForm);
if (this.model.contact) { if (this.model.contact) {
this.listenTo(this.model.contact, 'destroy', this.renderHeading); this.listenTo(this.model.contact, 'destroy', this.renderHeading);
...@@ -351,8 +352,6 @@ converse.plugins.add('converse-chatview', { ...@@ -351,8 +352,6 @@ converse.plugins.add('converse-chatview', {
const form_container = this.el.querySelector('.message-form-container'); const form_container = this.el.querySelector('.message-form-container');
render(tpl_chatbox_message_form( render(tpl_chatbox_message_form(
Object.assign(this.model.toJSON(), { Object.assign(this.model.toJSON(), {
'__': __,
'message_limit': api.settings.get('message_limit'),
'hint_value': this.el.querySelector('.spoiler-hint')?.value, 'hint_value': this.el.querySelector('.spoiler-hint')?.value,
'label_message': this.model.get('composing_spoiler') ? __('Hidden message') : __('Message'), 'label_message': this.model.get('composing_spoiler') ? __('Hidden message') : __('Message'),
'label_spoiler_hint': __('Optional hint'), 'label_spoiler_hint': __('Optional hint'),
...@@ -954,12 +953,6 @@ converse.plugins.add('converse-chatview', { ...@@ -954,12 +953,6 @@ converse.plugins.add('converse-chatview', {
u.placeCaretAtEnd(textarea); u.placeCaretAtEnd(textarea);
}, },
toggleComposeSpoilerMessage () {
this.model.set('composing_spoiler', !this.model.get('composing_spoiler'));
this.renderMessageForm();
this.focus();
},
onPresenceChanged (item) { onPresenceChanged (item) {
const show = item.get('show'); const show = item.get('show');
const fullname = this.model.getDisplayName(); const fullname = this.model.getDisplayName();
......
...@@ -456,6 +456,7 @@ converse.plugins.add('converse-muc-views', { ...@@ -456,6 +456,7 @@ converse.plugins.add('converse-muc-views', {
this.initDebounced(); this.initDebounced();
this.listenTo(this.model, 'change', debounce(() => this.renderHeading(), 250)); 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, 'change:hidden_occupants', this.renderToolbar);
this.listenTo(this.model, 'configurationNeeded', this.getAndRenderConfigurationForm); this.listenTo(this.model, 'configurationNeeded', this.getAndRenderConfigurationForm);
this.listenTo(this.model, 'destroy', this.hide); this.listenTo(this.model, 'destroy', this.hide);
......
...@@ -12,6 +12,7 @@ export default (o) => { ...@@ -12,6 +12,7 @@ export default (o) => {
<converse-chat-toolbar <converse-chat-toolbar
.chatview=${o.chatview} .chatview=${o.chatview}
.model=${o.model} .model=${o.model}
?composing_spoiler="${o.composing_spoiler}"
?hidden_occupants="${o.hidden_occupants}" ?hidden_occupants="${o.hidden_occupants}"
?is_groupchat="${o.is_groupchat}" ?is_groupchat="${o.is_groupchat}"
?show_call_button="${show_call_button}" ?show_call_button="${show_call_button}"
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment