From ab1d1b3dd0f2ea1c44f4ae7a5f08c52d7ea8520c Mon Sep 17 00:00:00 2001 From: shpuld Date: Mon, 13 Nov 2017 16:33:54 +0200 Subject: [PATCH 1/7] Move previews from conversation to status, put the reply preview arrow back on timeline statuses, add a spinner when the preview is still loading. --- src/components/conversation/conversation.js | 18 +------ src/components/conversation/conversation.vue | 40 +------------- src/components/status/status.js | 31 +++++++++-- src/components/status/status.vue | 55 +++++++++++++++++++- 4 files changed, 84 insertions(+), 60 deletions(-) diff --git a/src/components/conversation/conversation.js b/src/components/conversation/conversation.js index 89fcfddb..9d9f7bbe 100644 --- a/src/components/conversation/conversation.js +++ b/src/components/conversation/conversation.js @@ -1,4 +1,4 @@ -import { reduce, find, filter, sortBy } from 'lodash' +import { reduce, filter, sortBy } from 'lodash' import { statusType } from '../../modules/statuses.js' import Status from '../status/status.vue' @@ -10,12 +10,7 @@ const sortAndFilterConversation = (conversation) => { const conversation = { data () { return { - highlight: null, - preview: { - x: 0, - y: 0, - status: null - } + highlight: null } }, props: [ @@ -86,15 +81,6 @@ const conversation = { }, setHighlight (id) { this.highlight = Number(id) - }, - setPreview (id, x, y) { - if (id) { - this.preview.x = x - this.preview.y = y - this.preview.status = find(this.conversation, { id: id }) - } else { - this.preview.status = null - } } } } diff --git a/src/components/conversation/conversation.vue b/src/components/conversation/conversation.vue index 3dea4985..201afcd5 100644 --- a/src/components/conversation/conversation.vue +++ b/src/components/conversation/conversation.vue @@ -8,48 +8,10 @@
- -
-
-
- -
-

- {{ preview.status.user.name }} - {{ preview.status.user.screen_name}} -

-
+
- - diff --git a/src/components/status/status.js b/src/components/status/status.js index 4f5093e1..55976b8b 100644 --- a/src/components/status/status.js +++ b/src/components/status/status.js @@ -4,7 +4,7 @@ import RetweetButton from '../retweet_button/retweet_button.vue' import DeleteButton from '../delete_button/delete_button.vue' import PostStatusForm from '../post_status_form/post_status_form.vue' import UserCardContent from '../user_card_content/user_card_content.vue' -import { filter } from 'lodash' +import { filter, find } from 'lodash' const Status = { props: [ @@ -20,7 +20,9 @@ const Status = { replying: false, expanded: false, unmuted: false, - userExpanded: false + userExpanded: false, + preview: null, + showPreview: false }), computed: { muteWords () { @@ -90,7 +92,9 @@ const Status = { }, gotoOriginal (id) { // only handled by conversation, not status_or_conversation - this.$emit('goto', id) + if (this.expanded) { + this.$emit('goto', id) + } }, toggleExpanded () { this.$emit('toggleExpanded') @@ -102,13 +106,34 @@ const Status = { this.userExpanded = !this.userExpanded }, replyEnter (id, event) { + this.showPreview = true + const targetId = Number(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 + }) + } + } else if (this.preview.id !== targetId) { + this.preview = find(statuses, { 'id': targetId }) + } + /* if (this.$store.state.config.hoverPreview) { let rect = event.target.getBoundingClientRect() this.$emit('preview', Number(id), rect.left + 20, rect.top + 20 + window.pageYOffset) } + */ }, replyLeave () { + this.showPreview = false + /* this.$emit('preview', 0, 0, 0) + */ } }, watch: { diff --git a/src/components/status/status.vue b/src/components/status/status.vue index 84397bfa..c9194ab4 100644 --- a/src/components/status/status.vue +++ b/src/components/status/status.vue @@ -54,7 +54,7 @@ {{status.in_reply_to_screen_name}} -