upd: collapse mentions if multiple are followed in a row
This commit is contained in:
parent
13e8269993
commit
bd470596cc
2 changed files with 50 additions and 2 deletions
|
@ -4,7 +4,7 @@ SPDX-License-Identifier: AGPL-3.0-only
|
||||||
-->
|
-->
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<MkA v-user-preview="canonical" :class="[$style.root, { [$style.isMe]: isMe }]" :to="url" :style="{ background: bgCss }">
|
<MkA v-user-preview="canonical" :class="[{ [$style.root]: !first, [$style.altRoot]: first, [$style.isMe]: isMe }]" :to="url" :style="{ background: bgCss }">
|
||||||
<img :class="$style.icon" :src="avatarUrl" alt="">
|
<img :class="$style.icon" :src="avatarUrl" alt="">
|
||||||
<span>
|
<span>
|
||||||
<span>@{{ username }}</span>
|
<span>@{{ username }}</span>
|
||||||
|
@ -25,6 +25,7 @@ import { getStaticImageUrl } from '@/scripts/media-proxy.js';
|
||||||
const props = defineProps<{
|
const props = defineProps<{
|
||||||
username: string;
|
username: string;
|
||||||
host: string;
|
host: string;
|
||||||
|
first?: boolean;
|
||||||
}>();
|
}>();
|
||||||
|
|
||||||
const canonical = props.host === localHost ? `@${props.username}` : `@${props.username}@${toUnicode(props.host)}`;
|
const canonical = props.host === localHost ? `@${props.username}` : `@${props.username}@${toUnicode(props.host)}`;
|
||||||
|
@ -57,6 +58,47 @@ const avatarUrl = computed(() => defaultStore.state.disableShowingAnimatedImages
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.root + .root {
|
||||||
|
position: relative;
|
||||||
|
margin-inline: -20px 0;
|
||||||
|
box-shadow: -4px 0 0 var(--panel), -15px 0 15px var(--panel);
|
||||||
|
overflow: clip;
|
||||||
|
isolation: isolate;
|
||||||
|
|
||||||
|
&::before {
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
inset: 0;
|
||||||
|
background: var(--panel);
|
||||||
|
z-index: -1;
|
||||||
|
}
|
||||||
|
|
||||||
|
&::after {
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
inset: 0;
|
||||||
|
background: var(--panel);
|
||||||
|
z-index: -1;
|
||||||
|
background: inherit;
|
||||||
|
}
|
||||||
|
|
||||||
|
span {
|
||||||
|
display: inline-block;
|
||||||
|
white-space: nowrap;
|
||||||
|
max-width: 3em;
|
||||||
|
mask: linear-gradient(to right, #000 20%, rgba(0, 0, 0, 0.4));
|
||||||
|
}
|
||||||
|
|
||||||
|
+ .root {
|
||||||
|
margin-inline: -10px 0;
|
||||||
|
padding-inline-end: 0;
|
||||||
|
box-shadow: -4px 0 0 var(--panel);
|
||||||
|
|
||||||
|
span {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
.icon {
|
.icon {
|
||||||
width: 1.5em;
|
width: 1.5em;
|
||||||
height: 1.5em;
|
height: 1.5em;
|
||||||
|
|
|
@ -82,7 +82,13 @@ export default function(props: MfmProps) {
|
||||||
res.push(t);
|
res.push(t);
|
||||||
}
|
}
|
||||||
res.shift();
|
res.shift();
|
||||||
return res;
|
|
||||||
|
// Don't wrap whitespaces in a span
|
||||||
|
if (text === ' ') {
|
||||||
|
return res;
|
||||||
|
}
|
||||||
|
|
||||||
|
return h('span', res);
|
||||||
} else {
|
} else {
|
||||||
return [text.replace(/\n/g, ' ')];
|
return [text.replace(/\n/g, ' ')];
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in a new issue