diff --git a/src/plugins/sib-action-buttons-inline.js b/src/plugins/sib-action-buttons-inline.js new file mode 100644 index 0000000000000000000000000000000000000000..77252f6de816ce3a7fa727f6e5a8803523f0bfa1 --- /dev/null +++ b/src/plugins/sib-action-buttons-inline.js @@ -0,0 +1,39 @@ +/** + * Render the action buttons off the drawer. + * The buttons should be shown on message hover, on the right side of the message. + */ +converse.plugins.add('sib-action-buttons-inline', { + initialize() { + const { html } = converse.env; + const _converse = this._converse; + const { api } = _converse; + + const MessageActions = api.elements.registry['converse-message-actions']; + + function getInlineActionsItem(o) { + return html` + <button class='chat-msg__action ${o.button_class}' @click='${o.handler}' title='${o.i18n_text}'> + <converse-icon class='${o.icon_class}' + path-prefix='${api.settings.get('assets_path')}' + color='var(--text-color-lighten-15-percent)' + size='1em'></converse-icon> + </button> + `; + } + + Object.assign(MessageActions.prototype, { + async renderActions() { + const buttons = await this.getActionButtons(); + const items = buttons.map(b => getInlineActionsItem(b)); + + if (items.length) { + return html` + <div class='chat-msg__actions chat-msg__actions--inline'>${items}</div> + `; + } else { + return ''; + } + }, + }); + }, +}); diff --git a/src/solid-xmpp-chat.js b/src/solid-xmpp-chat.js index 8887e7ab131e173794aba07d10221da35c634299..907b63c8591900f07ba14e7a47fa2b816ecf2532 100644 --- a/src/solid-xmpp-chat.js +++ b/src/solid-xmpp-chat.js @@ -6,6 +6,7 @@ import './conversejs/converse.min.js'; import './conversejs/emojis.js'; import './plugins/converse-rai.js'; +import './plugins/sib-action-buttons-inline.js'; import './plugins/sib-chat-navigation.js'; import './plugins/sib-custom-hats.js'; import './plugins/sib-disconnected.js'; @@ -223,6 +224,7 @@ export const SolidXMPPChat = { }, 'whitelisted_plugins': [ 'converse-rai', + 'sib-action-buttons-inline', 'sib-chat-navigation', 'sib-connected', 'sib-custom-hats', diff --git a/src/styles/index.scss b/src/styles/index.scss index f32781c268b36a7453acd6f20fb5d88c431f4f46..9f6c11ec95c459fa598c36f4baebd4d8ecd7eecd 100644 --- a/src/styles/index.scss +++ b/src/styles/index.scss @@ -871,4 +871,14 @@ .converse-chatboxes .chatbox .box-flyout { width: 100% !important; } + + // Message actions (inline) + + .chat-msg:not(:hover) .chat-msg__actions--inline { + display: none; + } + + .chat-msg__actions--inline { + display: flex; + } } \ No newline at end of file