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

Fixes #2064 (for real this time)

Browse Source
This commit is contained in:
JC Brand 2020-06-11 17:03:59 +02:00
parent 80c955f267
commit 59a5acf249
3 changed files with 24 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
sass/_messages.scss
View File

@ -133,6 +133,11 @@
align-items: stretch; align-items: stretch;
margin-left: 0.5rem; margin-left: 0.5rem;
width: calc(100% - var(--message-avatar-width)); width: calc(100% - var(--message-avatar-width));
&:hover {
.btn--standalone {
opacity: 1;
}
}
} }
.chat-msg__content--me { .chat-msg__content--me {
@ -156,11 +161,10 @@
display: flex; display: flex;
flex-direction: row; flex-direction: row;
justify-content: space-between; justify-content: space-between;
&:hover { }
.btn--standalone {
opacity: 1; converse-chat-message-body {
} display: inline-block;
}
} }
.chat-msg__message { .chat-msg__message {
@ -341,6 +345,7 @@
} }
.chat-msg__receipt { .chat-msg__receipt {
margin-left: 0.5em;
margin-right: 0.5em; margin-right: 0.5em;
color: var(--message-receipt-color); color: var(--message-receipt-color);
} }

20
src/components/message.js
View File

@ -15,6 +15,7 @@ import { renderAvatar } from './../templates/directives/avatar';
const { Strophe } = converse.env; const { Strophe } = converse.env;
const u = converse.env.utils; const u = converse.env.utils;
const i18n_edited = __('This message has been edited');
const i18n_show = __('Show more'); const i18n_show = __('Show more');
const i18n_show_less = __('Show less'); const i18n_show_less = __('Show less');
const i18n_uploading = __('Uploading file:'); const i18n_uploading = __('Uploading file:');
@ -212,6 +213,7 @@ class Message extends CustomElement {
} }
renderMessageText () { renderMessageText () {
const is_groupchat_message = (this.message_type === 'groupchat');
const tpl_spoiler_hint = html` const tpl_spoiler_hint = html`
<div class="chat-msg__spoiler-hint"> <div class="chat-msg__spoiler-hint">
<span class="spoiler-hint">${this.spoiler_hint}</span> <span class="spoiler-hint">${this.spoiler_hint}</span>
@ -224,13 +226,17 @@ class Message extends CustomElement {
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>` : '' }
<converse-chat-message-body <span>
.model="${this.model}" <converse-chat-message-body
?is_me_message="${this.is_me_message}" .model="${this.model}"
?is_only_emojis="${this.is_only_emojis}" ?is_me_message="${this.is_me_message}"
?is_spoiler="${this.is_spoiler}" ?is_only_emojis="${this.is_only_emojis}"
?is_spoiler_visible="${this.is_spoiler_visible}" ?is_spoiler="${this.is_spoiler}"
text="${this.model.getMessageText()}"></converse-chat-message-body> ?is_spoiler_visible="${this.is_spoiler_visible}"
text="${this.model.getMessageText()}"></converse-chat-message-body>
${ (this.received && !this.is_me_message && !is_groupchat_message) ? html`<span class="fa fa-check chat-msg__receipt"></span>` : '' }
${ (this.edited) ? html`<i title="${ i18n_edited }" class="fa fa-edit chat-msg__edit-modal" @click=${this.showMessageVersionsModal}></i>` : '' }
</span>
${ this.oob_url ? html`<div class="chat-msg__media">${u.getOOBURLMarkup(_converse, this.oob_url)}</div>` : '' } ${ this.oob_url ? html`<div class="chat-msg__media">${u.getOOBURLMarkup(_converse, this.oob_url)}</div>` : '' }
<div class="chat-msg__error">${ this.error_text || this.error }</div> <div class="chat-msg__error">${ this.error_text || this.error }</div>
`; `;

5
src/templates/chat_message.js
View File

@ -2,12 +2,11 @@ import { html } from "lit-html";
import { __ } from '@converse/headless/i18n'; import { __ } from '@converse/headless/i18n';
import { renderAvatar } from './../templates/directives/avatar'; import { renderAvatar } from './../templates/directives/avatar';
const i18n_edited = __('This message has been edited');
const i18n_new_messages = __('New messages'); const i18n_new_messages = __('New messages');
export default (o) => { export default (o) => {
const is_groupchat_message = (o.message_type === 'groupchat');
return html` return html`
${ o.is_first_unread ? html`<div class="message date-separator"><hr class="separator"><span class="separator-text">${ i18n_new_messages }</span></div>` : '' } ${ o.is_first_unread ? html`<div class="message date-separator"><hr class="separator"><span class="separator-text">${ i18n_new_messages }</span></div>` : '' }
<div class="message chat-msg ${ o.getExtraMessageClasses() }" <div class="message chat-msg ${ o.getExtraMessageClasses() }"
@ -30,8 +29,6 @@ export default (o) => {
<div class="chat-msg__body chat-msg__body--${o.message_type} ${o.received ? 'chat-msg__body--received' : '' } ${o.is_delayed ? 'chat-msg__body--delayed' : '' }"> <div class="chat-msg__body chat-msg__body--${o.message_type} ${o.received ? 'chat-msg__body--received' : '' } ${o.is_delayed ? 'chat-msg__body--delayed' : '' }">
<div class="chat-msg__message"> <div class="chat-msg__message">
${ o.is_retracted ? o.renderRetraction() : o.renderMessageText() } ${ o.is_retracted ? o.renderRetraction() : o.renderMessageText() }
${ (o.received && !o.is_me_message && !is_groupchat_message) ? html`<span class="fa fa-check chat-msg__receipt"></span>` : '' }
${ (o.edited) ? html`<i title="${ i18n_edited }" class="fa fa-edit chat-msg__edit-modal" @click=${o.showMessageVersionsModal}></i>` : '' }
</div> </div>
<converse-message-actions <converse-message-actions
.chatview=${o.chatview} .chatview=${o.chatview}