Improve "show full conversation" interaction

Now we only show that button when there are other statuses out of sight
(other toplevel statuses exist outside of the current thread tree).
This commit is contained in:
Tusooa Zhu 2021-09-05 11:16:48 -04:00
parent 22bdcda9c0
commit 244174a32b
No known key found for this signature in database
GPG key ID: 7B467EDE43A08224
2 changed files with 17 additions and 3 deletions

View file

@ -224,6 +224,9 @@ const conversation = {
debug('toplevel =', topLevel) debug('toplevel =', topLevel)
return topLevel return topLevel
}, },
otherTopLevelCount () {
return this.topLevel.length - 1
},
showingTopLevel () { showingTopLevel () {
if (this.canDive && this.diveRoot) { if (this.canDive && this.diveRoot) {
return [this.statusMap[this.diveRoot]] return [this.statusMap[this.diveRoot]]
@ -242,6 +245,11 @@ const conversation = {
diveMode () { diveMode () {
return this.canDive && !!this.diveRoot return this.canDive && !!this.diveRoot
}, },
shouldShowAllConversationButton () {
// The "show all conversation" button tells the user that there exist
// other toplevel statuses, so do not show it if there is only a single root
return this.diveMode && this.topLevel.length > 1
},
replies () { replies () {
let i = 1 let i = 1
// eslint-disable-next-line camelcase // eslint-disable-next-line camelcase

View file

@ -20,16 +20,22 @@
</div> </div>
<div class="conversation-body panel-body"> <div class="conversation-body panel-body">
<div <div
v-if="diveMode" v-if="shouldShowAllConversationButton"
class="conversation-dive-to-top-level-box" class="conversation-dive-to-top-level-box"
> >
<i18n <i18n
path="status.show_all_conversation" path="status.show_all_conversation_with_icon"
tag="button" tag="button"
class="button-unstyled -link" class="button-unstyled -link"
@click.prevent="diveToTopLevel" @click.prevent="diveToTopLevel"
> >
<FAIcon icon="angle-double-left" /> <FAIcon
place="icon"
icon="angle-double-left"
/>
<span place="text">
{{ $tc('status.show_all_conversation', otherTopLevelCount, { numStatus: otherTopLevelCount }) }}
</span>
</i18n> </i18n>
</div> </div>
<div <div