logo

pleroma-fe

My custom branche(s) on git.pleroma.social/pleroma/pleroma-fe git clone https://hacktivis.me/git/pleroma-fe.git
commit: d15d24c11c57ecfc49705af648b1e8f73caec51e
parent 31c4300456192582786a7f5da420f7ce834a3e2b
Author: Tusooa Zhu <tusooa@kazv.moe>
Date:   Sat,  7 Aug 2021 14:11:34 -0400

Add dive functionality

Diffstat:

Msrc/components/conversation/conversation.js69+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++----------
Msrc/components/conversation/conversation.vue15++++++++++++++-
Msrc/components/status/status.vue2+-
Msrc/components/thread_tree/thread_tree.js3++-
Msrc/components/thread_tree/thread_tree.vue5++++-
5 files changed, 80 insertions(+), 14 deletions(-)

diff --git a/src/components/conversation/conversation.js b/src/components/conversation/conversation.js @@ -5,12 +5,14 @@ import ThreadTree from '../thread_tree/thread_tree.vue' import { library } from '@fortawesome/fontawesome-svg-core' import { faAngleDoubleDown, - faAngleDoubleLeft + faAngleDoubleLeft, + faChevronLeft } from '@fortawesome/free-solid-svg-icons' library.add( faAngleDoubleDown, - faAngleDoubleLeft + faAngleDoubleLeft, + faChevronLeft ) // const debug = console.log @@ -53,7 +55,7 @@ const conversation = { expanded: false, threadDisplayStatusObject: {}, // id => 'showing' | 'hidden' statusContentPropertiesObject: {}, - diveRoot: null + diveHistory: [] } }, props: [ @@ -120,6 +122,14 @@ const conversation = { return sortAndFilterConversation(conversation, this.status) }, + conversationDive () { + }, + statusMap () { + return this.conversation.reduce((res, s) => { + res[s.id] = s + return res + }, {}) + }, threadTree () { const reverseLookupTable = this.conversation.reduce((table, status, index) => { table[status.id] = index @@ -208,16 +218,19 @@ const conversation = { return topLevel }, showingTopLevel () { - if (this.diveRoot) { - return [this.conversation.filter(k => this.diveRoot === k.id)[0]] + if (this.canDive && this.diveRoot) { + return [this.statusMap[this.diveRoot]] } return this.topLevel }, + diveRoot () { + return this.diveHistory[this.diveHistory.length - 1] + }, diveDepth () { - return this.diveRoot ? this.depths[this.diveRoot] : 0 + return this.canDive && this.diveRoot ? this.depths[this.diveRoot] : 0 }, diveMode () { - return !!this.diveRoot + return this.canDive && !!this.diveRoot }, replies () { let i = 1 @@ -252,7 +265,7 @@ const conversation = { if (this.threadDisplayStatusObject[id]) { return this.threadDisplayStatusObject[id] } - if (depth <= this.maxDepthToShowByDefault) { + if ((depth - this.diveDepth) <= this.maxDepthToShowByDefault) { return 'showing' } else { return 'hidden' @@ -281,6 +294,9 @@ const conversation = { a[id] = props return a }, {}) + }, + canDive () { + return this.isTreeView && this.isExpanded } }, components: { @@ -310,6 +326,25 @@ const conversation = { } }, methods: { + conversationFetched () { + if (!this.isExpanded) { + return + } + + if (!this._diven) { + if (!this.threadDisplayStatus[this.statusId]) { + return + } + this._diven = true + const parentOrSelf = this.parentOrSelf(this.originalStatusId) + console.log( + 'this.threadDisplayStatus ', this.threadDisplayStatus, + 'this.statusId', this.statusId) + if (this.threadDisplayStatus[this.statusId] === 'hidden') { + this.diveIntoStatus(parentOrSelf) + } + } + }, fetchConversation () { if (this.status) { this.$store.state.api.backendInteractor.fetchConversation({ id: this.statusId }) @@ -318,6 +353,7 @@ const conversation = { this.$store.dispatch('addNewStatuses', { statuses: descendants }) this.setHighlight(this.originalStatusId) }) + .then(this.conversationFetched) } else { this.$store.state.api.backendInteractor.fetchStatus({ id: this.statusId }) .then((status) => { @@ -385,10 +421,23 @@ const conversation = { this.setStatusContentProperty(id, name, !this.statusContentProperties[id][name]) }, diveIntoStatus (id) { - this.diveRoot = id + this.diveHistory = [...this.diveHistory, id] + }, + diveBack () { + this.diveHistory = [...this.diveHistory.slice(0, this.diveHistory.length - 1)] }, undive () { - this.diveRoot = null + this.diveHistory = [] + }, + statusById (id) { + return this.statusMap[id] + }, + parentOf (id) { + const { in_reply_to_status_id: parentId } = this.statusById(id) + return parentId + }, + parentOrSelf (id) { + return this.parentOf(id) || id } } } diff --git a/src/components/conversation/conversation.vue b/src/components/conversation/conversation.vue @@ -31,6 +31,19 @@ <FAIcon icon="angle-double-left" /> </i18n> </div> + <div + v-if="diveMode" + class="conversation-undive-box" + > + <i18n + path="status.return_to_last_showing" + tag="button" + class="button-unstyled -link" + @click.prevent="diveBack" + > + <FAIcon icon="chevron-left" /> + </i18n> + </div> <div v-if="isTreeView"> <thread-tree v-for="status in showingTopLevel" @@ -60,7 +73,7 @@ :status-content-properties="statusContentProperties" :set-status-content-property="setStatusContentProperty" :toggle-status-content-property="toggleStatusContentProperty" - :dive="diveIntoStatus" + :dive="canDive ? diveIntoStatus : undefined" /> </div> <div v-if="isLinearView"> diff --git a/src/components/status/status.vue b/src/components/status/status.vue @@ -220,7 +220,7 @@ /> </button> <button - v-if="inThreadForest && replies && replies.length" + v-if="inThreadForest && replies && replies.length && toggleThreadDisplay" class="button-unstyled" :title="threadShowing ? $t('status.thread_hide') : $t('status.thread_show')" :aria-expanded="threadShowing ? 'true' : 'false'" diff --git a/src/components/thread_tree/thread_tree.js b/src/components/thread_tree/thread_tree.js @@ -1,6 +1,7 @@ import Status from '../status/status.vue' -const debug = console.log +// const debug = console.log +const debug = () => {} const ThreadTree = { components: { diff --git a/src/components/thread_tree/thread_tree.vue b/src/components/thread_tree/thread_tree.vue @@ -74,7 +74,10 @@ class="button-unstyled -link thread-tree-show-replies-button" @click.prevent="showThreadRecursively(status.id)" > - <FAIcon place="icon" icon="angle-double-down" /> + <FAIcon + place="icon" + icon="angle-double-down" + /> <span place="text"> {{ $tc('status.thread_show_full', totalReplyCount[status.id], { numStatus: totalReplyCount[status.id], depth: totalReplyDepth[status.id] }) }} </span>