From 296de7d23bccc2459ff0e6941027075d9bfd2953 Mon Sep 17 00:00:00 2001 From: thislight Date: Sat, 23 Nov 2024 23:01:35 +0800 Subject: [PATCH] TootActionGroup: remove css module --- src/timelines/CompactToot.tsx | 57 ------------ src/timelines/RegularToot.tsx | 115 ++++-------------------- src/timelines/TootList.tsx | 7 +- src/timelines/toot.module.css | 80 ----------------- src/timelines/toots/TootActionGroup.css | 41 +++++++++ src/timelines/toots/TootActionGroup.tsx | 89 ++++++++++++++++++ 6 files changed, 153 insertions(+), 236 deletions(-) delete mode 100644 src/timelines/CompactToot.tsx create mode 100644 src/timelines/toots/TootActionGroup.css create mode 100644 src/timelines/toots/TootActionGroup.tsx diff --git a/src/timelines/CompactToot.tsx b/src/timelines/CompactToot.tsx deleted file mode 100644 index 52bd551..0000000 --- a/src/timelines/CompactToot.tsx +++ /dev/null @@ -1,57 +0,0 @@ -import type { mastodon } from "masto"; -import { Show, type Component } from "solid-js"; -import tootStyle from "./toot.module.css"; -import { formatRelative } from "date-fns"; -import Img from "~material/Img"; -import { Body2 } from "~material/typography"; -import { appliedCustomEmoji } from "../masto/toot"; -import { TootPreviewCard } from "./RegularToot"; - -type CompactTootProps = { - status: mastodon.v1.Status; - now: Date; - class?: string; -}; - -const CompactToot: Component = (props) => { - const toot = () => props.status; - return ( -
- -
- { - appliedCustomEmoji( - e, - toot().account.displayName, - toot().account.emojis, - ); - }} - > - - @{toot().account.username}@{new URL(toot().account.url).hostname} - - -
-
{ - appliedCustomEmoji(e, toot().content, toot().emojis); - }} - class={[tootStyle.compactTootContent].join(" ")} - >
- - - -
- ); -}; - -export default CompactToot; diff --git a/src/timelines/RegularToot.tsx b/src/timelines/RegularToot.tsx index 3ddaeb3..48bc7cf 100644 --- a/src/timelines/RegularToot.tsx +++ b/src/timelines/RegularToot.tsx @@ -11,18 +11,11 @@ import { useContext, } from "solid-js"; import tootStyle from "./toot.module.css"; -import { formatRelative, parseISO } from "date-fns"; +import { formatRelative } from "date-fns"; import Img from "~material/Img.js"; import { Body2 } from "~material/typography.js"; import { css } from "solid-styled"; import { - BookmarkAddOutlined, - Repeat, - ReplyAll, - Star, - StarOutline, - Bookmark, - Share, SmartToySharp, Lock, } from "@suid/icons-material"; @@ -30,15 +23,14 @@ import { useTimeSource } from "~platform/timesrc.js"; import { resolveCustomEmoji } from "../masto/toot.js"; import { Divider } from "@suid/material"; import cardStyle from "~material/cards.module.css"; -import Button from "~material/Button.js"; import MediaAttachmentGrid from "./toots/MediaAttachmentGrid.jsx"; import { useDateFnLocale } from "~platform/i18n"; -import { canShare, share } from "~platform/share"; import { makeAcctText, useDefaultSession } from "../masto/clients"; import TootContent from "./toots/TootContent"; import BoostIcon from "./toots/BoostIcon"; import PreviewCard from "./toots/PreviewCard"; import TootPoll from "./toots/TootPoll"; +import TootActionGroup from "./toots/TootActionGroup.js" export type TootEnv = { boost: (value: mastodon.v1.Status) => void; @@ -61,9 +53,11 @@ export const TootEnvProvider = TootEnvContext.Provider; export function useTootEnv() { const env = useContext(TootEnvContext); if (!env) { - throw new TypeError("environment not found, use TootEnvProvider to provide") + throw new TypeError( + "environment not found, use TootEnvProvider to provide", + ); } - return env + return env; } type RegularTootProps = { @@ -71,12 +65,7 @@ type RegularTootProps = { actionable?: boolean; evaluated?: boolean; thread?: "top" | "bottom" | "middle"; -} & - JSX.HTMLElementTags["article"]; - -function isolatedCallback(e: MouseEvent) { - e.stopPropagation(); -} +} & JSX.HTMLElementTags["article"]; export function findRootToot(element: HTMLElement) { let current: HTMLElement | null = element; @@ -91,74 +80,6 @@ export function findRootToot(element: HTMLElement) { return current; } -function TootActionGroup( - props: { value: T }, -) { - const {reply, boost, favourite, bookmark} = useTootEnv() - let actGrpElement: HTMLDivElement; - const toot = () => props.value; - return ( -
- - - - - - - - - - -
- ); -} - function TootAuthorGroup( props: { status: mastodon.v1.Status; @@ -234,6 +155,8 @@ function onToggleReveal(setValue: Setter, event: Event) { * this component under a `` with correct * session. * + * This component requires be under ``. + * * **Handling Clicks** * There are multiple actions supported in the component. Some handlers * are passed in, some should be handled as the click event. @@ -257,11 +180,14 @@ function onToggleReveal(setValue: Setter, event: Event) { */ const RegularToot: Component = (props) => { let rootRef: HTMLElement; - const {vote} = useTootEnv() - const [managed, rest] = splitProps( - props, - ["status", "lang", "class", "actionable", "evaluated", "thread"], - ); + const [managed, rest] = splitProps(props, [ + "status", + "lang", + "class", + "actionable", + "evaluated", + "thread", + ]); const now = useTimeSource(); const status = () => managed.status; const toot = () => status().reblog ?? status(); @@ -373,17 +299,14 @@ const RegularToot: Component = (props) => { /> - + - + diff --git a/src/timelines/TootList.tsx b/src/timelines/TootList.tsx index 3408e0e..b35dcce 100644 --- a/src/timelines/TootList.tsx +++ b/src/timelines/TootList.tsx @@ -6,6 +6,7 @@ import { createSelector, Index, createMemo, + For, } from "solid-js"; import { type mastodon } from "masto"; import { vibrate } from "~platform/hardware"; @@ -278,10 +279,10 @@ const TootList: Component<{ vote: vote }}>
- + {(threadId, threadIdx) => { const thread = createMemo(() => - props.onUnknownThread(threadId())?.reverse(), + props.onUnknownThread(threadId)?.reverse(), ); const threadLength = () => thread()?.length ?? 0; @@ -311,7 +312,7 @@ const TootList: Component<{ ); }} - +
diff --git a/src/timelines/toot.module.css b/src/timelines/toot.module.css index bb10964..1f68542 100644 --- a/src/timelines/toot.module.css +++ b/src/timelines/toot.module.css @@ -17,10 +17,6 @@ border-radius: 0; } - &>.toot { - box-shadow: none; - } - time { color: var(--tutu-color-secondary-text-on-surface); } @@ -89,41 +85,6 @@ background-color: var(--tutu-color-surface-d); } -.toot.compact { - display: grid; - grid-template-columns: auto 1fr; - gap: 8px; - row-gap: 0; - padding-block: var(--card-gut, 16px); - padding-inline: var(--card-pad, 16px); - - > :first-child { - grid-row: 1/3; - } - - > :last-child { - grid-column: 2 /3; - } -} - -.compactAuthorGroup { - display: flex; - gap: 8px; - align-items: center; - margin-bottom: 8px; - flex-flow: row wrap; - justify-content: flex-end; - - >.compactAuthorUsername { - color: var(--tutu-color-secondary-text-on-surface); - flex-grow: 1; - } - - >time { - color: var(--tutu-color-secondary-text-on-surface); - } -} - .tootRetootGrp { display: flex; gap: 0.25em; @@ -134,44 +95,3 @@ margin-right: 0.25em; } } - -.tootBottomActionGrp { - composes: cardGutSkip from "~material/cards.module.css"; - padding-block: calc((var(--card-gut) - 10px) / 2); - - animation: 225ms var(--tutu-anim-curve-std) tootBottomExpanding; - display: flex; - flex-flow: row wrap; - justify-content: space-evenly; - - >button { - color: var(--tutu-color-on-surface); - padding: 10px 8px; - - >svg { - font-size: 20px; - } - } -} - -.tootActionWithCount { - display: flex; - align-items: center; - gap: 8px; -} - -.tootAction { - display: flex; - align-items: center; - justify-content: center; -} - -@keyframes tootBottomExpanding { - 0% { - opacity: 0; - } - - 100% { - opacity: 1; - } -} \ No newline at end of file diff --git a/src/timelines/toots/TootActionGroup.css b/src/timelines/toots/TootActionGroup.css new file mode 100644 index 0000000..b82432c --- /dev/null +++ b/src/timelines/toots/TootActionGroup.css @@ -0,0 +1,41 @@ +.TootActionGroup { + padding-block: calc((var(--card-gut) - 10px) / 2); + contain: layout style; + + animation: 225ms var(--tutu-anim-curve-std) TootActionGroup_fade-in; + display: flex; + flex-flow: row wrap; + justify-content: space-evenly; + + >button { + color: var(--tutu-color-on-surface); + padding: 10px 8px; + + >svg { + font-size: 20px; + } + } + + >* { + display: flex; + align-items: center; + } + + >.with-count { + gap: 8px; + } + + >.plain { + justify-content: center; + } +} + +@keyframes TootActionGroup_fade-in { + 0% { + opacity: 0; + } + + 100% { + opacity: 1; + } +} \ No newline at end of file diff --git a/src/timelines/toots/TootActionGroup.tsx b/src/timelines/toots/TootActionGroup.tsx new file mode 100644 index 0000000..fef75ef --- /dev/null +++ b/src/timelines/toots/TootActionGroup.tsx @@ -0,0 +1,89 @@ +import type { mastodon } from "masto"; +import { useTootEnv } from "../RegularToot"; +import { Button } from "@suid/material"; +import { Show } from "solid-js"; +import { + Bookmark, + BookmarkAddOutlined, + Repeat, + ReplyAll, + Share, + Star, + StarOutline, +} from "@suid/icons-material"; +import { canShare, share } from "~platform/share"; +import "./TootActionGroup.css"; + +async function shareContent(toot: mastodon.v1.Status) { + return await share({ + url: toot.url ?? undefined, + }); +} + +function isolatedCallback(e: MouseEvent) { + e.stopPropagation(); +} + +function TootActionGroup(props: { + value: T; + class?: string; +}) { + const { reply, boost, favourite, bookmark } = useTootEnv(); + let actGrpElement: HTMLDivElement; + const toot = () => props.value; + return ( +
+ + + + + + + + + + +
+ ); +} + +export default TootActionGroup;