From 87ef39ad9cc45e53f38c2c385ccc51689a9b9bae Mon Sep 17 00:00:00 2001 From: Sivin Varghese <64252451+iamsivin@users.noreply.github.com> Date: Tue, 6 Dec 2022 05:30:42 +0530 Subject: [PATCH] feat: Add the ability to search emojis (#5928) --- .../widgets/conversation/MessagesView.vue | 7 +- .../widgets/conversation/ReplyBox.vue | 13 +- .../dashboard/i18n/locale/en/emoji.json | 6 + .../dashboard/i18n/locale/en/index.js | 6 +- .../shared/components/emoji/EmojiInput.vue | 268 +- .../shared/components/emoji/emojis.json | 1 - .../shared/components/emoji/emojisGroup.json | 9291 +++++++++++++++++ .../widget/components/ChatInputWrap.vue | 7 +- app/javascript/widget/i18n/locale/en.json | 4 + 9 files changed, 9529 insertions(+), 74 deletions(-) create mode 100644 app/javascript/dashboard/i18n/locale/en/emoji.json delete mode 100644 app/javascript/shared/components/emoji/emojis.json create mode 100644 app/javascript/shared/components/emoji/emojisGroup.json diff --git a/app/javascript/dashboard/components/widgets/conversation/MessagesView.vue b/app/javascript/dashboard/components/widgets/conversation/MessagesView.vue index 0ebe35465..9df60200e 100644 --- a/app/javascript/dashboard/components/widgets/conversation/MessagesView.vue +++ b/app/javascript/dashboard/components/widgets/conversation/MessagesView.vue @@ -433,12 +433,7 @@ export default { position: fixed; left: unset; position: absolute; - - &::before { - transform: rotate(0deg); - left: var(--space-smaller); - bottom: var(--space-minus-slab); - } + bottom: var(--space-smaller); } } } diff --git a/app/javascript/dashboard/components/widgets/conversation/ReplyBox.vue b/app/javascript/dashboard/components/widgets/conversation/ReplyBox.vue index fdbb2fbdd..e8326fed0 100644 --- a/app/javascript/dashboard/components/widgets/conversation/ReplyBox.vue +++ b/app/javascript/dashboard/components/widgets/conversation/ReplyBox.vue @@ -132,7 +132,6 @@ import { mapGetters } from 'vuex'; import { mixin as clickaway } from 'vue-clickaway'; import alertMixin from 'shared/mixins/alertMixin'; -import EmojiInput from 'shared/components/emoji/EmojiInput'; import CannedResponse from './CannedResponse'; import ResizableTextArea from 'shared/components/ResizableTextArea'; import AttachmentPreview from 'dashboard/components/widgets/AttachmentsPreview'; @@ -163,6 +162,8 @@ import { trimContent, debounce } from '@chatwoot/utils'; import wootConstants from 'dashboard/constants'; import { isEditorHotKeyEnabled } from 'dashboard/mixins/uiSettings'; +const EmojiInput = () => import('shared/components/emoji/EmojiInput'); + export default { components: { EmojiInput, @@ -401,7 +402,7 @@ export default { return conversationDisplayType !== CONDENSED; }, emojiDialogClassOnExpanedLayout() { - return this.isOnExpandedLayout && !this.popoutReplyBox + return this.isOnExpandedLayout || this.popoutReplyBox ? 'emoji-dialog--expanded' : ''; }, @@ -984,13 +985,13 @@ export default { .emoji-dialog { top: unset; - bottom: 12px; + bottom: var(--space-normal); left: -320px; right: unset; &::before { - right: -16px; - bottom: 10px; + right: var(--space-minus-normal); + bottom: var(--space-small); transform: rotate(270deg); filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.08)); } @@ -1004,7 +1005,7 @@ export default { &::before { transform: rotate(0deg); left: var(--space-smaller); - bottom: var(--space-minus-slab); + bottom: var(--space-minus-small); } } .message-signature { diff --git a/app/javascript/dashboard/i18n/locale/en/emoji.json b/app/javascript/dashboard/i18n/locale/en/emoji.json new file mode 100644 index 000000000..fd81268fb --- /dev/null +++ b/app/javascript/dashboard/i18n/locale/en/emoji.json @@ -0,0 +1,6 @@ +{ + "EMOJI": { + "PLACEHOLDER": "Search emojis", + "NOT_FOUND": "No emoji match your search" + } +} diff --git a/app/javascript/dashboard/i18n/locale/en/index.js b/app/javascript/dashboard/i18n/locale/en/index.js index 93e560119..0c674eef2 100644 --- a/app/javascript/dashboard/i18n/locale/en/index.js +++ b/app/javascript/dashboard/i18n/locale/en/index.js @@ -10,7 +10,8 @@ import chatlist from './chatlist.json'; import contact from './contact.json'; import contactFilters from './contactFilters.json'; import conversation from './conversation.json'; -import csatMgmtMgmt from './csatMgmt.json'; +import csatMgmt from './csatMgmt.json'; +import emoji from './emoji.json'; import generalSettings from './generalSettings.json'; import helpCenter from './helpCenter.json'; import inboxMgmt from './inboxMgmt.json'; @@ -40,7 +41,8 @@ export default { ...contact, ...contactFilters, ...conversation, - ...csatMgmtMgmt, + ...csatMgmt, + ...emoji, ...generalSettings, ...helpCenter, ...inboxMgmt, diff --git a/app/javascript/shared/components/emoji/EmojiInput.vue b/app/javascript/shared/components/emoji/EmojiInput.vue index 84891b0e2..32d9c3df1 100644 --- a/app/javascript/shared/components/emoji/EmojiInput.vue +++ b/app/javascript/shared/components/emoji/EmojiInput.vue @@ -1,41 +1,92 @@ -