rudeshark.net/packages/client/src/components/MkNoteSub.vue

247 lines
5.6 KiB
Vue
Raw Normal View History

<template>
2023-02-20 00:31:16 +01:00
<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))">
2023-01-07 00:58:52 +01:00
<div class="avatar-container">
<MkAvatar class="avatar" :user="note.user"/>
<div class="line"></div>
</div>
<div class="body">
Migrate to Vue3 (#6587) * Update reaction.vue * fix bug * wip * wip * wjio * wip * Revert "wip" This reverts commit e427f2160adf4e8a4147006e25a89854edab0033. * wip * wip * wip * Update init.ts * Update drive-window.vue * wip * wip * Use PascalCase for components * Use PascalCase for components * update dep * wip * wip * wip * Update init.ts * wip * Update paging.ts * Update test.vue * watch deep * wip * lint * wip * wip * wip * wip * wiop * wip * Update webpack.config.ts * alllow null poll * wip * wip * wip * wiop * UI redesign & refactor (#6714) * wip * wip * wip * wip * wip * Update drive.vue * Update word-mute.vue * wip * wip * wip * clean up * wip * Update default.vue * wip * Update notes.vue * Update mfm.ts * Update index.home.vue * Update post-form.vue * Update post-form-attaches.vue * wip * Update post-form.vue * Update sidebar.vue * wip * wip * Update index.vue * wip * Update default.vue * Update index.vue * Update index.vue * wip * Update post-form-attaches.vue * Update note.vue * wip * clean up * Update notes.vue * wip * wip * Update ja-JP.yml * wip * wip * Update index.vue * wip * wip * wip * wip * wip * wip * wip * wip * Update default.vue * wip * Update _dark.json5 * wip * wip * wip * clean up * wip * wip * Update index.vue * Update test.vue * wip * wip * fix * wip * wip * wip * wip * clena yop * wip * wip * Update store.ts * Update messaging-room.vue * Update default.widgets.vue * fix * wip * wip * Update modal.vue * wip * Update os.ts * Update os.ts * Update deck.vue * Update init.ts * wip * Update ja-JP.yml * v-sizeは単にwindowのresizeを監視するだけで良いかもしれない * Update modal.vue * wip * Update tooltip.ts * wip * wip * wip * wip * wip * Update image-viewer.vue * wip * wip * Update style.scss * Update style.scss * Update visitor.vue * wip * Update init.ts * Update init.ts * wip * wip * Update visitor.vue * Update visitor.vue * Update visitor.vue * Update visitor.vue * wip * wip * Update modal.vue * Update header.vue * Update menu.vue * Update about.vue * Update about-misskey.vue * wip * wip * Update visitor.vue * Update tooltip.ts * wip * Update drive.vue * wip * Update style.scss * Update header.vue * wip * wip * Update users.user.vue * Update announcements.vue * wip * wip * wip * Update emojis.vue * wip * Update emojis.vue * Update style.scss * Update users.vue * wip * Update style.scss * wip * Update welcome.entrance.vue * Update radio.vue * Update size.ts * Update emoji-edit-dialog.vue * wip * Update emojis.vue * wip * Update emojis.vue * Update emojis.vue * Update emojis.vue * wip * wip * wip * wip * Update file-dialog.vue * wip * wip * Update token-generate-window.vue * Update notification-setting-window.vue * wip * wip * Update _error_.vue * Update ja-JP.yml * wip * wip * Update store.ts * Update emojis.vue * Update emojis.vue * Update emojis.vue * Update announcements.vue * Update store.ts * wip * Update page-editor.vue * wip * wip * Update modal.vue * wip * Update select-file.ts * Update timeline.vue * Update emojis.vue * Update os.ts * wip * Update user-select.vue * Update mfm.ts * Update get-file-info.ts * Update drive.vue * Update init.ts * Update mfm.ts * wip * wip * Update window.vue * Update note.vue * wip * wip * Update user-info.vue * wip * wip * wip * wip * wip * Update header.vue * Update header.vue * wip * Update explore.vue * wip * wip * wip * Update webpack.config.ts * wip * wip * wip * wip * wip * wip * Update autocomplete.ts * wip * wip * wip * Update toast.vue * wip * Update post-form-dialog.vue * wip * wip * wip * wip * wip * Update users.vue * wip * Update explore.vue * wip * wip * wip * Update package.json * wip * Update icon-dialog.vue * wip * wip * Update user-preview.ts * wip * wip * wip * wip * wip * Update instance.vue * Update user-name.vue * Update federation.vue * Update instance.vue * wip * wip * Update tag.vue * wip * wip * wip * wip * wip * Update instance.vue * wip * Update os.ts * Update os.ts * wip * wip * wip * Update router.ts * wip * Update init.ts * Update note.vue * Update messages.vue * wip * wip * wip * wip * wip * google * wip * wip * wip * wip * Update theme-editor.vue * wip * wip * Update room.vue * Update channel-editor.vue * wip * Update window.vue * Update window.vue * wip * Update window.vue * Update window.vue * wip * Update menu.vue * wip * wip * wip * wip * Update messaging-room.vue * wip * Update post-form.vue * Update default.widgets.vue * Update window.vue * wip
2020-10-17 13:12:00 +02:00
<XNoteHeader class="header" :note="note" :mini="true"/>
<div class="body">
<p v-if="note.cw != null" class="cw">
2022-07-20 15:24:26 +02:00
<Mfm v-if="note.cw != ''" class="text" :text="note.cw" :author="note.user" :i="$i" :custom-emojis="note.emojis"/>
2021-09-29 17:50:45 +02:00
<XCwButton v-model="showContent" :note="note"/>
</p>
2022-10-28 05:37:33 +02:00
<div v-show="note.cw == null || showContent" class="content" @click="router.push(notePage(note))">
2023-02-17 17:31:48 +01:00
<MkSubNoteContent class="text" :note="note" :detailed="true"/>
</div>
</div>
2023-02-20 19:30:15 +01:00
<MkNoteFooter :note="note"></MkNoteFooter>
</div>
</div>
<template v-if="conversation">
2023-02-20 00:31:16 +01:00
<template v-if="replies.length == 1">
<MkNoteSub v-for="reply in replies" :key="reply.id" :note="reply" class="reply single" :conversation="conversation" :depth="depth + 1"/>
</template>
<template v-else-if="depth < 5">
<MkNoteSub v-for="reply in replies" :key="reply.id" :note="reply" class="reply" :conversation="conversation" :depth="depth + 1"/>
</template>
<div v-else-if="replies.length > 0" class="more">
2022-11-07 03:49:47 +01:00
<MkA class="text _link" :to="notePage(note)">{{ i18n.ts.continueThread }} <i class="ph-caret-double-right-bold ph-lg"></i></MkA>
</div>
</template>
</div>
</template>
<script lang="ts" setup>
import { } from 'vue';
2022-12-12 04:24:12 +01:00
import * as misskey from 'calckey-js';
import XNoteHeader from '@/components/MkNoteHeader.vue';
import MkSubNoteContent from '@/components/MkSubNoteContent.vue';
import XCwButton from '@/components/MkCwButton.vue';
import MkNoteFooter from '@/components/MkNoteFooter.vue';
2022-07-20 15:24:26 +02:00
import { notePage } from '@/filters/note';
2022-09-15 23:43:57 +02:00
import { useRouter } from '@/router';
2021-11-11 18:02:25 +01:00
import * as os from '@/os';
2022-07-20 15:24:26 +02:00
import { i18n } from '@/i18n';
2022-09-15 23:43:57 +02:00
const router = useRouter();
const props = withDefaults(defineProps<{
note: misskey.entities.Note;
conversation?: misskey.entities.Note[];
// how many notes are in between this one and the note being viewed in detail
depth?: number;
}>(), {
depth: 1,
});
let showContent = $ref(false);
const replies: misskey.entities.Note[] = props.conversation?.filter(item => item.replyId === props.note.id || item.renoteId === props.note.id) ?? [];
</script>
<style lang="scss" scoped>
2020-03-20 11:19:28 +01:00
.wrpstxzv {
padding: 16px 32px;
&.children {
2023-02-20 02:12:01 +01:00
padding: 10px 0 0 var(--indent);
padding-left: var(--indent) !important;
font-size: 1em;
2022-11-24 22:55:23 +01:00
cursor: auto;
&.max-width_450px {
padding: 10px 0 0 8px;
}
}
> .main {
display: flex;
2023-01-07 00:58:52 +01:00
> .avatar-container {
2023-01-08 08:30:42 +01:00
margin-right: 8px;
2023-01-07 00:58:52 +01:00
> .avatar {
flex-shrink: 0;
display: block;
width: 38px;
height: 38px;
border-radius: 8px;
}
}
> .body {
flex: 1;
min-width: 0;
2022-11-24 22:55:23 +01:00
cursor: pointer;
2022-12-02 07:39:50 +01:00
@media (pointer: coarse) {
cursor: default;
}
2022-11-24 22:55:23 +01:00
> .header {
margin-bottom: 2px;
2022-11-24 22:55:23 +01:00
cursor: auto;
}
> .body {
> .cw {
cursor: default;
display: block;
margin: 0;
padding: 0;
overflow-wrap: break-word;
> .text {
margin-right: 8px;
}
}
> .content {
> .text {
margin: 0;
padding: 0;
}
}
}
}
}
2023-02-20 02:56:28 +01:00
&.reply {
--avatarSize: 38px;
.avatar-container {
margin-right: 8px !important;
}
:deep(.footer) {
font-size: .9em;
}
2023-02-20 02:12:01 +01:00
}
> .reply, > .more {
margin-top: 10px;
&.single {
padding: 0 !important;
}
}
> .more {
padding: 10px 0 0 16px;
}
2023-01-07 00:58:52 +01:00
&.reply-to, &.reply-to-more {
2023-01-28 22:10:45 +01:00
padding-bottom: 0;
&:first-child {
padding-top: 30px;
}
2023-02-20 02:12:01 +01:00
.line::before {
margin-bottom: -16px;
2023-02-20 00:31:16 +01:00
}
}
// Reply Lines
&.reply, &.reply-to, &.reply-to-more {
2023-02-20 02:12:01 +01:00
--indent: var(--avatarSize);
2023-02-20 00:31:16 +01:00
> .main {
> .avatar-container {
display: flex;
flex-direction: column;
align-items: center;
margin-right: 14px;
width: var(--avatarSize);
2023-02-20 00:31:16 +01:00
> .avatar {
width: var(--avatarSize);
height: var(--avatarSize);
margin: 0;
}
2023-01-07 00:58:52 +01:00
}
2023-02-20 00:31:16 +01:00
}
.line {
width: var(--avatarSize);
display: flex;
flex-grow: 1;
&::before {
content: "";
display: block;
2023-02-20 19:18:37 +01:00
border-left: 2px solid var(--accent);
2023-02-20 00:31:16 +01:00
margin-inline: auto;
2023-01-07 00:58:52 +01:00
}
}
2023-02-20 00:31:16 +01:00
}
2023-02-20 02:12:01 +01:00
&.single, &.singleStart {
> .main > .avatar-container > .line::before {
margin-bottom: -10px;
}
}
2023-02-20 00:31:16 +01:00
.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;
2023-02-20 02:12:01 +01:00
&::before {
margin-top: -10px;
}
2023-02-20 00:31:16 +01:00
}
&:not(.single):not(.singleStart) > .main > .avatar-container > .line {
display: none;
2023-01-28 22:10:45 +01:00
}
2023-01-07 00:58:52 +01:00
}
2023-02-20 02:12:01 +01:00
// Reply line connectors
.reply.children:not(.single) {
position: relative;
> .line {
position: absolute;
left: 0;
&::after {
content: "";
position: absolute;
2023-02-20 19:18:37 +01:00
border-left: 2px solid var(--accent);
border-bottom: 2px solid var(--accent);
margin-left: calc((var(--avatarSize) / 2) - 1px);
2023-02-20 02:12:01 +01:00
margin-top: -20px;
2023-02-20 19:18:37 +01:00
width: calc(var(--indent) / 2);
2023-02-20 02:12:01 +01:00
height: calc((var(--avatarSize) / 2) + 20px);
border-bottom-left-radius: calc(var(--indent) / 3);
}
}
}
2023-01-07 00:58:52 +01:00
&.max-width_450px {
2023-01-28 22:10:45 +01:00
padding: 14px 16px;
&.reply-to, &.reply-to-more {
padding-top: 14px !important;
padding-bottom: 0 !important;
margin-bottom: 0 !important;
}
2023-01-07 00:58:52 +01:00
> .main > .avatar-container {
margin-right: 10px;
}
}
}
</style>