Support diving into one status in a conversation

This commit is contained in:
Tusooa Zhu 2021-08-07 11:59:10 -04:00
parent ace1f5067c
commit 84a3cd92a3
No known key found for this signature in database
GPG key ID: 7B467EDE43A08224
6 changed files with 94 additions and 13 deletions

View file

@ -2,6 +2,17 @@ import { reduce, filter, findIndex, clone, get } from 'lodash'
import Status from '../status/status.vue' import Status from '../status/status.vue'
import ThreadTree from '../thread_tree/thread_tree.vue' import ThreadTree from '../thread_tree/thread_tree.vue'
import { library } from '@fortawesome/fontawesome-svg-core'
import {
faAngleDoubleDown,
faAngleDoubleLeft
} from '@fortawesome/free-solid-svg-icons'
library.add(
faAngleDoubleDown,
faAngleDoubleLeft
)
// const debug = console.log // const debug = console.log
const debug = () => {} const debug = () => {}
@ -41,7 +52,8 @@ const conversation = {
highlight: null, highlight: null,
expanded: false, expanded: false,
threadDisplayStatusObject: {}, // id => 'showing' | 'hidden' threadDisplayStatusObject: {}, // id => 'showing' | 'hidden'
statusContentPropertiesObject: {} statusContentPropertiesObject: {},
diveRoot: null
} }
}, },
props: [ props: [
@ -195,6 +207,18 @@ const conversation = {
debug("toplevel =", topLevel) debug("toplevel =", topLevel)
return topLevel return topLevel
}, },
showingTopLevel () {
if (this.diveRoot) {
return [this.conversation.filter(k => this.diveRoot === k.id)[0]]
}
return this.topLevel
},
diveDepth () {
return this.diveRoot ? this.depths[this.diveRoot] : 0
},
diveMode () {
return !!this.diveRoot
},
replies () { replies () {
let i = 1 let i = 1
// eslint-disable-next-line camelcase // eslint-disable-next-line camelcase
@ -359,6 +383,12 @@ const conversation = {
}, },
toggleStatusContentProperty (id, name) { toggleStatusContentProperty (id, name) {
this.setStatusContentProperty(id, name, !this.statusContentProperties[id][name]) this.setStatusContentProperty(id, name, !this.statusContentProperties[id][name])
},
diveIntoStatus (id) {
this.diveRoot = id
},
undive () {
this.diveRoot = null
} }
} }
} }

View file

@ -18,9 +18,22 @@
{{ $t('timeline.collapse') }} {{ $t('timeline.collapse') }}
</button> </button>
</div> </div>
<div
v-if="diveMode"
class="conversation-undive-box"
>
<i18n
path="status.show_all_conversation"
tag="button"
class="button-unstyled -link"
@click.prevent="undive"
>
<FAIcon icon="angle-double-left" />
</i18n>
</div>
<div v-if="isTreeView"> <div v-if="isTreeView">
<thread-tree <thread-tree
v-for="status in topLevel" v-for="status in showingTopLevel"
:key="status.id" :key="status.id"
ref="statusComponent" ref="statusComponent"
:depth="0" :depth="0"
@ -47,6 +60,7 @@
:status-content-properties="statusContentProperties" :status-content-properties="statusContentProperties"
:set-status-content-property="setStatusContentProperty" :set-status-content-property="setStatusContentProperty"
:toggle-status-content-property="toggleStatusContentProperty" :toggle-status-content-property="toggleStatusContentProperty"
:dive="diveIntoStatus"
/> />
</div> </div>
<div v-if="isLinearView"> <div v-if="isLinearView">
@ -65,6 +79,16 @@
:in-profile="inProfile" :in-profile="inProfile"
:profile-user-id="profileUserId" :profile-user-id="profileUserId"
class="conversation-status status-fadein panel-body" class="conversation-status status-fadein panel-body"
:toggle-thread-display="toggleThreadDisplay"
:thread-display-status="threadDisplayStatus"
:show-thread-recursively="showThreadRecursively"
:total-reply-count="totalReplyCount"
:total-reply-depth="totalReplyDepth"
:status-content-properties="statusContentProperties"
:set-status-content-property="setStatusContentProperty"
:toggle-status-content-property="toggleStatusContentProperty"
@goto="setHighlight" @goto="setHighlight"
@toggleExpanded="toggleExpanded" @toggleExpanded="toggleExpanded"
/> />
@ -82,6 +106,10 @@
@import '../../_variables.scss'; @import '../../_variables.scss';
.Conversation { .Conversation {
.conversation-undive-box {
padding: 1em;
}
.conversation-undive-box,
.conversation-status { .conversation-status {
border-bottom-width: 1px; border-bottom-width: 1px;
border-bottom-style: solid; border-bottom-style: solid;

View file

@ -36,8 +36,9 @@ import {
faEyeSlash, faEyeSlash,
faEye, faEye,
faThumbtack, faThumbtack,
faAngleDoubleUp, faChevronUp,
faAngleDoubleDown faChevronDown,
faAngleDoubleRight
} from '@fortawesome/free-solid-svg-icons' } from '@fortawesome/free-solid-svg-icons'
library.add( library.add(
@ -55,8 +56,9 @@ library.add(
faEyeSlash, faEyeSlash,
faEye, faEye,
faThumbtack, faThumbtack,
faAngleDoubleUp, faChevronUp,
faAngleDoubleDown faChevronDown,
faAngleDoubleRight
) )
const Status = { const Status = {
@ -103,7 +105,8 @@ const Status = {
'controlledExpandingSubject', 'controlledExpandingSubject',
'controlledToggleExpandingSubject', 'controlledToggleExpandingSubject',
'controlledShowingLongSubject', 'controlledShowingLongSubject',
'controlledToggleShowingLongSubject' 'controlledToggleShowingLongSubject',
'dive'
], ],
data () { data () {
return { return {

View file

@ -229,7 +229,19 @@
<FAIcon <FAIcon
fixed-width fixed-width
class="fa-scale-110" class="fa-scale-110"
:icon="threadShowing ? 'angle-double-up' : 'angle-double-down'" :icon="threadShowing ? 'chevron-up' : 'chevron-down'"
/>
</button>
<button
v-if="dive"
class="button-unstyled"
:title="$t('status.show_only_conversation_under_this')"
@click.prevent="dive"
>
<FAIcon
fixed-width
class="fa-scale-110"
:icon="'angle-double-right'"
/> />
</button> </button>
</span> </span>

View file

@ -31,7 +31,8 @@ const ThreadTree = {
totalReplyDepth: Object, totalReplyDepth: Object,
statusContentProperties: Object, statusContentProperties: Object,
setStatusContentProperty: Function, setStatusContentProperty: Function,
toggleStatusContentProperty: Function toggleStatusContentProperty: Function,
dive: Function
}, },
computed: { computed: {
reverseLookupTable () { reverseLookupTable () {

View file

@ -24,6 +24,7 @@
:controlled-toggle-showing-tall="() => toggleCurrentProp('ShowingTall')" :controlled-toggle-showing-tall="() => toggleCurrentProp('ShowingTall')"
:controlled-toggle-expanding-subject="() => toggleCurrentProp('expandingSubject')" :controlled-toggle-expanding-subject="() => toggleCurrentProp('expandingSubject')"
:controlled-toggle-showing-long-subject="() => toggleCurrentProp('showingLongSubject')" :controlled-toggle-showing-long-subject="() => toggleCurrentProp('showingLongSubject')"
:dive="dive ? () => dive(status.id) : undefined"
@goto="setHighlight" @goto="setHighlight"
@toggleExpanded="toggleExpanded" @toggleExpanded="toggleExpanded"
@ -60,18 +61,24 @@
:status-content-properties="statusContentProperties" :status-content-properties="statusContentProperties"
:set-status-content-property="setStatusContentProperty" :set-status-content-property="setStatusContentProperty"
:toggle-status-content-property="toggleStatusContentProperty" :toggle-status-content-property="toggleStatusContentProperty"
:dive="dive"
/> />
</div> </div>
<div <div
v-if="currentReplies.length && !threadShowing" v-if="currentReplies.length && !threadShowing"
class="thread-tree-replies thread-tree-replies-hidden" class="thread-tree-replies thread-tree-replies-hidden"
> >
<button <i18n
tag="button"
path="status.thread_show_full_with_icon"
class="button-unstyled -link thread-tree-show-replies-button" class="button-unstyled -link thread-tree-show-replies-button"
@click="showThreadRecursively(status.id)" @click.prevent="showThreadRecursively(status.id)"
> >
{{ $tc('status.thread_show_full', totalReplyCount[status.id], { numStatus: totalReplyCount[status.id], depth: totalReplyDepth[status.id] }) }} <FAIcon place="icon" icon="angle-double-down" />
</button> <span place="text">
{{ $tc('status.thread_show_full', totalReplyCount[status.id], { numStatus: totalReplyCount[status.id], depth: totalReplyDepth[status.id] }) }}
</span>
</i18n>
</div> </div>
</div> </div>
</template> </template>