diff --git a/src/components/conversation/conversation.js b/src/components/conversation/conversation.js index 1bc9f3858..00605657e 100644 --- a/src/components/conversation/conversation.js +++ b/src/components/conversation/conversation.js @@ -97,7 +97,7 @@ const conversation = { }, data() { return { - highlight: null, + focused: null, expanded: false, threadDisplayStatusObject: {}, // id => 'showing' | 'hidden' inlineDivePosition: null, @@ -389,6 +389,9 @@ const conversation = { canDive() { return this.isTreeView && this.isExpanded }, + maybeFocused() { + return this.isExpanded ? this.focused : null + }, ...mapPiniaState(useMergedConfigStore, ['mergedConfig']), ...mapState({ mastoUserSocketStatus: (state) => state.api.mastoUserSocketStatus, @@ -411,7 +414,7 @@ const conversation = { oldConversationId && newConversationId === oldConversationId ) { - this.setHighlight(this.originalStatusId) + this.setFocused(this.originalStatusId) } else { this.fetchConversation() } @@ -439,7 +442,7 @@ const conversation = { }).then(({ data: { ancestors, descendants } }) => { this.$store.dispatch('addNewStatuses', { statuses: ancestors }) this.$store.dispatch('addNewStatuses', { statuses: descendants }) - this.setHighlight(this.originalStatusId) + this.setFocused(this.originalStatusId) }) } else { this.loadStatusError = null @@ -457,18 +460,12 @@ const conversation = { }) } }, - isFocused(id) { - return this.isExpanded && id === this.highlight - }, getReplies(id) { return this.replies[id] || [] }, - maybeHighlight() { - return this.isExpanded ? this.highlight : null - }, - setHighlight(id) { + setFocused(id) { if (!id) return - this.highlight = id + this.focused = id if (!this.streamingEnabled) { this.$store.dispatch('fetchStatus', id) @@ -533,7 +530,7 @@ const conversation = { // only used when we are not on a page undive() { this.inlineDivePosition = null - this.setHighlight(this.statusId) + this.setFocused(this.statusId) }, tryScrollTo(id) { if (!id) { @@ -551,7 +548,7 @@ const conversation = { // contain scrolling calls, as we do not want the page to jump // when we scroll with an expanded conversation. // - // Now the method is to rely solely on the `highlight` watcher + // Now the method is to rely solely on the `focused` watcher // in `status` components. // In linear views, all statuses are rendered at all times, but // in tree views, it is possible that a change in active status @@ -559,9 +556,9 @@ const conversation = { // status becomes an ancestor status, and thus they will be // different). // Here, let the components be rendered first, in order to trigger - // the `highlight` watcher. + // the `focused` watcher. this.$nextTick(() => { - this.setHighlight(id) + this.setFocused(id) }) }, goToCurrent() { diff --git a/src/components/conversation/conversation.vue b/src/components/conversation/conversation.vue index 9bd8a96f9..684a5de92 100644 --- a/src/components/conversation/conversation.vue +++ b/src/components/conversation/conversation.vue @@ -96,8 +96,7 @@ :replies="getReplies(status.id)" :expandable="!isExpanded" - :focused="isFocused(status.id)" - :highlight="maybeHighlight" + :focused="maybeFocused === status.id" :inline-expanded="collapsable && isExpanded" :show-pinned="pinnedStatusIdsObject && pinnedStatusIdsObject[status.id]" :in-profile="inProfile" @@ -107,7 +106,7 @@ :show-other-replies-as-button="showOtherRepliesButtonInsideStatus" can-dive - @goto="setHighlight" + @goto="setFocused" @dive="() => diveIntoStatus(status.id)" @suspendable-state-change="onStatusSuspendStateChange" /> @@ -154,9 +153,8 @@ :pinned-status-ids-object="pinnedStatusIdsObject" :profile-user-id="profileUserId" - :is-focused-function="isFocused" :get-replies="getReplies" - :highlight="maybeHighlight" + :focused="maybeFocused" :toggle-expanded="toggleExpanded" :simple="treeViewIsSimple" @@ -166,7 +164,7 @@ :total-reply-depth="totalReplyDepth" :can-dive="canDive" - @goto="setHighlight" + @goto="setFocused" @dive="diveIntoStatus" @suspendable-state-change="onStatusSuspendStateChange" /> @@ -185,15 +183,14 @@ :replies="getReplies(status.id)" :expandable="!isExpanded" - :focused="isFocused(status.id)" - :highlight="maybeHighlight === status.id" + :focused="maybeFocused === status.id || maybeFocused === status.retweeted_status?.id" :inline-expanded="collapsable && isExpanded" :show-pinned="pinnedStatusIdsObject && pinnedStatusIdsObject[status.id]" :in-profile="inProfile" :in-conversation="isExpanded" :profile-user-id="profileUserId" - @goto="setHighlight" + @goto="setFocused" @toggle-expanded="toggleExpanded" @suspendable-state-change="onStatusSuspendStateChange" /> diff --git a/src/components/status/status.js b/src/components/status/status.js index 0cfc7cdba..996dc6437 100644 --- a/src/components/status/status.js +++ b/src/components/status/status.js @@ -97,7 +97,6 @@ const Status = { expandable: Boolean, focused: Boolean, - highlight: Boolean, compact: Boolean, isPreview: Boolean, noHeading: Boolean, @@ -320,7 +319,7 @@ const Status = { }, shouldNotMute() { if (this.ignoreMute) return true - if (this.isFocused) return true + if (this.focused) return true const { status } = this const { reblog } = status return ( @@ -357,16 +356,6 @@ const Status = { this.muteFilterHits.some((x) => x.hide)) ) }, - isFocused() { - // retweet or root of an expanded conversation - if (this.focused) { - return true - } else if (!this.inConversation) { - return false - } - // use conversation highlight only when in conversation - return this.status.id === this.highlight - }, isReply() { return !!( this.status.in_reply_to_status_id && this.status.in_reply_to_user_id @@ -415,7 +404,7 @@ const Status = { shouldDisplayFavsAndRepeats() { return ( !this.hidePostStats && - this.isFocused && + this.focused && (this.combinedFavsAndRepeatsUsers.length > 0 || this.statusFromGlobalRepository.quotes_count) ) @@ -558,9 +547,9 @@ const Status = { toggleThreadDisplay() { this.controlledToggleThreadDisplay() }, - scrollIfHighlighted(highlightId) { + scrollIfFocused(focusedId) { if (this.$el.getBoundingClientRect == null) return - const id = highlightId + const id = focusedId if (this.status.id === id) { const rect = this.$el.getBoundingClientRect() if (rect.top < 100) { @@ -577,13 +566,13 @@ const Status = { }, }, watch: { - highlight: function (id) { - this.scrollIfHighlighted(id) + focused: function (id) { + this.scrollIfFocused(id) }, 'status.repeat_num': function (num) { // refetch repeats when repeat_num is changed in any way if ( - this.isFocused && + this.focused && this.statusFromGlobalRepository.rebloggedBy && this.statusFromGlobalRepository.rebloggedBy.length !== num ) { @@ -593,7 +582,7 @@ const Status = { 'status.fave_num': function (num) { // refetch favs when fave_num is changed in any way if ( - this.isFocused && + this.focused && this.statusFromGlobalRepository.favoritedBy && this.statusFromGlobalRepository.favoritedBy.length !== num ) { diff --git a/src/components/status/status.vue b/src/components/status/status.vue index f301ad890..4dcc1e07d 100644 --- a/src/components/status/status.vue +++ b/src/components/status/status.vue @@ -3,7 +3,7 @@ v-if="!hideStatus" ref="root" class="Status" - :class="[{ '-focused': isFocused }, { '-conversation': inlineExpanded }]" + :class="[{ '-focused': focused }, { '-conversation': inlineExpanded }]" >
diff --git a/src/components/thread_tree/thread_tree.js b/src/components/thread_tree/thread_tree.js index 7631d127f..75232a259 100644 --- a/src/components/thread_tree/thread_tree.js +++ b/src/components/thread_tree/thread_tree.js @@ -19,10 +19,8 @@ const ThreadTree = { pinnedStatusIdsObject: Object, profileUserId: String, - isFocusedFunction: Function, - highlight: String, + focused: String, getReplies: Function, - setHighlight: Function, toggleExpanded: Function, simple: Boolean, diff --git a/src/components/thread_tree/thread_tree.vue b/src/components/thread_tree/thread_tree.vue index 72f8512e5..556858ad7 100644 --- a/src/components/thread_tree/thread_tree.vue +++ b/src/components/thread_tree/thread_tree.vue @@ -8,9 +8,8 @@ :inline-expanded="collapsable && isExpanded" :expandable="!isExpanded" :show-pinned="pinnedStatusIdsObject && pinnedStatusIdsObject[status.id]" - :focused="isFocusedFunction(status.id)" :in-conversation="isExpanded" - :highlight="highlight === status.id" + :focused="focused === status.id || focused === status.retweeted_status?.id" :in-profile="inProfile" :profile-user-id="profileUserId" class="conversation-status conversation-status-treeview status-fadein panel-body" @@ -42,10 +41,8 @@ :pinned-status-ids-object="pinnedStatusIdsObject" :profile-user-id="profileUserId" - :is-focused-function="isFocusedFunction" :get-replies="getReplies" - :highlight="highlight" - :set-highlight="setHighlight" + :focused="focused" :toggle-expanded="toggleExpanded" :simple="simple"