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 01/10] 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 9ad3d7a8c9dd1f08a92eb71ca6dfebc1c735aaee Mon Sep 17 00:00:00 2001
From: ubermanu <e.vodor@gmail.com>
Date: Tue, 16 Mar 2021 06:04:56 +0100
Subject: [PATCH 02/10] minor: replace the current emoji picker with a faster
and more complete one
---
src/plugins/sib-emoji-picker.js | 71 +++++++++++++++++++++++++++++++++
src/solid-xmpp-chat.js | 4 +-
2 files changed, 74 insertions(+), 1 deletion(-)
create mode 100644 src/plugins/sib-emoji-picker.js
diff --git a/src/plugins/sib-emoji-picker.js b/src/plugins/sib-emoji-picker.js
new file mode 100644
index 0000000..6099368
--- /dev/null
+++ b/src/plugins/sib-emoji-picker.js
@@ -0,0 +1,71 @@
+import 'https://cdn.skypack.dev/emoji-picker-element';
+
+/**
+ * Custom emoji picker.
+ * Replaces the default drawer with a custom component.
+ */
+converse.plugins.add('sib-emoji-picker', {
+ dependencies: [
+ 'converse-emoji',
+ ],
+ initialize() {
+ const { html } = converse.env;
+ const _converse = this._converse;
+ const { api, __ } = _converse;
+
+ /**
+ * Force rendering of the emoji picker inside the dropdown.
+ * Note: Without this mixin, the IndexedDB can't be loaded for some reason.
+ */
+ const EmojiDropdownMixin = {
+ render() {
+ return html`
+ <div class='dropup'>
+ <button class='toggle-emojis'
+ title='${__('Insert emojis')}'
+ data-toggle='dropdown'
+ aria-haspopup='true'
+ aria-expanded='false'>
+ <converse-icon
+ class='fa fa-smile '
+ path-prefix='${api.settings.get('assets_path')}'
+ size='1em'></converse-icon>
+ </button>
+ <div class='dropdown-menu'>
+ <converse-emoji-picker
+ .chatview='${this.chatview}'
+ .model='${this.model}'
+ ></converse-emoji-picker>
+ </div>
+ </div>`;
+ },
+ };
+
+ // Apply mixin
+ const EmojiDropdown = api.elements.registry['converse-emoji-dropdown'];
+ Object.assign(EmojiDropdown.prototype, EmojiDropdownMixin);
+
+ /**
+ * Update the emoji picker rendered content.
+ * with the new element.
+ */
+ const EmojiPickerMixin = {
+ firstUpdated() {
+ },
+ registerEvents() {
+ },
+ render() {
+ return html`
+ <emoji-picker
+ .chatview='${this.chatview}'
+ .model='${this.model}'
+ @emoji-click='${ev => this.insertIntoTextArea(ev.detail.emoji.unicode)}'
+ ></emoji-picker>`;
+ },
+ };
+
+ // Apply mixin
+ const EmojiPicker = api.elements.registry['converse-emoji-picker'];
+ Object.assign(EmojiPicker.prototype, EmojiPickerMixin);
+ },
+});
diff --git a/src/solid-xmpp-chat.js b/src/solid-xmpp-chat.js
index 8887e7a..1827efe 100644
--- a/src/solid-xmpp-chat.js
+++ b/src/solid-xmpp-chat.js
@@ -2,13 +2,14 @@ import { Sib, store, StoreMixin } from 'https://cdn.skypack.dev/@startinblox/cor
import { Deferred } from './utils.js';
import ComponentPath from './path.js';
-import './conversejs/converse.min.js';
+import './conversejs/converse.js';
import './conversejs/emojis.js';
import './plugins/converse-rai.js';
import './plugins/sib-chat-navigation.js';
import './plugins/sib-custom-hats.js';
import './plugins/sib-disconnected.js';
+import './plugins/sib-emoji-picker.js';
import './plugins/sib-history-improved.js';
import './plugins/sib-mention-mobile.js';
import './plugins/sib-remove-notifications.js';
@@ -227,6 +228,7 @@ export const SolidXMPPChat = {
'sib-connected',
'sib-custom-hats',
'sib-disconnected',
+ 'sib-emoji-picker',
'sib-history-improved',
'sib-mention-mobile',
'sib-remove-notifications',
--
GitLab
From 3b946562187f38432377692f04b5df179d750665 Mon Sep 17 00:00:00 2001
From: ubermanu <e.vodor@gmail.com>
Date: Tue, 16 Mar 2021 06:17:19 +0100
Subject: [PATCH 03/10] restore the usage of the minified version of converse
---
src/solid-xmpp-chat.js | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/src/solid-xmpp-chat.js b/src/solid-xmpp-chat.js
index 1827efe..cb78f4b 100644
--- a/src/solid-xmpp-chat.js
+++ b/src/solid-xmpp-chat.js
@@ -2,7 +2,7 @@ import { Sib, store, StoreMixin } from 'https://cdn.skypack.dev/@startinblox/cor
import { Deferred } from './utils.js';
import ComponentPath from './path.js';
-import './conversejs/converse.js';
+import './conversejs/converse.min.js';
import './conversejs/emojis.js';
import './plugins/converse-rai.js';
--
GitLab
From b864250444af32d17d7108f901e533cc9a664aed Mon Sep 17 00:00:00 2001
From: ubermanu <e.vodor@gmail.com>
Date: Tue, 16 Mar 2021 06:21:54 +0100
Subject: [PATCH 04/10] enable skin tone emojis
---
src/plugins/sib-emoji-picker.js | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/src/plugins/sib-emoji-picker.js b/src/plugins/sib-emoji-picker.js
index 6099368..d8a03ff 100644
--- a/src/plugins/sib-emoji-picker.js
+++ b/src/plugins/sib-emoji-picker.js
@@ -59,7 +59,7 @@ converse.plugins.add('sib-emoji-picker', {
<emoji-picker
.chatview='${this.chatview}'
.model='${this.model}'
- @emoji-click='${ev => this.insertIntoTextArea(ev.detail.emoji.unicode)}'
+ @emoji-click='${ev => this.insertIntoTextArea(ev.detail.unicode)}'
></emoji-picker>`;
},
};
--
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 05/10] 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
From 7c86648104120d0408d2f223e76576fde853f914 Mon Sep 17 00:00:00 2001
From: ubermanu <e.vodor@gmail.com>
Date: Fri, 19 Mar 2021 16:05:58 +0100
Subject: [PATCH 06/10] bugfix: remove min width
---
src/styles/index.scss | 58 ++++++++++++++++++++++++-------------------
1 file changed, 32 insertions(+), 26 deletions(-)
diff --git a/src/styles/index.scss b/src/styles/index.scss
index 7aa8376..a1259b8 100644
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -117,22 +117,22 @@
}
/* Background when an emoji is hover*/
- .chatbox converse-emoji-picker {
-
- .emoji-picker__header ul li.emoji-category:hover,
- .emoji-picker li.insert-emoji a:hover {
- background: var(--chat-head-color);
- }
- }
+ //.chatbox converse-emoji-picker {
+ //
+ // .emoji-picker__header ul li.emoji-category:hover,
+ // .emoji-picker li.insert-emoji a:hover {
+ // background: var(--chat-head-color);
+ // }
+ //}
/* underline underneath emoji in the emoji picker removed */
- .chatbox converse-emoji-picker {
-
- .emoji-picker__header ul li.emoji-category a,
- .emoji-picker li.insert-emoji a {
- text-decoration: none;
- }
- }
+ //.chatbox converse-emoji-picker {
+ //
+ // .emoji-picker__header ul li.emoji-category a,
+ // .emoji-picker li.insert-emoji a {
+ // text-decoration: none;
+ // }
+ //}
/* Outline when the emoji button is selected */
.chatbox converse-chat-toolbar button:focus {
@@ -140,10 +140,10 @@
}
/* Modal when the connection is lost*/
- #alert-modal>.modal-dialog>.modal-content {
+ #alert-modal > .modal-dialog > .modal-content {
top: 47px;
- >div.modal-body>p {
+ > div.modal-body > p {
color: var(--color-chat-grey-1);
}
}
@@ -154,7 +154,7 @@
}
/* To hide the trash icon because you can't remove a message for now */
- >.converse-chatboxes .chat-body .chat-msg__actions>button.chat-msg__action.fa-trash-alt {
+ > .converse-chatboxes .chat-body .chat-msg__actions > button.chat-msg__action.fa-trash-alt {
display: none;
}
@@ -571,7 +571,7 @@
}
.suggestion-box .suggestion-box__results,
- .suggestion-box>ul {
+ .suggestion-box > ul {
box-shadow: 0 0 5px 0 rgba(133, 140, 148, 0.09);
}
@@ -598,7 +598,7 @@
converse-chat-toolbar .far:hover svg,
converse-chat-toolbar .fas svg,
converse-chat-toolbar .fas:hover svg {
- fill: var(--color-secondary)!important;
+ fill: var(--color-secondary) !important;
}
.chatroom .toggle-smiley .emoji-picker.toolbar-menu .emoji-picker__container .emoji-skintone-picker,
@@ -607,14 +607,20 @@
}
&.converse-fullscreen converse-emoji-dropdown .dropdown-menu {
- min-width: 80vw;
+ min-width: unset;
+ box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+ border-radius: 3px;
}
- @media (min-width: 600px) {
- &.converse-fullscreen converse-emoji-dropdown .dropdown-menu {
- min-width: 25vw;
- }
- }
+ //&.converse-fullscreen converse-emoji-dropdown .dropdown-menu {
+ // min-width: 80vw;
+ //}
+ //
+ //@media (min-width: 600px) {
+ // &.converse-fullscreen converse-emoji-dropdown .dropdown-menu {
+ // min-width: 25vw;
+ // }
+ //}
&.converse-fullscreen .chatroom .sendXMPPMessage .chat-toolbar .fa,
&.converse-fullscreen .chatroom .sendXMPPMessage .chat-toolbar .fa:hover,
@@ -821,7 +827,7 @@
background: var(--hd-hightlight-color);
}
- .suggestion-box>ul>li[aria-selected=true] {
+ .suggestion-box > ul > li[aria-selected=true] {
background: transparent;
color: var(--chat-suggestion-selected-true) !important;
}
--
GitLab
From 0f9c49ca525e5845589a6de0cc7b4f94d39016eb Mon Sep 17 00:00:00 2001
From: ubermanu <e.vodor@gmail.com>
Date: Fri, 19 Mar 2021 16:06:36 +0100
Subject: [PATCH 07/10] focus the search input when opening the menu
---
src/plugins/sib-emoji-picker.js | 42 +++++++++++++++++++--------------
1 file changed, 24 insertions(+), 18 deletions(-)
diff --git a/src/plugins/sib-emoji-picker.js b/src/plugins/sib-emoji-picker.js
index d8a03ff..b2f9270 100644
--- a/src/plugins/sib-emoji-picker.js
+++ b/src/plugins/sib-emoji-picker.js
@@ -20,29 +20,36 @@ converse.plugins.add('sib-emoji-picker', {
const EmojiDropdownMixin = {
render() {
return html`
- <div class='dropup'>
- <button class='toggle-emojis'
- title='${__('Insert emojis')}'
- data-toggle='dropdown'
- aria-haspopup='true'
- aria-expanded='false'>
- <converse-icon
- class='fa fa-smile '
- path-prefix='${api.settings.get('assets_path')}'
- size='1em'></converse-icon>
+ <div class="dropup">
+ <button class="toggle-emojis"
+ title="${__('Insert emojis')}"
+ data-toggle="dropdown"
+ aria-haspopup="true"
+ aria-expanded="false">
+ <converse-icon class="fa fa-smile"
+ path-prefix="${api.settings.get('assets_path')}"
+ size="1em"></converse-icon>
</button>
- <div class='dropdown-menu'>
- <converse-emoji-picker
- .chatview='${this.chatview}'
- .model='${this.model}'
+ <div class="dropdown-menu">
+ <converse-emoji-picker .chatview="${this.chatview}"
+ .model="${this.model}"
></converse-emoji-picker>
</div>
</div>`;
},
+ async showMenu() {
+ await _showMenu.apply(this, arguments);
+ setTimeout(() => {
+ // Focus the search input afterwards
+ const picker = this.querySelector('emoji-picker');
+ picker?.shadowRoot.querySelector('.search')?.focus();
+ })
+ },
};
// Apply mixin
const EmojiDropdown = api.elements.registry['converse-emoji-dropdown'];
+ const _showMenu = EmojiDropdown.prototype.showMenu;
Object.assign(EmojiDropdown.prototype, EmojiDropdownMixin);
/**
@@ -56,10 +63,9 @@ converse.plugins.add('sib-emoji-picker', {
},
render() {
return html`
- <emoji-picker
- .chatview='${this.chatview}'
- .model='${this.model}'
- @emoji-click='${ev => this.insertIntoTextArea(ev.detail.unicode)}'
+ <emoji-picker .chatview="${this.chatview}"
+ .model="${this.model}"
+ @emoji-click="${ev => this.insertIntoTextArea(ev.detail.unicode)}"
></emoji-picker>`;
},
};
--
GitLab
From 61c1e21bf182739b4f01ff49e983b03770d85256 Mon Sep 17 00:00:00 2001
From: ubermanu <e.vodor@gmail.com>
Date: Fri, 19 Mar 2021 16:38:55 +0100
Subject: [PATCH 08/10] avoid an error if the picker is not initialized
---
src/plugins/sib-emoji-picker.js | 4 ++--
1 file changed, 2 insertions(+), 2 deletions(-)
diff --git a/src/plugins/sib-emoji-picker.js b/src/plugins/sib-emoji-picker.js
index b2f9270..1a243f6 100644
--- a/src/plugins/sib-emoji-picker.js
+++ b/src/plugins/sib-emoji-picker.js
@@ -42,8 +42,8 @@ converse.plugins.add('sib-emoji-picker', {
setTimeout(() => {
// Focus the search input afterwards
const picker = this.querySelector('emoji-picker');
- picker?.shadowRoot.querySelector('.search')?.focus();
- })
+ picker?.shadowRoot?.querySelector('.search')?.focus();
+ });
},
};
--
GitLab
From ae4d6debde7de263638afa5dd56e767ba17b4c4c Mon Sep 17 00:00:00 2001
From: ubermanu <e.vodor@gmail.com>
Date: Fri, 19 Mar 2021 16:40:34 +0100
Subject: [PATCH 09/10] bugfix: register the picker element
---
src/plugins/sib-emoji-picker.js | 6 +++++-
1 file changed, 5 insertions(+), 1 deletion(-)
diff --git a/src/plugins/sib-emoji-picker.js b/src/plugins/sib-emoji-picker.js
index 1a243f6..0c3da68 100644
--- a/src/plugins/sib-emoji-picker.js
+++ b/src/plugins/sib-emoji-picker.js
@@ -1,4 +1,4 @@
-import 'https://cdn.skypack.dev/emoji-picker-element';
+import { Picker } from 'https://cdn.skypack.dev/emoji-picker-element';
/**
* Custom emoji picker.
@@ -13,6 +13,10 @@ converse.plugins.add('sib-emoji-picker', {
const _converse = this._converse;
const { api, __ } = _converse;
+ // Register the picker element
+ api.elements.define('emoji-picker', Picker);
+ api.elements.register();
+
/**
* Force rendering of the emoji picker inside the dropdown.
* Note: Without this mixin, the IndexedDB can't be loaded for some reason.
--
GitLab
From eb245ac61c25ba1ef662572def755ab301a53ea1 Mon Sep 17 00:00:00 2001
From: ubermanu <e.vodor@gmail.com>
Date: Mon, 22 Mar 2021 14:49:20 +0100
Subject: [PATCH 10/10] bugfix: enforce light theme on the picker
---
src/plugins/sib-emoji-picker.js | 1 +
1 file changed, 1 insertion(+)
diff --git a/src/plugins/sib-emoji-picker.js b/src/plugins/sib-emoji-picker.js
index 0c3da68..fc4ed60 100644
--- a/src/plugins/sib-emoji-picker.js
+++ b/src/plugins/sib-emoji-picker.js
@@ -70,6 +70,7 @@ converse.plugins.add('sib-emoji-picker', {
<emoji-picker .chatview="${this.chatview}"
.model="${this.model}"
@emoji-click="${ev => this.insertIntoTextArea(ev.detail.unicode)}"
+ class="light"
></emoji-picker>`;
},
};
--
GitLab