graphite/Sharkey
1
0
Fork 0
mirror of https://git.joinsharkey.org/Sharkey/Sharkey.git synced 2024-11-26 17:43:08 +02:00
Code Issues Projects Releases Packages Wiki Activity

upd: collapse mentions if multiple are followed in a row

Browse source
This commit is contained in:
Mar0xy 2023-11-28 03:01:37 +01:00
parent 13e8269993
commit bd470596cc
No known key found for this signature in database
GPG key ID: 56569BBE47D2C828
2 changed files with 50 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

44
packages/frontend/src/components/MkMention.vue
View file

@ -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;

8
packages/frontend/src/components/global/MkMisskeyFlavoredMarkdown.ts
View file

@ -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, ' ')];
} }