diff options
Diffstat (limited to 'src')
29 files changed, 107 insertions, 66 deletions
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 }} </router-link> </div> <slot /> 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/chat.scss b/src/components/chat/chat.scss index aef58495..3a26686c 100644 --- a/src/components/chat/chat.scss +++ b/src/components/chat/chat.scss @@ -98,10 +98,10 @@ .unread-message-count { font-size: 0.8em; left: 50%; - transform: translate(-50%, 0); - border-radius: 100%; margin-top: -1rem; - padding: 0; + padding: 0.1em; + border-radius: 50px; + position: absolute; } .chat-loading-error { 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/emoji_input.js b/src/components/emoji_input/emoji_input.js index 2068a598..dc03bc9f 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/emoji_input/emoji_input.vue b/src/components/emoji_input/emoji_input.vue index 1d6c760e..ad62484d 100644 --- a/src/components/emoji_input/emoji_input.vue +++ b/src/components/emoji_input/emoji_input.vue @@ -9,8 +9,8 @@ <button v-if="!hideEmojiButton" class="button-unstyled emoji-picker-icon" - @click.prevent="togglePicker" type="button" + @click.prevent="togglePicker" > <FAIcon :icon="['far', 'smile-beam']" /> </button> 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/mfa_form/recovery_form.vue b/src/components/mfa_form/recovery_form.vue index 8457ec5d..7c594228 100644 --- a/src/components/mfa_form/recovery_form.vue +++ b/src/components/mfa_form/recovery_form.vue @@ -25,16 +25,16 @@ <div> <button class="button-unstyled -link" - @click.prevent="requireTOTP" type="button" + @click.prevent="requireTOTP" > {{ $t('login.enter_two_factor_code') }} </button> <br> <button class="button-unstyled -link" - @click.prevent="abortMFA" type="button" + @click.prevent="abortMFA" > {{ $t('general.cancel') }} </button> diff --git a/src/components/mfa_form/totp_form.vue b/src/components/mfa_form/totp_form.vue index 5d80e185..4ee13992 100644 --- a/src/components/mfa_form/totp_form.vue +++ b/src/components/mfa_form/totp_form.vue @@ -27,16 +27,16 @@ <div> <button class="button-unstyled -link" - @click.prevent="requireRecovery" type="button" + @click.prevent="requireRecovery" > {{ $t('login.enter_recovery_code') }} </button> <br> <button class="button-unstyled -link" - @click.prevent="abortMFA" type="button" + @click.prevent="abortMFA" > {{ $t('general.cancel') }} </button> 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 @@ > <small> <router-link :to="userProfileLink"> - {{ notification.from_profile.screen_name }} + {{ notification.from_profile.screen_name_ui }} </router-link> </small> <button @@ -54,14 +54,14 @@ <bdi v-if="!!notification.from_profile.name_html" class="username" - :title="'@'+notification.from_profile.screen_name" + :title="'@'+notification.from_profile.screen_name_ui" v-html="notification.from_profile.name_html" /> <!-- eslint-enable vue/no-v-html --> <span v-else class="username" - :title="'@'+notification.from_profile.screen_name" + :title="'@'+notification.from_profile.screen_name_ui" >{{ notification.from_profile.name }}</span> <span v-if="notification.type === 'like'"> <FAIcon @@ -152,7 +152,7 @@ :to="userProfileLink" class="follow-name" > - @{{ notification.from_profile.screen_name }} + @{{ notification.from_profile.screen_name_ui }} </router-link> <div v-if="notification.type === 'follow_request'" @@ -177,7 +177,7 @@ class="move-text" > <router-link :to="targetUserProfileLink"> - @{{ notification.target.screen_name }} + @{{ notification.target.screen_name_ui }} </router-link> </div> <template v-else> 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/popover/popover.vue b/src/components/popover/popover.vue index 876dd61d..bacbc590 100644 --- a/src/components/popover/popover.vue +++ b/src/components/popover/popover.vue @@ -6,8 +6,8 @@ <button ref="trigger" class="button-unstyled -fullwidth popover-trigger-button" - @click="onClick" type="button" + @click="onClick" > <slot name="trigger" /> </button> 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" > <div slot="content" diff --git a/src/components/scope_selector/scope_selector.vue b/src/components/scope_selector/scope_selector.vue index 60e8c3ba..a01242fc 100644 --- a/src/components/scope_selector/scope_selector.vue +++ b/src/components/scope_selector/scope_selector.vue @@ -8,8 +8,8 @@ class="button-unstyled scope" :class="css.direct" :title="$t('post_status.scope.direct')" - @click="changeVis('direct')" type="button" + @click="changeVis('direct')" > <FAIcon icon="envelope" @@ -21,8 +21,8 @@ class="button-unstyled scope" :class="css.private" :title="$t('post_status.scope.private')" - @click="changeVis('private')" type="button" + @click="changeVis('private')" > <FAIcon icon="lock" @@ -34,8 +34,8 @@ class="button-unstyled scope" :class="css.unlisted" :title="$t('post_status.scope.unlisted')" - @click="changeVis('unlisted')" type="button" + @click="changeVis('unlisted')" > <FAIcon icon="lock-open" @@ -47,8 +47,8 @@ class="button-unstyled scope" :class="css.public" :title="$t('post_status.scope.public')" - @click="changeVis('public')" type="button" + @click="changeVis('public')" > <FAIcon icon="globe" diff --git a/src/components/search/search.vue b/src/components/search/search.vue index fa648365..b7bfc1f3 100644 --- a/src/components/search/search.vue +++ b/src/components/search/search.vue @@ -15,8 +15,8 @@ > <button class="btn button-default search-button" - @click="newQuery(searchTerm)" type="submit" + @click="newQuery(searchTerm)" > <FAIcon icon="search" /> </button> diff --git a/src/components/search_bar/search_bar.vue b/src/components/search_bar/search_bar.vue index a7432dcb..222f57ba 100644 --- a/src/components/search_bar/search_bar.vue +++ b/src/components/search_bar/search_bar.vue @@ -7,8 +7,8 @@ v-if="hidden" class="button-unstyled nav-icon" :title="$t('nav.search')" - @click.prevent.stop="toggleHidden" type="button" + @click.prevent.stop="toggleHidden" > <FAIcon fixed-width @@ -28,8 +28,8 @@ > <button class="button-default search-button" - @click="find(searchTerm)" type="submit" + @click="find(searchTerm)" > <FAIcon fixed-width @@ -38,8 +38,8 @@ </button> <button class="button-unstyled cancel-search" - @click.prevent.stop="toggleHidden" type="button" + @click.prevent.stop="toggleHidden" > <FAIcon fixed-width diff --git a/src/components/settings_modal/helpers/boolean_setting.vue b/src/components/settings_modal/helpers/boolean_setting.vue index b600b63b..146ad6c1 100644 --- a/src/components/settings_modal/helpers/boolean_setting.vue +++ b/src/components/settings_modal/helpers/boolean_setting.vue @@ -4,13 +4,13 @@ > <Checkbox :checked="state" - @change="update" :disabled="disabled" + @change="update" > <span v-if="!!$slots.default" class="label" - > + > <slot /> </span> <ModifiedIndicator :changed="isChanged" /> @@ -23,14 +23,14 @@ import { get, set } from 'lodash' import Checkbox from 'src/components/checkbox/checkbox.vue' import ModifiedIndicator from './modified_indicator.vue' export default { - props: [ - 'path', - 'disabled' - ], components: { Checkbox, ModifiedIndicator }, + props: [ + 'path', + 'disabled' + ], computed: { pathDefault () { const [firstSegment, ...rest] = this.path.split('.') diff --git a/src/components/settings_modal/helpers/modified_indicator.vue b/src/components/settings_modal/helpers/modified_indicator.vue index b75a2811..9f4e81fe 100644 --- a/src/components/settings_modal/helpers/modified_indicator.vue +++ b/src/components/settings_modal/helpers/modified_indicator.vue @@ -2,21 +2,21 @@ <span v-if="changed" class="ModifiedIndicator" - > + > <Popover trigger="hover" - > + > <span slot="trigger"> - <FAIcon - icon="wrench" - /> + <FAIcon + icon="wrench" + /> </span> <div - class="modified-tooltip" slot="content" - > - {{ $t('settings.setting_changed') }} + class="modified-tooltip" + > + {{ $t('settings.setting_changed') }} </div> </Popover> </span> @@ -32,8 +32,8 @@ library.add( ) export default { - props: ['changed'], - components: { Popover } + components: { Popover }, + props: ['changed'] } </script> diff --git a/src/components/settings_modal/tabs/filtering_tab.vue b/src/components/settings_modal/tabs/filtering_tab.vue index 18dd4be9..402c2a4a 100644 --- a/src/components/settings_modal/tabs/filtering_tab.vue +++ b/src/components/settings_modal/tabs/filtering_tab.vue @@ -75,8 +75,8 @@ <p>{{ $t('settings.filtering_explanation') }}</p> <textarea id="muteWords" - class="resize-height" v-model="muteWordsString" + class="resize-height" /> </div> <div> diff --git a/src/components/status/status.js b/src/components/status/status.js index 2bf93a9e..470c01f1 100644 --- a/src/components/status/status.js +++ b/src/components/status/status.js @@ -136,7 +136,7 @@ const Status = { } }, retweet () { return !!this.statusoid.retweeted_status }, - retweeter () { return this.statusoid.user.name || this.statusoid.user.screen_name }, + retweeter () { return this.statusoid.user.name || this.statusoid.user.screen_name_ui }, retweeterHtml () { return this.statusoid.user.name_html }, retweeterProfileLink () { return this.generateUserProfileLink(this.statusoid.user.id, this.statusoid.user.screen_name) }, status () { @@ -216,7 +216,7 @@ const Status = { return this.status.in_reply_to_screen_name } else { const user = this.$store.getters.findUser(this.status.in_reply_to_user_id) - return user && user.screen_name + return user && user.screen_name_ui } }, replySubject () { diff --git a/src/components/status/status.vue b/src/components/status/status.vue index 6ee8117f..00e962f3 100644 --- a/src/components/status/status.vue +++ b/src/components/status/status.vue @@ -26,7 +26,7 @@ icon="retweet" /> <router-link :to="userProfileLink"> - {{ status.user.screen_name }} + {{ status.user.screen_name_ui }} </router-link> </small> <small @@ -156,10 +156,10 @@ </h4> <router-link class="account-name" - :title="status.user.screen_name" + :title="status.user.screen_name_ui" :to="userProfileLink" > - {{ status.user.screen_name }} + {{ status.user.screen_name_ui }} </router-link> <img v-if="!!(status.user && status.user.favicon)" diff --git a/src/components/user_avatar/user_avatar.vue b/src/components/user_avatar/user_avatar.vue index 0f7c584b..4040e263 100644 --- a/src/components/user_avatar/user_avatar.vue +++ b/src/components/user_avatar/user_avatar.vue @@ -2,8 +2,8 @@ <StillImage v-if="user" class="Avatar" - :alt="user.screen_name" - :title="user.screen_name" + :alt="user.screen_name_ui" + :title="user.screen_name_ui" :src="imgSrc(user.profile_image_url_original)" :class="{ 'avatar-compact': compact, 'better-shadow': betterShadow }" :image-load-error="imageLoadError" diff --git a/src/components/user_card/user_card.vue b/src/components/user_card/user_card.vue index 572943b5..60776ebb 100644 --- a/src/components/user_card/user_card.vue +++ b/src/components/user_card/user_card.vue @@ -73,10 +73,10 @@ <div class="bottom-line"> <router-link class="user-screen-name" - :title="user.screen_name" + :title="user.screen_name_ui" :to="userProfileLink(user)" > - @{{ user.screen_name }} + @{{ user.screen_name_ui }} </router-link> <template v-if="!hideBio"> <span diff --git a/src/components/user_list_popover/user_list_popover.vue b/src/components/user_list_popover/user_list_popover.vue index 95673733..d0aa315e 100644 --- a/src/components/user_list_popover/user_list_popover.vue +++ b/src/components/user_list_popover/user_list_popover.vue @@ -26,7 +26,7 @@ <!-- eslint-disable vue/no-v-html --> <span v-html="user.name_html" /> <!-- eslint-enable vue/no-v-html --> - <span class="user-list-screen-name">{{ user.screen_name }}</span> + <span class="user-list-screen-name">{{ user.screen_name_ui }}</span> </div> </div> </div> diff --git a/src/components/user_reporting_modal/user_reporting_modal.vue b/src/components/user_reporting_modal/user_reporting_modal.vue index fb43094f..a71c02c1 100644 --- a/src/components/user_reporting_modal/user_reporting_modal.vue +++ b/src/components/user_reporting_modal/user_reporting_modal.vue @@ -6,7 +6,7 @@ <div class="user-reporting-panel panel"> <div class="panel-heading"> <div class="title"> - {{ $t('user_reporting.title', [user.screen_name]) }} + {{ $t('user_reporting.title', [user.screen_name_ui]) }} </div> </div> <div class="panel-body"> diff --git a/src/modules/statuses.js b/src/modules/statuses.js index 33c68c57..ac5d25c4 100644 --- a/src/modules/statuses.js +++ b/src/modules/statuses.js @@ -13,7 +13,11 @@ import { omitBy } from 'lodash' import { set } from 'vue' -import { isStatusNotification, maybeShowNotification } from '../services/notification_utils/notification_utils.js' +import { + isStatusNotification, + isValidNotification, + maybeShowNotification +} from '../services/notification_utils/notification_utils.js' import apiService from '../services/api/api.service.js' const emptyTl = (userId = 0) => ({ @@ -310,8 +314,24 @@ const addNewStatuses = (state, { statuses, showImmediately = false, timeline, us } } +const updateNotificationsMinMaxId = (state, notification) => { + state.notifications.maxId = notification.id > state.notifications.maxId + ? notification.id + : state.notifications.maxId + state.notifications.minId = notification.id < state.notifications.minId + ? notification.id + : state.notifications.minId +} + const addNewNotifications = (state, { dispatch, notifications, older, visibleNotificationTypes, rootGetters, newNotificationSideEffects }) => { each(notifications, (notification) => { + // If invalid notification, update ids but don't add it to store + if (!isValidNotification(notification)) { + console.error('Invalid notification:', notification) + updateNotificationsMinMaxId(state, notification) + return + } + if (isStatusNotification(notification.type)) { notification.action = addStatusToGlobalStorage(state, notification.action).item notification.status = notification.status && addStatusToGlobalStorage(state, notification.status).item @@ -323,12 +343,7 @@ const addNewNotifications = (state, { dispatch, notifications, older, visibleNot // Only add a new notification if we don't have one for the same action if (!state.notifications.idStore.hasOwnProperty(notification.id)) { - state.notifications.maxId = notification.id > state.notifications.maxId - ? notification.id - : state.notifications.maxId - state.notifications.minId = notification.id < state.notifications.minId - ? notification.id - : state.notifications.minId + updateNotificationsMinMaxId(state, notification) state.notifications.data.push(notification) state.notifications.idStore[notification.id] = notification diff --git a/src/services/entity_normalizer/entity_normalizer.service.js b/src/services/entity_normalizer/entity_normalizer.service.js index 6ed663e1..9b2b30e6 100644 --- a/src/services/entity_normalizer/entity_normalizer.service.js +++ b/src/services/entity_normalizer/entity_normalizer.service.js @@ -203,7 +203,8 @@ export const parseUser = (data) => { output.rights = output.rights || {} output.notification_settings = output.notification_settings || {} - // Convert punycode to unicode + // Convert punycode to unicode for UI + output.screen_name_ui = output.screen_name if (output.screen_name.includes('@')) { const parts = output.screen_name.split('@') let unicodeDomain = punycode.toUnicode(parts[1]) @@ -211,7 +212,7 @@ export const parseUser = (data) => { // Add some identifier so users can potentially spot spoofing attempts: // lain.com and xn--lin-6cd.com would appear identical otherwise. unicodeDomain = '🌏' + unicodeDomain - output.screen_name = [parts[0], unicodeDomain].join('@') + output.screen_name_ui = [parts[0], unicodeDomain].join('@') } } diff --git a/src/services/notification_utils/notification_utils.js b/src/services/notification_utils/notification_utils.js index d912d19f..6fef1022 100644 --- a/src/services/notification_utils/notification_utils.js +++ b/src/services/notification_utils/notification_utils.js @@ -22,6 +22,13 @@ const statusNotifications = ['like', 'mention', 'repeat', 'pleroma:emoji_reactio export const isStatusNotification = (type) => includes(statusNotifications, type) +export const isValidNotification = (notification) => { + if (isStatusNotification(notification.type) && !notification.status) { + return false + } + return true +} + const sortById = (a, b) => { const seqA = Number(a.id) const seqB = Number(b.id) |