forked from AkkomaGang/akkoma-fe
added emoji zoom for picker
This commit is contained in:
parent
94afc5ee19
commit
83f45167b6
3 changed files with 45 additions and 3 deletions
|
@ -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: {
|
||||||
|
|
|
@ -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%;
|
||||||
|
|
|
@ -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>
|
||||||
|
|
||||||
|
|
Loading…
Reference in a new issue