natty
/
calckey
1
0
Fork 0
Code Issues 1 Pull Requests Packages Projects Releases Wiki Activity

new threading, still wip

This commit is contained in:
Freeplay 2023-02-19 18:31:16 -05:00
parent c644a08d39
commit 66c3ac0654
2 changed files with 55 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
packages/client/src/components/MkNoteFooter.vue
View File

@ -126,7 +126,7 @@ function blur() {
.footer { .footer {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
margin-top: .4em; // margin-top: .4em;
pointer-events: none; // Allow clicking anything w/out pointer-events: all; to open post pointer-events: none; // Allow clicking anything w/out pointer-events: all; to open post
> .button { > .button {

41
packages/client/src/components/MkNoteSub.vue
View File

@ -1,5 +1,6 @@
<template> <template>
<div v-size="{ max: [450] }" class="wrpstxzv" :class="{ children: depth > 1 }"> <div v-size="{ max: [450] }" class="wrpstxzv" :class="{ children: depth > 1, singleStart:replies.length == 1 }">
<div v-if="conversation && depth > 1" class="line"></div>
<div class="main" @click="router.push(notePage(note))"> <div class="main" @click="router.push(notePage(note))">
<div class="avatar-container"> <div class="avatar-container">
<MkAvatar class="avatar" :user="note.user"/> <MkAvatar class="avatar" :user="note.user"/>
@ -20,8 +21,8 @@
</div> </div>
</div> </div>
<template v-if="conversation"> <template v-if="conversation">
<template v-if="depth < 5 && replies.length == 1"> <template v-if="replies.length == 1">
<MkNoteSub v-for="reply in replies" :key="reply.id" :note="reply" class="reply single" :conversation="conversation" :depth="depth"/> <MkNoteSub v-for="reply in replies" :key="reply.id" :note="reply" class="reply single" :conversation="conversation" :depth="depth + 1"/>
</template> </template>
<template v-else-if="depth < 5"> <template v-else-if="depth < 5">
<MkNoteSub v-for="reply in replies" :key="reply.id" :note="reply" class="reply" :conversation="conversation" :depth="depth + 1"/> <MkNoteSub v-for="reply in replies" :key="reply.id" :note="reply" class="reply" :conversation="conversation" :depth="depth + 1"/>
@ -67,7 +68,7 @@ const replies: misskey.entities.Note[] = props.conversation?.filter(item => item
&.children { &.children {
padding: 10px 0 0 16px; padding: 10px 0 0 var(--avatarSize);
font-size: 1em; font-size: 1em;
cursor: auto; cursor: auto;
@ -143,7 +144,15 @@ const replies: misskey.entities.Note[] = props.conversation?.filter(item => item
&:first-child { &:first-child {
padding-top: 30px; padding-top: 30px;
} }
.avatar-container { > .main > .body {
padding-bottom: 16px;
}
}
// Reply Lines
&.reply, &.reply-to, &.reply-to-more {
> .main {
> .avatar-container {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
@ -154,7 +163,9 @@ const replies: misskey.entities.Note[] = props.conversation?.filter(item => item
height: var(--avatarSize); height: var(--avatarSize);
margin: 0; margin: 0;
} }
> .line { }
}
.line {
width: var(--avatarSize); width: var(--avatarSize);
display: flex; display: flex;
flex-grow: 1; flex-grow: 1;
@ -163,6 +174,7 @@ const replies: misskey.entities.Note[] = props.conversation?.filter(item => item
display: block; display: block;
width: 2px; width: 2px;
background-color: var(--divider); background-color: var(--divider);
background-color: white; // FOr now
margin-inline: auto; margin-inline: auto;
.note > & { .note > & {
margin-bottom: -16px; margin-bottom: -16px;
@ -170,8 +182,21 @@ const replies: misskey.entities.Note[] = props.conversation?.filter(item => item
} }
} }
} }
> .main > .body { .reply:last-child, &.reply:not(.children) { // Hide line in last reply of thread
padding-bottom: 16px; > .main:last-child > .avatar-container > .line {
display: none;
}
}
.reply.children:not(:last-child) { // Line that goes through multiple replies
position: relative;
> .line {
position: absolute;
top: 0;
left: 0;
bottom: 0;
}
&:not(.single):not(.singleStart) > .main > .avatar-container > .line {
display: none;
} }
} }