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

format code using prettier

Browse source
This commit is contained in:
thislight 2024-08-05 15:33:00 +08:00
parent 91999a6303
commit abde6817f0
27 changed files with 326 additions and 260 deletions
Download patch file Download diff file Expand all files Collapse all files

10
src/timelines/CompactToot.tsx
View file

@ -18,16 +18,14 @@ const CompactToot: Component<CompactTootProps> = (props) => {
const toot = () => props.status;
return (
<section
class={[tootStyle.compact, props.class || ""].join(" ")}
class={[tootStyle.compact, props.class || ""].join(" ")}
lang={toot().language || undefined}
>
<Img
src={toot().account.avatar}
class={[
tootStyle.tootAvatar,
].join(" ")}
class={[tootStyle.tootAvatar].join(" ")}
/>
<div class={[tootStyle.compactAuthorGroup].join(' ')}>
<div class={[tootStyle.compactAuthorGroup].join(" ")}>
<Body2
ref={(e: { innerHTML: string }) => {
appliedCustomEmoji(
@ -48,7 +46,7 @@ const CompactToot: Component<CompactTootProps> = (props) => {
ref={(e: { innerHTML: string }) => {
appliedCustomEmoji(e, toot().content, toot().emojis);
}}
class={[tootStyle.compactTootContent].join(' ')}
class={[tootStyle.compactTootContent].join(" ")}
></div>
</section>
);

21
src/timelines/Home.tsx
View file

@ -155,20 +155,20 @@ const Home: ParentComponent = (props) => {
useDocumentTitle("Timelines");
const now = createTimeSource();
const settings$ = useStore($settings)
const settings$ = useStore($settings);
const sessions = useSessions();
const client = () => sessions()[0].client;
const [profile] = useAcctProfile(client);
const [panelOffset, setPanelOffset] = createSignal(0);
const prefetching = () => !settings$().prefetchTootsDisabled
const prefetching = () => !settings$().prefetchTootsDisabled;
const [currentFocusOn, setCurrentFocusOn] = createSignal<HTMLElement[]>([]);
const [focusRange, setFocusRange] = createSignal([0, 0] as readonly [
number,
number,
]);
const child = children(() => props.children)
const child = children(() => props.children);
let scrollEventLockReleased = true;
@ -269,7 +269,11 @@ const Home: ParentComponent = (props) => {
<Scaffold
topbar={
<AppBar position="static">
<Toolbar variant="dense" class="responsive" sx={{ paddingTop: "var(--safe-area-inset-top, 0px)" }}>
<Toolbar
variant="dense"
class="responsive"
sx={{ paddingTop: "var(--safe-area-inset-top, 0px)" }}
>
<Tabs onFocusChanged={setCurrentFocusOn} offset={panelOffset()}>
<Tab focus={isTabFocus(0)} onClick={[onTabClick, 0]}>
Home
@ -282,7 +286,14 @@ const Home: ParentComponent = (props) => {
</Tab>
</Tabs>
<ProfileMenuButton profile={profile()}>
<MenuItem onClick={(e) => $settings.setKey("prefetchTootsDisabled", !$settings.get().prefetchTootsDisabled)}>
<MenuItem
onClick={(e) =>
$settings.setKey(
"prefetchTootsDisabled",
!$settings.get().prefetchTootsDisabled,
)
}
>
<ListItemText>Prefetch Toots</ListItemText>
<ListItemSecondaryAction>
<Switch checked={prefetching()}></Switch>

2
src/timelines/MediaAttachmentGrid.tsx
View file

@ -11,7 +11,7 @@ const MediaAttachmentGrid: Component<{
}> = (props) => {
let rootRef: HTMLElement;
const [viewerIndex, setViewerIndex] = createSignal<number>();
const viewerOpened = () => typeof viewerIndex() !== "undefined"
const viewerOpened = () => typeof viewerIndex() !== "undefined";
const gridTemplateColumns = () => {
const l = props.attachments.length;
if (l < 2) {

10
src/timelines/MediaViewer.tsx
View file

@ -36,7 +36,7 @@ function within(n: number, target: number, range: number) {
}
function clamp(input: number, min: number, max: number) {
return Math.min(Math.max(input, min), max)
return Math.min(Math.max(input, min), max);
}
const MediaViewer: ParentComponent<MediaViewerProps> = (props) => {
@ -207,7 +207,13 @@ const MediaViewer: ParentComponent<MediaViewerProps> = (props) => {
move: number,
idx: number,
) => {
const { ref, top: otop, left: oleft, scale: oscale, osize: [owidth, oheight] } = state[idx];
const {
ref,
top: otop,
left: oleft,
scale: oscale,
osize: [owidth, oheight],
} = state[idx];
const [cx, cy] = center;
const iy = clamp(cy - otop, 0, oheight),
ix = clamp(cx - oleft, 0, owidth); // in image coordinate system

150
src/timelines/ProfileMenuButton.tsx
View file

@ -8,7 +8,13 @@ import {
Menu,
MenuItem,
} from "@suid/material";
import { Show, createSignal, createUniqueId, type ParentComponent } from "solid-js";
import {
ErrorBoundary,
Show,
createSignal,
createUniqueId,
type ParentComponent,
} from "solid-js";
import {
Settings as SettingsIcon,
Bookmark as BookmarkIcon,
@ -42,79 +48,79 @@ const ProfileMenuButton: ParentComponent<{
return (
<>
<ButtonBase
aria-haspopup="true"
sx={{ borderRadius: "50%" }}
id={buttonId}
onClick={onClick}
aria-controls={open() ? menuId : undefined}
aria-expanded={open() ? "true" : undefined}
>
<Avatar
alt={`${props.profile?.displayName}'s avatar`}
src={props.profile?.avatar}
></Avatar>
</ButtonBase>
<Menu
id={menuId}
anchorEl={anchor()}
open={open()}
onClose={onClose}
MenuListProps={{
"aria-labelledby": buttonId,
sx: {
minWidth: "220px",
}
}}
anchorOrigin={{
vertical: "top",
horizontal: "right",
}}
transformOrigin={{
vertical: "top",
horizontal: "right",
}}
>
<MenuItem>
<ListItemAvatar>
<Avatar src={props.profile?.avatar}></Avatar>
</ListItemAvatar>
<ListItemText
primary={props.profile?.displayName}
secondary={`@${props.profile?.username}`}
></ListItemText>
</MenuItem>
<ButtonBase
aria-haspopup="true"
sx={{ borderRadius: "50%" }}
id={buttonId}
onClick={onClick}
aria-controls={open() ? menuId : undefined}
aria-expanded={open() ? "true" : undefined}
>
<Avatar
alt={`${props.profile?.displayName}'s avatar`}
src={props.profile?.avatar}
></Avatar>
</ButtonBase>
<Menu
id={menuId}
anchorEl={anchor()}
open={open()}
onClose={onClose}
MenuListProps={{
"aria-labelledby": buttonId,
sx: {
minWidth: "220px",
},
}}
anchorOrigin={{
vertical: "top",
horizontal: "right",
}}
transformOrigin={{
vertical: "top",
horizontal: "right",
}}
>
<MenuItem>
<ListItemAvatar>
<Avatar src={props.profile?.avatar}></Avatar>
</ListItemAvatar>
<ListItemText
primary={props.profile?.displayName}
secondary={`@${props.profile?.username}`}
></ListItemText>
</MenuItem>
<MenuItem>
<ListItemIcon>
<BookmarkIcon />
</ListItemIcon>
<ListItemText>Bookmarks</ListItemText>
</MenuItem>
<MenuItem>
<ListItemIcon>
<LikeIcon />
</ListItemIcon>
<ListItemText>Likes</ListItemText>
</MenuItem>
<MenuItem>
<ListItemIcon>
<ListIcon />
</ListItemIcon>
<ListItemText>Lists</ListItemText>
</MenuItem>
<Divider />
<Show when={props.children}>
{props.children}
<MenuItem>
<ListItemIcon>
<BookmarkIcon />
</ListItemIcon>
<ListItemText>Bookmarks</ListItemText>
</MenuItem>
<MenuItem>
<ListItemIcon>
<LikeIcon />
</ListItemIcon>
<ListItemText>Likes</ListItemText>
</MenuItem>
<MenuItem>
<ListItemIcon>
<ListIcon />
</ListItemIcon>
<ListItemText>Lists</ListItemText>
</MenuItem>
<Divider />
</Show>
<MenuItem component={A} href="/settings" onClick={onClose}>
<ListItemIcon>
<SettingsIcon />
</ListItemIcon>
<ListItemText>Settings</ListItemText>
</MenuItem>
</Menu>
<Show when={props.children}>
{props.children}
<Divider />
</Show>
<MenuItem component={A} href="/settings" onClick={onClose}>
<ListItemIcon>
<SettingsIcon />
</ListItemIcon>
<ListItemText>Settings</ListItemText>
</MenuItem>
</Menu>
</>
);
};

2
src/timelines/RegularToot.tsx
View file

@ -211,7 +211,7 @@ const RegularToot: Component<TootCardProps> = (props) => {
classList={{
[tootStyle.toot]: true,
[tootStyle.expanded]: managed.evaluated,
[managed.class || ""]: true
[managed.class || ""]: true,
}}
ref={rootRef!}
lang={toot().language || managed.lang}

7
src/timelines/TootBottomSheet.tsx
View file

@ -1,8 +1,7 @@
import type { Component } from "solid-js";
const TootBottomSheet: Component = (props) => {
return <></>
}
return <></>;
};
export default TootBottomSheet
export default TootBottomSheet;

9
src/timelines/TootThread.tsx
View file

@ -38,7 +38,9 @@ const TootThread: Component<TootThreadProps> = (props) => {
css`
article {
transition: margin 90ms var(--tutu-anim-curve-sharp), var(--tutu-transition-shadow);
transition:
margin 90ms var(--tutu-anim-curve-sharp),
var(--tutu-transition-shadow);
user-select: none;
cursor: pointer;
}
@ -64,7 +66,10 @@ const TootThread: Component<TootThreadProps> = (props) => {
`;
return (
<article classList={{ "thread-line": !!inReplyTo(), "expanded": expanded() }} onClick={() => setExpanded((x) => !x)}>
<article
classList={{ "thread-line": !!inReplyTo(), expanded: expanded() }}
onClick={() => setExpanded((x) => !x)}
>
<Show when={inReplyTo()}>
<CompactToot
status={inReplyTo()!}

21
src/timelines/toot.module.css
View file

@ -6,13 +6,14 @@
&.toot {
/* fix composition ordering: I think the css module processor should aware the overriding and behaves, but no */
transition: margin-block 125ms var(--tutu-anim-curve-std),
transition:
margin-block 125ms var(--tutu-anim-curve-std),
height 225ms var(--tutu-anim-curve-std),
var(--tutu-transition-shadow);
border-radius: 0;
}
&>.toot {
& > .toot {
box-shadow: none;
}
@ -46,11 +47,11 @@
display: grid;
grid-template-columns: 1fr auto;
>* {
> * {
color: var(--tutu-color-secondary-text-on-surface);
}
>:last-child {
> :last-child {
grid-column: 1 /3;
}
@ -80,7 +81,7 @@
}
.tootContent {
composes: cardNoPad from '../material/cards.module.css';
composes: cardNoPad from "../material/cards.module.css";
margin-left: calc(var(--card-pad, 0) + var(--toot-avatar-size, 0) + 8px);
margin-right: var(--card-pad, 0);
line-height: 1.5;
@ -150,14 +151,14 @@
}
.tootAttachmentGrp {
composes: cardNoPad from '../material/cards.module.css';
composes: cardNoPad from "../material/cards.module.css";
margin-top: 1em;
margin-left: calc(var(--card-pad, 0) + var(--toot-avatar-size, 0) + 8px);
margin-right: var(--card-pad, 0);
display: grid;
gap: 4px;
>:where(img) {
> :where(img) {
max-height: 35vh;
min-height: 40px;
object-fit: none;
@ -168,7 +169,7 @@
}
.tootBottomActionGrp {
composes: cardGutSkip from '../material/cards.module.css';
composes: cardGutSkip from "../material/cards.module.css";
padding-block: calc((var(--card-gut) - 10px) / 2);
animation: 225ms var(--tutu-anim-curve-std) tootBottomExpanding;
@ -176,7 +177,7 @@
flex-flow: row wrap;
justify-content: space-evenly;
> button{
> button {
color: var(--tutu-color-on-surface);
padding: 10px 8px;
@ -206,4 +207,4 @@
100% {
opacity: 1;
}
}
}