therwi/sunkkoma
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Implement thread folding/expanding

Browse source
This commit is contained in:
Tusooa Zhu 2021-08-07 00:33:06 -04:00
parent 0582f19e7c
commit 0f2fd8a352
No known key found for this signature in database
GPG key ID: 7B467EDE43A08224
6 changed files with 180 additions and 14 deletions
Download patch file Download diff file Expand all files Collapse all files

35
src/components/thread_tree/thread_tree.vue
View file

@ -13,18 +13,23 @@
:replies="getReplies(status.id)"
:in-profile="inProfile"
:profile-user-id="profileUserId"
class="conversation-status status-fadein panel-body"
class="conversation-status conversation-status-treeview status-fadein panel-body"
:controlled-thread-display-status="threadDisplayStatus[status.id]"
:controlled-toggle-thread-display="() => toggleThreadDisplay(status.id)"
@goto="setHighlight"
@toggleExpanded="toggleExpanded"
/>
<div
v-if="currentReplies.length"
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"
@ -40,16 +45,40 @@
:set-highlight="setHighlight"
:toggle-expanded="toggleExpanded"
class="conversation-status status-fadein panel-body"
:toggle-thread-display="toggleThreadDisplay"
:thread-display-status="threadDisplayStatus"
:show-thread-recursively="showThreadRecursively"
:total-reply-count="totalReplyCount"
:total-reply-depth="totalReplyDepth"
/>
</div>
<div
v-if="currentReplies.length && !threadShowing"
class="thread-tree-replies thread-tree-replies-hidden"
>
<button
class="button-unstyled -link thread-tree-show-replies-button"
@click="showThreadRecursively(status.id)"
>
{{ $t('status.thread_show_full', { numStatus: totalReplyCount[status.id], depth: totalReplyDepth[status.id] }) }}
</button>
</div>
</div>
</template>
<script src="./thread_tree.js"></script>
<style lang="scss">
@import '../../_variables.scss';
.thread-tree-replies {
margin-left: 1em;
}
.thread-tree-replies-hidden {
padding: 1em;
border-bottom: 1px solid var(--border, #222);
}
.conversation-status.conversation-status-treeview:last-child,
.Conversation.-expanded .conversation-status.conversation-status-treeview:last-child {
border-bottom: 1px solid var(--border, #222);
}
</style>