diff options
| -rw-r--r-- | src/components/emoji_picker/emoji_picker.js | 6 | ||||
| -rw-r--r-- | src/components/emoji_picker/emoji_picker.scss | 83 | ||||
| -rw-r--r-- | src/components/emoji_picker/emoji_picker.vue | 201 |
3 files changed, 144 insertions, 146 deletions
diff --git a/src/components/emoji_picker/emoji_picker.js b/src/components/emoji_picker/emoji_picker.js index 92d517b7..e25f98ff 100644 --- a/src/components/emoji_picker/emoji_picker.js +++ b/src/components/emoji_picker/emoji_picker.js @@ -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: { diff --git a/src/components/emoji_picker/emoji_picker.scss b/src/components/emoji_picker/emoji_picker.scss new file mode 100644 index 00000000..72889441 --- /dev/null +++ b/src/components/emoji_picker/emoji_picker.scss @@ -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%; + } + } + + } + +} diff --git a/src/components/emoji_picker/emoji_picker.vue b/src/components/emoji_picker/emoji_picker.vue index 70d08700..ec1702f3 100644 --- a/src/components/emoji_picker/emoji_picker.vue +++ b/src/components/emoji_picker/emoji_picker.vue @@ -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" - > - {{ value.text }} - </h6> - <span - v-for="emoji in value.emojis" - :key="key + emoji.displayText" - :title="emoji.displayText" - class="emoji-item" - @click="onEmoji(emoji)" + <div + v-for="(value, key) in emojis" + :key="key" + class="emoji-group" > - <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> |