silberengel
/
gitcitadel-online
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

feat: show/hide thread replies 

so that it is easier to read large threads and
connect replies to their parent message
master
DanConwayDev 2 years ago
parent
fe1c6d34cc
commit
2a15e089e5
No known key found for this signature in database
GPG Key ID: 68E15486D73F75E1
4 changed files with 103 additions and 19 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 52
      src/lib/components/events/ThreadWrapper.svelte
  2. 8
      src/lib/components/icons.ts
  3. 2
      src/lib/wrappers/Thread.svelte
  4. 58
      src/lib/wrappers/ThreadTree.svelte

52
src/lib/components/events/ThreadWrapper.svelte
Unescape View File

@ -1,3 +1,51 @@
<div class="border-l border-blue-500 pl-1"> <script lang="ts">
import { icons_misc } from '../icons'
let show_replies = true
export let num_replies = 0
const toggle_replies = () => {
show_replies = !show_replies
}
</script>
{#if num_replies > 0}
<div class="border-l border-blue-500 pl-1">
{#if show_replies}
<div class="opacity-20 hover:opacity-70" class:relative={show_replies}>
<button
on:click={() => {
toggle_replies()
}}
class=" right-0 -mt-8 p-1"
class:absolute={show_replies}
>
<span class="inline text-xs"
>{show_replies ? 'hide' : 'show'} {num_replies} replies</span
>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 16 16"
class="inline h-7 w-7 flex-none fill-base-content pt-1"
>
{#each show_replies ? icons_misc.chevron_up : icons_misc.chevron_down as p}
<path d={p} />
{/each}
</svg>
</button>
</div>
{:else}
<button
on:click={() => {
toggle_replies()
}}
class="w-full cursor-pointer bg-base-300 p-3 text-left hover:bg-base-400"
>
show {num_replies} hidden replies
</button>
{/if}
<div class:hidden={!show_replies}>
<slot /> <slot />
</div> </div>
</div>
{/if}

8
src/lib/components/icons.ts
Unescape View File

@ -0,0 +1,8 @@
export const icons_misc = {
chevron_down: [
'M6 8.825c-.2 0-.4-.1-.5-.2l-3.3-3.3c-.3-.3-.3-.8 0-1.1c.3-.3.8-.3 1.1 0l2.7 2.7l2.7-2.7c.3-.3.8-.3 1.1 0c.3.3.3.8 0 1.1l-3.2 3.2c-.2.2-.4.3-.6.3',
],
chevron_up: [
'M6 4c-.2 0-.4.1-.5.2L2.2 7.5c-.3.3-.3.8 0 1.1c.3.3.8.3 1.1 0L6 5.9l2.7 2.7c.3.3.8.3 1.1 0c.3-.3.3-.8 0-1.1L6.6 4.3C6.4 4.1 6.2 4 6 4',
],
}

2
src/lib/wrappers/Thread.svelte
Unescape View File

@ -40,7 +40,7 @@
<EventCard {type} {event} /> <EventCard {type} {event} />
<ThreadWrapper> <ThreadWrapper num_replies={$thread_tree_store.length}>
{#each $thread_tree_store as tree} {#each $thread_tree_store as tree}
<ThreadTree {type} {tree} /> <ThreadTree {type} {tree} />
{/each} {/each}

58
src/lib/wrappers/ThreadTree.svelte
Unescape View File

@ -5,67 +5,95 @@
export let tree: ThreadTreeNode export let tree: ThreadTreeNode
export let type: 'proposal' | 'issue' = 'proposal' export let type: 'proposal' | 'issue' = 'proposal'
const countReplies = (tree: ThreadTreeNode, starting: number = 0): number => {
return (
tree.child_nodes.length +
tree.child_nodes.reduce((a, c) => a + countReplies(c), starting)
)
}
</script> </script>
<EventCard {type} event={tree.event} /> <EventCard {type} event={tree.event} />
<ThreadWrapper> <ThreadWrapper num_replies={countReplies(tree)}>
{#each tree.child_nodes as layer1} {#each tree.child_nodes as layer1}
<EventCard {type} event={layer1.event} /> <EventCard {type} event={layer1.event} />
<ThreadWrapper> <ThreadWrapper num_replies={countReplies(layer1)}>
{#each layer1.child_nodes as layer2} {#each layer1.child_nodes as layer2}
<EventCard {type} event={layer2.event} /> <EventCard {type} event={layer2.event} />
<ThreadWrapper> <ThreadWrapper num_replies={countReplies(layer2)}>
{#each layer2.child_nodes as layer3} {#each layer2.child_nodes as layer3}
<EventCard {type} event={layer3.event} /> <EventCard {type} event={layer3.event} />
<ThreadWrapper> <ThreadWrapper num_replies={countReplies(layer3)}>
{#each layer3.child_nodes as layer4} {#each layer3.child_nodes as layer4}
<EventCard {type} event={layer4.event} /> <EventCard {type} event={layer4.event} />
<ThreadWrapper> <ThreadWrapper num_replies={countReplies(layer4)}>
{#each layer4.child_nodes as layer5} {#each layer4.child_nodes as layer5}
<EventCard {type} event={layer5.event} /> <EventCard {type} event={layer5.event} />
<ThreadWrapper> <ThreadWrapper num_replies={countReplies(layer5)}>
{#each layer5.child_nodes as layer6} {#each layer5.child_nodes as layer6}
<EventCard {type} event={layer6.event} /> <EventCard {type} event={layer6.event} />
<ThreadWrapper> <ThreadWrapper num_replies={countReplies(layer6)}>
{#each layer6.child_nodes as layer7} {#each layer6.child_nodes as layer7}
<EventCard {type} event={layer7.event} /> <EventCard {type} event={layer7.event} />
<ThreadWrapper> <ThreadWrapper num_replies={countReplies(layer7)}>
{#each layer7.child_nodes as layer8} {#each layer7.child_nodes as layer8}
<EventCard {type} event={layer8.event} /> <EventCard {type} event={layer8.event} />
<ThreadWrapper> <ThreadWrapper
num_replies={countReplies(layer8)}
>
{#each layer8.child_nodes as layer9} {#each layer8.child_nodes as layer9}
<EventCard {type} event={layer9.event} /> <EventCard {type} event={layer9.event} />
<ThreadWrapper> <ThreadWrapper
num_replies={countReplies(layer9)}
>
{#each layer9.child_nodes as layer10} {#each layer9.child_nodes as layer10}
<EventCard <EventCard
{type} {type}
event={layer10.event} event={layer10.event}
/> />
<ThreadWrapper> <ThreadWrapper
num_replies={countReplies(layer10)}
>
{#each layer10.child_nodes as layer11} {#each layer10.child_nodes as layer11}
<EventCard <EventCard
{type} {type}
event={layer11.event} event={layer11.event}
/> />
<ThreadWrapper> <ThreadWrapper
num_replies={countReplies(
layer11
)}
>
{#each layer11.child_nodes as layer12} {#each layer11.child_nodes as layer12}
<EventCard <EventCard
{type} {type}
event={layer12.event} event={layer12.event}
/> />
<ThreadWrapper> <ThreadWrapper
num_replies={countReplies(
layer12
)}
>
{#each layer12.child_nodes as layer13} {#each layer12.child_nodes as layer13}
<EventCard <EventCard
{type} {type}
event={layer13.event} event={layer13.event}
/> />
<ThreadWrapper> <ThreadWrapper
num_replies={countReplies(
layer13
)}
>
{#each layer13.child_nodes as layer14} {#each layer13.child_nodes as layer14}
<EventCard <EventCard
{type} {type}
event={layer14.event} event={layer14.event}
/> />
<ThreadWrapper> <ThreadWrapper
num_replies={countReplies(
layer14
)}
>
{#each layer14.child_nodes as layer15} {#each layer14.child_nodes as layer15}
<EventCard <EventCard
{type} {type}

Write Preview
Loading…
Cancel
Save