Compare commits

...

8 commits

Author SHA1 Message Date
thislight
35f51db294
theme: fix input zoom in on iOS
All checks were successful
/ depoly (push) Successful in 1m7s
2024-08-13 15:49:36 +08:00
thislight
e2a5666b34
TootBottomSheet: basic layout 2024-08-13 15:39:05 +08:00
thislight
8d14abf122
BottomSheet: fix height on phone 2024-08-13 15:09:18 +08:00
thislight
086c692dff
Settings: workaround for the crash on WebKit
The ripple may be undefined on mount
2024-08-13 15:08:29 +08:00
thislight
7cc9753d30
BottomSheet: fix jumpy animation 2024-08-13 15:01:06 +08:00
thislight
368bca9fa1
TootBottomSheet: added cache 2024-08-13 14:17:33 +08:00
thislight
c56c098bdb
{Regular,Compact}Toot: fix time is future 2024-08-13 14:06:55 +08:00
thislight
2071c1e6b6
start of v1.0.4 2024-08-13 00:05:56 +08:00
10 changed files with 104 additions and 21 deletions

View file

@ -1,7 +1,7 @@
{
"$schema": "https://json.schemastore.org/package",
"name": "tutu",
"version": "1.0.3",
"version": "1.0.4",
"description": "",
"private": true,
"type": "module",

View file

@ -8,5 +8,5 @@
}
.custom-emoji {
width: 1.25em;
width: 1em;
}

View file

@ -31,7 +31,8 @@
bottom: 0;
height: 100vh;
height: 100dvh;
max-height: 100%;
max-height: 100vh;
max-height: 100dvh;
}
}

View file

@ -1,11 +1,15 @@
import {
children,
createEffect,
createRenderEffect,
createSignal,
onCleanup,
onMount,
startTransition,
useTransition,
type ChildrenReturn,
type ParentComponent,
type ResolvedChildren,
} from "solid-js";
import styles from "./BottomSheet.module.css";
import { useHeroSignal } from "../platform/anim";
@ -40,17 +44,21 @@ const BottomSheet: ParentComponent<BottomSheetProps> = (props) => {
let element: HTMLDialogElement;
let animation: Animation | undefined;
const hero = useHeroSignal(HERO);
const [cache, setCache] = createSignal<ResolvedChildren | undefined>();
const ochildren = children(() => props.children);
const [pending] = useTransition()
const [pending] = useTransition();
createEffect(() => {
if (props.open) {
if (!element.open && !pending()) {
animatedOpen();
setCache(ochildren());
}
} else {
if (element.open) {
animatedClose();
setCache(undefined);
}
}
});
@ -115,7 +123,7 @@ const BottomSheet: ParentComponent<BottomSheetProps> = (props) => {
return (
<dialog class={styles.bottomSheet} ref={element!}>
{props.children}
{ochildren() ?? cache()}
</dialog>
);
};

View file

@ -18,6 +18,12 @@
--body-size: 0.9375rem;
}
}
input,
textarea {
/* iOS will zoom in if the font-size is smaller than 16px (or 1rem? i dont know) */
font-size: 1rem;
}
}
[lang^="zh"],
@ -99,6 +105,7 @@
--tutu-anim-curve-sharp: cubic-bezier(0.4, 0, 0.6, 1);
@media (max-width: 300px) {
/* XS screen, like wearables */
& {
--tutu-transition-shadow: box-shadow 157.5ms var(--tutu-anim-curve-std);
@ -106,6 +113,7 @@
}
@media (max-width: 600px) {
/* Mobile */
& {
--tutu-transition-shadow: box-shadow 225ms var(--tutu-anim-curve-std);
@ -113,6 +121,7 @@
}
@media (max-width: 1200px) {
/* Tablet */
& {
--tutu-transition-shadow: box-shadow 292.5ms var(--tutu-anim-curve-std);
@ -139,4 +148,4 @@
body {
font-size: var(--body-size, 1rem);
}
}

View file

@ -50,7 +50,7 @@ const Settings: ParentComponent = () => {
topbar={
<AppBar position="static">
<Toolbar variant="dense" sx={{paddingTop: "var(--safe-area-inset-top, 0px)"}}>
<IconButton color="inherit" onClick={[navigate, -1]}>
<IconButton color="inherit" onClick={[navigate, -1]} disableRipple>
<CloseIcon />
</IconButton>
<Title>Settings</Title>

View file

@ -39,7 +39,7 @@ const CompactToot: Component<CompactTootProps> = (props) => {
@{toot().account.username}@{new URL(toot().account.url).hostname}
</span>
<time datetime={toot().createdAt}>
{formatRelative(toot().createdAt, props.now)}
{formatRelative(props.now, toot().createdAt)}
</time>
</div>
<div

View file

@ -43,6 +43,7 @@ import PullDownToRefresh from "./PullDownToRefresh";
import { HeroSourceProvider, type HeroSource } from "../platform/anim";
import { useNavigate } from "@solidjs/router";
import { useSignedInProfiles } from "../masto/acct";
import { setCache as setTootBottomSheetCache } from "./TootBottomSheet";
const TimelinePanel: Component<{
client: mastodon.rest.Client;
@ -288,6 +289,7 @@ const Home: ParentComponent = (props) => {
const rect = srcElement?.getBoundingClientRect();
setHeroSrc((x) => Object.assign({}, x, { [BOTTOM_SHEET_HERO]: rect }));
const acct = `${inf.username}@${p.account.site}`;
setTootBottomSheetCache(acct, toot);
navigate(`/${encodeURIComponent(acct)}/${toot.id}`);
};

View file

@ -177,7 +177,7 @@ function TootAuthorGroup(props: { status: mastodon.v1.Status; now: Date }) {
}}
/>
<time datetime={toot().createdAt}>
{formatRelative(toot().createdAt, props.now)}
{formatRelative(props.now, toot().createdAt)}
</time>
<span>
@{toot().account.username}@{new URL(toot().account.url).hostname}

View file

@ -1,30 +1,57 @@
import { useNavigate, useParams } from "@solidjs/router";
import { createResource, Show, type Component } from "solid-js";
import {
createEffect,
createRenderEffect,
createResource,
Show,
type Component,
} from "solid-js";
import Scaffold from "../material/Scaffold";
import TootThread from "./TootThread";
import { AppBar, IconButton, Toolbar } from "@suid/material";
import { AppBar, Avatar, IconButton, Toolbar } from "@suid/material";
import { Title } from "../material/typography";
import { Close as CloseIcon } from "@suid/icons-material";
import { Close as CloseIcon, Send } from "@suid/icons-material";
import { isiOS } from "../platform/host";
import { createUnauthorizedClient, useSessions } from "../masto/clients";
import { resolveCustomEmoji } from "../masto/toot";
import RegularToot from "./RegularToot";
import type { mastodon } from "masto";
import cards from "../material/cards.module.css";
import { css } from "solid-styled";
let cachedEntry: [string, mastodon.v1.Status] | undefined;
export function setCache(acct: string, status: mastodon.v1.Status) {
cachedEntry = [acct, status];
}
function getCache(acct: string, id: string) {
if (acct === cachedEntry?.[0] && id === cachedEntry?.[1].id) {
return cachedEntry[1];
}
}
const TootBottomSheet: Component = (props) => {
const params = useParams<{ acct: string; id: string }>();
const navigate = useNavigate();
const allSession = useSessions();
const acctText = () => decodeURIComponent(params.acct);
const session = () => {
const [inputUsername, inputSite] = decodeURIComponent(params.acct).split(
"@",
2,
);
const [inputUsername, inputSite] = acctText().split("@", 2);
const authedSession = allSession().find(
(x) =>
x.account.site === inputSite &&
x.account.inf?.username === inputUsername,
);
return authedSession ?? { client: createUnauthorizedClient(inputSite) };
return (
authedSession ?? {
client: createUnauthorizedClient(inputSite),
account: undefined,
}
);
};
const profile = () => {
return session().account;
};
const [remoteToot] = createResource(
@ -34,7 +61,7 @@ const TootBottomSheet: Component = (props) => {
},
);
const toot = remoteToot;
const toot = () => remoteToot() ?? getCache(acctText(), params.id);
const tootTitle = () => {
const t = toot();
@ -45,6 +72,17 @@ const TootBottomSheet: Component = (props) => {
return "A toot";
};
css`
.bottom-dock {
position: sticky;
bottom: 0;
}
.name :global(img) {
max-height: 1em;
}
`;
return (
<Scaffold
topbar={
@ -63,14 +101,39 @@ const TootBottomSheet: Component = (props) => {
<IconButton color="inherit" onClick={[navigate, -1]} disableRipple>
<CloseIcon />
</IconButton>
<Title>{tootTitle}</Title>
<Title
class="name"
ref={(e: HTMLElement) =>
createRenderEffect(() => (e.innerHTML = tootTitle()))
}
></Title>
</Toolbar>
</AppBar>
}
>
<div>
<article>
<Show when={toot()}>
<RegularToot status={toot()!}></RegularToot>
<RegularToot
class={cards.card}
status={toot()!}
actionable={true}
evaluated={true}
></RegularToot>
</Show>
</article>
<div class="bottom-dock">
<Show when={profile()}>
<div style="display: flex; gap: 8px; background: var(--tutu-color-surface); padding: 8px 8px calc(var(--safe-area-inset-bottom, 0px) + 8px);">
<Avatar src={profile()!.inf?.avatar} />
<textarea
placeholder={`Reply to ${toot()?.account?.displayName ?? ""}...`}
style={{ width: "100%", border: "none" }}
></textarea>
<IconButton>
<Send />
</IconButton>
</div>
</Show>
</div>
</Scaffold>