pleroma-fe

commit: 244174a32b94c1373847f0ea20bb6127de5ef222
parent 22bdcda9c0a9869f8a09507bb60215b8a5af709a
Author: Tusooa Zhu <tusooa@kazv.moe>
Date:   Sun,  5 Sep 2021 11:16:48 -0400

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).

Diffstat:
M
src/components/conversation/conversation.js
8
++++++++
M
src/components/conversation/conversation.vue
12
+++++++++---

2 files changed, 17 insertions(+), 3 deletions(-)
diff --git a/src/components/conversation/conversation.js b/src/components/conversation/conversation.js
@@ -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
diff --git a/src/components/conversation/conversation.vue b/src/components/conversation/conversation.vue
@@ -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