0dcb696e26
* upstream/develop: (95 commits) Lightbox/modal multi image improvements - #381 '/api/pleroma/profile/mfa' -> '/api/pleroma/accounts/mfa' Add ability to change user's email translations-de-batch-1 eu-translate update profile-banner rounding css, fixes #690 fix indentation remove needless ref show preview popover when hover numbered replies refactor conditions do not make too many nested div add fetchStatus action refactor status loading logic split status preview popover into a separate component uninstall mobile-detect library listen both events minor css fix restrict distance at top side only set different trigger event in desktop and mobile by default fix eslint warnings ...
113 lines
3 KiB
Vue
113 lines
3 KiB
Vue
<template>
|
|
<div class="emoji-picker panel panel-default panel-body">
|
|
<div class="heading">
|
|
<span class="emoji-tabs">
|
|
<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)"
|
|
>
|
|
<i :class="group.icon" />
|
|
</span>
|
|
</span>
|
|
<span
|
|
v-if="stickerPickerEnabled"
|
|
class="additional-tabs"
|
|
>
|
|
<span
|
|
class="stickers-tab-icon additional-tabs-item"
|
|
:class="{active: showingStickers}"
|
|
:title="$t('emoji.stickers')"
|
|
@click.prevent="toggleStickers"
|
|
>
|
|
<i class="icon-star" />
|
|
</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')"
|
|
>
|
|
</div>
|
|
<div
|
|
ref="emoji-groups"
|
|
class="emoji-groups"
|
|
:class="groupsScrolledClass"
|
|
@scroll="scrolledGroup"
|
|
>
|
|
<div
|
|
v-for="group in emojisView"
|
|
:key="group.id"
|
|
class="emoji-group"
|
|
>
|
|
<h6
|
|
:ref="'group-' + group.id"
|
|
class="emoji-group-title"
|
|
>
|
|
{{ group.text }}
|
|
</h6>
|
|
<span
|
|
v-for="emoji in group.emojis"
|
|
:key="group.id + emoji.displayText"
|
|
:title="emoji.displayText"
|
|
class="emoji-item"
|
|
@click.stop.prevent="onEmoji(emoji)"
|
|
>
|
|
<span v-if="!emoji.imageUrl">{{ emoji.replacement }}</span>
|
|
<img
|
|
v-else
|
|
:src="emoji.imageUrl"
|
|
>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<div class="keep-open">
|
|
<Checkbox v-model="keepOpen">
|
|
{{ $t('emoji.keep_open') }}
|
|
</Checkbox>
|
|
</div>
|
|
<div
|
|
v-if="askForSanity"
|
|
class="too-many-emoji"
|
|
>
|
|
<div class="alert warning hint">
|
|
{{ $t('emoji.load_all_hint', { saneAmount } ) }}
|
|
</div>
|
|
<button
|
|
class="btn btn-default"
|
|
@click.prevent="loadEmojiInsane"
|
|
>
|
|
{{ $t('emoji.load_all', { emojiAmount: filteredEmoji.length } ) }}
|
|
</button>
|
|
</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>
|