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 1/2] 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
From 9e2a0e73e392b6ce0456c1cfcee16e8dcc869e4e Mon Sep 17 00:00:00 2001
From: ubermanu <e.vodor@gmail.com>
Date: Tue, 16 Mar 2021 14:09:13 +0100
Subject: [PATCH 2/2] move inline actions on top of the message
---
src/styles/index.scss | 20 +++++++++++++++++++-
1 file changed, 19 insertions(+), 1 deletion(-)
diff --git a/src/styles/index.scss b/src/styles/index.scss
index 9f6c11e..7aa8376 100644
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -872,7 +872,18 @@
width: 100% !important;
}
- // Message actions (inline)
+ //
+ // 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;
@@ -880,5 +891,12 @@
.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
--
GitLab