From b881179dee53d72d0e63059a2e4714d824c22715 Mon Sep 17 00:00:00 2001 From: Simon Spannagel Date: Sun, 24 May 2020 19:10:11 +0200 Subject: [PATCH 1/6] Adding Emoji picker component to message form Signed-off-by: Simon Spannagel --- .../NewMessageForm/NewMessageForm.vue | 35 +++++++++++++++++++ 1 file changed, 35 insertions(+) diff --git a/src/components/NewMessageForm/NewMessageForm.vue b/src/components/NewMessageForm/NewMessageForm.vue index e72d837e8c8..40ff6a69f57 100644 --- a/src/components/NewMessageForm/NewMessageForm.vue +++ b/src/components/NewMessageForm/NewMessageForm.vue @@ -33,6 +33,18 @@ class="new-message">
+
+ + + +
@@ -336,6 +360,17 @@ export default { background-color: transparent; border: none; } + + // put a grey round background when popover is opened + // or hover-focused + &__icon:hover, + &__icon:focus, + &__icon:active { + opacity: $opacity_full; + // good looking on dark AND white bg + background-color: $icon-focus-bg; + } + } } From d2cd0f9f4c1ef8645531cadbc1d20c29dd110f3e Mon Sep 17 00:00:00 2001 From: Simon Spannagel Date: Mon, 27 Jul 2020 15:54:24 +0200 Subject: [PATCH 2/6] EmojiPicker: use material icon instead of emoji Co-authored-by: Joas Schilling <213943+nickvergessen@users.noreply.github.com> Signed-off-by: Simon Spannagel --- src/components/NewMessageForm/NewMessageForm.vue | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/components/NewMessageForm/NewMessageForm.vue b/src/components/NewMessageForm/NewMessageForm.vue index 40ff6a69f57..c642d8a2a81 100644 --- a/src/components/NewMessageForm/NewMessageForm.vue +++ b/src/components/NewMessageForm/NewMessageForm.vue @@ -41,7 +41,8 @@ class="new-message-form__icon new-message-form__button" :aria-label="t('spreed', 'Add emoji')" :aria-haspopup="true"> - 🙂 +
From 1315411f7c65ecf5dc28a23e7c01d34fd6b8d2b8 Mon Sep 17 00:00:00 2001 From: Simon Spannagel Date: Mon, 27 Jul 2020 15:57:51 +0200 Subject: [PATCH 3/6] EmojiPicker: swap order of buttons in NewMessageForm Signed-off-by: Simon Spannagel --- .../NewMessageForm/NewMessageForm.vue | 26 +++++++++---------- 1 file changed, 13 insertions(+), 13 deletions(-) diff --git a/src/components/NewMessageForm/NewMessageForm.vue b/src/components/NewMessageForm/NewMessageForm.vue index c642d8a2a81..b5f621c82e2 100644 --- a/src/components/NewMessageForm/NewMessageForm.vue +++ b/src/components/NewMessageForm/NewMessageForm.vue @@ -33,19 +33,6 @@ class="new-message"> -
- - - -
+
+ + + +
Date: Mon, 27 Jul 2020 16:58:35 +0200 Subject: [PATCH 4/6] Add the component Signed-off-by: Joas Schilling --- src/components/NewMessageForm/NewMessageForm.vue | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/components/NewMessageForm/NewMessageForm.vue b/src/components/NewMessageForm/NewMessageForm.vue index b5f621c82e2..f205aee8bfa 100644 --- a/src/components/NewMessageForm/NewMessageForm.vue +++ b/src/components/NewMessageForm/NewMessageForm.vue @@ -103,6 +103,7 @@ import Hex from 'crypto-js/enc-hex' import { shareFile } from '../../services/filesSharingServices' import { processFiles } from '../../utils/fileUpload' import { CONVERSATION } from '../../constants' +import EmoticonOutline from 'vue-material-design-icons/EmoticonOutline' const picker = getFilePickerBuilder(t('spreed', 'File to share')) .setMultiSelect(false) @@ -119,6 +120,7 @@ export default { Actions, ActionButton, EmojiPicker, + EmoticonOutline, }, data: function() { return { From 76cbd80da65bafdaaa9af2f15f61f5819f5f4e37 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Daniel=20Calvi=C3=B1o=20S=C3=A1nchez?= Date: Wed, 29 Jul 2020 18:09:20 +0200 Subject: [PATCH 5/6] Fix adding emojis to rich texts in Firefox MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Daniel Calviño Sánchez --- src/components/NewMessageForm/NewMessageForm.vue | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) diff --git a/src/components/NewMessageForm/NewMessageForm.vue b/src/components/NewMessageForm/NewMessageForm.vue index f205aee8bfa..b7dc49b4b11 100644 --- a/src/components/NewMessageForm/NewMessageForm.vue +++ b/src/components/NewMessageForm/NewMessageForm.vue @@ -324,7 +324,15 @@ export default { * @param {Emoji} emoji Emoji object */ addEmoji(emoji) { - this.text += emoji + // Browsers add a "
" element as soon as some rich text is + // written in a content editable div (for example, if a new line is + // added the div content will be "

"), so the emoji has to be + // added before the last "
" (if any). + if (this.text.endsWith('
')) { + this.text = this.text.substr(0, this.text.lastIndexOf('
')) + emoji + '
' + } else { + this.text += emoji + } }, }, From 2f21044127450d4054c47cac754269da00664f94 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Daniel=20Calvi=C3=B1o=20S=C3=A1nchez?= Date: Wed, 29 Jul 2020 18:10:17 +0200 Subject: [PATCH 6/6] Insert emojis at the current caret position MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Instead of always inserting the emojis at the end of the text now they are inserted at the current caret position, also replacing any selected text. If the input is not focused then the emoji will be inserted at the end like before. Signed-off-by: Daniel Calviño Sánchez --- .../NewMessageForm/NewMessageForm.vue | 48 +++++++++++++++---- 1 file changed, 40 insertions(+), 8 deletions(-) diff --git a/src/components/NewMessageForm/NewMessageForm.vue b/src/components/NewMessageForm/NewMessageForm.vue index b7dc49b4b11..eb7e7b8f0f5 100644 --- a/src/components/NewMessageForm/NewMessageForm.vue +++ b/src/components/NewMessageForm/NewMessageForm.vue @@ -74,6 +74,7 @@ :is-new-message-form-quote="true" v-bind="messageToBeReplied" /> " element as soon as some rich text is - // written in a content editable div (for example, if a new line is - // added the div content will be "

"), so the emoji has to be - // added before the last "
" (if any). - if (this.text.endsWith('
')) { - this.text = this.text.substr(0, this.text.lastIndexOf('
')) + emoji + '
' - } else { - this.text += emoji + const selection = document.getSelection() + + const contentEditable = this.$refs.advancedInput.$refs.contentEditable + + // There is no select, or current selection does not start in the + // content editable element, so just append the emoji at the end. + if (!contentEditable.isSameNode(selection.anchorNode) && !contentEditable.contains(selection.anchorNode)) { + // Browsers add a "
" element as soon as some rich text is + // written in a content editable div (for example, if a new line + // is added the div content will be "

"), so the emoji + // has to be added before the last "
" (if any). + if (this.text.endsWith('
')) { + this.text = this.text.substr(0, this.text.lastIndexOf('
')) + emoji + '
' + } else { + this.text += emoji + } + + return } + + // Although due to legacy reasons the API allows several ranges the + // specification requires the selection to always have a single + // range. + // https://developer.mozilla.org/en-US/docs/Web/API/Selection#Multiple_ranges_in_a_selection + const range = selection.getRangeAt(0) + + // Deleting the contents also collapses the range to the start. + range.deleteContents() + + const emojiTextNode = document.createTextNode(emoji) + range.insertNode(emojiTextNode) + + this.text = contentEditable.innerHTML + + range.setStartAfter(emojiTextNode) }, },