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: '', keyword: '',
activeGroup: 'custom', activeGroup: 'custom',
showingStickers: false, showingStickers: false,
zoomEmoji: false,
spamMode: false spamMode: false
} }
}, },
@ -60,6 +61,13 @@ const EmojiPicker = {
}, },
onStickerUploadFailed (e) { onStickerUploadFailed (e) {
this.$emit('sticker-upload-failed', 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: { watch: {

View file

@ -10,6 +10,20 @@
margin: 0 !important; margin: 0 !important;
z-index: 1; 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 { .spam-mode {
padding: 7px; padding: 7px;
line-height: normal; line-height: normal;
@ -135,6 +149,10 @@
cursor: pointer; cursor: pointer;
&:hover {
opacity: 0
}
img { img {
max-width: 100%; max-width: 100%;
max-height: 100%; max-height: 100%;

View file

@ -65,8 +65,12 @@
:title="emoji.displayText" :title="emoji.displayText"
class="emoji-item" class="emoji-item"
@click.stop.prevent="onEmoji(emoji)" @click.stop.prevent="onEmoji(emoji)"
@mouseenter="setZoomEmoji($event, emoji)"
@mouseleave="setZoomEmoji($event, false)"
> >
<span v-if="!emoji.imageUrl">{{ emoji.replacement }}</span> <span v-if="!emoji.imageUrl">
{{ emoji.replacement }}
</span>
<img <img
v-else v-else
:src="emoji.imageUrl" :src="emoji.imageUrl"
@ -95,6 +99,18 @@
/> />
</div> </div>
</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> </div>
</template> </template>