Create converse-message-versions
component
Enables re-use outside of the message versions modal.
This commit is contained in:
parent
82ade54caa
commit
edd3b681c5
|
@ -5,6 +5,6 @@ import tpl_message_versions_modal from "./templates/message-versions.js";
|
|||
export default BootstrapModal.extend({
|
||||
id: "message-versions-modal",
|
||||
toHTML () {
|
||||
return tpl_message_versions_modal(this.model.toJSON());
|
||||
return tpl_message_versions_modal(this.model);
|
||||
}
|
||||
});
|
||||
|
|
|
@ -1,12 +1,10 @@
|
|||
import 'shared/components/message-versions.js';
|
||||
import { __ } from 'i18n';
|
||||
import { html } from "lit";
|
||||
import { modal_close_button, modal_header_close_button } from "./buttons.js"
|
||||
import { converse } from '@converse/headless/core';
|
||||
|
||||
const { dayjs } = converse.env;
|
||||
|
||||
|
||||
export default (o) => html`
|
||||
export default (model) => html`
|
||||
<div class="modal-dialog" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
|
@ -14,11 +12,7 @@ export default (o) => html`
|
|||
${modal_header_close_button}
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<h4>Older versions</h4>
|
||||
${Object.keys(o.older_versions).map(k => html`<p class="older-msg"><time>${dayjs(k).format('MMM D, YYYY, HH:mm:ss')}</time>: ${o.older_versions[k]}</p>`) }
|
||||
<hr/>
|
||||
<h4>Current version</h4>
|
||||
<p>${o.message}</p>
|
||||
<converse-message-versions .model=${model}></converse-message-versions>
|
||||
</div>
|
||||
<div class="modal-footer">${modal_close_button}</div>
|
||||
</div>
|
||||
|
|
|
@ -1,4 +1,4 @@
|
|||
import 'shared/chat/unfurl';
|
||||
import 'shared/chat/unfurl.js';
|
||||
import { __ } from 'i18n';
|
||||
import { html } from "lit";
|
||||
import { renderAvatar } from 'shared/directives/avatar';
|
||||
|
|
28
src/shared/components/message-versions.js
Normal file
28
src/shared/components/message-versions.js
Normal file
|
@ -0,0 +1,28 @@
|
|||
import { CustomElement } from './element.js';
|
||||
import { api, converse } from '@converse/headless/core';
|
||||
import { html } from 'lit';
|
||||
|
||||
const { dayjs } = converse.env;
|
||||
|
||||
|
||||
export class MessageVersions extends CustomElement {
|
||||
|
||||
static get properties () {
|
||||
return {
|
||||
'model': { type: Object }
|
||||
}
|
||||
}
|
||||
|
||||
render () {
|
||||
const older_versions = this.model.get('older_versions');
|
||||
const message = this.model.get('message');
|
||||
return html`
|
||||
<h4>Older versions</h4>
|
||||
${Object.keys(older_versions).map(k => html`<p class="older-msg"><time>${dayjs(k).format('MMM D, YYYY, HH:mm:ss')}</time>: ${older_versions[k]}</p>`) }
|
||||
<hr/>
|
||||
<h4>Current version</h4>
|
||||
<p>${message}</p>`;
|
||||
}
|
||||
}
|
||||
|
||||
api.elements.define('converse-message-versions', MessageVersions);
|
Loading…
Reference in New Issue
Block a user