From 34d18ac0c4e1903cb174df8957b855a048ec6b7e Mon Sep 17 00:00:00 2001 From: Shpuld Shpuldson Date: Thu, 25 Feb 2021 17:27:29 +0200 Subject: [PATCH 1/4] focus input in emoji picker and react picker --- CHANGELOG.md | 1 + src/components/emoji_input/emoji_input.js | 8 ++++++++ src/components/popover/popover.js | 7 +++++-- src/components/react_button/react_button.js | 6 ++++++ src/components/react_button/react_button.vue | 1 + 5 files changed, 21 insertions(+), 2 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 1fbb3575..ae7e0daf 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -13,6 +13,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/). ### Changed - Display 'people voted' instead of 'votes' for multi-choice polls - Optimized chat to not get horrible performance after keeping the same chat open for a long time +- When opening emoji picker or react picker, it automatically focuses the search field ### Added - Added reason field for registration when approval is required diff --git a/src/components/emoji_input/emoji_input.js b/src/components/emoji_input/emoji_input.js index 2068a598..cda2382e 100644 --- a/src/components/emoji_input/emoji_input.js +++ b/src/components/emoji_input/emoji_input.js @@ -194,11 +194,18 @@ const EmojiInput = { } }, methods: { + focusPickerInput () { + const pickerEl = this.$refs.picker.$el + if (!pickerEl) return + const pickerInput = pickerEl.querySelector('input') + if (pickerInput) pickerInput.focus() + }, triggerShowPicker () { this.showPicker = true this.$refs.picker.startEmojiLoad() this.$nextTick(() => { this.scrollIntoView() + this.focusPickerInput() }) // This temporarily disables "click outside" handler // since external trigger also means click originates @@ -214,6 +221,7 @@ const EmojiInput = { if (this.showPicker) { this.scrollIntoView() this.$refs.picker.startEmojiLoad() + this.$nextTick(() => this.focusPickerInput()) } }, replace (replacement) { diff --git a/src/components/popover/popover.js b/src/components/popover/popover.js index 5e417fa0..bfe39212 100644 --- a/src/components/popover/popover.js +++ b/src/components/popover/popover.js @@ -121,9 +121,12 @@ const Popover = { } }, showPopover () { - if (this.hidden) this.$emit('show') + const wasHidden = this.hidden this.hidden = false - this.$nextTick(this.updateStyles) + this.$nextTick(() => { + if (wasHidden) this.$emit('show') + this.updateStyles() + }) }, hidePopover () { if (!this.hidden) this.$emit('close') diff --git a/src/components/react_button/react_button.js b/src/components/react_button/react_button.js index 5e7b7580..ce82c90d 100644 --- a/src/components/react_button/react_button.js +++ b/src/components/react_button/react_button.js @@ -23,6 +23,12 @@ const ReactButton = { this.$store.dispatch('reactWithEmoji', { id: this.status.id, emoji }) } close() + }, + focusInput () { + this.$nextTick(() => { + const input = this.$el.querySelector('input') + if (input) input.focus() + }) } }, computed: { diff --git a/src/components/react_button/react_button.vue b/src/components/react_button/react_button.vue index 04734674..4839024c 100644 --- a/src/components/react_button/react_button.vue +++ b/src/components/react_button/react_button.vue @@ -6,6 +6,7 @@ :offset="{ y: 5 }" :bound-to="{ x: 'container' }" remove-padding + @show="focusInput" >
Date: Thu, 25 Feb 2021 17:32:54 +0200 Subject: [PATCH 2/4] save a few characters --- src/components/emoji_input/emoji_input.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/emoji_input/emoji_input.js b/src/components/emoji_input/emoji_input.js index cda2382e..dc03bc9f 100644 --- a/src/components/emoji_input/emoji_input.js +++ b/src/components/emoji_input/emoji_input.js @@ -221,7 +221,7 @@ const EmojiInput = { if (this.showPicker) { this.scrollIntoView() this.$refs.picker.startEmojiLoad() - this.$nextTick(() => this.focusPickerInput()) + this.$nextTick(this.focusPickerInput) } }, replace (replacement) { From 09fe160e8b9fad7a8c70e44ae894d67211b993e1 Mon Sep 17 00:00:00 2001 From: Shpuld Shpuldson Date: Fri, 26 Feb 2021 16:23:11 +0200 Subject: [PATCH 3/4] separate screen_name and screen_name_ui with decoded punycode --- CHANGELOG.md | 1 + src/components/basic_user_card/basic_user_card.vue | 2 +- src/components/chat/chat.js | 2 +- src/components/chat_title/chat_title.js | 2 +- src/components/emoji_input/suggestor.js | 4 ++-- src/components/notification/notification.vue | 10 +++++----- src/components/status/status.js | 4 ++-- src/components/status/status.vue | 6 +++--- src/components/user_avatar/user_avatar.vue | 4 ++-- src/components/user_card/user_card.vue | 4 ++-- src/components/user_list_popover/user_list_popover.vue | 2 +- .../user_reporting_modal/user_reporting_modal.vue | 2 +- .../entity_normalizer/entity_normalizer.service.js | 5 +++-- .../entity_normalizer/entity_normalizer.spec.js | 2 +- 14 files changed, 26 insertions(+), 24 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 2685fd32..20d96f98 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -10,6 +10,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/). - Fixed missing highlighted border in expanded conversations again - Fixed some UI jumpiness when opening images particularly in chat view - Fixed chat unread badge looking weird +- Fixed punycode names not working properly ### Changed - Display 'people voted' instead of 'votes' for multi-choice polls diff --git a/src/components/basic_user_card/basic_user_card.vue b/src/components/basic_user_card/basic_user_card.vue index 9e410610..c53f6a9c 100644 --- a/src/components/basic_user_card/basic_user_card.vue +++ b/src/components/basic_user_card/basic_user_card.vue @@ -42,7 +42,7 @@ class="basic-user-card-screen-name" :to="userProfileLink(user)" > - @{{ user.screen_name }} + @{{ user.screen_name_ui }}
diff --git a/src/components/chat/chat.js b/src/components/chat/chat.js index 2780be75..b54f5fb2 100644 --- a/src/components/chat/chat.js +++ b/src/components/chat/chat.js @@ -73,7 +73,7 @@ const Chat = { }, formPlaceholder () { if (this.recipient) { - return this.$t('chats.message_user', { nickname: this.recipient.screen_name }) + return this.$t('chats.message_user', { nickname: this.recipient.screen_name_ui }) } else { return '' } diff --git a/src/components/chat_title/chat_title.js b/src/components/chat_title/chat_title.js index e424bb1f..edfbe7a4 100644 --- a/src/components/chat_title/chat_title.js +++ b/src/components/chat_title/chat_title.js @@ -12,7 +12,7 @@ export default Vue.component('chat-title', { ], computed: { title () { - return this.user ? this.user.screen_name : '' + return this.user ? this.user.screen_name_ui : '' }, htmlTitle () { return this.user ? this.user.name_html : '' diff --git a/src/components/emoji_input/suggestor.js b/src/components/emoji_input/suggestor.js index 14a2b41e..e8efbd1e 100644 --- a/src/components/emoji_input/suggestor.js +++ b/src/components/emoji_input/suggestor.js @@ -116,8 +116,8 @@ export const suggestUsers = ({ dispatch, state }) => { return diff + nameAlphabetically + screenNameAlphabetically /* eslint-disable camelcase */ - }).map(({ screen_name, name, profile_image_url_original }) => ({ - displayText: screen_name, + }).map(({ screen_name, screen_name_ui, name, profile_image_url_original }) => ({ + displayText: screen_name_ui, detailText: name, imageUrl: profile_image_url_original, replacement: '@' + screen_name + ' ' diff --git a/src/components/notification/notification.vue b/src/components/notification/notification.vue index f56aa977..0081dee4 100644 --- a/src/components/notification/notification.vue +++ b/src/components/notification/notification.vue @@ -11,7 +11,7 @@ > - {{ notification.from_profile.screen_name }} + {{ notification.from_profile.screen_name_ui }}