limepotato/jormungandr-bite
1
0
Fork 0
mirror of https://iceshrimp.dev/limepotato/jormungandr-bite.git synced 2024-11-14 22:17:30 -07:00
Code Issues Projects Releases Packages Wiki Activity Actions

new threading, still wip

Browse source
This commit is contained in:
Freeplay 2023-02-19 18:31:16 -05:00
parent a7401532ee
commit 638f075f9a
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 {

83
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,35 +144,59 @@ const replies: misskey.entities.Note[] = props.conversation?.filter(item => item
&:first-child { &:first-child {
padding-top: 30px; padding-top: 30px;
} }
.avatar-container { > .main > .body {
display: flex; padding-bottom: 16px;
flex-direction: column; }
align-items: center; }
margin-right: 14px;
width: var(--avatarSize); // Reply Lines
> .avatar { &.reply, &.reply-to, &.reply-to-more {
width: var(--avatarSize); > .main {
height: var(--avatarSize); > .avatar-container {
margin: 0;
}
> .line {
width: var(--avatarSize);
display: flex; display: flex;
flex-grow: 1; flex-direction: column;
&::before { align-items: center;
content: ""; margin-right: 14px;
display: block; width: var(--avatarSize);
width: 2px; > .avatar {
background-color: var(--divider); width: var(--avatarSize);
margin-inline: auto; height: var(--avatarSize);
.note > & { margin: 0;
margin-bottom: -16px;
}
} }
} }
} }
> .main > .body { .line {
padding-bottom: 16px; width: var(--avatarSize);
display: flex;
flex-grow: 1;
&::before {
content: "";
display: block;
width: 2px;
background-color: var(--divider);
background-color: white; // FOr now
margin-inline: auto;
.note > & {
margin-bottom: -16px;
}
}
}
}
.reply:last-child, &.reply:not(.children) { // Hide line in last reply of thread
> .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;
} }
} }