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 a917bdc34b
commit 00cc721344
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)
return topLevel
},
otherTopLevelCount () {
return this.topLevel.length - 1
},
showingTopLevel () {
if (this.canDive && this.diveRoot) {
return [this.statusMap[this.diveRoot]]
@ -242,6 +245,11 @@ const conversation = {
diveMode () {
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 () {
let i = 1
// eslint-disable-next-line camelcase

View file

@ -20,16 +20,22 @@
</div>
<div class="conversation-body panel-body">
<div
v-if="diveMode"
v-if="shouldShowAllConversationButton"
class="conversation-dive-to-top-level-box"
>
<i18n
path="status.show_all_conversation"
path="status.show_all_conversation_with_icon"
tag="button"
class="button-unstyled -link"
@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>
</div>
<div