forked from AkkomaGang/akkoma-fe
initial attempts at making emoji-picker somewhat extensible
This commit is contained in:
Henry Jameson
parent
036882d27c
commit
579b5c9e77
3 changed files with 144 additions and 146 deletions
|
|
@ -6,7 +6,8 @@ const EmojiPicker = {
|
|||
data () {
|
||||
return {
|
||||
keyword: '',
|
||||
activeGroup: 'standard'
|
||||
activeGroup: 'standard',
|
||||
showingAdditional: false
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
|
@ -28,6 +29,9 @@ const EmojiPicker = {
|
|||
this.activeGroup = key
|
||||
}
|
||||
})
|
||||
},
|
||||
toggleAdditional (value) {
|
||||
this.showingAdditional = value
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
|
|
|
|||
83
src/components/emoji_picker/emoji_picker.scss
Normal file
83
src/components/emoji_picker/emoji_picker.scss
Normal file
|
|
@ -0,0 +1,83 @@
|
|||
@import '../../_variables.scss';
|
||||
|
||||
.emoji-picker {
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
right: 0;
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin: 0 !important;
|
||||
|
||||
.emoji {
|
||||
&-tabs {
|
||||
&-item {
|
||||
padding: 0 5px;
|
||||
|
||||
&.active {
|
||||
border-bottom: 4px solid;
|
||||
|
||||
i {
|
||||
color: $fallback--lightText;
|
||||
color: var(--lightText, $fallback--lightText);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
&-search {
|
||||
padding: 5px;
|
||||
flex: 0 0 1px;
|
||||
|
||||
input {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
&-groups {
|
||||
flex: 1 1 1px;
|
||||
position: relative;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
&-group {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
padding: 5px;
|
||||
justify-content: space-between;
|
||||
|
||||
&-title {
|
||||
font-size: 12px;
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&-item {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
font-size: 32px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin: 2px;
|
||||
|
||||
cursor: pointer;
|
||||
|
||||
img {
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -1,161 +1,72 @@
|
|||
<template>
|
||||
<div class="emoji-dropdown-menu panel panel-default">
|
||||
<div class="panel-heading emoji-tabs">
|
||||
<span
|
||||
v-for="(value, key) in emojis"
|
||||
:key="key"
|
||||
class="emoji-tabs-item"
|
||||
:class="{'active': activeGroup === key}"
|
||||
:title="value.text"
|
||||
@click.prevent="highlight(key)"
|
||||
>
|
||||
<i :class="value.icon" />
|
||||
<div class="emoji-picker panel panel-default">
|
||||
<div class="panel-heading">
|
||||
<span class="emoji-tabs">
|
||||
<span
|
||||
v-for="(value, key) in emojis"
|
||||
:key="key"
|
||||
class="emoji-tabs-item"
|
||||
:class="{'active': activeGroup === key}"
|
||||
:title="value.text"
|
||||
@click.prevent="highlight(key)"
|
||||
>
|
||||
<i :class="value.icon" />
|
||||
</span>
|
||||
</span>
|
||||
<span class="additional-tabs">
|
||||
<slot name="tabs" />
|
||||
</span>
|
||||
</div>
|
||||
<div class="panel-body emoji-dropdown-menu-content">
|
||||
<div class="emoji-search">
|
||||
<input
|
||||
v-model="keyword"
|
||||
type="text"
|
||||
class="form-control"
|
||||
>
|
||||
</div>
|
||||
<div
|
||||
ref="emoji-groups"
|
||||
class="emoji-groups"
|
||||
@scroll="scrolledGroup"
|
||||
v-if="!showingAdditional"
|
||||
class="emoji-content"
|
||||
>
|
||||
<div class="emoji-search">
|
||||
<input
|
||||
v-model="keyword"
|
||||
type="text"
|
||||
class="form-control"
|
||||
>
|
||||
</div>
|
||||
<div
|
||||
v-for="(value, key) in emojis"
|
||||
:key="key"
|
||||
class="emoji-group"
|
||||
ref="emoji-groups"
|
||||
class="emoji-groups"
|
||||
@scroll="scrolledGroup"
|
||||
>
|
||||
<h6
|
||||
:ref="'group-' + key"
|
||||
class="emoji-group-title"
|
||||
<div
|
||||
v-for="(value, key) in emojis"
|
||||
:key="key"
|
||||
class="emoji-group"
|
||||
>
|
||||
{{ value.text }}
|
||||
</h6>
|
||||
<span
|
||||
v-for="emoji in value.emojis"
|
||||
:key="key + emoji.displayText"
|
||||
:title="emoji.displayText"
|
||||
class="emoji-item"
|
||||
@click="onEmoji(emoji)"
|
||||
>
|
||||
<span v-if="!emoji.imageUrl">{{ emoji.replacement }}</span>
|
||||
<img
|
||||
v-else
|
||||
:src="emoji.imageUrl"
|
||||
<h6
|
||||
:ref="'group-' + key"
|
||||
class="emoji-group-title"
|
||||
>
|
||||
</span>
|
||||
{{ value.text }}
|
||||
</h6>
|
||||
<span
|
||||
v-for="emoji in value.emojis"
|
||||
:key="key + emoji.displayText"
|
||||
:title="emoji.displayText"
|
||||
class="emoji-item"
|
||||
@click="onEmoji(emoji)"
|
||||
>
|
||||
<span v-if="!emoji.imageUrl">{{ emoji.replacement }}</span>
|
||||
<img
|
||||
v-else
|
||||
:src="emoji.imageUrl"
|
||||
>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="showingAdditional" class="additional-tabs-content">
|
||||
<slot name="tab-content" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script src="./emoji_picker.js"></script>
|
||||
|
||||
<style lang="scss">
|
||||
@import '../../_variables.scss';
|
||||
|
||||
.emoji {
|
||||
&-dropdown {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 28px;
|
||||
z-index: 1;
|
||||
|
||||
&-toggle {
|
||||
cursor: pointer;
|
||||
position: absolute;
|
||||
top: -23px;
|
||||
right: 2px;
|
||||
line-height: 1;
|
||||
|
||||
i {
|
||||
font-size: 18px;
|
||||
}
|
||||
}
|
||||
|
||||
&-menu {
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
right: 0;
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin: 0 !important;
|
||||
|
||||
&-content {
|
||||
flex: 1 1 1px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-tabs {
|
||||
&-item {
|
||||
padding: 0 5px;
|
||||
|
||||
&.active {
|
||||
border-bottom: 4px solid;
|
||||
|
||||
i {
|
||||
color: $fallback--lightText;
|
||||
color: var(--lightText, $fallback--lightText);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-search {
|
||||
padding: 5px;
|
||||
|
||||
input {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
&-groups {
|
||||
flex: 1 1 1px;
|
||||
overflow: auto;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
&-group {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
width: 100%;
|
||||
|
||||
&-title {
|
||||
font-size: 12px;
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
padding: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
&-item {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
font-size: 32px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin: 2px;
|
||||
cursor: pointer;
|
||||
|
||||
img {
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</style>
|
||||
<style lang="scss" src="./emoji_picker.scss"></style>
|
||||
|
|
|
|||
Loading…
Reference in a new issue