mirror of
https://akkoma.dev/AkkomaGang/akkoma-fe
synced 2025-05-01 03:19:29 +08:00
9e04e4fd80
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: https://akkoma.dev/AkkomaGang/akkoma-fe/pulls/275 Co-authored-by: yanchan09 <yan@omg.lol> Co-committed-by: yanchan09 <yan@omg.lol>
83 lines
2.1 KiB
Vue
83 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>
|