forked from FoundKeyGang/FoundKey
Compact mentions to just heads inside notifications
This commit is contained in:
parent
7e635d23d3
commit
98a15fd080
7 changed files with 33 additions and 9 deletions
|
@ -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);
|
||||
|
|
|
@ -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,
|
||||
|
|
|
@ -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 {
|
||||
|
|
|
@ -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,
|
||||
})];
|
||||
}
|
||||
|
||||
|
|
|
@ -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);
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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 = (
|
||||
|
|
Loading…
Reference in a new issue