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

Fixes #2064 and move message markup into template

Browse Source 
After some back-and-forth, I think it's still better to keep markup in
templates (instead of having them directly inside the components)
becaues it makes it easier for people to modify Converse.js (at the
expense of some developer ergonomics).
This commit is contained in:
JC Brand 2020-06-11 15:27:45 +02:00
parent cf258f0b4c
commit abec9bc39e
2 changed files with 48 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
src/components/message.js
View File

@ -4,6 +4,7 @@ import './message-actions.js';
import MessageVersionsModal from '../modals/message-versions.js';
import dayjs from 'dayjs';
import filesize from "filesize";
import tpl_chat_message from '../templates/chat_message.js';
import tpl_spinner from '../templates/spinner.js';
import { CustomElement } from './element.js';
import { __ } from '@converse/headless/i18n';
@ -14,11 +15,9 @@ import { renderAvatar } from './../templates/directives/avatar';
const { Strophe } = converse.env;
const u = converse.env.utils;
const i18n_edited = __('This message has been edited');
const i18n_show = __('Show more');
const i18n_show_less = __('Show less');
const i18n_uploading = __('Uploading file:');
const i18n_new_messages = __('New messages');
class Message extends CustomElement {
@ -124,42 +123,7 @@ class Message extends CustomElement {
}
renderChatMessage () {
const is_groupchat_message = (this.message_type === 'groupchat');
return html`
${ this.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 ${ this.getExtraMessageClasses() }"
data-isodate="${this.time}"
data-msgid="${this.msgid}"
data-from="${this.from}"
data-encrypted="${this.is_encrypted}">
${ this.shouldShowAvatar() ? renderAvatar(this.getAvatarData()) : '' }
<div class="chat-msg__content chat-msg__content--${this.sender} ${this.is_me_message ? 'chat-msg__content--action' : ''}">
<span class="chat-msg__heading">
${ (this.is_me_message) ? html`
<time timestamp="${this.time}" class="chat-msg__time">${this.pretty_time}</time>
${this.hats.map(hat => html`<span class="badge badge-secondary">${hat}</span>`)}
` : '' }
<span class="chat-msg__author">${ this.is_me_message ? '**' : ''}${this.username}</span>
${ !this.is_me_message ? this.renderAvatarByline() : '' }
${ this.is_encrypted ? html`<span class="fa fa-lock"></span>` : '' }
</span>
<div class="chat-msg__body chat-msg__body--${this.message_type} ${this.received ? 'chat-msg__body--received' : '' } ${this.is_delayed ? 'chat-msg__body--delayed' : '' }">
<div class="chat-msg__message">
${ this.is_retracted ? this.renderRetraction() : this.renderMessageText() }
</div>
${ (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>` : '' }
<converse-message-actions
.chatview=${this.chatview}
.model=${this.model}
?correcting="${this.correcting}"
?editable="${this.editable}"
?is_retracted="${this.is_retracted}"
message_type="${this.message_type}"></converse-message-actions>
</div>
</div>
</div>`;
return tpl_chat_message(this);
}
shouldShowAvatar () {

46
src/templates/chat_message.js Normal file
View File

@ -0,0 +1,46 @@
import { html } from "lit-html";
import { __ } from '@converse/headless/i18n';
import { renderAvatar } from './../templates/directives/avatar';
const i18n_edited = __('This message has been edited');
const i18n_new_messages = __('New messages');
export default (o) => {
const is_groupchat_message = (o.message_type === 'groupchat');
return html`
${ 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() }"
data-isodate="${o.time}"
data-msgid="${o.msgid}"
data-from="${o.from}"
data-encrypted="${o.is_encrypted}">
${ o.shouldShowAvatar() ? renderAvatar(o.getAvatarData()) : '' }
<div class="chat-msg__content chat-msg__content--${o.sender} ${o.is_me_message ? 'chat-msg__content--action' : ''}">
<span class="chat-msg__heading">
${ (o.is_me_message) ? html`
<time timestamp="${o.time}" class="chat-msg__time">${o.pretty_time}</time>
${o.hats.map(hat => html`<span class="badge badge-secondary">${hat}</span>`)}
` : '' }
<span class="chat-msg__author">${ o.is_me_message ? '**' : ''}${o.username}</span>
${ !o.is_me_message ? o.renderAvatarByline() : '' }
${ o.is_encrypted ? html`<span class="fa fa-lock"></span>` : '' }
</span>
<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">
${ 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>
<converse-message-actions
.chatview=${o.chatview}
.model=${o.model}
?correcting="${o.correcting}"
?editable="${o.editable}"
?is_retracted="${o.is_retracted}"
message_type="${o.message_type}"></converse-message-actions>
</div>
</div>
</div>`;
}