forked from AkkomaGang/akkoma-fe
78f573af47
$refs is not a reliable way to deal with child components under tree threading as it is not reactive, but the children may change at any time. The only good way seems to be making these states aggregated on the conversation component. Ref: tree-threading
129 lines
4.4 KiB
Vue
129 lines
4.4 KiB
Vue
<template>
|
|
<div class="thread-tree panel-body">
|
|
<status
|
|
:key="status.id"
|
|
ref="statusComponent"
|
|
:inline-expanded="collapsable && isExpanded"
|
|
:statusoid="status"
|
|
:expandable="!isExpanded"
|
|
:show-pinned="pinnedStatusIdsObject && pinnedStatusIdsObject[status.id]"
|
|
:focused="focused(status.id)"
|
|
:in-conversation="isExpanded"
|
|
:highlight="highlight"
|
|
:replies="getReplies(status.id)"
|
|
:in-profile="inProfile"
|
|
:profile-user-id="profileUserId"
|
|
class="conversation-status conversation-status-treeview status-fadein panel-body"
|
|
|
|
:simple-tree="simple"
|
|
:controlled-thread-display-status="threadDisplayStatus[status.id]"
|
|
:controlled-toggle-thread-display="() => toggleThreadDisplay(status.id)"
|
|
|
|
:controlled-showing-tall="currentProp.showingTall"
|
|
:controlled-expanding-subject="currentProp.expandingSubject"
|
|
:controlled-showing-long-subject="currentProp.showingLongSubject"
|
|
:controlled-replying="currentProp.replying"
|
|
:controlled-media-playing="currentProp.mediaPlaying"
|
|
:controlled-toggle-showing-tall="() => toggleCurrentProp('showingTall')"
|
|
:controlled-toggle-expanding-subject="() => toggleCurrentProp('expandingSubject')"
|
|
:controlled-toggle-showing-long-subject="() => toggleCurrentProp('showingLongSubject')"
|
|
:controlled-toggle-replying="() => toggleCurrentProp('replying')"
|
|
:controlled-set-media-playing="(newVal) => setCurrentProp('mediaPlaying', newVal)"
|
|
:dive="dive ? () => dive(status.id) : undefined"
|
|
|
|
@goto="setHighlight"
|
|
@toggleExpanded="toggleExpanded"
|
|
/>
|
|
<div
|
|
v-if="currentReplies.length && threadShowing"
|
|
class="thread-tree-replies"
|
|
>
|
|
<thread-tree
|
|
v-for="replyStatus in currentReplies"
|
|
:key="replyStatus.id"
|
|
ref="childComponent"
|
|
:depth="depth + 1"
|
|
:status="replyStatus"
|
|
|
|
:in-profile="inProfile"
|
|
:conversation="conversation"
|
|
:collapsable="collapsable"
|
|
:is-expanded="isExpanded"
|
|
:pinned-status-ids-object="pinnedStatusIdsObject"
|
|
:profile-user-id="profileUserId"
|
|
|
|
:focused="focused"
|
|
:get-replies="getReplies"
|
|
:highlight="highlight"
|
|
:set-highlight="setHighlight"
|
|
:toggle-expanded="toggleExpanded"
|
|
|
|
:simple="simple"
|
|
: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"
|
|
:dive="dive"
|
|
/>
|
|
</div>
|
|
<div
|
|
v-if="currentReplies.length && !threadShowing"
|
|
class="thread-tree-replies thread-tree-replies-hidden"
|
|
>
|
|
<i18n
|
|
v-if="simple"
|
|
tag="button"
|
|
path="status.thread_follow_with_icon"
|
|
class="button-unstyled -link thread-tree-show-replies-button"
|
|
@click.prevent="dive(status.id)"
|
|
>
|
|
<FAIcon
|
|
place="icon"
|
|
icon="angle-double-right"
|
|
/>
|
|
<span place="text">
|
|
{{ $tc('status.thread_follow', totalReplyCount[status.id], { numStatus: totalReplyCount[status.id] }) }}
|
|
</span>
|
|
</i18n>
|
|
<i18n
|
|
v-else
|
|
tag="button"
|
|
path="status.thread_show_full_with_icon"
|
|
class="button-unstyled -link thread-tree-show-replies-button"
|
|
@click.prevent="showThreadRecursively(status.id)"
|
|
>
|
|
<FAIcon
|
|
place="icon"
|
|
icon="angle-double-down"
|
|
/>
|
|
<span place="text">
|
|
{{ $tc('status.thread_show_full', totalReplyCount[status.id], { numStatus: totalReplyCount[status.id], depth: totalReplyDepth[status.id] }) }}
|
|
</span>
|
|
</i18n>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script src="./thread_tree.js"></script>
|
|
|
|
<style lang="scss">
|
|
@import '../../_variables.scss';
|
|
.thread-tree-replies {
|
|
margin-left: $status-margin;
|
|
border-left: 2px solid var(--border, $fallback--border);
|
|
}
|
|
|
|
.thread-tree-replies-hidden {
|
|
padding: $status-margin;
|
|
//border-top: 1px solid var(--border, $fallback--border);
|
|
/* Make the button stretch along the whole row */
|
|
display: flex;
|
|
align-items: stretch;
|
|
flex-direction: column;
|
|
}
|
|
</style>
|