diff --git a/packages/client/src/components/MkNote.vue b/packages/client/src/components/MkNote.vue index fbcb1a0998..58d7e18166 100644 --- a/packages/client/src/components/MkNote.vue +++ b/packages/client/src/components/MkNote.vue @@ -12,11 +12,11 @@ :id="appearNote.id" > -
+
@@ -63,6 +63,17 @@
+
+ + + +
@@ -260,6 +270,7 @@ import { getNoteMenu } from "@/scripts/get-note-menu"; import { useNoteCapture } from "@/scripts/use-note-capture"; import { notePage } from "@/filters/note"; import { deepClone } from "@/scripts/clone"; +import { getNoteSummary } from "@/scripts/get-note-summary"; const router = useRouter(); @@ -267,6 +278,7 @@ const props = defineProps<{ note: misskey.entities.Note; pinned?: boolean; detailedView?: boolean; + collapsedReply?: boolean; }>(); const inChannel = inject("inChannel", null); @@ -712,6 +724,48 @@ defineExpose({ } } } + + &.collapsedReply { + .line { + opacity: 0.25; + &::after { + content: ""; + position: absolute; + border-left: 2px solid currentColor; + border-top: 2px solid currentColor; + margin-left: calc(var(--avatarSize) / 2 - 1px); + width: calc(var(--avatarSize) / 2 + 14px); + border-top-left-radius: calc(var(--avatarSize) / 4); + top: calc(50% - 1px); + height: calc(50% + 5px); + } + } + .info { + color: var(--fgTransparentWeak); + transition: color .2s; + } + .avatar { + width: 1.2em; + height: 1.2em; + border-radius: 2em; + overflow: hidden; + margin-right: .4em; + background: var(--panelHighlight); + } + .username { + font-weight: 700; + flex-shrink: 0; + max-width: 30%; + &::after { + content: ": "; + } + } + &:hover, &:focus-within { + .info { + color: var(--fg); + } + } + } } > .article { diff --git a/packages/client/src/components/MkNotifications.vue b/packages/client/src/components/MkNotifications.vue index 61b16b16e2..7607e41b9a 100644 --- a/packages/client/src/components/MkNotifications.vue +++ b/packages/client/src/components/MkNotifications.vue @@ -26,6 +26,7 @@ " :key="notification.id" :note="notification.note" + :collapsedReply="true" />