monkee.ch/monkeeShark
1
0
Fork 0
Code Pull requests Activity

update SkNoteSub & SkNoteDetailed

Browse source
This commit is contained in:
Insert5StarName 2023-12-02 23:06:16 +01:00
parent 5db163bc67
commit 6bb6c60589
2 changed files with 30 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
packages/frontend/src/components/SkNoteDetailed.vue
View file

@ -1079,4 +1079,14 @@ function animatedMFM() {
margin-left: 0.2em; margin-left: 0.2em;
} }
} }
[class*="threadAncestor"] + .note .noteHeader::before {
position: absolute;
content: '';
width: 0px;
height: 32px;
left: 29px; // todo: adapt for container width
border-left: 2.5px solid #0f0;
top: -32px;
}
</style> </style>

24
packages/frontend/src/components/SkNoteSub.vue
View file

@ -4,15 +4,15 @@ SPDX-License-Identifier: AGPL-3.0-only
--> -->
<template> <template>
<div v-if="!muted" ref="el" :class="[$style.root, { [$style.children]: depth > 1 }]"> <div v-if="!muted" ref="el" :class="[$style.root, { [$style.children]: depth > 1 }, { [$style.threadAncestor]: !hideLine }]">
<div v-if="!hideLine" :class="$style.line"></div> <!-- <div v-if="!hideLine" :class="$style.line"></div> -->
<div :class="$style.main"> <div :class="$style.main">
<div v-if="note.channel" :class="$style.colorBar" :style="{ background: note.channel.color }"></div> <div v-if="note.channel" :class="$style.colorBar" :style="{ background: note.channel.color }"></div>
<!-- new avatar container with line (post section) --> <!-- new avatar container with line (post section) -->
<div :class="$style.avatarContainer"> <div :class="$style.avatarContainer">
<MkAvatar :class="$style.avatar" :user="note.user" link preview/> <MkAvatar :class="$style.avatar" :user="note.user" link preview/>
<template v-if="note.repliesCount > 0"> <template v-if="note.repliesCount > 0">
<div v-if="hideLine" :class="$style.threadLine"></div> <div :class="[$style.threadLine, {[$style.threadAncestorLine]: !hideLine}]"></div>
</template> </template>
</div> </div>
<!-- end new avatar container --> <!-- end new avatar container -->
@ -73,7 +73,7 @@ SPDX-License-Identifier: AGPL-3.0-only
</div> </div>
</div> </div>
<template v-if="depth < 5"> <template v-if="depth < 5">
<SkNoteSub v-for="reply in replies" :key="reply.id" :note="reply" :class="[$style.reply, { [$style.single]: replies.length === 1 }]" :detail="true" :depth="depth + 1" :expandAllCws="props.expandAllCws"/> <SkNoteSub v-for="reply in replies" :key="reply.id" :note="reply" :class="[$style.reply, {[$style.single]: replies.length === 1 }]" :detail="true" :depth="depth + 1" :expandAllCws="props.expandAllCws"/>
</template> </template>
<div v-else :class="$style.more"> <div v-else :class="$style.more">
<MkA class="_link" :to="notePage(note)">{{ i18n.ts.continueThread }} <i class="ph-caret-double-right ph-bold ph-lg"></i></MkA> <MkA class="_link" :to="notePage(note)">{{ i18n.ts.continueThread }} <i class="ph-caret-double-right ph-bold ph-lg"></i></MkA>
@ -562,6 +562,10 @@ if (props.detail) {
flex-grow: 1; flex-grow: 1;
border-left: 2.5px solid rgb(174, 174, 174); border-left: 2.5px solid rgb(174, 174, 174);
margin-left: 29px; margin-left: 29px;
&.threadAncestorLine {
border-color: pink;
}
} }
.reply { .reply {
@ -599,6 +603,18 @@ if (props.detail) {
} }
} }
.threadAncestor {
&:not(:first-of-type)::before {
position: absolute;
content: '';
width: 0px;
height: 56px;
left: 61px; // todo: adapt for container width
border-left: 2.5px solid #f00;
top: -28px;
}
}
@container (max-width: 580px) { @container (max-width: 580px) {
.threadLine, .reply { .threadLine, .reply {
margin-left: 25px; margin-left: 25px;