From f36c3fefdde0966cb490020cffe5da81f46b265c Mon Sep 17 00:00:00 2001 From: JC Brand Date: Fri, 19 Nov 2021 10:49:22 +0100 Subject: [PATCH] Fix the MUC occupant modal and add more info Fixes #1419 --- CHANGES.md | 1 + src/modals/modals.scss | 14 +++++++++ src/modals/occupant.js | 45 +++++++++++++--------------- src/modals/templates/occupant.js | 33 ++++++++++++++++++-- src/shared/avatar/avatar.js | 11 ++++--- src/shared/chat/message.js | 2 +- src/shared/chat/templates/message.js | 1 + 7 files changed, 74 insertions(+), 33 deletions(-) create mode 100644 src/modals/modals.scss diff --git a/CHANGES.md b/CHANGES.md index 555c5cb0d..8ad5e0736 100644 --- a/CHANGES.md +++ b/CHANGES.md @@ -7,6 +7,7 @@ - Fix trimming of chats in overlayed view mode - OMEMO bugfix: Always create device session based on real JID. - If `auto_register_muc_nickname` is set, make sure to register when the user changes current nick. +- #1419: Clicking on avatar should show bigger version - #2647: Singleton mode doesn't work - #2704: Send button doesn't work in a multi-user chat diff --git a/src/modals/modals.scss b/src/modals/modals.scss new file mode 100644 index 000000000..62a8472d8 --- /dev/null +++ b/src/modals/modals.scss @@ -0,0 +1,14 @@ +.conversejs { + .modal-body { + .row { + margin-left: 0; + margin-right: 0; + } + } + + .occupant-details { + li { + margin-bottom: 1em; + } + } +} diff --git a/src/modals/occupant.js b/src/modals/occupant.js index 4efe98a7f..79f9004fc 100644 --- a/src/modals/occupant.js +++ b/src/modals/occupant.js @@ -2,42 +2,37 @@ import BootstrapModal from "plugins/modal/base.js"; import tpl_occupant_modal from "./templates/occupant.js"; import { _converse, api } from "@converse/headless/core"; +import './modals.scss'; + const OccupantModal = BootstrapModal.extend({ + id: "muc-occupant", initialize () { BootstrapModal.prototype.initialize.apply(this, arguments); - this.listenTo(this.model, 'change', this.render); + if (this.model) { + this.listenTo(this.model, 'change', this.render); + } /** * Triggered once the OccupantModal has been initialized - * @event _converse#userDetailsModalInitialized - * @type { _converse.ChatBox } - * @example _converse.api.listen.on('userDetailsModalInitialized', chatbox => { ... }); + * @event _converse#occupantModalInitialized + * @type { Object } + * @example _converse.api.listen.on('occupantModalInitialized', data); */ - api.trigger('occupantModalInitialized', this.model); + api.trigger('occupantModalInitialized', { 'model': this.model, 'message': this.message }); }, toHTML () { - return tpl_occupant_modal(Object.assign( - this.model.toJSON(), - { - 'avatar_data': this.getAvatarData(), - 'display_name': this.model.getDisplayName() - } - )); - }, - - getAvatarData () { - const vcard = _converse.vcards.findWhere({'jid': this.model.get('jid')}); - const image_type = vcard?.get('image_type') || _converse.DEFAULT_IMAGE_TYPE; - const image_data = vcard?.get('image') || _converse.DEFAULT_IMAGE; - const image = "data:" + image_type + ";base64," + image_data; - return { - 'classes': 'chat-msg__avatar', - 'height': 120, - 'width': 120, - image, - }; + const model = this.model ?? this.message; + const jid = model?.get('jid'); + const vcard = _converse.vcards.findWhere({ jid }); + const display_name = model?.getDisplayName(); + const nick = model.get('nick'); + const occupant_id = model.get('occupant_id'); + const role = this.model?.get('role'); + const affiliation = this.model?.get('affiliation'); + const hats = this.model?.get('hats')?.length ? this.model.get('hats') : null; + return tpl_occupant_modal({ jid, vcard, display_name, nick, occupant_id, role, affiliation, hats }); } }); diff --git a/src/modals/templates/occupant.js b/src/modals/templates/occupant.js index 80470d58f..109e33200 100644 --- a/src/modals/templates/occupant.js +++ b/src/modals/templates/occupant.js @@ -1,6 +1,7 @@ +import 'shared/avatar/avatar.js'; +import { __ } from 'i18n'; import { html } from "lit"; import { modal_close_button, modal_header_close_button } from "plugins/modal/templates/buttons.js" -import { renderAvatar } from 'shared/directives/avatar'; export default (o) => { @@ -11,8 +12,34 @@ export default (o) => { ${modal_header_close_button} -
- ${renderAvatar(o.avatar_data)} +
+
+
+ +
+
+
    +
  • + ${ o.nick ? html`
    ${__('Nickname')}:
    ${o.nick}
    ` : '' } +
    • +
  • + ${ o.jid ? html`
    ${__('XMPP Address')}:
    ${o.jid}
    ` : '' } +
    • +
  • + ${ o.affiliation ? html`
    ${__('Affiliation')}:
    ${o.affiliation}
    ` : '' } +
    • +
  • + ${ o.role ? html`
    ${__('Roles')}:
    ${o.role}
    ` : '' } +
    • +
  • + ${ o.hats ? html`
    ${__('Hats')}:
    ${o.hats}
    ` : '' } +
    • +
  • + ${ o.occupant_id ? html`
    ${__('Occupant Id')}:
    ${o.occupant_id}
    ` : '' } +
    • +
+
+
${modal_close_button} diff --git a/src/shared/avatar/avatar.js b/src/shared/avatar/avatar.js index bf00868ab..4bedf693f 100644 --- a/src/shared/avatar/avatar.js +++ b/src/shared/avatar/avatar.js @@ -1,6 +1,6 @@ import { CustomElement } from 'shared/components/element.js'; import tpl_avatar from './templates/avatar.js'; -import { api } from '@converse/headless/core'; +import { _converse, api } from '@converse/headless/core'; export default class Avatar extends CustomElement { @@ -20,12 +20,15 @@ export default class Avatar extends CustomElement { } render () { + const image_type = this.model?.get('image_type') || _converse.DEFAULT_IMAGE_TYPE; + const image_data = this.model?.get('image') || _converse.DEFAULT_IMAGE; + const image = "data:" + image_type + ";base64," + image_data; return tpl_avatar({ 'classes': this.getAttribute('class'), - 'width': this.width, 'height': this.height, - 'image_type': this.model?.get('image_type'), - 'image': this.model?.get('image') + 'width': this.width, + image, + image_type, }); } } diff --git a/src/shared/chat/message.js b/src/shared/chat/message.js index 9b93df4b7..25b426fb2 100644 --- a/src/shared/chat/message.js +++ b/src/shared/chat/message.js @@ -229,7 +229,7 @@ export default class Message extends CustomElement { api.modal.show(_converse.ProfileModal, {model: this.model}, ev); } else if (this.model.get('type') === 'groupchat') { ev.preventDefault(); - api.modal.show(OccupantModal, { 'model': this.model.occupant }, ev); + api.modal.show(OccupantModal, { 'model': this.model.occupant, 'message': this.model }, ev); } else { ev.preventDefault(); const chatbox = this.model.collection.chatbox; diff --git a/src/shared/chat/templates/message.js b/src/shared/chat/templates/message.js index fb7e531b3..c44f34dc9 100644 --- a/src/shared/chat/templates/message.js +++ b/src/shared/chat/templates/message.js @@ -1,3 +1,4 @@ +import 'shared/avatar/avatar.js'; import 'shared/chat/unfurl.js'; import { __ } from 'i18n'; import { html } from "lit";