Chapril/xmpp.chapril.org-conversejs
Chapril/xmpp.chapril.org-conversejs
25
0
Fork 0
Code Issues Pull Requests Projects Releases Activity

Don't nest chat-msg__txt inside converse-chat-message-body

Browse Source 
instead just set the classes directly on the custom element

As far as I can tell, this fixes #1346 (or it was fixed already)
This commit is contained in:
JC Brand 2020-06-12 13:30:33 +02:00
parent 59a5acf249
commit de583cbd32
3 changed files with 4 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
sass/_messages.scss
View File

@ -164,7 +164,7 @@
} }
converse-chat-message-body { converse-chat-message-body {
display: inline-block; display: inline;
} }
.chat-msg__message { .chat-msg__message {
@ -193,7 +193,6 @@
.chat-msg__text { .chat-msg__text {
color: var(--message-text-color); color: var(--message-text-color);
padding: 0; padding: 0;
width: 100%;
white-space: pre-wrap; white-space: pre-wrap;
word-wrap: break-word; word-wrap: break-word;
word-break: break-word; word-break: break-word;

11
src/components/message-body.js
View File

@ -1,15 +1,11 @@
import { CustomElement } from './element.js'; import { CustomElement } from './element.js';
import { renderBodyText } from './../templates/directives/body'; import { renderBodyText } from './../templates/directives/body';
import { html } from 'lit-element';
class MessageBody extends CustomElement { class MessageBody extends CustomElement {
static get properties () { static get properties () {
return { return {
is_only_emojis: { type: Boolean },
is_spoiler: { type: Boolean },
is_spoiler_visible: { type: Boolean },
is_me_message: { type: Boolean }, is_me_message: { type: Boolean },
model: { type: Object }, model: { type: Object },
text: { type: String }, text: { type: String },
@ -17,13 +13,8 @@ class MessageBody extends CustomElement {
} }
render () { render () {
const spoiler_classes = this.is_spoiler ? `spoiler ${this.is_spoiler_visible ? '' : 'collapsed'}` : ''; return renderBodyText(this);
return html`
<div class="chat-msg__text ${this.is_only_emojis ? 'chat-msg__text--larger' : ''} ${spoiler_classes}"
>${renderBodyText(this)}</div>
`;
} }
} }
customElements.define('converse-chat-message-body', MessageBody); customElements.define('converse-chat-message-body', MessageBody);

2
src/components/message.js
View File

@ -223,11 +223,13 @@ class Message extends CustomElement {
</a> </a>
</div> </div>
`; `;
const spoiler_classes = this.is_spoiler ? `spoiler ${this.is_spoiler_visible ? '' : 'collapsed'}` : '';
return html` return html`
${ this.is_spoiler ? tpl_spoiler_hint : '' } ${ this.is_spoiler ? tpl_spoiler_hint : '' }
${ this.subject ? html`<div class="chat-msg__subject">${this.subject}</div>` : '' } ${ this.subject ? html`<div class="chat-msg__subject">${this.subject}</div>` : '' }
<span> <span>
<converse-chat-message-body <converse-chat-message-body
class="chat-msg__text ${this.is_only_emojis ? 'chat-msg__text--larger' : ''} ${spoiler_classes}"
.model="${this.model}" .model="${this.model}"
?is_me_message="${this.is_me_message}" ?is_me_message="${this.is_me_message}"
?is_only_emojis="${this.is_only_emojis}" ?is_only_emojis="${this.is_only_emojis}"