Compact mentions to just heads inside notifications

This commit is contained in:
Michcio 2022-09-06 13:46:46 +02:00
parent 7e635d23d3
commit 98a15fd080
7 changed files with 33 additions and 9 deletions

View file

@ -10,7 +10,7 @@
<XCwButton v-model="showContent" :note="note"/>
</p>
<div v-show="note.cw == null || showContent" class="content">
<MkNoteSubNoteContent class="text" :note="note" :supercompact="supercompact && note.cw == null"/>
<MkNoteSubNoteContent class="text" :note="note" :supercompact="supercompact && note.cw == null" :compact-heads="compactHeads"/>
</div>
</div>
</div>
@ -39,12 +39,14 @@ const props = withDefaults(defineProps<{
conversation?: foundkey.entities.Note[] | null;
supercompact?: boolean;
compactHeads?: boolean;
// how many notes are in between this one and the note being viewed in detail
depth?: number;
}>(), {
conversation: null,
depth: 1,
supercompact: false,
compactHeads: false,
});
let showContent = $ref(false);

View file

@ -1,5 +1,5 @@
<template>
<MfmCore :text="text" :plain="plain" :nowrap="nowrap" :author="author" :custom-emojis="customEmojis" :is-note="isNote" class="havbbuyv" :class="{ nowrap }"/>
<MfmCore :text="text" :plain="plain" :nowrap="nowrap" :author="author" :custom-emojis="customEmojis" :is-note="isNote" class="havbbuyv" :class="{ nowrap }" :compact-heads="compactHeads"/>
</template>
<script lang="ts" setup>
@ -12,6 +12,7 @@ withDefaults(defineProps<{
author?: any;
customEmojis?: any;
isNote?: boolean;
compactHeads?: boolean;
}>(), {
plain: false,
nowrap: false,

View file

@ -1,7 +1,7 @@
<template>
<MkA v-if="url.startsWith('/')" v-user-preview="canonical" :class="[$style.root, { [$style.isMe]: isMe }]" :to="url" :style="{ background: bgCss }">
<img :class="$style.icon" :src="`/avatar/@${username}@${host}`" alt="">
<span class="main">
<MkA v-if="url.startsWith('/')" v-user-preview="canonical" :class="[$style.root, { [$style.isMe]: isMe, [$style.compact]: compact }]" :to="url" :style="{ background: bgCss }">
<img :class="[$style.icon, { [$style.compact]: compact }]" :src="`/avatar/@${username}@${host}`" alt="">
<span v-if="!compact" class="main">
<span class="username">@{{ username }}</span>
<span v-if="(host != localHost) || defaultStore.state.showFullAcct" :class="$style.mainHost">@{{ toUnicode(host) }}</span>
</span>
@ -25,6 +25,7 @@ import { defaultStore } from '@/store';
const props = defineProps<{
username: string;
host: string;
compact?: boolean;
}>();
const canonical = props.host === localHost ? `@${props.username}` : `@${props.username}@${toUnicode(props.host)}`;
@ -49,6 +50,10 @@ useCssModule();
border-radius: 999px;
color: var(--mention);
&.compact {
padding: 0;
}
&.isMe {
color: var(--mentionMe);
}
@ -61,6 +66,14 @@ useCssModule();
margin: 0 0.2em 0 0;
vertical-align: bottom;
border-radius: 100%;
.compact > & {
margin: 0;
border: 0.1em solid var(--mention);
}
.compact.isMe > & {
border: 0.1em solid var(--mentionMe);
}
}
.mainHost {

View file

@ -42,6 +42,11 @@ export default defineComponent({
type: Boolean,
default: true,
},
compactHeads: {
required: false,
type: Boolean,
default: false,
}
},
render() {
@ -232,6 +237,7 @@ export default defineComponent({
key: Math.random(),
host: (token.props.host == null && this.author && this.author.host != null ? this.author.host : token.props.host) || host,
username: token.props.username,
compact: this.compactHeads,
})];
}

View file

@ -9,7 +9,7 @@
:tabindex="!isDeleted ? '-1' : null"
:class="{ renote: isRenote }"
>
<MkNoteSub v-if="appearNote.reply" :note="appearNote.reply" :supercompact="compactParent" class="reply-to"/>
<MkNoteSub v-if="appearNote.reply" :note="appearNote.reply" :supercompact="compactParent" :compact-heads="compactHeads" class="reply-to"/>
<div v-if="pinned" class="info"><i class="fas fa-thumbtack"></i> {{ i18n.ts.pinnedNote }}</div>
<div v-if="appearNote._featuredId_" class="info"><i class="fas fa-bolt"></i> {{ i18n.ts.featured }}</div>
<div v-if="isRenote" class="renote">
@ -43,7 +43,7 @@
<div v-show="appearNote.cw == null || showContent" class="content" :class="{ collapsed, isLong }">
<div class="text">
<MkA v-if="appearNote.replyId" class="reply" :to="`/notes/${appearNote.replyId}`"><i ref="parentReply" class="fas fa-reply"></i></MkA>
<Mfm v-if="appearNote.text" :text="appearNote.text" :author="appearNote.user" :i="$i" :custom-emojis="appearNote.emojis"/>
<Mfm v-if="appearNote.text" :text="appearNote.text" :author="appearNote.user" :i="$i" :custom-emojis="appearNote.emojis" :compact-heads="compactHeads"/>
<a v-if="appearNote.renote != null" class="rp">RN:</a>
<div v-if="translating || translation" class="translation">
<MkLoading v-if="translating" mini/>
@ -134,6 +134,7 @@ const props = defineProps<{
note: foundkey.entities.Note;
pinned?: boolean;
compactParent?: boolean;
compactHeads?: boolean;
}>();
const inChannel = inject('inChannel', null);

View file

@ -9,7 +9,7 @@
<template #default="{ items: notifications }">
<XList v-slot="{ item: notification }" class="elsfgstc" :items="notifications" :no-gap="true">
<XNote v-if="['reply', 'quote', 'mention'].includes(notification.type)" :key="notification.id" :note="notification.note" :compact-parent="true"/>
<XNote v-if="['reply', 'quote', 'mention'].includes(notification.type)" :key="notification.id" :note="notification.note" :compact-parent="true" :compact-heads="true" />
<XNotification v-else :key="notification.id" :notification="notification" :with-time="true" :full="true" class="_panel notification"/>
</XList>
</template>

View file

@ -3,7 +3,7 @@
<div class="body">
<span v-if="note.deletedAt" style="opacity: 0.5">({{ i18n.ts.deleted }})</span>
<MkA v-if="note.replyId" class="reply" :to="`/notes/${note.replyId}`"><i ref="parentReply" class="fas fa-reply"></i></MkA>
<Mfm v-if="note.text" :text="note.text" :author="note.user" :i="$i" :custom-emojis="note.emojis"/>
<Mfm v-if="note.text" :text="note.text" :author="note.user" :i="$i" :custom-emojis="note.emojis" :compact-heads="compactHeads"/>
<MkA v-if="note.renoteId" class="rp" :to="`/notes/${note.renoteId}`">RN: ...</MkA>
</div>
<details v-if="note.files.length > 0">
@ -36,6 +36,7 @@ import { useTooltip } from '@/scripts/use-tooltip';
const props = defineProps<{
note: foundkey.entities.Note;
supercompact?: boolean;
compactHeads?: boolean;
}>();
const isLong = (