From 2c4e80aab3946e6a16b0768d45723f4ff8e47f72 Mon Sep 17 00:00:00 2001 From: jared Date: Fri, 29 Mar 2019 11:49:32 -0400 Subject: [PATCH 01/54] #101 - add emoji selector basic mockup --- src/components/emoji-input/emoji-input.js | 5 ++ src/components/emoji-input/emoji-input.vue | 1 + .../emoji-selector/emoji-selector.js | 26 ++++++++ .../emoji-selector/emoji-selector.vue | 65 +++++++++++++++++++ 4 files changed, 97 insertions(+) create mode 100644 src/components/emoji-selector/emoji-selector.js create mode 100644 src/components/emoji-selector/emoji-selector.vue diff --git a/src/components/emoji-input/emoji-input.js b/src/components/emoji-input/emoji-input.js index a5bb6eaf..48e89409 100644 --- a/src/components/emoji-input/emoji-input.js +++ b/src/components/emoji-input/emoji-input.js @@ -1,4 +1,6 @@ import Completion from '../../services/completion/completion.js' +import EmojiSelector from '../emoji-selector/emoji-selector.vue' + import { take, filter, map } from 'lodash' const EmojiInput = { @@ -14,6 +16,9 @@ const EmojiInput = { caret: 0 } }, + components: { + EmojiSelector + }, computed: { suggestions () { const firstchar = this.textAtCaret.charAt(0) diff --git a/src/components/emoji-input/emoji-input.vue b/src/components/emoji-input/emoji-input.vue index 338b77cd..a1ddd7f9 100644 --- a/src/components/emoji-input/emoji-input.vue +++ b/src/components/emoji-input/emoji-input.vue @@ -1,5 +1,6 @@ + + + + From f9071dac254af0d99ca239c50931a00fbd11de6d Mon Sep 17 00:00:00 2001 From: jared Date: Fri, 29 Mar 2019 12:48:52 -0400 Subject: [PATCH 02/54] #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%; + } } } From 3172b4e7c18d07a36477a77fcebe6b521cfa15d0 Mon Sep 17 00:00:00 2001 From: jared Date: Fri, 29 Mar 2019 15:56:50 -0400 Subject: [PATCH 03/54] #101 - insert emoji from emoji selector --- src/components/emoji-input/emoji-input.js | 5 +++++ src/components/emoji-input/emoji-input.vue | 6 +++++- src/components/emoji-selector/emoji-selector.js | 5 +++++ .../emoji-selector/emoji-selector.vue | 17 +++++++++++++++-- 4 files changed, 30 insertions(+), 3 deletions(-) diff --git a/src/components/emoji-input/emoji-input.js b/src/components/emoji-input/emoji-input.js index 48e89409..8f7598ca 100644 --- a/src/components/emoji-input/emoji-input.js +++ b/src/components/emoji-input/emoji-input.js @@ -105,6 +105,11 @@ const EmojiInput = { }, setCaret ({target: {selectionStart}}) { this.caret = selectionStart + }, + onEmoji (emoji) { + const newValue = this.value.substr(0, this.caret) + emoji + this.value.substr(this.caret) + this.$refs.input.focus() + this.$emit('input', newValue) } } } diff --git a/src/components/emoji-input/emoji-input.vue b/src/components/emoji-input/emoji-input.vue index a1ddd7f9..151861de 100644 --- a/src/components/emoji-input/emoji-input.vue +++ b/src/components/emoji-input/emoji-input.vue @@ -1,6 +1,5 @@