akkoma-fe/src/components/thread_tree/thread_tree.vue

134 lines
4.5 KiB
Vue
Raw Normal View History

2021-08-07 00:18:27 +00:00
<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"
2021-08-07 22:53:23 +00:00
:highlight="highlight"
2021-08-07 00:18:27 +00:00
:replies="getReplies(status.id)"
:in-profile="inProfile"
:profile-user-id="profileUserId"
2021-08-07 04:33:06 +00:00
class="conversation-status conversation-status-treeview status-fadein panel-body"
2021-08-07 22:53:23 +00:00
:simple-tree="simple"
2021-08-07 04:33:06 +00:00
:controlled-thread-display-status="threadDisplayStatus[status.id]"
:controlled-toggle-thread-display="() => toggleThreadDisplay(status.id)"
2021-08-07 14:28:45 +00:00
: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')"
2021-08-07 14:28:45 +00:00
: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"
2021-08-07 14:28:45 +00:00
2021-08-07 00:18:27 +00:00
@goto="setHighlight"
@toggleExpanded="toggleExpanded"
/>
<div
2021-08-07 04:33:06 +00:00
v-if="currentReplies.length && threadShowing"
2021-08-07 00:18:27 +00:00
class="thread-tree-replies"
>
<thread-tree
v-for="replyStatus in currentReplies"
:key="replyStatus.id"
ref="childComponent"
2021-08-07 04:33:06 +00:00
:depth="depth + 1"
2021-08-07 00:18:27 +00:00
: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"
2021-08-07 22:53:23 +00:00
:highlight="highlight"
2021-08-07 00:18:27 +00:00
:set-highlight="setHighlight"
:toggle-expanded="toggleExpanded"
2021-08-07 22:53:23 +00:00
:simple="simple"
2021-08-07 04:33:06 +00:00
:toggle-thread-display="toggleThreadDisplay"
:thread-display-status="threadDisplayStatus"
:show-thread-recursively="showThreadRecursively"
:total-reply-count="totalReplyCount"
:total-reply-depth="totalReplyDepth"
2021-08-07 14:28:45 +00:00
:status-content-properties="statusContentProperties"
:set-status-content-property="setStatusContentProperty"
:toggle-status-content-property="toggleStatusContentProperty"
:dive="dive"
2021-08-07 00:18:27 +00:00
/>
</div>
2021-08-07 04:33:06 +00:00
<div
v-if="currentReplies.length && !threadShowing"
class="thread-tree-replies thread-tree-replies-hidden"
>
<i18n-t scope="global"
2021-08-07 22:53:23 +00:00
v-if="simple"
tag="button"
2022-03-23 14:31:34 +00:00
keypath="status.thread_follow_with_icon"
2021-08-07 22:53:23 +00:00
class="button-unstyled -link thread-tree-show-replies-button"
@click.prevent="dive(status.id)"
>
2022-03-23 14:31:34 +00:00
<template #icon>
<FAIcon
icon="angle-double-right"
/>
</template>
<template #text>
<span>
{{ $tc('status.thread_follow', totalReplyCount[status.id], { numStatus: totalReplyCount[status.id] }) }}
</span>
</template>
</i18n-t>
<i18n-t scope="global"
2021-08-07 22:53:23 +00:00
v-else
tag="button"
2022-03-23 14:31:34 +00:00
keypath="status.thread_show_full_with_icon"
2021-08-07 04:33:06 +00:00
class="button-unstyled -link thread-tree-show-replies-button"
@click.prevent="showThreadRecursively(status.id)"
2021-08-07 04:33:06 +00:00
>
2022-03-23 14:31:34 +00:00
<template #icon>
<FAIcon
icon="angle-double-down"
/>
</template>
<template #text>
<span>
{{ $tc('status.thread_show_full', totalReplyCount[status.id], { numStatus: totalReplyCount[status.id], depth: totalReplyDepth[status.id] }) }}
</span>
</template>
</i18n-t>
2021-08-07 04:33:06 +00:00
</div>
2021-08-07 00:18:27 +00:00
</div>
</template>
<script src="./thread_tree.js"></script>
<style lang="scss">
2021-08-07 04:33:06 +00:00
@import '../../_variables.scss';
2021-08-07 00:18:27 +00:00
.thread-tree-replies {
2022-03-08 00:28:38 +00:00
margin-left: var(--status-margin, $status-margin);
border-left: 2px solid var(--border, $fallback--border);
2021-08-07 00:18:27 +00:00
}
2021-08-08 16:40:17 +00:00
2021-08-07 04:33:06 +00:00
.thread-tree-replies-hidden {
2022-03-08 00:28:38 +00:00
padding: var(--status-margin, $status-margin);
/* Make the button stretch along the whole row */
display: flex;
align-items: stretch;
flex-direction: column;
2021-08-07 04:33:06 +00:00
}
2021-08-07 00:18:27 +00:00
</style>