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 4223762587517dc40d7eb78748a3ae5921b10543..2124b2e9f1afc3b6fb38de0f0b92b35362c8e4be 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'; @@ -228,6 +229,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..7aa8376e63ac1f5e71efd5a2314659b49e2e41f7 100644 --- a/src/styles/index.scss +++ b/src/styles/index.scss @@ -871,4 +871,32 @@ .converse-chatboxes .chatbox .box-flyout { width: 100% !important; } + + // + // Message Actions (inline) + // --------------------------------- + + .chat-msg { + position: relative; + } + + // Reset these positions + .chat-msg__content, .chat-msg__body, converse-message-actions { + position: initial; + } + + .chat-msg:not(:hover) .chat-msg__actions--inline { + display: none; + } + + .chat-msg__actions--inline { + display: flex; + position: absolute; + top: 0; + right: 0; + transform: translateY(-50%); + background: #f6f6f6; + border: 2px solid white; + border-radius: 3px; + } } \ No newline at end of file