From 83f45167b61d5f10f00ea8e3e3e946c72e5fc33f Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Sun, 8 Sep 2019 16:56:54 +0300 Subject: [PATCH] added emoji zoom for picker --- src/components/emoji_picker/emoji_picker.js | 8 +++++++ src/components/emoji_picker/emoji_picker.scss | 18 +++++++++++++++ src/components/emoji_picker/emoji_picker.vue | 22 ++++++++++++++++--- 3 files changed, 45 insertions(+), 3 deletions(-) diff --git a/src/components/emoji_picker/emoji_picker.js b/src/components/emoji_picker/emoji_picker.js index bce5026e..03870a99 100644 --- a/src/components/emoji_picker/emoji_picker.js +++ b/src/components/emoji_picker/emoji_picker.js @@ -17,6 +17,7 @@ const EmojiPicker = { keyword: '', activeGroup: 'custom', showingStickers: false, + zoomEmoji: false, spamMode: false } }, @@ -60,6 +61,13 @@ const EmojiPicker = { }, onStickerUploadFailed (e) { this.$emit('sticker-upload-failed', e) + }, + setZoomEmoji (e, emoji) { + this.zoomEmoji = emoji + const { x, y } = e.target.getBoundingClientRect() + console.log(e.target) + this.$refs['zoom-portal'].style.left = (x - 32) + 'px' + this.$refs['zoom-portal'].style.top = (y - 32) + 'px' } }, watch: { diff --git a/src/components/emoji_picker/emoji_picker.scss b/src/components/emoji_picker/emoji_picker.scss index e3a83bdd..872af2de 100644 --- a/src/components/emoji_picker/emoji_picker.scss +++ b/src/components/emoji_picker/emoji_picker.scss @@ -10,6 +10,20 @@ margin: 0 !important; z-index: 1; + .zoom-portal { + position: fixed; + pointer-events: none; + width: 96px; + height: 96px; + font-size: 96px; + line-height: 96px; + z-index: 10; + img { + width: 100%; + height: 100%; + } + } + .spam-mode { padding: 7px; line-height: normal; @@ -135,6 +149,10 @@ cursor: pointer; + &:hover { + opacity: 0 + } + img { max-width: 100%; max-height: 100%; diff --git a/src/components/emoji_picker/emoji_picker.vue b/src/components/emoji_picker/emoji_picker.vue index 901520aa..5a8961d2 100644 --- a/src/components/emoji_picker/emoji_picker.vue +++ b/src/components/emoji_picker/emoji_picker.vue @@ -65,12 +65,16 @@ :title="emoji.displayText" class="emoji-item" @click.stop.prevent="onEmoji(emoji)" - > - {{ emoji.replacement }} + @mouseenter="setZoomEmoji($event, emoji)" + @mouseleave="setZoomEmoji($event, false)" + > + + {{ emoji.replacement }} + + > @@ -95,6 +99,18 @@ /> +
+ + + {{ zoomEmoji.replacement }} + + + +