Rubicon/tutu
1
0
Fork 0
Code Issues 19 Pull requests Projects Activity Actions

CompactToot: added preview cards

Browse source
This commit is contained in:
thislight 2024-08-17 18:09:55 +08:00
parent b133a9b9a7
commit 13ad3e4958
No known key found for this signature in database
GPG key ID: A50F9451AC56A63E
2 changed files with 13 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
src/timelines/CompactToot.tsx
View file

@ -1,12 +1,11 @@
import type { mastodon } from "masto"; import type { mastodon } from "masto";
import { type Component } from "solid-js"; import { Show, type Component } from "solid-js";
import tootStyle from "./toot.module.css"; import tootStyle from "./toot.module.css";
import { formatRelative } from "date-fns"; import { formatRelative } from "date-fns";
import Img from "../material/Img"; import Img from "../material/Img";
import { Body2 } from "../material/typography"; import { Body2 } from "../material/typography";
import { css } from "solid-styled";
import { appliedCustomEmoji } from "../masto/toot"; import { appliedCustomEmoji } from "../masto/toot";
import cardStyle from "../material/cards.module.css"; import { TootPreviewCard } from "./RegularToot";
type CompactTootProps = { type CompactTootProps = {
status: mastodon.v1.Status; status: mastodon.v1.Status;
@ -48,6 +47,9 @@ const CompactToot: Component<CompactTootProps> = (props) => {
}} }}
class={[tootStyle.compactTootContent].join(" ")} class={[tootStyle.compactTootContent].join(" ")}
></div> ></div>
<Show when={toot().card}>
<TootPreviewCard src={toot().card!} alwaysCompact />
</Show>
</section> </section>
); );
}; };

9
src/timelines/RegularToot.tsx
View file

@ -197,10 +197,17 @@ function TootAuthorGroup(props: { status: mastodon.v1.Status; now: Date }) {
); );
} }
function TootPreviewCard(props: { src: mastodon.v1.PreviewCard }) { export function TootPreviewCard(props: {
src: mastodon.v1.PreviewCard;
alwaysCompact?: boolean;
}) {
let root: HTMLAnchorElement; let root: HTMLAnchorElement;
createEffect(() => { createEffect(() => {
if (props.alwaysCompact) {
root.classList.add(tootStyle.compact);
return;
}
if (!props.src.width) return; if (!props.src.width) return;
const width = root.getBoundingClientRect().width; const width = root.getBoundingClientRect().width;
if (width > props.src.width) { if (width > props.src.width) {