From cff0c2880ad19f5cad78c830e62e1ce72ed6a1cb Mon Sep 17 00:00:00 2001 From: thislight Date: Wed, 20 Nov 2024 15:51:14 +0800 Subject: [PATCH] TootContent: remove css modules --- src/timelines/RegularToot.tsx | 2 +- src/timelines/toot-components/TootContent.css | 29 +++++ src/timelines/toot-components/TootContent.tsx | 21 ++-- src/timelines/toot.module.css | 103 ------------------ 4 files changed, 44 insertions(+), 111 deletions(-) create mode 100644 src/timelines/toot-components/TootContent.css diff --git a/src/timelines/RegularToot.tsx b/src/timelines/RegularToot.tsx index f72e4fc..5a4faa0 100644 --- a/src/timelines/RegularToot.tsx +++ b/src/timelines/RegularToot.tsx @@ -325,7 +325,7 @@ const RegularToot: Component = (props) => { source={toot().content} emojis={toot().emojis} mentions={toot().mentions} - class={tootStyle.tootContent} + class={cardStyle.cardNoPad} /> diff --git a/src/timelines/toot-components/TootContent.css b/src/timelines/toot-components/TootContent.css new file mode 100644 index 0000000..b5e56e6 --- /dev/null +++ b/src/timelines/toot-components/TootContent.css @@ -0,0 +1,29 @@ +.TootContent { + 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; + + & * { + user-select: text; + } + + & a { + color: var(--tutu-color-primary-d); + } + + & a[target="_blank"] { + word-break: break-all; + + >.invisible { + display: none; + } + + >.ellipsis { + &::after { + display: inline; + content: "..."; + } + } + } +} \ No newline at end of file diff --git a/src/timelines/toot-components/TootContent.tsx b/src/timelines/toot-components/TootContent.tsx index 8b21cef..fd0dab6 100644 --- a/src/timelines/toot-components/TootContent.tsx +++ b/src/timelines/toot-components/TootContent.tsx @@ -8,6 +8,7 @@ import { } from "solid-js"; import { resolveCustomEmoji } from "../../masto/toot.js"; import { makeAcctText, useDefaultSession } from "../../masto/clients"; +import "./TootContent.css"; function preventDefault(event: Event) { event.preventDefault(); @@ -19,9 +20,14 @@ export type TootContentProps = { mentions: mastodon.v1.StatusMention[]; } & JSX.HTMLAttributes; -const TootContent: Component = (props) => { +const TootContent: Component = (oprops) => { const session = useDefaultSession(); - const [managed, rest] = splitProps(props, ["source", "emojis", "mentions"]); + const [props, rest] = splitProps(oprops, [ + "source", + "emojis", + "mentions", + "class", + ]); const clientFinder = createMemo(() => session() ? makeAcctText(session()!) : undefined, @@ -31,10 +37,10 @@ const TootContent: Component = (props) => {
{ createRenderEffect(() => { - ref.innerHTML = managed.source - ? managed.emojis - ? resolveCustomEmoji(managed.source, managed.emojis) - : managed.source + ref.innerHTML = props.source + ? props.emojis + ? resolveCustomEmoji(props.source, props.emojis) + : props.source : ""; }); @@ -53,9 +59,10 @@ const TootContent: Component = (props) => { } }); }} + class={`TootContent ${props.class || ""}`} {...rest} >
); }; -export default TootContent; \ No newline at end of file +export default TootContent; diff --git a/src/timelines/toot.module.css b/src/timelines/toot.module.css index f0d770e..eae0b32 100644 --- a/src/timelines/toot.module.css +++ b/src/timelines/toot.module.css @@ -89,103 +89,6 @@ background-color: var(--tutu-color-surface-d); } -.tootContent { - 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; - - & * { - user-select: text; - } - - & a { - color: var(--tutu-color-primary-d); - } - - & :global(a[target="_blank"]) { - > :global(.invisible) { - display: none; - } - - > :global(.ellipsis) { - &::after { - display: inline; - content: "..."; - } - } - } -} - -.previewCard { - composes: cardGutSkip from "../material/cards.module.css"; - display: block; - border: 1px solid #eeeeee; - background-color: var(--tutu-color-surface); - text-decoration: none; - border-radius: 4px; - overflow: hidden; - margin-top: 1em; - margin-bottom: 1.5em; - color: var(--tutu-color-secondary-text-on-surface); - transition: color 220ms var(--tutu-anim-curve-std), background-color 220ms var(--tutu-anim-curve-std); - padding-bottom: 8px; - overflow: hidden; - z-index: 1; - position: relative; - - >img { - background-color: #eeeeee; - max-width: 100%; - height: auto; - } - - &:hover, - &:focus-visible { - background-color: var(--tutu-color-surface-d); - color: var(--tutu-color-on-surface); - - >h1 { - text-decoration: underline; - } - } - - >h1 { - color: var(--tutu-color-on-surface); - max-height: calc(4 * var(--title-line-height) * var(--title-size)); - } - - >p { - max-height: calc(8 * var(--body-line-height) * var(--body-size)); - } - - >h1, - >p { - margin-left: 16px; - margin-right: 16px; - overflow: hidden; - text-overflow: ellipsis; - } - - &.compact { - display: grid; - grid-template-columns: minmax(10%, 30%) 1fr; - padding-left: 16px; - padding-right: 16px; - padding-top: 8px; - - >img:first-child { - grid-row: 1 / 3; - object-fit: contain; - } - - >h1, - >p { - margin-right: 0; - } - } -} - .toot.compact { display: grid; grid-template-columns: auto 1fr; @@ -221,12 +124,6 @@ } } -.compactTootContent { - composes: tootContent; - margin-left: 0; - margin-right: 0; -} - .tootRetootGrp { display: flex; gap: 0.25em;