diff options
Diffstat (limited to 'src/components/emoji_picker/emoji_picker.vue')
| -rw-r--r-- | src/components/emoji_picker/emoji_picker.vue | 60 |
1 files changed, 40 insertions, 20 deletions
diff --git a/src/components/emoji_picker/emoji_picker.vue b/src/components/emoji_picker/emoji_picker.vue index ec1702f3..12b1569e 100644 --- a/src/components/emoji_picker/emoji_picker.vue +++ b/src/components/emoji_picker/emoji_picker.vue @@ -3,30 +3,44 @@ <div class="panel-heading"> <span class="emoji-tabs"> <span - v-for="(value, key) in emojis" - :key="key" + v-for="group in emojis" + :key="group.id" class="emoji-tabs-item" - :class="{'active': activeGroup === key}" - :title="value.text" - @click.prevent="highlight(key)" + :class="{ + active: activeGroupView === group.id, + disabled: group.emojis.length === 0 + }" + :title="group.text" + @click.prevent="highlight(group.id)" > - <i :class="value.icon" /> + <i :class="group.icon" /> </span> </span> - <span class="additional-tabs"> - <slot name="tabs" /> + <span + v-if="stickerPicker" + 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="panel-body emoji-dropdown-menu-content"> + <div class="panel-body"> <div - v-if="!showingAdditional" 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 @@ -35,22 +49,22 @@ @scroll="scrolledGroup" > <div - v-for="(value, key) in emojis" - :key="key" + v-for="group in emojisView" + :key="group.id" class="emoji-group" > <h6 - :ref="'group-' + key" + :ref="'group-' + group.id" class="emoji-group-title" > - {{ value.text }} + {{ group.text }} </h6> <span - v-for="emoji in value.emojis" - :key="key + emoji.displayText" + v-for="emoji in group.emojis" + :key="group.id + emoji.displayText" :title="emoji.displayText" class="emoji-item" - @click="onEmoji(emoji)" + @click.stop.prevent="onEmoji(emoji)" > <span v-if="!emoji.imageUrl">{{ emoji.replacement }}</span> <img @@ -61,11 +75,17 @@ </div> </div> </div> - <div v-if="showingAdditional" class="additional-tabs-content"> - <slot name="tab-content" /> + <div + v-if="showingStickers" + class="stickers-content" + > + <sticker-picker + @uploaded="onStickerUploaded" + @upload-failed="onStickerUploadFailed" + /> </div> </div> -</div> + </div> </template> <script src="./emoji_picker.js"></script> |