added emoji zoom for picker

This commit is contained in:
Henry Jameson 2019-09-08 16:56:54 +03:00
parent 94afc5ee19
commit 83f45167b6
3 changed files with 45 additions and 3 deletions

View file

@ -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: {

View file

@ -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%;

View file

@ -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>