Compare commits
No commits in common. "1a7a52da22414181a4b61007f957c96f3cbbe801" and "607fa64c0596cecc3dfd3f89bb9598e829d341cf" have entirely different histories.
1a7a52da22
...
607fa64c05
25 changed files with 234 additions and 773 deletions
30
src/App.tsx
30
src/App.tsx
|
|
@ -27,7 +27,6 @@ import {
|
|||
import { Service } from "./serviceworker/services.js";
|
||||
import { makeEventListener } from "@solid-primitives/event-listener";
|
||||
import { ServiceWorkerProvider } from "./platform/host.js";
|
||||
import StackedRouter from "./platform/StackedRouter.js";
|
||||
|
||||
const AccountSignIn = lazy(() => import("./accounts/SignIn.js"));
|
||||
const AccountMastodonOAuth2Callback = lazy(
|
||||
|
|
@ -38,21 +37,24 @@ const Settings = lazy(() => import("./settings/Settings.js"));
|
|||
const TootBottomSheet = lazy(() => import("./timelines/TootBottomSheet.js"));
|
||||
const MotionSettings = lazy(() => import("./settings/Motions.js"));
|
||||
const LanguageSettings = lazy(() => import("./settings/Language.js"));
|
||||
const RegionSettings = lazy(() => import("./settings/Region.js"));
|
||||
const RegionSettings = lazy(() => import("./settings/Region.jsx"));
|
||||
const UnexpectedError = lazy(() => import("./UnexpectedError.js"));
|
||||
const Profile = lazy(() => import("./profiles/Profile.js"));
|
||||
|
||||
const Routing: Component = () => {
|
||||
return (
|
||||
<StackedRouter>
|
||||
<Route path="/" component={TimelineHome} />
|
||||
<Route path="/settings/language" component={LanguageSettings} />
|
||||
<Route path="/settings/region" component={RegionSettings} />
|
||||
<Route path="/settings/motions" component={MotionSettings} />
|
||||
<Route path="/settings" component={Settings} />
|
||||
<Route path="/:acct/toot/:id" component={TootBottomSheet} />
|
||||
<Route path="/:acct/profile/:id" component={Profile} />
|
||||
|
||||
<Router>
|
||||
<Route path="/" component={TimelineHome}>
|
||||
<Route path=""></Route>
|
||||
<Route path="/settings" component={Settings}>
|
||||
<Route path=""></Route>
|
||||
<Route path="/language" component={LanguageSettings}></Route>
|
||||
<Route path="/region" component={RegionSettings}></Route>
|
||||
<Route path="/motions" component={MotionSettings}></Route>
|
||||
</Route>
|
||||
<Route path="/:acct/toot/:id" component={TootBottomSheet}></Route>
|
||||
<Route path="/:acct/profile/:id" component={Profile}></Route>
|
||||
</Route>
|
||||
<Route path={"/accounts"}>
|
||||
<Route path={"/sign-in"} component={AccountSignIn} />
|
||||
<Route
|
||||
|
|
@ -60,7 +62,7 @@ const Routing: Component = () => {
|
|||
component={AccountMastodonOAuth2Callback}
|
||||
/>
|
||||
</Route>
|
||||
</StackedRouter>
|
||||
</Router>
|
||||
);
|
||||
};
|
||||
|
||||
|
|
@ -68,9 +70,7 @@ const App: Component = () => {
|
|||
const theme = useRootTheme();
|
||||
const accts = useStore($accounts);
|
||||
const lang = useLanguage();
|
||||
const [serviceWorker, setServiceWorker] = createSignal<
|
||||
ServiceWorker | undefined
|
||||
>(undefined, { name: "serviceWorker" });
|
||||
const [serviceWorker, setServiceWorker] = createSignal<ServiceWorker>();
|
||||
const dispatcher = new ResultDispatcher();
|
||||
|
||||
let checkAge = 0;
|
||||
|
|
|
|||
|
|
@ -49,13 +49,11 @@ const UnexpectedError: Component<{ error?: any }> = (props) => {
|
|||
<h1>Oh, it is our fault.</h1>
|
||||
<p>There is an unexpected error in our app, and it's not your fault.</p>
|
||||
<p>
|
||||
You can restart the app to see if this guy is gone. If you meet this guy
|
||||
You can reload to see if this guy is gone. If you meet this guy
|
||||
repeatly, please report to us.
|
||||
</p>
|
||||
<div>
|
||||
<Button onClick={() => (window.location.replace("/"))}>
|
||||
Restart App
|
||||
</Button>
|
||||
<Button onClick={() => window.location.reload()}>Reload</Button>
|
||||
</div>
|
||||
<details>
|
||||
<summary>
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import { useSearchParams } from "@solidjs/router";
|
||||
import { useNavigate, useSearchParams } from "@solidjs/router";
|
||||
import {
|
||||
Component,
|
||||
Show,
|
||||
|
|
@ -14,7 +14,6 @@ import { LinearProgress } from "@suid/material";
|
|||
import Img from "../material/Img";
|
||||
import { createRestAPIClient } from "masto";
|
||||
import { Title } from "../material/typography";
|
||||
import { useNavigator } from "../platform/StackedRouter";
|
||||
|
||||
type OAuth2CallbackParams = {
|
||||
code?: string;
|
||||
|
|
@ -26,7 +25,7 @@ const MastodonOAuth2Callback: Component = () => {
|
|||
const progressId = createUniqueId();
|
||||
const titleId = createUniqueId();
|
||||
const [params] = useSearchParams<OAuth2CallbackParams>();
|
||||
const { push: navigate } = useNavigator();
|
||||
const navigate = useNavigate();
|
||||
const setDocumentTitle = useDocumentTitle("Back from Mastodon...");
|
||||
const [siteImg, setSiteImg] = createSignal<{
|
||||
src: string;
|
||||
|
|
|
|||
|
|
@ -8,8 +8,7 @@ import {
|
|||
} from "solid-js";
|
||||
import { Account } from "../accounts/stores";
|
||||
import { createRestAPIClient, mastodon } from "masto";
|
||||
import { useLocation } from "@solidjs/router";
|
||||
import { useNavigator } from "../platform/StackedRouter";
|
||||
import { useLocation, useNavigate } from "@solidjs/router";
|
||||
|
||||
const restfulCache: Record<string, mastodon.rest.Client> = {};
|
||||
|
||||
|
|
@ -57,12 +56,12 @@ export const Provider = Context.Provider;
|
|||
|
||||
export function useSessions() {
|
||||
const sessions = useSessionsRaw();
|
||||
const {push} = useNavigator();
|
||||
const navigate = useNavigate();
|
||||
const location = useLocation();
|
||||
|
||||
createRenderEffect(() => {
|
||||
if (sessions().length > 0) return;
|
||||
push(
|
||||
navigate(
|
||||
"/accounts/sign-in?back=" + encodeURIComponent(location.pathname),
|
||||
{ replace: true },
|
||||
);
|
||||
|
|
|
|||
|
|
@ -25,6 +25,22 @@
|
|||
|
||||
box-shadow: var(--tutu-shadow-e16);
|
||||
|
||||
.MuiToolbar-root {
|
||||
>.MuiButtonBase-root {
|
||||
|
||||
&:first-child {
|
||||
margin-left: -0.5em;
|
||||
margin-right: 24px;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
margin-right: -0.5em;
|
||||
margin-left: 24px;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 560px) {
|
||||
& {
|
||||
left: 0;
|
||||
|
|
|
|||
|
|
@ -1,42 +1,22 @@
|
|||
.Scaffold>.topbar {
|
||||
|
||||
.Scaffold__topbar {
|
||||
position: sticky;
|
||||
top: 0px;
|
||||
z-index: var(--tutu-zidx-nav, auto);
|
||||
|
||||
.MuiToolbar-root {
|
||||
>.MuiButtonBase-root {
|
||||
&:first-child {
|
||||
margin-left: -0.5em;
|
||||
margin-right: 24px;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
margin-right: -0.5em;
|
||||
margin-left: 24px;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.Scaffold>.fab-dock {
|
||||
.Scaffold__fab-dock {
|
||||
position: fixed;
|
||||
bottom: 40px;
|
||||
right: 40px;
|
||||
z-index: var(--tutu-zidx-nav, auto);
|
||||
}
|
||||
|
||||
.Scaffold>.bottom-dock {
|
||||
.Scaffold__bottom-dock {
|
||||
position: sticky;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: var(--tutu-zidx-nav, auto);
|
||||
padding-bottom: var(--safe-area-inset-bottom, 0);
|
||||
}
|
||||
|
||||
.Scaffold {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
background-color: var(--tutu-color-surface);
|
||||
}
|
||||
|
|
@ -28,48 +28,42 @@ const Scaffold: Component<ScaffoldProps> = (props) => {
|
|||
"bottom",
|
||||
"children",
|
||||
"ref",
|
||||
"class",
|
||||
]);
|
||||
const [topbarElement, setTopbarElement] = createSignal<HTMLElement>();
|
||||
|
||||
const topbarSize = createElementSize(topbarElement);
|
||||
|
||||
return (
|
||||
<div
|
||||
class={`Scaffold ${managed.class || ""}`}
|
||||
ref={(e) => {
|
||||
createRenderEffect(() => {
|
||||
e.style.setProperty(
|
||||
"--scaffold-topbar-height",
|
||||
(topbarSize.height?.toString() ?? 0) + "px",
|
||||
);
|
||||
});
|
||||
|
||||
if (managed.ref) {
|
||||
(managed.ref as (val: typeof e) => void)(e);
|
||||
}
|
||||
}}
|
||||
{...rest}
|
||||
>
|
||||
<>
|
||||
<Show when={props.topbar}>
|
||||
<div class="topbar" ref={setTopbarElement} role="presentation">
|
||||
<div class="Scaffold__topbar" ref={setTopbarElement} role="presentation">
|
||||
{props.topbar}
|
||||
</div>
|
||||
</Show>
|
||||
<Show when={props.fab}>
|
||||
<div class="fab-dock" role="presentation">
|
||||
{props.fab}
|
||||
</div>
|
||||
<div class="Scaffold__fab-dock" role="presentation">{props.fab}</div>
|
||||
</Show>
|
||||
<div
|
||||
ref={(e) => {
|
||||
createRenderEffect(() => {
|
||||
e.style.setProperty(
|
||||
"--scaffold-topbar-height",
|
||||
(topbarSize.height?.toString() ?? 0) + "px",
|
||||
);
|
||||
});
|
||||
|
||||
{managed.children}
|
||||
|
||||
if (managed.ref) {
|
||||
(managed.ref as (val: typeof e) => void)(e);
|
||||
}
|
||||
}}
|
||||
{...rest}
|
||||
>
|
||||
{managed.children}
|
||||
</div>
|
||||
<Show when={props.bottom}>
|
||||
<div class="bottom-dock" role="presentation">
|
||||
{props.bottom}
|
||||
</div>
|
||||
<div class="Scaffold__bottom-dock" role="presentation">{props.bottom}</div>
|
||||
</Show>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -1,21 +0,0 @@
|
|||
import { splitProps, type JSX } from "solid-js";
|
||||
import { useNavigator } from "./StackedRouter";
|
||||
import { useResolvedPath } from "@solidjs/router";
|
||||
|
||||
function handleClick(
|
||||
push: (name: string, state: unknown) => void,
|
||||
event: MouseEvent & { currentTarget: HTMLAnchorElement },
|
||||
) {
|
||||
const target = event.currentTarget;
|
||||
event.preventDefault();
|
||||
push(target.href, { state: target.getAttribute("state") || undefined });
|
||||
}
|
||||
|
||||
const A = (oprops: Omit<JSX.HTMLElementTags["a"], "onClick" | "onclick">) => {
|
||||
const [props, rest] = splitProps(oprops, ["href"]);
|
||||
const resolvedPath = useResolvedPath(() => props.href || "#");
|
||||
const { push } = useNavigator();
|
||||
return <a onClick={[handleClick, push]} href={resolvedPath()} {...rest}></a>;
|
||||
};
|
||||
|
||||
export default A;
|
||||
|
|
@ -1,24 +0,0 @@
|
|||
import type { IconButtonProps } from "@suid/material/IconButton";
|
||||
import IconButton from "@suid/material/IconButton";
|
||||
import { Show, type Component } from "solid-js";
|
||||
import { useCurrentFrame, useNavigator } from "./StackedRouter";
|
||||
import { ArrowBack, Close } from "@suid/icons-material";
|
||||
|
||||
export type BackButtonProps = Omit<IconButtonProps, "onClick" | "children">;
|
||||
|
||||
const BackButton: Component<BackButtonProps> = (props) => {
|
||||
const currentFrame = useCurrentFrame();
|
||||
const { pop } = useNavigator();
|
||||
|
||||
const hasPrevSubPage = () => currentFrame().index > 1;
|
||||
|
||||
return (
|
||||
<IconButton onClick={[pop, 1]} {...props}>
|
||||
<Show when={hasPrevSubPage()} fallback={<Close />}>
|
||||
<ArrowBack />
|
||||
</Show>
|
||||
</IconButton>
|
||||
);
|
||||
};
|
||||
|
||||
export default BackButton;
|
||||
|
|
@ -1,59 +0,0 @@
|
|||
.StackedPage {
|
||||
container: StackedPage / size;
|
||||
display: contents;
|
||||
max-width: 100vw;
|
||||
max-width: 100dvw;
|
||||
|
||||
contain: layout;
|
||||
}
|
||||
|
||||
dialog.StackedPage {
|
||||
border: none;
|
||||
position: fixed;
|
||||
padding: 0;
|
||||
overscroll-behavior: none;
|
||||
width: 560px;
|
||||
max-height: 100vh;
|
||||
max-height: 100dvh;
|
||||
background: none;
|
||||
display: none;
|
||||
|
||||
contain: strict;
|
||||
contain-intrinsic-size: auto 560px auto 100vh;
|
||||
contain-intrinsic-size: auto 560px auto 100dvh;
|
||||
content-visibility: auto;
|
||||
|
||||
background: var(--tutu-color-surface);
|
||||
box-shadow: var(--tutu-shadow-e16);
|
||||
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
|
||||
@media (max-width: 560px) {
|
||||
& {
|
||||
width: 100vw;
|
||||
width: 100dvw;
|
||||
height: 100vh;
|
||||
height: 100dvh;
|
||||
contain-intrinsic-size: 100vw 100vh;
|
||||
contain-intrinsic-size: 100dvw 100dvh;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
&[open] {
|
||||
display: contents;
|
||||
}
|
||||
|
||||
&::backdrop {
|
||||
background: none;
|
||||
}
|
||||
|
||||
&.animating {
|
||||
overflow: hidden;
|
||||
|
||||
* {
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,432 +0,0 @@
|
|||
import { StaticRouter, type RouterProps } from "@solidjs/router";
|
||||
import {
|
||||
Component,
|
||||
createContext,
|
||||
createRenderEffect,
|
||||
createUniqueId,
|
||||
Index,
|
||||
onMount,
|
||||
Show,
|
||||
untrack,
|
||||
useContext,
|
||||
type Accessor,
|
||||
} from "solid-js";
|
||||
import { createStore, unwrap } from "solid-js/store";
|
||||
import "./StackedRouter.css";
|
||||
import { animateSlideInFromRight, animateSlideOutToRight } from "./anim";
|
||||
import { ANIM_CURVE_DECELERATION, ANIM_CURVE_STD } from "../material/theme";
|
||||
import {
|
||||
makeEventListener,
|
||||
} from "@solid-primitives/event-listener";
|
||||
|
||||
export type StackedRouterProps = Omit<RouterProps, "url">;
|
||||
|
||||
export type StackFrame = {
|
||||
path: string;
|
||||
rootId: string;
|
||||
state: unknown;
|
||||
|
||||
animateOpen?: (element: HTMLElement) => Animation;
|
||||
animateClose?: (element: HTMLElement) => Animation;
|
||||
};
|
||||
|
||||
export type NewFrameOptions<T> = (T extends undefined
|
||||
? {
|
||||
state?: T;
|
||||
}
|
||||
: { state: T }) & {
|
||||
/**
|
||||
* The new frame should replace the current frame.
|
||||
*/
|
||||
replace?: boolean;
|
||||
/**
|
||||
* The animatedOpen phase of the life cycle.
|
||||
*
|
||||
* You can use this hook to animate the opening
|
||||
* of the frame. In this phase, the frame content is created
|
||||
* and is mounted to the document.
|
||||
*
|
||||
* You must return an {@link Animation}. This function must be
|
||||
* without side effects. This phase is ended after the {@link Animation}
|
||||
* finished.
|
||||
*/
|
||||
animateOpen?: StackFrame["animateOpen"];
|
||||
/**
|
||||
* The animatedClose phase of the life cycle.
|
||||
*
|
||||
* You can use this hook to animate the closing of the frame.
|
||||
* In this phase, the frame content is still mounted in the
|
||||
* document and will be unmounted after this phase.
|
||||
*
|
||||
* You must return an {@link Animation}. This function must be
|
||||
* without side effects. This phase is ended after the
|
||||
* {@link Animation} finished.
|
||||
*/
|
||||
animateClose?: StackFrame["animateClose"];
|
||||
};
|
||||
|
||||
export type FramePusher<T, K extends keyof T = keyof T> = T[K] extends
|
||||
| undefined
|
||||
| any
|
||||
? (path: K, state?: Readonly<NewFrameOptions<T[K]>>) => Readonly<StackFrame>
|
||||
: (path: K, state: Readonly<NewFrameOptions<T[K]>>) => Readonly<StackFrame>;
|
||||
|
||||
export type Navigator<PushGuide = Record<string, any>> = {
|
||||
frames: readonly StackFrame[];
|
||||
push: FramePusher<PushGuide>;
|
||||
pop: (depth?: number) => void;
|
||||
};
|
||||
|
||||
const NavigatorContext = /* @__PURE__ */ createContext<Navigator>();
|
||||
|
||||
export function useMaybeNavigator() {
|
||||
return useContext(NavigatorContext);
|
||||
}
|
||||
|
||||
/**
|
||||
* Get the navigator of the {@link StackedRouter}.
|
||||
*
|
||||
* This function returns a {@link Navigator} without available
|
||||
* push guide. Push guide is a record type contains available
|
||||
* path and its state. If you need push guide, you may want to
|
||||
* define your own function (like `useAppNavigator`) and cast the
|
||||
* navigator to the type you need.
|
||||
*/
|
||||
export function useNavigator() {
|
||||
const navigator = useMaybeNavigator();
|
||||
|
||||
if (!navigator) {
|
||||
throw new TypeError("not in available scope of StackedRouter");
|
||||
}
|
||||
|
||||
return navigator;
|
||||
}
|
||||
|
||||
export type CurrentFrame = {
|
||||
index: number;
|
||||
frame: Readonly<StackFrame>;
|
||||
};
|
||||
|
||||
const CurrentFrameContext =
|
||||
/* @__PURE__ */ createContext<Accessor<Readonly<CurrentFrame>>>();
|
||||
|
||||
export function useMaybeCurrentFrame() {
|
||||
return useContext(CurrentFrameContext);
|
||||
}
|
||||
|
||||
export function useCurrentFrame() {
|
||||
const frame = useMaybeCurrentFrame();
|
||||
|
||||
if (!frame) {
|
||||
throw new TypeError("not in available scope of StackedRouter");
|
||||
}
|
||||
|
||||
return frame;
|
||||
}
|
||||
|
||||
/**
|
||||
* Return an accessor of is current frame is suspended.
|
||||
*
|
||||
* A suspended frame is the one not on the top. "Suspended"
|
||||
* is the description of a certain situtation, not in the life cycle
|
||||
* of a frame.
|
||||
*/
|
||||
export function useMaybeIsFrameSuspended() {
|
||||
const { frames } = useMaybeNavigator() || {};
|
||||
|
||||
if (typeof frames === "undefined") {
|
||||
return () => false;
|
||||
}
|
||||
|
||||
const thisFrame = useCurrentFrame();
|
||||
|
||||
return () => {
|
||||
const idx = thisFrame().index;
|
||||
return frames.length - 1 > idx;
|
||||
};
|
||||
}
|
||||
|
||||
function onDialogClick(
|
||||
onClose: () => void,
|
||||
event: MouseEvent & { currentTarget: HTMLDialogElement },
|
||||
) {
|
||||
if (event.target !== event.currentTarget) return;
|
||||
const rect = event.currentTarget.getBoundingClientRect();
|
||||
const isNotInDialog =
|
||||
event.clientY < rect.top ||
|
||||
event.clientY > rect.bottom ||
|
||||
event.clientX < rect.left ||
|
||||
event.clientX > rect.right;
|
||||
if (isNotInDialog) {
|
||||
onClose();
|
||||
}
|
||||
}
|
||||
|
||||
function animateClose(element: HTMLElement) {
|
||||
if (window.innerWidth <= 560) {
|
||||
return animateSlideOutToRight(element, { easing: ANIM_CURVE_DECELERATION });
|
||||
} else {
|
||||
return element.animate(
|
||||
{
|
||||
opacity: [0.5, 0],
|
||||
},
|
||||
{ easing: ANIM_CURVE_STD, duration: 220 },
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
function animateOpen(element: HTMLElement) {
|
||||
if (window.innerWidth <= 560) {
|
||||
return animateSlideInFromRight(element, {
|
||||
easing: ANIM_CURVE_DECELERATION,
|
||||
});
|
||||
} else {
|
||||
return element.animate(
|
||||
{
|
||||
opacity: [0.5, 1],
|
||||
},
|
||||
{ easing: ANIM_CURVE_STD, duration: 220 },
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
function serializableStack(stack: readonly StackFrame[]) {
|
||||
const frames = unwrap(stack);
|
||||
return frames.map((fr) => {
|
||||
return fr.animateClose || fr.animateOpen
|
||||
? {
|
||||
path: fr.path,
|
||||
rootId: fr.rootId,
|
||||
state: fr.state,
|
||||
}
|
||||
: fr;
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* The router that stacks the pages.
|
||||
*/
|
||||
const StackedRouter: Component<StackedRouterProps> = (oprops) => {
|
||||
const [stack, mutStack] = createStore([] as StackFrame[], { name: "stack" });
|
||||
|
||||
const pushFrame = (path: string, opts?: Readonly<NewFrameOptions<any>>) =>
|
||||
untrack(() => {
|
||||
const frame = {
|
||||
path,
|
||||
state: opts?.state,
|
||||
rootId: createUniqueId(),
|
||||
animateOpen: opts?.animateOpen,
|
||||
animateClose: opts?.animateClose,
|
||||
};
|
||||
|
||||
mutStack(opts?.replace ? stack.length - 1 : stack.length, frame);
|
||||
if (opts?.replace) {
|
||||
window.history.replaceState(serializableStack(stack), "", path);
|
||||
} else {
|
||||
window.history.pushState(serializableStack(stack), "", path);
|
||||
}
|
||||
return frame;
|
||||
});
|
||||
|
||||
const onlyPopFrame = (depth: number) => {
|
||||
mutStack((o) => o.toSpliced(o.length - depth, depth));
|
||||
window.history.go(-depth);
|
||||
};
|
||||
|
||||
const popFrame = (depth: number = 1) =>
|
||||
untrack(() => {
|
||||
if (import.meta.env.DEV) {
|
||||
if (depth < 0) {
|
||||
console.warn("the depth to pop should not < 0, now is", depth);
|
||||
}
|
||||
}
|
||||
if (stack.length > 1) {
|
||||
const lastFrame = stack[stack.length - 1];
|
||||
const element = document.getElementById(
|
||||
lastFrame.rootId,
|
||||
)! as HTMLDialogElement;
|
||||
const createAnimation = lastFrame.animateClose ?? animateClose;
|
||||
requestAnimationFrame(() => {
|
||||
element.classList.add("animating");
|
||||
const animation = createAnimation(element);
|
||||
animation.addEventListener("finish", () => {
|
||||
element.classList.remove("animating");
|
||||
onlyPopFrame(depth);
|
||||
});
|
||||
});
|
||||
} else {
|
||||
onlyPopFrame(depth);
|
||||
}
|
||||
});
|
||||
|
||||
createRenderEffect(() => {
|
||||
if (stack.length === 0) {
|
||||
pushFrame(window.location.pathname);
|
||||
}
|
||||
});
|
||||
|
||||
createRenderEffect(() => {
|
||||
makeEventListener(window, "popstate", (event) => {
|
||||
if (!event.state) return;
|
||||
|
||||
if (stack.length === 0) {
|
||||
mutStack(event.state);
|
||||
} else if (stack.length > event.state.length) {
|
||||
popFrame(stack.length - event.state.length);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
const onBeforeDialogMount = (element: HTMLDialogElement) => {
|
||||
onMount(() => {
|
||||
const lastFr = untrack(() => stack[stack.length - 1]);
|
||||
const createAnimation = lastFr.animateOpen ?? animateOpen;
|
||||
requestAnimationFrame(() => {
|
||||
element.showModal();
|
||||
element.classList.add("animating");
|
||||
const animation = createAnimation(element);
|
||||
animation.addEventListener("finish", () =>
|
||||
element.classList.remove("animating"),
|
||||
);
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
let reenterableAnimation: Animation | undefined;
|
||||
let origX = 0,
|
||||
origWidth = 0;
|
||||
|
||||
const resetAnimation = () => {
|
||||
reenterableAnimation = undefined;
|
||||
};
|
||||
|
||||
const onDialogTouchStart = (
|
||||
event: TouchEvent & { currentTarget: HTMLDialogElement },
|
||||
) => {
|
||||
if (event.touches.length !== 1) {
|
||||
return;
|
||||
}
|
||||
const [fig0] = event.touches;
|
||||
const { x, width } = event.currentTarget.getBoundingClientRect();
|
||||
if (fig0.clientX < x - 22 || fig0.clientX > x + 22) {
|
||||
return;
|
||||
}
|
||||
origX = x;
|
||||
origWidth = width;
|
||||
|
||||
const lastFr = stack[stack.length - 1];
|
||||
const createAnimation = lastFr.animateClose ?? animateClose;
|
||||
reenterableAnimation = createAnimation(event.currentTarget);
|
||||
reenterableAnimation.pause();
|
||||
reenterableAnimation.addEventListener("finish", resetAnimation);
|
||||
reenterableAnimation.addEventListener("cancel", resetAnimation);
|
||||
};
|
||||
|
||||
const onDialogTouchMove = (
|
||||
event: TouchEvent & { currentTarget: HTMLDialogElement },
|
||||
) => {
|
||||
if (event.touches.length !== 1) {
|
||||
if (reenterableAnimation) {
|
||||
reenterableAnimation.reverse();
|
||||
reenterableAnimation.play();
|
||||
}
|
||||
}
|
||||
|
||||
if (!reenterableAnimation) return;
|
||||
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
|
||||
const [fig0] = event.touches;
|
||||
const ofsX = fig0.clientX - origX;
|
||||
const pc = ofsX / origWidth / window.devicePixelRatio;
|
||||
|
||||
const { activeDuration, delay } =
|
||||
reenterableAnimation.effect!.getComputedTiming();
|
||||
|
||||
const totalTime = (delay || 0) + Number(activeDuration);
|
||||
reenterableAnimation.currentTime = totalTime * pc;
|
||||
};
|
||||
|
||||
const onDialogTouchEnd = (event: TouchEvent) => {
|
||||
if (!reenterableAnimation) return;
|
||||
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
|
||||
const { activeDuration, delay } =
|
||||
reenterableAnimation.effect!.getComputedTiming();
|
||||
const totalTime = (delay || 0) + Number(activeDuration);
|
||||
|
||||
if (Number(reenterableAnimation.currentTime) / totalTime > 0.1) {
|
||||
reenterableAnimation.addEventListener("finish", () => {
|
||||
onlyPopFrame(1);
|
||||
});
|
||||
reenterableAnimation.play();
|
||||
} else {
|
||||
reenterableAnimation.cancel();
|
||||
}
|
||||
};
|
||||
|
||||
const onDialogTouchCancel = (event: TouchEvent) => {
|
||||
if (!reenterableAnimation) return;
|
||||
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
reenterableAnimation.cancel();
|
||||
};
|
||||
|
||||
return (
|
||||
<NavigatorContext.Provider
|
||||
value={{
|
||||
push: pushFrame,
|
||||
pop: popFrame,
|
||||
frames: stack,
|
||||
}}
|
||||
>
|
||||
<Index each={stack}>
|
||||
{(frame, index) => {
|
||||
const currentFrame = () => {
|
||||
return {
|
||||
index,
|
||||
frame: frame(),
|
||||
};
|
||||
};
|
||||
|
||||
return (
|
||||
<CurrentFrameContext.Provider value={currentFrame}>
|
||||
<Show
|
||||
when={index !== 0}
|
||||
fallback={
|
||||
<div
|
||||
class="StackedPage"
|
||||
id={frame().rootId}
|
||||
role="presentation"
|
||||
>
|
||||
<StaticRouter url={frame().path} {...oprops} />
|
||||
</div>
|
||||
}
|
||||
>
|
||||
<dialog
|
||||
ref={onBeforeDialogMount}
|
||||
class="StackedPage"
|
||||
onCancel={[popFrame, 1]}
|
||||
onClick={[onDialogClick, popFrame]}
|
||||
onTouchStart={onDialogTouchStart}
|
||||
onTouchMove={onDialogTouchMove}
|
||||
onTouchEnd={onDialogTouchEnd}
|
||||
onTouchCancel={onDialogTouchCancel}
|
||||
id={frame().rootId}
|
||||
>
|
||||
<StaticRouter url={frame().path} {...oprops} />
|
||||
</dialog>
|
||||
</Show>
|
||||
</CurrentFrameContext.Provider>
|
||||
);
|
||||
}}
|
||||
</Index>
|
||||
</NavigatorContext.Provider>
|
||||
);
|
||||
};
|
||||
|
||||
export default StackedRouter;
|
||||
|
|
@ -1,6 +1,4 @@
|
|||
.Profile {
|
||||
height: 100%;
|
||||
|
||||
.intro {
|
||||
background-color: var(--tutu-color-surface-d);
|
||||
color: var(--tutu-color-on-surface);
|
||||
|
|
|
|||
|
|
@ -45,7 +45,7 @@ import {
|
|||
Verified,
|
||||
} from "@suid/icons-material";
|
||||
import { Body2, Title } from "../material/typography";
|
||||
import { useParams } from "@solidjs/router";
|
||||
import { useNavigate, useParams } from "@solidjs/router";
|
||||
import { useSessionForAcctStr } from "../masto/clients";
|
||||
import { resolveCustomEmoji } from "../masto/toot";
|
||||
import { FastAverageColor } from "fast-average-color";
|
||||
|
|
@ -57,10 +57,9 @@ import TootFilterButton from "./TootFilterButton";
|
|||
import Menu, { createManagedMenuState } from "../material/Menu";
|
||||
import { share } from "../platform/share";
|
||||
import "./Profile.css";
|
||||
import { useNavigator } from "../platform/StackedRouter";
|
||||
|
||||
const Profile: Component = () => {
|
||||
const { pop } = useNavigator();
|
||||
const navigate = useNavigate();
|
||||
const params = useParams<{ acct: string; id: string }>();
|
||||
const acctText = () => decodeURIComponent(params.acct);
|
||||
const session = useSessionForAcctStr(acctText);
|
||||
|
|
@ -210,7 +209,11 @@ const Profile: Component = () => {
|
|||
paddingTop: "var(--safe-area-inset-top)",
|
||||
}}
|
||||
>
|
||||
<IconButton color="inherit" onClick={[pop, 1]} aria-label="Close">
|
||||
<IconButton
|
||||
color="inherit"
|
||||
onClick={[navigate, -1]}
|
||||
aria-label="Close"
|
||||
>
|
||||
<Close />
|
||||
</IconButton>
|
||||
<Title
|
||||
|
|
|
|||
|
|
@ -24,10 +24,10 @@ import { Title } from "../material/typography";
|
|||
import type { Template } from "@solid-primitives/i18n";
|
||||
import { useStore } from "@nanostores/solid";
|
||||
import { $settings } from "./stores";
|
||||
import { useNavigator } from "../platform/StackedRouter";
|
||||
import { useNavigate } from "@solidjs/router";
|
||||
|
||||
const ChooseLang: Component = () => {
|
||||
const { pop } = useNavigator();
|
||||
const navigate = useNavigate()
|
||||
const [t] = createTranslator(
|
||||
() => import("./i18n/lang-names.json"),
|
||||
(code) =>
|
||||
|
|
@ -37,9 +37,9 @@ const ChooseLang: Component = () => {
|
|||
};
|
||||
}>,
|
||||
);
|
||||
const settings = useStore($settings);
|
||||
const settings = useStore($settings)
|
||||
|
||||
const code = () => settings().language;
|
||||
const code = () => settings().language
|
||||
|
||||
const unsupportedLangCodes = createMemo(() => {
|
||||
return iso639_1.getAllCodes().filter((x) => !["zh", "en"].includes(x));
|
||||
|
|
@ -48,8 +48,8 @@ const ChooseLang: Component = () => {
|
|||
const matchedLangCode = createMemo(() => autoMatchLangTag());
|
||||
|
||||
const onCodeChange = (code?: string) => {
|
||||
$settings.setKey("language", code);
|
||||
};
|
||||
$settings.setKey("language", code)
|
||||
}
|
||||
|
||||
return (
|
||||
<Scaffold
|
||||
|
|
@ -59,7 +59,7 @@ const ChooseLang: Component = () => {
|
|||
variant="dense"
|
||||
sx={{ paddingTop: "var(--safe-area-inset-top, 0px)" }}
|
||||
>
|
||||
<IconButton color="inherit" onClick={[pop, 1]} disableRipple>
|
||||
<IconButton color="inherit" onClick={[navigate, -1]} disableRipple>
|
||||
<ArrowBack />
|
||||
</IconButton>
|
||||
<Title>{t("Choose Language")}</Title>
|
||||
|
|
@ -96,10 +96,7 @@ const ChooseLang: Component = () => {
|
|||
<ListItemText>{t(`lang.${c}`)}</ListItemText>
|
||||
<ListItemSecondaryAction>
|
||||
<Radio
|
||||
checked={
|
||||
code() === c ||
|
||||
(code() === undefined && matchedLangCode() == c)
|
||||
}
|
||||
checked={code() === c || (code() === undefined && matchedLangCode() == c)}
|
||||
/>
|
||||
</ListItemSecondaryAction>
|
||||
</ListItemButton>
|
||||
|
|
|
|||
|
|
@ -13,14 +13,14 @@ import {
|
|||
Toolbar,
|
||||
} from "@suid/material";
|
||||
import { Title } from "../material/typography";
|
||||
import { useNavigate } from "@solidjs/router";
|
||||
import { ArrowBack } from "@suid/icons-material";
|
||||
import { createTranslator } from "../platform/i18n";
|
||||
import { useStore } from "@nanostores/solid";
|
||||
import { $settings } from "./stores";
|
||||
import { useNavigator } from "../platform/StackedRouter";
|
||||
|
||||
const Motions: Component = () => {
|
||||
const {pop} = useNavigator();
|
||||
const navigate = useNavigate();
|
||||
const [t] = createTranslator(
|
||||
(code) =>
|
||||
import(`./i18n/${code}.json`) as Promise<{
|
||||
|
|
@ -36,7 +36,7 @@ const Motions: Component = () => {
|
|||
variant="dense"
|
||||
sx={{ paddingTop: "var(--safe-area-inset-top, 0px)" }}
|
||||
>
|
||||
<IconButton color="inherit" onClick={[pop, 1]} disableRipple>
|
||||
<IconButton color="inherit" onClick={[navigate, -1]} disableRipple>
|
||||
<ArrowBack />
|
||||
</IconButton>
|
||||
<Title>{t("motions")}</Title>
|
||||
|
|
|
|||
|
|
@ -20,12 +20,12 @@ import {
|
|||
} from "../platform/i18n";
|
||||
import { Title } from "../material/typography";
|
||||
import type { Template } from "@solid-primitives/i18n";
|
||||
import { useNavigate } from "@solidjs/router";
|
||||
import { $settings } from "./stores";
|
||||
import { useStore } from "@nanostores/solid";
|
||||
import { useNavigator } from "../platform/StackedRouter";
|
||||
|
||||
const ChooseRegion: Component = () => {
|
||||
const {pop} = useNavigator();
|
||||
const navigate = useNavigate();
|
||||
const [t] = createTranslator(
|
||||
() => import("./i18n/lang-names.json"),
|
||||
(code) =>
|
||||
|
|
@ -54,7 +54,7 @@ const ChooseRegion: Component = () => {
|
|||
variant="dense"
|
||||
sx={{ paddingTop: "var(--safe-area-inset-top, 0px)" }}
|
||||
>
|
||||
<IconButton color="inherit" onClick={[pop, 1]} disableRipple>
|
||||
<IconButton color="inherit" onClick={[navigate, -1]} disableRipple>
|
||||
<ArrowBack />
|
||||
</IconButton>
|
||||
<Title>{t("Choose Region")}</Title>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,10 @@
|
|||
import {
|
||||
children,
|
||||
createSignal,
|
||||
For,
|
||||
Show,
|
||||
type Component,
|
||||
type JSX,
|
||||
type ParentComponent,
|
||||
} from "solid-js";
|
||||
import Scaffold from "../material/Scaffold.js";
|
||||
import {
|
||||
|
|
@ -27,7 +30,7 @@ import {
|
|||
Refresh as RefreshIcon,
|
||||
Translate as TranslateIcon,
|
||||
} from "@suid/icons-material";
|
||||
import A from "../platform/A.js";
|
||||
import { A, useNavigate } from "@solidjs/router";
|
||||
import { Title } from "../material/typography.jsx";
|
||||
import { css } from "solid-styled";
|
||||
import { signOut, type Account } from "../accounts/stores.js";
|
||||
|
|
@ -41,9 +44,9 @@ import {
|
|||
useDateFnLocale,
|
||||
} from "../platform/i18n.jsx";
|
||||
import { type Template } from "@solid-primitives/i18n";
|
||||
import BottomSheet from "../material/BottomSheet.jsx";
|
||||
import { useServiceWorker } from "../platform/host.js";
|
||||
import { useSessions } from "../masto/clients.js";
|
||||
import { useNavigator } from "../platform/StackedRouter.jsx";
|
||||
|
||||
type Inset = {
|
||||
top?: number;
|
||||
|
|
@ -159,7 +162,7 @@ type Strings = {
|
|||
["lang.auto"]: Template<{ detected: string }>;
|
||||
} & Record<string, string | undefined>;
|
||||
|
||||
const Settings: Component = () => {
|
||||
const Settings: ParentComponent = (props) => {
|
||||
const [t] = createTranslator(
|
||||
(code) =>
|
||||
import(`./i18n/${code}.json`) as Promise<{
|
||||
|
|
@ -167,9 +170,9 @@ const Settings: Component = () => {
|
|||
}>,
|
||||
() => import(`./i18n/lang-names.json`),
|
||||
);
|
||||
const {pop} = useNavigator();
|
||||
const navigate = useNavigate();
|
||||
const settings$ = useStore($settings);
|
||||
const { needRefresh } = useServiceWorker();
|
||||
const { needRefresh, offlineReady } = useServiceWorker();
|
||||
const dateFnLocale = useDateFnLocale();
|
||||
|
||||
const profiles = useSessions();
|
||||
|
|
@ -178,6 +181,8 @@ const Settings: Component = () => {
|
|||
signOut((a) => a.site === acct.site && a.accessToken === acct.accessToken);
|
||||
};
|
||||
|
||||
const subpage = children(() => props.children);
|
||||
|
||||
css`
|
||||
ul {
|
||||
padding: 0;
|
||||
|
|
@ -195,7 +200,7 @@ const Settings: Component = () => {
|
|||
variant="dense"
|
||||
sx={{ paddingTop: "var(--safe-area-inset-top, 0px)" }}
|
||||
>
|
||||
<IconButton color="inherit" onClick={[pop, 1]} disableRipple>
|
||||
<IconButton color="inherit" onClick={[navigate, -1]} disableRipple>
|
||||
<CloseIcon />
|
||||
</IconButton>
|
||||
<Title>{t("Settings")}</Title>
|
||||
|
|
@ -203,6 +208,10 @@ const Settings: Component = () => {
|
|||
</AppBar>
|
||||
}
|
||||
>
|
||||
<BottomSheet open={!!subpage()} onClose={() => navigate(-1)}>
|
||||
{subpage()}
|
||||
</BottomSheet>
|
||||
|
||||
<List class="setting-list" use:solid-styled>
|
||||
<li>
|
||||
<ul>
|
||||
|
|
|
|||
|
|
@ -3,9 +3,11 @@ import {
|
|||
Show,
|
||||
onMount,
|
||||
type ParentComponent,
|
||||
createRenderEffect,
|
||||
children,
|
||||
Suspense,
|
||||
} from "solid-js";
|
||||
import { useDocumentTitle } from "../utils";
|
||||
import { type mastodon } from "masto";
|
||||
import Scaffold from "../material/Scaffold";
|
||||
import {
|
||||
AppBar,
|
||||
|
|
@ -21,8 +23,14 @@ import ProfileMenuButton from "./ProfileMenuButton";
|
|||
import Tabs from "../material/Tabs";
|
||||
import Tab from "../material/Tab";
|
||||
import { makeEventListener } from "@solid-primitives/event-listener";
|
||||
import BottomSheet, {
|
||||
HERO as BOTTOM_SHEET_HERO,
|
||||
} from "../material/BottomSheet";
|
||||
import { $settings } from "../settings/stores";
|
||||
import { useStore } from "@nanostores/solid";
|
||||
import { HeroSourceProvider, type HeroSource } from "../platform/anim";
|
||||
import { useNavigate } from "@solidjs/router";
|
||||
import { setCache as setTootBottomSheetCache } from "./TootBottomSheet";
|
||||
import TrendTimelinePanel from "./TrendTimelinePanel";
|
||||
import TimelinePanel from "./TimelinePanel";
|
||||
import { useSessions } from "../masto/clients";
|
||||
|
|
@ -35,17 +43,29 @@ const Home: ParentComponent = (props) => {
|
|||
const settings$ = useStore($settings);
|
||||
|
||||
const profiles = useSessions();
|
||||
const profile = () => {
|
||||
const all = profiles();
|
||||
if (all.length > 0) {
|
||||
return all[0].account.inf;
|
||||
}
|
||||
};
|
||||
const client = () => {
|
||||
const all = profiles();
|
||||
return all?.[0]?.client;
|
||||
};
|
||||
const navigate = useNavigate();
|
||||
|
||||
const [heroSrc, setHeroSrc] = createSignal<HeroSource>({});
|
||||
const [panelOffset, setPanelOffset] = createSignal(0);
|
||||
const prefetching = () => !settings$().prefetchTootsDisabled;
|
||||
const [currentFocusOn, setCurrentFocusOn] = createSignal<HTMLElement[]>([]);
|
||||
const [focusRange, setFocusRange] = createSignal([0, 0] as readonly [
|
||||
number,
|
||||
number,
|
||||
]);
|
||||
|
||||
const child = children(() => props.children);
|
||||
|
||||
let scrollEventLockReleased = true;
|
||||
|
||||
const recalculateTabIndicator = () => {
|
||||
|
|
@ -82,17 +102,17 @@ const Home: ParentComponent = (props) => {
|
|||
}
|
||||
};
|
||||
|
||||
const requestRecalculateTabIndicator = () => {
|
||||
if (scrollEventLockReleased) {
|
||||
requestAnimationFrame(recalculateTabIndicator);
|
||||
}
|
||||
};
|
||||
|
||||
createRenderEffect(() => {
|
||||
makeEventListener(window, "resize", requestRecalculateTabIndicator);
|
||||
});
|
||||
|
||||
onMount(() => {
|
||||
makeEventListener(panelList, "scroll", () => {
|
||||
if (scrollEventLockReleased) {
|
||||
requestAnimationFrame(recalculateTabIndicator);
|
||||
}
|
||||
});
|
||||
makeEventListener(window, "resize", () => {
|
||||
if (scrollEventLockReleased) {
|
||||
requestAnimationFrame(recalculateTabIndicator);
|
||||
}
|
||||
});
|
||||
requestAnimationFrame(recalculateTabIndicator);
|
||||
});
|
||||
|
||||
|
|
@ -115,6 +135,30 @@ const Home: ParentComponent = (props) => {
|
|||
}
|
||||
};
|
||||
|
||||
const openFullScreenToot = (
|
||||
toot: mastodon.v1.Status,
|
||||
srcElement?: HTMLElement,
|
||||
reply?: boolean,
|
||||
) => {
|
||||
const p = profiles()[0];
|
||||
const inf = p.account.inf ?? profile();
|
||||
if (!inf) {
|
||||
console.warn("no account info?");
|
||||
return;
|
||||
}
|
||||
setHeroSrc((x) =>
|
||||
Object.assign({}, x, { [BOTTOM_SHEET_HERO]: srcElement }),
|
||||
);
|
||||
const acct = `${inf.username}@${p.account.site}`;
|
||||
setTootBottomSheetCache(acct, toot);
|
||||
navigate(`/${encodeURIComponent(acct)}/toot/${toot.id}`, {
|
||||
state: reply
|
||||
? {
|
||||
tootReply: true,
|
||||
}
|
||||
: undefined,
|
||||
});
|
||||
};
|
||||
|
||||
css`
|
||||
.tab-panel {
|
||||
|
|
@ -165,7 +209,7 @@ const Home: ParentComponent = (props) => {
|
|||
class="responsive"
|
||||
sx={{ paddingTop: "var(--safe-area-inset-top, 0px)" }}
|
||||
>
|
||||
<Tabs>
|
||||
<Tabs onFocusChanged={setCurrentFocusOn} offset={panelOffset()}>
|
||||
<Tab focus={isTabFocus(0)} onClick={[onTabClick, 0]}>
|
||||
Home
|
||||
</Tab>
|
||||
|
|
@ -195,40 +239,48 @@ const Home: ParentComponent = (props) => {
|
|||
</AppBar>
|
||||
}
|
||||
>
|
||||
<TimeSourceProvider value={now}>
|
||||
<Show when={!!client()}>
|
||||
<div
|
||||
class="panel-list"
|
||||
ref={panelList!}
|
||||
onScroll={requestRecalculateTabIndicator}
|
||||
>
|
||||
<div class="tab-panel">
|
||||
<div>
|
||||
<TimelinePanel
|
||||
client={client()}
|
||||
name="home"
|
||||
prefetch={prefetching()}
|
||||
/>
|
||||
<HeroSourceProvider value={[heroSrc, setHeroSrc]}>
|
||||
<TimeSourceProvider value={now}>
|
||||
<Show when={!!client()}>
|
||||
<div class="panel-list" ref={panelList!}>
|
||||
<div class="tab-panel">
|
||||
<div>
|
||||
<TimelinePanel
|
||||
client={client()}
|
||||
name="home"
|
||||
prefetch={prefetching()}
|
||||
openFullScreenToot={openFullScreenToot}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tab-panel">
|
||||
<div>
|
||||
<TrendTimelinePanel client={client()} />
|
||||
<div class="tab-panel">
|
||||
<div>
|
||||
<TrendTimelinePanel
|
||||
client={client()}
|
||||
openFullScreenToot={openFullScreenToot}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tab-panel">
|
||||
<div>
|
||||
<TimelinePanel
|
||||
client={client()}
|
||||
name="public"
|
||||
prefetch={prefetching()}
|
||||
/>
|
||||
<div class="tab-panel">
|
||||
<div>
|
||||
<TimelinePanel
|
||||
client={client()}
|
||||
name="public"
|
||||
prefetch={prefetching()}
|
||||
openFullScreenToot={openFullScreenToot}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div></div>
|
||||
</div>
|
||||
<div></div>
|
||||
</div>
|
||||
</Show>
|
||||
</TimeSourceProvider>
|
||||
</Show>
|
||||
</TimeSourceProvider>
|
||||
<Suspense>
|
||||
<BottomSheet open={!!child()} onClose={() => navigate(-1)}>
|
||||
{child()}
|
||||
</BottomSheet>
|
||||
</Suspense>
|
||||
</HeroSourceProvider>
|
||||
</Scaffold>
|
||||
</>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -21,7 +21,7 @@ import {
|
|||
Star as LikeIcon,
|
||||
FeaturedPlayList as ListIcon,
|
||||
} from "@suid/icons-material";
|
||||
import A from "../platform/A";
|
||||
import { A } from "@solidjs/router";
|
||||
|
||||
const ProfileMenuButton: ParentComponent<{
|
||||
profile?: {
|
||||
|
|
@ -51,7 +51,7 @@ const ProfileMenuButton: ParentComponent<{
|
|||
props.onClick?.();
|
||||
};
|
||||
|
||||
const inf = () => props.profile?.account.inf;
|
||||
const inf = () => props.profile?.account.inf
|
||||
|
||||
const onClose = () => {
|
||||
props.onClick?.();
|
||||
|
|
@ -130,7 +130,7 @@ const ProfileMenuButton: ParentComponent<{
|
|||
{props.children}
|
||||
<Divider />
|
||||
</Show>
|
||||
<MenuItem component={A} href="/settings">
|
||||
<MenuItem component={A} href="/settings" onClick={onClose}>
|
||||
<ListItemIcon>
|
||||
<SettingsIcon />
|
||||
</ListItemIcon>
|
||||
|
|
|
|||
|
|
@ -10,7 +10,6 @@ import { Refresh as RefreshIcon } from "@suid/icons-material";
|
|||
import { CircularProgress } from "@suid/material";
|
||||
import { makeEventListener } from "@solid-primitives/event-listener";
|
||||
import { createVisibilityObserver } from "@solid-primitives/intersection-observer";
|
||||
import { useMaybeIsFrameSuspended } from "../platform/StackedRouter";
|
||||
|
||||
const PullDownToRefresh: Component<{
|
||||
loading?: boolean;
|
||||
|
|
@ -34,7 +33,6 @@ const PullDownToRefresh: Component<{
|
|||
});
|
||||
|
||||
const rootVisible = obvx(() => rootElement);
|
||||
const isFrameSuspended = useMaybeIsFrameSuspended()
|
||||
|
||||
createEffect(() => {
|
||||
if (!rootVisible()) setPullDown(0);
|
||||
|
|
@ -111,9 +109,6 @@ const PullDownToRefresh: Component<{
|
|||
if (!rootVisible()) {
|
||||
return;
|
||||
}
|
||||
if (isFrameSuspended()) {
|
||||
return;
|
||||
}
|
||||
const element = props.linkedElement;
|
||||
if (!element) return;
|
||||
makeEventListener(element, "wheel", handleLinkedWheel);
|
||||
|
|
@ -164,9 +159,6 @@ const PullDownToRefresh: Component<{
|
|||
if (!rootVisible()) {
|
||||
return;
|
||||
}
|
||||
if (isFrameSuspended()) {
|
||||
return;
|
||||
}
|
||||
const element = props.linkedElement;
|
||||
if (!element) return;
|
||||
makeEventListener(element, "touchmove", handleTouch);
|
||||
|
|
|
|||
|
|
@ -20,6 +20,12 @@ const TimelinePanel: Component<{
|
|||
client: mastodon.rest.Client;
|
||||
name: "home" | "public";
|
||||
prefetch?: boolean;
|
||||
|
||||
openFullScreenToot: (
|
||||
toot: mastodon.v1.Status,
|
||||
srcElement?: HTMLElement,
|
||||
reply?: boolean,
|
||||
) => void;
|
||||
}> = (props) => {
|
||||
const [scrollLinked, setScrollLinked] = createSignal<HTMLElement>();
|
||||
|
||||
|
|
|
|||
|
|
@ -1,11 +1,12 @@
|
|||
.TootBottomSheet {
|
||||
overflow: hidden;
|
||||
height: calc(100% - var(--scaffold-topbar-height, 0px));
|
||||
|
||||
.Scrollable {
|
||||
padding-bottom: var(--safe-area-inset-bottom, 0);
|
||||
overflow-y: auto;
|
||||
overscroll-behavior-y: contain;
|
||||
height: calc(100% - var(--scaffold-topbar-height, 0px));
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.progress-line {
|
||||
|
|
|
|||
|
|
@ -1,9 +1,10 @@
|
|||
import { useLocation, useParams } from "@solidjs/router";
|
||||
import { useLocation, useNavigate, useParams } from "@solidjs/router";
|
||||
import {
|
||||
catchError,
|
||||
createEffect,
|
||||
createRenderEffect,
|
||||
createResource,
|
||||
createSignal,
|
||||
Show,
|
||||
type Component,
|
||||
} from "solid-js";
|
||||
|
|
@ -24,8 +25,6 @@ import { useDocumentTitle } from "../utils";
|
|||
import { createTimelineControlsForArray } from "../masto/timelines";
|
||||
import TootList from "./TootList";
|
||||
import "./TootBottomSheet.css";
|
||||
import { useNavigator } from "../platform/StackedRouter";
|
||||
import BackButton from "../platform/BackButton";
|
||||
|
||||
let cachedEntry: [string, mastodon.v1.Status] | undefined;
|
||||
|
||||
|
|
@ -44,7 +43,7 @@ const TootBottomSheet: Component = (props) => {
|
|||
const location = useLocation<{
|
||||
tootReply?: boolean;
|
||||
}>();
|
||||
const { pop, push } = useNavigator();
|
||||
const navigate = useNavigate();
|
||||
const time = createTimeSource();
|
||||
const acctText = () => decodeURIComponent(params.acct);
|
||||
const session = useSessionForAcctStr(acctText);
|
||||
|
|
@ -187,7 +186,7 @@ const TootBottomSheet: Component = (props) => {
|
|||
target.dataset.client || `@${new URL(target.href).origin}`,
|
||||
);
|
||||
|
||||
push(`/${acct}/profile/${target.dataset.acctId}`);
|
||||
navigate(`/${acct}/profile/${target.dataset.acctId}`);
|
||||
|
||||
return;
|
||||
} else {
|
||||
|
|
@ -229,7 +228,9 @@ const TootBottomSheet: Component = (props) => {
|
|||
variant="dense"
|
||||
sx={{ paddingTop: "var(--safe-area-inset-top, 0px)" }}
|
||||
>
|
||||
<BackButton color="inherit" />
|
||||
<IconButton color="inherit" onClick={[navigate, -1]} disableRipple>
|
||||
<CloseIcon />
|
||||
</IconButton>
|
||||
<Title component="div" class="name" use:solid-styled>
|
||||
<span
|
||||
ref={(e: HTMLElement) =>
|
||||
|
|
@ -245,7 +246,9 @@ const TootBottomSheet: Component = (props) => {
|
|||
}
|
||||
class="TootBottomSheet"
|
||||
>
|
||||
<div class="Scrollable">
|
||||
<div
|
||||
class="Scrollable"
|
||||
>
|
||||
<TimeSourceProvider value={time}>
|
||||
<TootList
|
||||
threads={ancestors.list}
|
||||
|
|
@ -285,7 +288,9 @@ const TootBottomSheet: Component = (props) => {
|
|||
</Show>
|
||||
|
||||
<Show when={tootContextErrorUncaught.loading}>
|
||||
<div class="progress-line">
|
||||
<div
|
||||
class="progress-line"
|
||||
>
|
||||
<CircularProgress style="width: 1.5em; height: 1.5em;" />
|
||||
</div>
|
||||
</Show>
|
||||
|
|
|
|||
|
|
@ -13,28 +13,13 @@ import { useDefaultSession } from "../masto/clients";
|
|||
import { useHeroSource } from "../platform/anim";
|
||||
import { HERO as BOTTOM_SHEET_HERO } from "../material/BottomSheet";
|
||||
import { setCache as setTootBottomSheetCache } from "./TootBottomSheet";
|
||||
import { useNavigate } from "@solidjs/router";
|
||||
import RegularToot, {
|
||||
findElementActionable,
|
||||
findRootToot,
|
||||
} from "./RegularToot";
|
||||
import cardStyle from "../material/cards.module.css";
|
||||
import type { ThreadNode } from "../masto/timelines";
|
||||
import { useNavigator } from "../platform/StackedRouter";
|
||||
import { ANIM_CURVE_STD } from "../material/theme";
|
||||
|
||||
function durationOf(rect0: DOMRect, rect1: DOMRect) {
|
||||
const distancelt = Math.sqrt(
|
||||
Math.pow(Math.abs(rect0.top - rect1.top), 2) +
|
||||
Math.pow(Math.abs(rect0.left - rect1.left), 2),
|
||||
);
|
||||
const distancerb = Math.sqrt(
|
||||
Math.pow(Math.abs(rect0.bottom - rect1.bottom), 2) +
|
||||
Math.pow(Math.abs(rect0.right - rect1.right), 2),
|
||||
);
|
||||
const distance = distancelt + distancerb;
|
||||
const duration = distance / 1.6;
|
||||
return duration;
|
||||
}
|
||||
|
||||
function positionTootInThread(index: number, threadLength: number) {
|
||||
if (index === 0) {
|
||||
|
|
@ -55,7 +40,7 @@ const TootList: Component<{
|
|||
const session = useDefaultSession();
|
||||
const heroSrc = useHeroSource();
|
||||
const [expandedThreadId, setExpandedThreadId] = createSignal<string>();
|
||||
const { push } = useNavigator();
|
||||
const navigate = useNavigate();
|
||||
|
||||
const onBookmark = async (status: mastodon.v1.Status) => {
|
||||
const client = session()?.client;
|
||||
|
|
@ -114,7 +99,7 @@ const TootList: Component<{
|
|||
|
||||
const openFullScreenToot = (
|
||||
toot: mastodon.v1.Status,
|
||||
srcElement: HTMLElement,
|
||||
srcElement?: HTMLElement,
|
||||
reply?: boolean,
|
||||
) => {
|
||||
const p = session()?.account;
|
||||
|
|
@ -130,55 +115,12 @@ const TootList: Component<{
|
|||
|
||||
const acct = `${inf.username}@${p.site}`;
|
||||
setTootBottomSheetCache(acct, toot);
|
||||
|
||||
push(`/${encodeURIComponent(acct)}/toot/${toot.id}`, {
|
||||
animateOpen(element) {
|
||||
const rect0 = srcElement.getBoundingClientRect(); // the start rect
|
||||
const rect1 = element.getBoundingClientRect(); // the end rect
|
||||
|
||||
const duration = durationOf(rect0, rect1);
|
||||
|
||||
const keyframes = {
|
||||
top: [`${rect0.top}px`, `${rect1.top}px`],
|
||||
bottom: [`${rect0.bottom}px`, `${rect1.bottom}px`],
|
||||
left: [`${rect0.left}px`, `${rect1.left}px`],
|
||||
right: [`${rect0.right}px`, `${rect1.right}px`],
|
||||
height: [`${rect0.height}px`, `${rect1.height}px`],
|
||||
margin: 0,
|
||||
};
|
||||
|
||||
srcElement.style.visibility = "hidden";
|
||||
|
||||
const animation = element.animate(keyframes, {
|
||||
duration,
|
||||
easing: ANIM_CURVE_STD,
|
||||
});
|
||||
return animation;
|
||||
},
|
||||
|
||||
animateClose(element) {
|
||||
const rect0 = element.getBoundingClientRect(); // the start rect
|
||||
const rect1 = srcElement.getBoundingClientRect(); // the end rect
|
||||
|
||||
const duration = durationOf(rect0, rect1);
|
||||
|
||||
const keyframes = {
|
||||
top: [`${rect0.top}px`, `${rect1.top}px`],
|
||||
bottom: [`${rect0.bottom}px`, `${rect1.bottom}px`],
|
||||
left: [`${rect0.left}px`, `${rect1.left}px`],
|
||||
right: [`${rect0.right}px`, `${rect1.right}px`],
|
||||
height: [`${rect0.height}px`, `${rect1.height}px`],
|
||||
margin: 0,
|
||||
};
|
||||
|
||||
srcElement.style.visibility = "";
|
||||
|
||||
const animation = element.animate(keyframes, {
|
||||
duration,
|
||||
easing: ANIM_CURVE_STD,
|
||||
});
|
||||
return animation;
|
||||
},
|
||||
navigate(`/${encodeURIComponent(acct)}/toot/${toot.id}`, {
|
||||
state: reply
|
||||
? {
|
||||
tootReply: true,
|
||||
}
|
||||
: undefined,
|
||||
});
|
||||
};
|
||||
|
||||
|
|
@ -204,7 +146,7 @@ const TootList: Component<{
|
|||
target.dataset.client || `@${new URL(target.href).origin}`,
|
||||
);
|
||||
|
||||
push(`/${acct}/profile/${target.dataset.acctId}`);
|
||||
navigate(`/${acct}/profile/${target.dataset.acctId}`);
|
||||
|
||||
return;
|
||||
} else {
|
||||
|
|
|
|||
|
|
@ -13,6 +13,12 @@ import TootList from "./TootList.jsx";
|
|||
|
||||
const TrendTimelinePanel: Component<{
|
||||
client: mastodon.rest.Client;
|
||||
|
||||
openFullScreenToot: (
|
||||
toot: mastodon.v1.Status,
|
||||
srcElement?: HTMLElement,
|
||||
reply?: boolean,
|
||||
) => void;
|
||||
}> = (props) => {
|
||||
const [scrollLinked, setScrollLinked] = createSignal<HTMLElement>();
|
||||
const [tl, snapshot, { refetch: refetchTimeline }] = createTimelineSnapshot(
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue