From b2e482774102a4e92b79c21cc57353e6677adf13 Mon Sep 17 00:00:00 2001 From: Tusooa Zhu Date: Sun, 16 Jan 2022 01:01:19 -0500 Subject: Add badges to status interacting buttons Now, the following badges will be added: 0: (+) sign to reply, favourite, repeat, react and extra buttons 1: (-) sign to unfavourite and unrepeat 2: (x) sign to close reply form, close react popover, and close extra buttons popover 3: Check mark to favourited and repeated statuses https://git.pleroma.social/pleroma/pleroma-fe/-/issues/1092 --- src/components/react_button/react_button.js | 17 +++++++++++++++-- 1 file changed, 15 insertions(+), 2 deletions(-) (limited to 'src/components/react_button/react_button.js') diff --git a/src/components/react_button/react_button.js b/src/components/react_button/react_button.js index 37d6e7d0..5e052e1e 100644 --- a/src/components/react_button/react_button.js +++ b/src/components/react_button/react_button.js @@ -1,15 +1,21 @@ import Popover from '../popover/popover.vue' import { library } from '@fortawesome/fontawesome-svg-core' +import { faPlus, faTimes } from '@fortawesome/free-solid-svg-icons' import { faSmileBeam } from '@fortawesome/free-regular-svg-icons' import { trim } from 'lodash' -library.add(faSmileBeam) +library.add( + faPlus, + faTimes, + faSmileBeam +) const ReactButton = { props: ['status'], data () { return { - filterWord: '' + filterWord: '', + expanded: false } }, components: { @@ -25,6 +31,13 @@ const ReactButton = { } close() }, + onShow () { + this.expanded = true + this.focusInput() + }, + onClose () { + this.expanded = false + }, focusInput () { this.$nextTick(() => { const input = this.$el.querySelector('input') -- cgit v1.2.3-70-g09d2 From 8f4f02683f89129cf6f28f2059122cff7db02242 Mon Sep 17 00:00:00 2001 From: Tusooa Zhu Date: Sat, 8 Jan 2022 16:55:00 -0500 Subject: Make emoji picker use grouped unicode emojis --- src/components/emoji_input/suggestor.js | 2 +- src/components/emoji_picker/emoji_picker.js | 16 +++++---- .../post_status_form/post_status_form.js | 6 ++-- src/components/react_button/react_button.js | 4 +-- src/components/settings_modal/tabs/profile_tab.js | 4 +-- src/modules/instance.js | 38 ++++++++++++++++++---- 6 files changed, 48 insertions(+), 22 deletions(-) (limited to 'src/components/react_button/react_button.js') diff --git a/src/components/emoji_input/suggestor.js b/src/components/emoji_input/suggestor.js index 0ddb4d68..1765f843 100644 --- a/src/components/emoji_input/suggestor.js +++ b/src/components/emoji_input/suggestor.js @@ -2,7 +2,7 @@ * suggest - generates a suggestor function to be used by emoji-input * data: object providing source information for specific types of suggestions: * data.emoji - optional, an array of all emoji available i.e. - * (state.instance.emoji + state.instance.customEmoji) + * (getters.standardEmojiList + state.instance.customEmoji) * data.users - optional, an array of all known users * updateUsersList - optional, a function to search and append to users * diff --git a/src/components/emoji_picker/emoji_picker.js b/src/components/emoji_picker/emoji_picker.js index 26c767ac..4990afb3 100644 --- a/src/components/emoji_picker/emoji_picker.js +++ b/src/components/emoji_picker/emoji_picker.js @@ -214,16 +214,18 @@ const EmojiPicker = { defaultGroup () { return Object.keys(this.allCustomGroups)[0] }, + unicodeEmojiGroups () { + return this.$store.getters.standardEmojiGroupList.map(group => ({ + id: `standard-${group.id}`, + text: this.$t(`emoji.unicode_groups.${group.id}`), + icon: 'box-open', + emojis: group.emojis + })) + }, allEmojiGroups () { - const standardEmojis = this.$store.state.instance.emoji || [] return Object.entries(this.allCustomGroups) .map(([_, v]) => v) - .concat({ - id: 'standard', - text: this.$t('emoji.unicode'), - icon: 'box-open', - emojis: filterByKeyword(standardEmojis, this.keyword) - }) + .concat(this.unicodeEmojiGroups) }, filteredEmojiGroups () { return this.allEmojiGroups diff --git a/src/components/post_status_form/post_status_form.js b/src/components/post_status_form/post_status_form.js index 77f73d04..5c536b74 100644 --- a/src/components/post_status_form/post_status_form.js +++ b/src/components/post_status_form/post_status_form.js @@ -189,7 +189,7 @@ const PostStatusForm = { emojiUserSuggestor () { return suggestor({ emoji: [ - ...this.$store.state.instance.emoji, + ...this.$store.getters.standardEmojiList, ...this.$store.state.instance.customEmoji ], store: this.$store @@ -198,13 +198,13 @@ const PostStatusForm = { emojiSuggestor () { return suggestor({ emoji: [ - ...this.$store.state.instance.emoji, + ...this.$store.getters.standardEmojiList, ...this.$store.state.instance.customEmoji ] }) }, emoji () { - return this.$store.state.instance.emoji || [] + return this.$store.getters.standardEmojiList || [] }, customEmoji () { return this.$store.state.instance.customEmoji || [] diff --git a/src/components/react_button/react_button.js b/src/components/react_button/react_button.js index 5e052e1e..e65bfd93 100644 --- a/src/components/react_button/react_button.js +++ b/src/components/react_button/react_button.js @@ -59,7 +59,7 @@ const ReactButton = { if (this.filterWord !== '') { const filterWordLowercase = trim(this.filterWord.toLowerCase()) const orderedEmojiList = [] - for (const emoji of this.$store.state.instance.emoji) { + for (const emoji of this.$store.getters.standardEmojiList) { if (emoji.replacement === this.filterWord) return [emoji] const indexOfFilterWord = emoji.displayText.toLowerCase().indexOf(filterWordLowercase) @@ -72,7 +72,7 @@ const ReactButton = { } return orderedEmojiList.flat() } - return this.$store.state.instance.emoji || [] + return this.$store.getters.standardEmojiList || [] }, mergedConfig () { return this.$store.getters.mergedConfig diff --git a/src/components/settings_modal/tabs/profile_tab.js b/src/components/settings_modal/tabs/profile_tab.js index 376248ef..b86faef0 100644 --- a/src/components/settings_modal/tabs/profile_tab.js +++ b/src/components/settings_modal/tabs/profile_tab.js @@ -64,7 +64,7 @@ const ProfileTab = { emojiUserSuggestor () { return suggestor({ emoji: [ - ...this.$store.state.instance.emoji, + ...this.$store.getters.standardEmojiList, ...this.$store.state.instance.customEmoji ], store: this.$store @@ -73,7 +73,7 @@ const ProfileTab = { emojiSuggestor () { return suggestor({ emoji: [ - ...this.$store.state.instance.emoji, + ...this.$store.getters.standardEmojiList, ...this.$store.state.instance.customEmoji ] }) diff --git a/src/modules/instance.js b/src/modules/instance.js index a7a91d99..2fcb059c 100644 --- a/src/modules/instance.js +++ b/src/modules/instance.js @@ -3,6 +3,18 @@ import { CURRENT_VERSION } from '../services/theme_data/theme_data.service.js' import apiService from '../services/api/api.service.js' import { instanceDefaultProperties } from './config.js' +const SORTED_EMOJI_GROUP_IDS = [ + 'smileys-and-emotion', + 'people-and-body', + 'animals-and-nature', + 'food-and-drink', + 'travel-and-places', + 'activities', + 'objects', + 'symbols', + 'flags' +] + const defaultState = { // Stuff from apiConfig name: 'Pleroma FE', @@ -64,7 +76,7 @@ const defaultState = { // Nasty stuff customEmoji: [], customEmojiFetched: false, - emoji: [], + emoji: {}, emojiFetched: false, pleromaBackend: true, postFormats: [], @@ -139,6 +151,17 @@ const instance = { return res }, {}) }, + standardEmojiList (state) { + return SORTED_EMOJI_GROUP_IDS + .map(groupId => state.emoji[groupId] || []) + .reduce((a, b) => a.concat(b), []) + }, + standardEmojiGroupList (state) { + return SORTED_EMOJI_GROUP_IDS.map(groupId => ({ + id: groupId, + emojis: state.emoji[groupId] || [] + })) + }, instanceDomain (state) { return new URL(state.server).hostname } @@ -165,13 +188,14 @@ const instance = { const res = await window.fetch('/static/emoji.json') if (res.ok) { const values = await res.json() - const emoji = Object.keys(values).map((key) => { - return { - displayText: key, + const emoji = Object.keys(values).reduce((res, groupId) => { + res[groupId] = values[groupId].map(e => ({ + displayText: e.name, imageUrl: false, - replacement: values[key] - } - }).sort((a, b) => a.name > b.name ? 1 : -1) + replacement: e.emoji + })) + return res + }, {}) commit('setInstanceOption', { name: 'emoji', value: emoji }) } else { throw (res) -- cgit v1.2.3-70-g09d2 From 87a78aae57f4553fbdf8d35f22d80894579f83f2 Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Mon, 17 Oct 2022 22:45:38 +0300 Subject: add new search to reaction picker and make hardcoded set... better --- src/components/react_button/react_button.js | 71 ++++++++++++++++++++++------ src/components/react_button/react_button.vue | 4 +- 2 files changed, 59 insertions(+), 16 deletions(-) (limited to 'src/components/react_button/react_button.js') diff --git a/src/components/react_button/react_button.js b/src/components/react_button/react_button.js index e65bfd93..2a0dac85 100644 --- a/src/components/react_button/react_button.js +++ b/src/components/react_button/react_button.js @@ -1,4 +1,5 @@ import Popover from '../popover/popover.vue' +import { ensureFinalFallback } from '../../i18n/languages.js' import { library } from '@fortawesome/fontawesome-svg-core' import { faPlus, faTimes } from '@fortawesome/free-solid-svg-icons' import { faSmileBeam } from '@fortawesome/free-regular-svg-icons' @@ -43,31 +44,73 @@ const ReactButton = { const input = this.$el.querySelector('input') if (input) input.focus() }) + }, + // Vaguely adjusted copypaste from emoji_input and emoji_picker! + maybeLocalizedEmojiNamesAndKeywords (emoji) { + const names = [emoji.displayText] + const keywords = [] + + if (emoji.displayTextI18n) { + names.push(this.$t(emoji.displayTextI18n.key, emoji.displayTextI18n.args)) + } + + if (emoji.annotations) { + this.languages.forEach(lang => { + names.push(emoji.annotations[lang]?.name) + + keywords.push(...(emoji.annotations[lang]?.keywords || [])) + }) + } + + return { + names: names.filter(k => k), + keywords: keywords.filter(k => k) + } + }, + maybeLocalizedEmojiName (emoji) { + if (!emoji.annotations) { + return emoji.displayText + } + + if (emoji.displayTextI18n) { + return this.$t(emoji.displayTextI18n.key, emoji.displayTextI18n.args) + } + + for (const lang of this.languages) { + if (emoji.annotations[lang]?.name) { + return emoji.annotations[lang].name + } + } + + return emoji.displayText } }, computed: { commonEmojis () { - return [ - { displayText: 'thumbsup', replacement: '👍' }, - { displayText: 'angry', replacement: '😠' }, - { displayText: 'eyes', replacement: '👀' }, - { displayText: 'joy', replacement: '😂' }, - { displayText: 'fire', replacement: '🔥' } - ] + const hardcodedSet = new Set(['👍', '😠', '👀', '😂', '🔥']) + return this.$store.getters.standardEmojiList.filter(emoji => hardcodedSet.has(emoji.replacement)) + }, + languages () { + return ensureFinalFallback(this.$store.getters.mergedConfig.interfaceLanguage) }, emojis () { if (this.filterWord !== '') { - const filterWordLowercase = trim(this.filterWord.toLowerCase()) + const keywordLowercase = trim(this.filterWord.toLowerCase()) + const orderedEmojiList = [] for (const emoji of this.$store.getters.standardEmojiList) { - if (emoji.replacement === this.filterWord) return [emoji] + const indices = this.maybeLocalizedEmojiNamesAndKeywords(emoji) + .keywords + .map(k => k.toLowerCase().indexOf(keywordLowercase)) + .filter(k => k > -1) + + const indexOfKeyword = indices.length ? Math.min(...indices) : -1 - const indexOfFilterWord = emoji.displayText.toLowerCase().indexOf(filterWordLowercase) - if (indexOfFilterWord > -1) { - if (!Array.isArray(orderedEmojiList[indexOfFilterWord])) { - orderedEmojiList[indexOfFilterWord] = [] + if (indexOfKeyword > -1) { + if (!Array.isArray(orderedEmojiList[indexOfKeyword])) { + orderedEmojiList[indexOfKeyword] = [] } - orderedEmojiList[indexOfFilterWord].push(emoji) + orderedEmojiList[indexOfKeyword].push(emoji) } } return orderedEmojiList.flat() diff --git a/src/components/react_button/react_button.vue b/src/components/react_button/react_button.vue index 254c49db..0c5fe321 100644 --- a/src/components/react_button/react_button.vue +++ b/src/components/react_button/react_button.vue @@ -24,7 +24,7 @@ v-for="emoji in commonEmojis" :key="emoji.replacement" class="emoji-button" - :title="emoji.displayText" + :title="maybeLocalizedEmojiName(emoji)" @click="addReaction($event, emoji.replacement, close)" > {{ emoji.replacement }} @@ -34,7 +34,7 @@ v-for="(emoji, key) in emojis" :key="key" class="emoji-button" - :title="emoji.displayText" + :title="maybeLocalizedEmojiName(emoji)" @click="addReaction($event, emoji.replacement, close)" > {{ emoji.replacement }} -- cgit v1.2.3-70-g09d2 From aea9f92d39df4af5e7579e9d0ec443d3fb18a756 Mon Sep 17 00:00:00 2001 From: flxy Date: Wed, 11 Jan 2023 13:52:49 +0100 Subject: Adjust query selector to actually get the popover now --- src/components/react_button/react_button.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'src/components/react_button/react_button.js') diff --git a/src/components/react_button/react_button.js b/src/components/react_button/react_button.js index 2a0dac85..58fbb61b 100644 --- a/src/components/react_button/react_button.js +++ b/src/components/react_button/react_button.js @@ -41,7 +41,7 @@ const ReactButton = { }, focusInput () { this.$nextTick(() => { - const input = this.$el.querySelector('input') + const input = document.querySelector('.popover.ReactButton').querySelector('input') if (input) input.focus() }) }, -- cgit v1.2.3-70-g09d2 From d81fdafacb86b120714b6541bd83cf588ab8b577 Mon Sep 17 00:00:00 2001 From: flxy Date: Wed, 11 Jan 2023 14:12:29 +0100 Subject: Pick a better query selector --- src/components/react_button/react_button.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'src/components/react_button/react_button.js') diff --git a/src/components/react_button/react_button.js b/src/components/react_button/react_button.js index 58fbb61b..47a48623 100644 --- a/src/components/react_button/react_button.js +++ b/src/components/react_button/react_button.js @@ -41,7 +41,7 @@ const ReactButton = { }, focusInput () { this.$nextTick(() => { - const input = document.querySelector('.popover.ReactButton').querySelector('input') + const input = document.querySelector('.reaction-picker-filter > input') if (input) input.focus() }) }, -- cgit v1.2.3-70-g09d2