logo

pleroma-fe

My custom branche(s) on git.pleroma.social/pleroma/pleroma-fe git clone https://hacktivis.me/git/pleroma-fe.git

thread_tree.vue (4563B)

    

  1. <template>
  2.   <article class="thread-tree">
  3.     <status
  4.       :key="status.id"
  5.       ref="statusComponent"
  6.       :inline-expanded="collapsable && isExpanded"
  7.       :statusoid="status"
  8.       :expandable="!isExpanded"
  9.       :show-pinned="pinnedStatusIdsObject && pinnedStatusIdsObject[status.id]"
  10.       :focused="focused(status.id)"
  11.       :in-conversation="isExpanded"
  12.       :highlight="highlight"
  13.       :replies="getReplies(status.id)"
  14.       :in-profile="inProfile"
  15.       :profile-user-id="profileUserId"
  16.       class="conversation-status conversation-status-treeview status-fadein panel-body"
  18.       :simple-tree="simple"
  19.       :controlled-thread-display-status="threadDisplayStatus[status.id]"
  20.       :controlled-toggle-thread-display="() => toggleThreadDisplay(status.id)"
  22.       :controlled-showing-tall="currentProp.showingTall"
  23.       :controlled-expanding-subject="currentProp.expandingSubject"
  24.       :controlled-showing-long-subject="currentProp.showingLongSubject"
  25.       :controlled-replying="currentProp.replying"
  26.       :controlled-media-playing="currentProp.mediaPlaying"
  27.       :controlled-toggle-showing-tall="() => toggleCurrentProp('showingTall')"
  28.       :controlled-toggle-expanding-subject="() => toggleCurrentProp('expandingSubject')"
  29.       :controlled-toggle-showing-long-subject="() => toggleCurrentProp('showingLongSubject')"
  30.       :controlled-toggle-replying="() => toggleCurrentProp('replying')"
  31.       :controlled-set-media-playing="(newVal) => setCurrentProp('mediaPlaying', newVal)"
  32.       :dive="dive ? () => dive(status.id) : undefined"
  34.       @goto="setHighlight"
  35.       @toggleExpanded="toggleExpanded"
  36.     />
  37.     <div
  38.       v-if="currentReplies.length && threadShowing"
  39.       class="thread-tree-replies"
  40.     >
  41.       <thread-tree
  42.         v-for="replyStatus in currentReplies"
  43.         :key="replyStatus.id"
  44.         ref="childComponent"
  45.         :depth="depth + 1"
  46.         :status="replyStatus"
  48.         :in-profile="inProfile"
  49.         :conversation="conversation"
  50.         :collapsable="collapsable"
  51.         :is-expanded="isExpanded"
  52.         :pinned-status-ids-object="pinnedStatusIdsObject"
  53.         :profile-user-id="profileUserId"
  55.         :focused="focused"
  56.         :get-replies="getReplies"
  57.         :highlight="highlight"
  58.         :set-highlight="setHighlight"
  59.         :toggle-expanded="toggleExpanded"
  61.         :simple="simple"
  62.         :toggle-thread-display="toggleThreadDisplay"
  63.         :thread-display-status="threadDisplayStatus"
  64.         :show-thread-recursively="showThreadRecursively"
  65.         :total-reply-count="totalReplyCount"
  66.         :total-reply-depth="totalReplyDepth"
  67.         :status-content-properties="statusContentProperties"
  68.         :set-status-content-property="setStatusContentProperty"
  69.         :toggle-status-content-property="toggleStatusContentProperty"
  70.         :dive="dive"
  71.       />
  72.     </div>
  73.     <div
  74.       v-if="currentReplies.length && !threadShowing"
  75.       class="thread-tree-replies thread-tree-replies-hidden"
  76.     >
  77.       <i18n-t
  78.         v-if="simple"
  79.         scope="global"
  80.         tag="button"
  81.         keypath="status.thread_follow_with_icon"
  82.         class="button-unstyled -link thread-tree-show-replies-button"
  83.         @click.prevent="dive(status.id)"
  84.       >
  85.         <template #icon>
  86.           <FAIcon
  87.             icon="angle-double-right"
  88.           />
  89.         </template>
  90.         <template #text>
  91.           <span>
  92.             {{ $tc('status.thread_follow', totalReplyCount[status.id], { numStatus: totalReplyCount[status.id] }) }}
  93.           </span>
  94.         </template>
  95.       </i18n-t>
  96.       <i18n-t
  97.         v-else
  98.         scope="global"
  99.         tag="button"
  100.         keypath="status.thread_show_full_with_icon"
  101.         class="button-unstyled -link thread-tree-show-replies-button"
  102.         @click.prevent="showThreadRecursively(status.id)"
  103.       >
  104.         <template #icon>
  105.           <FAIcon
  106.             icon="angle-double-down"
  107.           />
  108.         </template>
  109.         <template #text>
  110.           <span>
  111.             {{ $tc('status.thread_show_full', totalReplyCount[status.id], { numStatus: totalReplyCount[status.id], depth: totalReplyDepth[status.id] }) }}
  112.           </span>
  113.         </template>
  114.       </i18n-t>
  115.     </div>
  116.   </article>
  117. </template>
  119. <script src="./thread_tree.js"></script>
  121. <style lang="scss">
  122. .thread-tree-replies {
  123.   margin-left: var(--status-margin);
  124.   border-left: 2px solid var(--border);
  125. }
  127. .thread-tree-replies-hidden {
  128.   padding: var(--status-margin);
  130.   /* Make the button stretch along the whole row */
  131.   display: flex;
  132.   align-items: stretch;
  133.   flex-direction: column;
  134. }
  135. </style>