diff options
| author | Henry Jameson <me@hjkos.com> | 2019-09-08 16:56:54 +0300 |
|---|---|---|
| committer | Henry Jameson <me@hjkos.com> | 2019-09-08 16:56:54 +0300 |
| commit | 83f45167b61d5f10f00ea8e3e3e946c72e5fc33f (patch) | |
| tree | 9c4ce86a78025603555f725f3f86f110dd5fd49b /src/components/emoji_picker/emoji_picker.vue | |
| parent | 94afc5ee1963464fb0fd7c9a31266b37c924f3a3 (diff) | |
added emoji zoom for picker
Diffstat (limited to 'src/components/emoji_picker/emoji_picker.vue')
| -rw-r--r-- | src/components/emoji_picker/emoji_picker.vue | 22 |
1 files changed, 19 insertions, 3 deletions
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)" - > - <span v-if="!emoji.imageUrl">{{ emoji.replacement }}</span> + @mouseenter="setZoomEmoji($event, emoji)" + @mouseleave="setZoomEmoji($event, false)" + > + <span v-if="!emoji.imageUrl"> + {{ emoji.replacement }} + </span> <img v-else :src="emoji.imageUrl" - > + > </span> </div> </div> @@ -95,6 +99,18 @@ /> </div> </div> + <div ref="zoom-portal" class="zoom-portal"> + <span v-if="zoomEmoji"> + <span v-if="!zoomEmoji.imageUrl"> + {{ zoomEmoji.replacement }} + </span> + <img + v-else + :key="zoomEmoji.imageUrl" + :src="zoomEmoji.imageUrl" + > + </span> + </div> </div> </template> |