yanchan09
9e04e4fd80
All checks were successful
ci/woodpecker/push/woodpecker Pipeline was successful
A simple virtual scroller is now used for the emoji grid. This avoids loading all emoji images at once, saving network bandwidth and reducing load on the server, while also putting less work on the browser's DOM and layout engine. Co-authored-by: yan <yan@omg.lol> Reviewed-on: #275 Co-authored-by: yanchan09 <yan@omg.lol> Co-committed-by: yanchan09 <yan@omg.lol>
84 lines
2.1 KiB
Vue
84 lines
2.1 KiB
Vue
<template>
|
|
<div class="emoji-picker panel panel-default panel-body">
|
|
<div class="heading">
|
|
<span
|
|
ref="emoji-tabs"
|
|
class="emoji-tabs"
|
|
@wheel="onWheel"
|
|
>
|
|
<span
|
|
v-for="group in emojis"
|
|
:key="group.id"
|
|
class="emoji-tabs-item"
|
|
:class="{
|
|
active: activeGroupView === group.id,
|
|
disabled: group.emojis.length === 0
|
|
}"
|
|
:title="group.text"
|
|
@click.prevent="highlight(group.id)"
|
|
>
|
|
<span v-if="!group.first.imageUrl">{{ group.first.replacement }}</span>
|
|
<img
|
|
v-else
|
|
:src="group.first.imageUrl"
|
|
>
|
|
</span>
|
|
<span
|
|
v-if="stickerPickerEnabled"
|
|
class="stickers-tab-icon emoji-tabs-item"
|
|
:class="{active: showingStickers}"
|
|
:title="$t('emoji.stickers')"
|
|
@click.prevent="toggleStickers"
|
|
>
|
|
<FAIcon
|
|
icon="sticky-note"
|
|
fixed-width
|
|
/>
|
|
</span>
|
|
</span>
|
|
</div>
|
|
<div class="content">
|
|
<div
|
|
class="emoji-content"
|
|
:class="{hidden: showingStickers}"
|
|
>
|
|
<div class="emoji-search">
|
|
<input
|
|
v-model="keyword"
|
|
type="text"
|
|
class="form-control"
|
|
:placeholder="$t('emoji.search_emoji')"
|
|
@input="$event.target.composing = false"
|
|
>
|
|
</div>
|
|
<EmojiGrid
|
|
ref="emojiGrid"
|
|
:groups="emojisView"
|
|
@emoji="onEmoji"
|
|
@active-group="onActiveGroup"
|
|
/>
|
|
<div
|
|
v-if="showKeepOpen"
|
|
class="keep-open"
|
|
>
|
|
<Checkbox v-model="keepOpen">
|
|
{{ $t('emoji.keep_open') }}
|
|
</Checkbox>
|
|
</div>
|
|
</div>
|
|
<div
|
|
v-if="showingStickers"
|
|
class="stickers-content"
|
|
>
|
|
<sticker-picker
|
|
@uploaded="onStickerUploaded"
|
|
@upload-failed="onStickerUploadFailed"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script src="./emoji_picker.js"></script>
|
|
<style lang="scss" src="./emoji_picker.scss"></style>
|