forked from srxl/akkoma-fe
Add simple tree style navigation
This commit is contained in:
parent
8c0deb905e
commit
d9a9f97751
8 changed files with 113 additions and 20 deletions
|
@ -80,7 +80,10 @@ const conversation = {
|
|||
return this.$store.state.config.conversationDisplay
|
||||
},
|
||||
isTreeView () {
|
||||
return this.displayStyle === 'tree'
|
||||
return this.displayStyle === 'tree' || this.displayStyle === 'simple_tree'
|
||||
},
|
||||
treeViewIsSimple () {
|
||||
return this.displayStyle === 'simple_tree'
|
||||
},
|
||||
isLinearView () {
|
||||
return this.displayStyle === 'linear'
|
||||
|
@ -297,6 +300,14 @@ const conversation = {
|
|||
},
|
||||
canDive () {
|
||||
return this.isTreeView && this.isExpanded
|
||||
},
|
||||
focused () {
|
||||
return (id) => {
|
||||
return (this.isExpanded) && id === this.highlight
|
||||
}
|
||||
},
|
||||
maybeHighlight () {
|
||||
return this.isExpanded ? this.highlight : null
|
||||
}
|
||||
},
|
||||
components: {
|
||||
|
@ -316,6 +327,9 @@ const conversation = {
|
|||
expanded (value) {
|
||||
if (value) {
|
||||
this.fetchConversation()
|
||||
} else {
|
||||
// if we collapse it, we should reset the dive
|
||||
this._diven = false
|
||||
}
|
||||
},
|
||||
virtualHidden (value) {
|
||||
|
@ -323,6 +337,9 @@ const conversation = {
|
|||
'setVirtualHeight',
|
||||
{ statusId: this.statusId, height: `${this.$el.clientHeight}px` }
|
||||
)
|
||||
},
|
||||
highlight (value, old) {
|
||||
console.log('highlight:', old, ' => ', value)
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
@ -341,7 +358,8 @@ const conversation = {
|
|||
'this.threadDisplayStatus ', this.threadDisplayStatus,
|
||||
'this.statusId', this.statusId)
|
||||
if (this.threadDisplayStatus[this.statusId] === 'hidden') {
|
||||
this.diveIntoStatus(parentOrSelf)
|
||||
this.diveIntoStatus(parentOrSelf, /* preventScroll */ true)
|
||||
this.tryScrollTo(this.statusId)
|
||||
}
|
||||
}
|
||||
},
|
||||
|
@ -365,18 +383,16 @@ const conversation = {
|
|||
getReplies (id) {
|
||||
return this.replies[id] || []
|
||||
},
|
||||
focused (id) {
|
||||
return (this.isExpanded) && id === this.statusId
|
||||
getHighlight () {
|
||||
return this.isExpanded ? this.highlight : null
|
||||
},
|
||||
setHighlight (id) {
|
||||
console.log('setHighlight', id)
|
||||
if (!id) return
|
||||
this.highlight = id
|
||||
this.$store.dispatch('fetchFavsAndRepeats', id)
|
||||
this.$store.dispatch('fetchEmojiReactionsBy', id)
|
||||
},
|
||||
getHighlight () {
|
||||
return this.isExpanded ? this.highlight : null
|
||||
},
|
||||
toggleExpanded () {
|
||||
this.expanded = !this.expanded
|
||||
},
|
||||
|
@ -420,14 +436,52 @@ const conversation = {
|
|||
toggleStatusContentProperty (id, name) {
|
||||
this.setStatusContentProperty(id, name, !this.statusContentProperties[id][name])
|
||||
},
|
||||
diveIntoStatus (id) {
|
||||
leastShowingAncestor (id) {
|
||||
let cur = id
|
||||
let parent = this.parentOf(cur)
|
||||
while (cur) {
|
||||
// if the parent is showing it means cur is visible
|
||||
if (this.threadDisplayStatus[parent] === 'showing') {
|
||||
return cur
|
||||
}
|
||||
parent = this.parentOf(parent)
|
||||
cur = this.parentOf(cur)
|
||||
}
|
||||
// nothing found, fall back to toplevel
|
||||
return topLevel[0].id
|
||||
},
|
||||
diveIntoStatus (id, preventScroll) {
|
||||
this.diveHistory = [...this.diveHistory, id]
|
||||
if (!preventScroll) {
|
||||
this.goToCurrent()
|
||||
}
|
||||
},
|
||||
diveBack () {
|
||||
const oldHighlight = this.highlight
|
||||
this.diveHistory = [...this.diveHistory.slice(0, this.diveHistory.length - 1)]
|
||||
if (oldHighlight) {
|
||||
this.tryScrollTo(this.leastShowingAncestor(oldHighlight))
|
||||
}
|
||||
},
|
||||
undive () {
|
||||
const oldHighlight = this.highlight
|
||||
this.diveHistory = []
|
||||
if (oldHighlight) {
|
||||
this.tryScrollTo(this.leastShowingAncestor(oldHighlight))
|
||||
} else {
|
||||
this.goToCurrent()
|
||||
}
|
||||
},
|
||||
tryScrollTo (id) {
|
||||
if (this.isPage) {
|
||||
// set statusId
|
||||
this.$router.push({ name: 'conversation', params: { id } })
|
||||
}
|
||||
|
||||
this.setHighlight(id)
|
||||
},
|
||||
goToCurrent () {
|
||||
this.tryScrollTo(this.diveRoot || this.topLevel[0].id)
|
||||
},
|
||||
statusById (id) {
|
||||
return this.statusMap[id]
|
||||
|
|
|
@ -61,10 +61,11 @@
|
|||
|
||||
:focused="focused"
|
||||
:get-replies="getReplies"
|
||||
:get-highlight="getHighlight"
|
||||
:highlight="maybeHighlight"
|
||||
:set-highlight="setHighlight"
|
||||
:toggle-expanded="toggleExpanded"
|
||||
|
||||
:simple="treeViewIsSimple"
|
||||
:toggle-thread-display="toggleThreadDisplay"
|
||||
:thread-display-status="threadDisplayStatus"
|
||||
:show-thread-recursively="showThreadRecursively"
|
||||
|
|
|
@ -20,7 +20,7 @@ const GeneralTab = {
|
|||
value: mode,
|
||||
label: this.$t(`settings.subject_line_${mode === 'masto' ? 'mastodon' : mode}`)
|
||||
})),
|
||||
conversationDisplayOptions: ['tree', 'linear'].map(mode => ({
|
||||
conversationDisplayOptions: ['tree', 'simple_tree', 'linear'].map(mode => ({
|
||||
key: mode,
|
||||
value: mode,
|
||||
label: this.$t(`settings.conversation_display_${mode}`)
|
||||
|
|
|
@ -97,6 +97,7 @@ const Status = {
|
|||
'inProfile',
|
||||
'profileUserId',
|
||||
|
||||
'simpleTree',
|
||||
'controlledThreadDisplayStatus',
|
||||
'controlledToggleThreadDisplay',
|
||||
|
||||
|
@ -379,10 +380,9 @@ const Status = {
|
|||
},
|
||||
toggleThreadDisplay () {
|
||||
this.controlledToggleThreadDisplay()
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
'highlight': function (id) {
|
||||
scrollIfHighlighted (highlightId) {
|
||||
const id = highlightId
|
||||
if (this.status.id === id) {
|
||||
let rect = this.$el.getBoundingClientRect()
|
||||
if (rect.top < 100) {
|
||||
|
@ -396,6 +396,14 @@ const Status = {
|
|||
window.scrollBy(0, rect.bottom - window.innerHeight + 50)
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.scrollIfHighlighted(this.highlight)
|
||||
},
|
||||
watch: {
|
||||
'highlight': function (id) {
|
||||
this.scrollIfHighlighted(id)
|
||||
},
|
||||
'status.repeat_num': function (num) {
|
||||
// refetch repeats when repeat_num is changed in any way
|
||||
|
|
|
@ -220,7 +220,7 @@
|
|||
/>
|
||||
</button>
|
||||
<button
|
||||
v-if="inThreadForest && replies && replies.length && toggleThreadDisplay"
|
||||
v-if="inThreadForest && replies && replies.length && !simpleTree"
|
||||
class="button-unstyled"
|
||||
:title="threadShowing ? $t('status.thread_hide') : $t('status.thread_show')"
|
||||
:aria-expanded="threadShowing ? 'true' : 'false'"
|
||||
|
@ -233,7 +233,7 @@
|
|||
/>
|
||||
</button>
|
||||
<button
|
||||
v-if="dive"
|
||||
v-if="dive && !simpleTree"
|
||||
class="button-unstyled"
|
||||
:title="$t('status.show_only_conversation_under_this')"
|
||||
@click.prevent="dive"
|
||||
|
|
|
@ -1,5 +1,16 @@
|
|||
import Status from '../status/status.vue'
|
||||
|
||||
import { library } from '@fortawesome/fontawesome-svg-core'
|
||||
import {
|
||||
faAngleDoubleDown,
|
||||
faAngleDoubleRight
|
||||
} from '@fortawesome/free-solid-svg-icons'
|
||||
|
||||
library.add(
|
||||
faAngleDoubleDown,
|
||||
faAngleDoubleRight
|
||||
)
|
||||
|
||||
// const debug = console.log
|
||||
const debug = () => {}
|
||||
|
||||
|
@ -19,11 +30,12 @@ const ThreadTree = {
|
|||
profileUserId: String,
|
||||
|
||||
focused: Function,
|
||||
getHighlight: Function,
|
||||
highlight: String,
|
||||
getReplies: Function,
|
||||
setHighlight: Function,
|
||||
toggleExpanded: Function,
|
||||
|
||||
simple: Boolean,
|
||||
// to control display of the whole thread forest
|
||||
toggleThreadDisplay: Function,
|
||||
threadDisplayStatus: Object,
|
||||
|
|
|
@ -9,12 +9,13 @@
|
|||
:show-pinned="pinnedStatusIdsObject && pinnedStatusIdsObject[status.id]"
|
||||
:focused="focused(status.id)"
|
||||
:in-conversation="isExpanded"
|
||||
:highlight="getHighlight()"
|
||||
:highlight="highlight"
|
||||
:replies="getReplies(status.id)"
|
||||
:in-profile="inProfile"
|
||||
:profile-user-id="profileUserId"
|
||||
class="conversation-status conversation-status-treeview status-fadein panel-body"
|
||||
|
||||
:simple-tree="simple"
|
||||
:controlled-thread-display-status="threadDisplayStatus[status.id]"
|
||||
:controlled-toggle-thread-display="() => toggleThreadDisplay(status.id)"
|
||||
|
||||
|
@ -49,10 +50,11 @@
|
|||
|
||||
:focused="focused"
|
||||
:get-replies="getReplies"
|
||||
:get-highlight="getHighlight"
|
||||
:highlight="highlight"
|
||||
:set-highlight="setHighlight"
|
||||
:toggle-expanded="toggleExpanded"
|
||||
|
||||
:simple="simple"
|
||||
:toggle-thread-display="toggleThreadDisplay"
|
||||
:thread-display-status="threadDisplayStatus"
|
||||
:show-thread-recursively="showThreadRecursively"
|
||||
|
@ -69,6 +71,22 @@
|
|||
class="thread-tree-replies thread-tree-replies-hidden"
|
||||
>
|
||||
<i18n
|
||||
v-if="simple"
|
||||
tag="button"
|
||||
path="status.thread_follow_with_icon"
|
||||
class="button-unstyled -link thread-tree-show-replies-button"
|
||||
@click.prevent="dive(status.id)"
|
||||
>
|
||||
<FAIcon
|
||||
place="icon"
|
||||
icon="angle-double-right"
|
||||
/>
|
||||
<span place="text">
|
||||
{{ $tc('status.thread_follow', totalReplyCount[status.id], { numStatus: totalReplyCount[status.id] }) }}
|
||||
</span>
|
||||
</i18n>
|
||||
<i18n
|
||||
v-else
|
||||
tag="button"
|
||||
path="status.thread_show_full_with_icon"
|
||||
class="button-unstyled -link thread-tree-show-replies-button"
|
||||
|
|
|
@ -53,7 +53,7 @@ const defaultState = {
|
|||
theme: 'pleroma-dark',
|
||||
virtualScrolling: true,
|
||||
sensitiveByDefault: false,
|
||||
conversationDisplay: 'tree',
|
||||
conversationDisplay: 'simple_tree',
|
||||
|
||||
// Nasty stuff
|
||||
customEmoji: [],
|
||||
|
|
Loading…
Reference in a new issue