From 62b2648a3e124ac34d960219b925a6c3569e2229 Mon Sep 17 00:00:00 2001 From: taehoon Date: Thu, 24 Oct 2019 16:53:36 -0400 Subject: [PATCH] split status preview popover into a separate component --- src/components/status/status.js | 25 +----- src/components/status/status.vue | 82 +----------------- .../status_popover/status_popover.js | 43 ++++++++++ .../status_popover/status_popover.vue | 86 +++++++++++++++++++ 4 files changed, 136 insertions(+), 100 deletions(-) create mode 100644 src/components/status_popover/status_popover.js create mode 100644 src/components/status_popover/status_popover.vue diff --git a/src/components/status/status.js b/src/components/status/status.js index 36455f2a..d3b39175 100644 --- a/src/components/status/status.js +++ b/src/components/status/status.js @@ -10,11 +10,12 @@ import Gallery from '../gallery/gallery.vue' import LinkPreview from '../link-preview/link-preview.vue' import AvatarList from '../avatar_list/avatar_list.vue' import Timeago from '../timeago/timeago.vue' +import StatusPopover from '../status_popover/status_popover.vue' import generateProfileLink from 'src/services/user_profile_link_generator/user_profile_link_generator' import fileType from 'src/services/file_type/file_type.service' import { highlightClass, highlightStyle } from '../../services/user_highlighter/user_highlighter.js' import { mentionMatchesUrl, extractTagFromUrl } from 'src/services/matcher/matcher.service.js' -import { filter, find, unescape, uniqBy } from 'lodash' +import { filter, unescape, uniqBy } from 'lodash' const Status = { name: 'Status', @@ -37,7 +38,6 @@ const Status = { replying: false, unmuted: false, userExpanded: false, - preview: null, showingTall: this.inConversation && this.focused, showingLongSubject: false, error: null, @@ -300,7 +300,8 @@ const Status = { Gallery, LinkPreview, AvatarList, - Timeago + Timeago, + StatusPopover }, methods: { visibilityIcon (visibility) { @@ -375,24 +376,6 @@ const Status = { this.expandingSubject = true } }, - replyEnter (id, event) { - const targetId = id - const statuses = this.$store.state.statuses.allStatuses - - if (!this.preview) { - // if we have the status somewhere already - this.preview = find(statuses, { 'id': targetId }) - // or if we have to fetch it - if (!this.preview) { - this.$store.state.api.backendInteractor.fetchStatus({ id }).then((status) => { - this.preview = status - this.$nextTick(this.$refs.statusPreviewPopper.updatePopper) - }) - } - } else if (this.preview.id !== targetId) { - this.preview = find(statuses, { 'id': targetId }) - } - }, generateUserProfileLink (id, name) { return generateProfileLink(id, name, this.$store.state.instance.restrictedNicknames) }, diff --git a/src/components/status/status.vue b/src/components/status/status.vue index 3edee25a..e91dfd28 100644 --- a/src/components/status/status.vue +++ b/src/components/status/status.vue @@ -174,33 +174,10 @@ v-if="isReply" class="reply-to-and-accountname" > - -
- -
- -
-
- {{ $t('status.reply_to') }} -
+ import('../status/status.vue') + }, + methods: { + enter () { + const id = this.statusId + const statuses = this.$store.state.statuses.allStatuses + + if (!this.preview) { + // if we have the status somewhere already + this.preview = find(statuses, { id }) + // or if we have to fetch it + if (!this.preview) { + this.$store.state.api.backendInteractor.fetchStatus({ id }).then((status) => { + this.preview = status + this.$nextTick(this.$refs.popper.updatePopper) + }) + } + } else if (this.preview.id !== id) { + this.preview = find(statuses, 'id') + } + } + } +} + +export default StatusPopover diff --git a/src/components/status_popover/status_popover.vue b/src/components/status_popover/status_popover.vue new file mode 100644 index 00000000..b0975afb --- /dev/null +++ b/src/components/status_popover/status_popover.vue @@ -0,0 +1,86 @@ + + + + +