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 1/2] 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 2/2] 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