From f7de8c336bb7659ceac95c0f9971442484bf2b3e Mon Sep 17 00:00:00 2001
From: ubermanu <e.vodor@gmail.com>
Date: Tue, 16 Mar 2021 04:51:25 +0100
Subject: [PATCH] minor: move the actions buttons outside of their drawer next
to the message
---
src/plugins/sib-action-buttons-inline.js | 39 ++++++++++++++++++++++++
src/solid-xmpp-chat.js | 2 ++
src/styles/index.scss | 10 ++++++
3 files changed, 51 insertions(+)
create mode 100644 src/plugins/sib-action-buttons-inline.js
diff --git a/src/plugins/sib-action-buttons-inline.js b/src/plugins/sib-action-buttons-inline.js
new file mode 100644
index 0000000..77252f6
--- /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 8887e7a..907b63c 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 f32781c..9f6c11e 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
--
GitLab