Madeorsk/rudeshark.net
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Minimize reply context in notifications

Browse Source
This commit is contained in:
Freeplay 2023-06-21 23:38:26 -04:00
parent 29d1970f59
commit 94a8f64b3b
2 changed files with 58 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

60
packages/client/src/components/MkNote.vue
View File

@ -12,11 +12,11 @@
:id="appearNote.id" :id="appearNote.id"
> >
<MkNoteSub <MkNoteSub
v-if="appearNote.reply && !detailedView" v-if="appearNote.reply && !detailedView && !collapsedReply"
:note="appearNote.reply" :note="appearNote.reply"
class="reply-to" class="reply-to"
/> />
<div v-if="!detailedView" class="note-context" @click="noteClick"> <div v-if="!detailedView" class="note-context" @click="noteClick" :class="{ collapsedReply }">
<div class="line"></div> <div class="line"></div>
<div v-if="appearNote._prId_" class="info"> <div v-if="appearNote._prId_" class="info">
<i class="ph-megaphone-simple-bold ph-lg"></i> <i class="ph-megaphone-simple-bold ph-lg"></i>
@ -63,6 +63,17 @@
<MkVisibility :note="note" /> <MkVisibility :note="note" />
</div> </div>
</div> </div>
<div v-if="collapsedReply && appearNote.reply" class="info">
<MkAvatar class="avatar" :user="appearNote.reply.user" />
<MkUserName class="username" :user="appearNote.reply.user"></MkUserName>
<Mfm
class="summary"
:text="getNoteSummary(appearNote.reply)"
:plain="true"
:nowrap="true"
:custom-emojis="note.emojis"
/>
</div>
</div> </div>
<article <article
class="article" class="article"
@ -78,7 +89,6 @@
<XNoteHeader <XNoteHeader
class="header" class="header"
:note="appearNote" :note="appearNote"
:mini="true"
/> />
</div> </div>
<div class="body"> <div class="body">
@ -260,6 +270,7 @@ import { getNoteMenu } from "@/scripts/get-note-menu";
import { useNoteCapture } from "@/scripts/use-note-capture"; import { useNoteCapture } from "@/scripts/use-note-capture";
import { notePage } from "@/filters/note"; import { notePage } from "@/filters/note";
import { deepClone } from "@/scripts/clone"; import { deepClone } from "@/scripts/clone";
import { getNoteSummary } from "@/scripts/get-note-summary";
const router = useRouter(); const router = useRouter();
@ -267,6 +278,7 @@ const props = defineProps<{
note: misskey.entities.Note; note: misskey.entities.Note;
pinned?: boolean; pinned?: boolean;
detailedView?: boolean; detailedView?: boolean;
collapsedReply?: boolean;
}>(); }>();
const inChannel = inject("inChannel", null); 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 { > .article {

1
packages/client/src/components/MkNotifications.vue
View File

@ -26,6 +26,7 @@
" "
:key="notification.id" :key="notification.id"
:note="notification.note" :note="notification.note"
:collapsedReply="true"
/> />
<XNotification <XNotification
v-else v-else