From f9071dac254af0d99ca239c50931a00fbd11de6d Mon Sep 17 00:00:00 2001 From: jared Date: Fri, 29 Mar 2019 12:48:52 -0400 Subject: [PATCH] #101 - show emojis in groups, clean up --- .../emoji-selector/emoji-selector.js | 31 ++++--- .../emoji-selector/emoji-selector.vue | 87 +++++++++++++++---- 2 files changed, 89 insertions(+), 29 deletions(-) diff --git a/src/components/emoji-selector/emoji-selector.js b/src/components/emoji-selector/emoji-selector.js index 77107573..4771f4c6 100644 --- a/src/components/emoji-selector/emoji-selector.js +++ b/src/components/emoji-selector/emoji-selector.js @@ -1,24 +1,35 @@ +const filterByKeyword = (list, keyword = '') => { + return list.filter(x => x.shortcode.indexOf(keyword) !== -1) +} + const EmojiSelector = { data () { return { - open: false + open: false, + keyword: '' } }, - mounted () { - console.log(this.$store.state.instance.emoji) - console.log(this.$store.state.instance.customEmoji) - }, methods: { togglePanel () { this.open = !this.open } }, computed: { - standardEmoji () { - return this.$store.state.instance.emoji || [] - }, - customEmoji () { - return this.$store.state.instance.customEmoji || [] + emojis () { + const standardEmojis = this.$store.state.instance.emoji || [] + const customEmojis = this.$store.state.instance.customEmoji || [] + return { + standard: { + text: 'Standard', + icon: 'icon-star', + emojis: filterByKeyword(standardEmojis, this.keyword) + }, + custom: { + text: 'Custom', + icon: 'icon-picture', + emojis: filterByKeyword(customEmojis, this.keyword) + } + } } } } diff --git a/src/components/emoji-selector/emoji-selector.vue b/src/components/emoji-selector/emoji-selector.vue index ebacc0c4..576ca16e 100644 --- a/src/components/emoji-selector/emoji-selector.vue +++ b/src/components/emoji-selector/emoji-selector.vue @@ -1,15 +1,26 @@ @@ -33,21 +44,55 @@ right: 0; width: 300px; height: 300px; - background: white; - border: 1px solid $fallback--faint; display: flex; - align-items: center; - flex-wrap: wrap; - overflow: auto; - margin-bottom: 5px; + flex-direction: column; - img { - max-width: 100%; - max-height: 100%; + &-content { + flex: 1 1 1px; + display: flex; + flex-direction: column; } } } + &-tabs { + &-item { + padding: 0 5px; + + &:first-child, &.active { + border-bottom: 4px solid; + + i { + color: $fallback--lightText; + color: var(--lightText, $fallback--lightText); + } + } + } + } + + &-search { + padding: 5px; + } + + &-groups { + flex: 1 1 1px; + overflow: auto; + } + + &-group { + display: flex; + align-items: center; + flex-wrap: wrap; + width: 100%; + + &-title { + font-size: 12px; + width: 100%; + margin: 0; + padding: 5px; + } + } + &-item { width: 34px; height: 34px; @@ -56,9 +101,13 @@ font-size: 16px; align-items: center; justify-content: center; - color: black; padding: 5px; cursor: pointer; + + img { + max-width: 100%; + max-height: 100%; + } } }