initial attempts at making emoji-picker somewhat extensible
This commit is contained in:
parent
036882d27c
commit
579b5c9e77
|
@ -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: {
|
||||
|
|
|
@ -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,6 +1,7 @@
|
|||
<template>
|
||||
<div class="emoji-dropdown-menu panel panel-default">
|
||||
<div class="panel-heading emoji-tabs">
|
||||
<div class="emoji-picker panel panel-default">
|
||||
<div class="panel-heading">
|
||||
<span class="emoji-tabs">
|
||||
<span
|
||||
v-for="(value, key) in emojis"
|
||||
:key="key"
|
||||
|
@ -11,8 +12,16 @@
|
|||
>
|
||||
<i :class="value.icon" />
|
||||
</span>
|
||||
</span>
|
||||
<span class="additional-tabs">
|
||||
<slot name="tabs" />
|
||||
</span>
|
||||
</div>
|
||||
<div class="panel-body emoji-dropdown-menu-content">
|
||||
<div
|
||||
v-if="!showingAdditional"
|
||||
class="emoji-content"
|
||||
>
|
||||
<div class="emoji-search">
|
||||
<input
|
||||
v-model="keyword"
|
||||
|
@ -52,110 +61,12 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="showingAdditional" class="additional-tabs-content">
|
||||
<slot name="tab-content" />
|
||||
</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 New Issue