From 0b586b17e66459ec88bf6eee89f327f8979761b5 Mon Sep 17 00:00:00 2001 From: thislight Date: Wed, 20 Nov 2024 15:12:08 +0800 Subject: [PATCH 1/3] RegularToot: asjust transition duration --- src/timelines/toot.module.css | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/timelines/toot.module.css b/src/timelines/toot.module.css index 4042122..f0d770e 100644 --- a/src/timelines/toot.module.css +++ b/src/timelines/toot.module.css @@ -10,9 +10,9 @@ &.toot { /* fix composition ordering: I think the css module processor should aware the overriding and behaves, but no */ transition: - margin-top 125ms var(--tutu-anim-curve-std), - margin-bottom 125ms var(--tutu-anim-curve-std), - height 225ms var(--tutu-anim-curve-std), + margin-top 60ms var(--tutu-anim-curve-sharp), + margin-bottom 60ms var(--tutu-anim-curve-sharp), + height 60ms var(--tutu-anim-curve-sharp), var(--tutu-transition-shadow); border-radius: 0; } From 4c1b189ca0de1096bd682f1ffde9af3a79d5a227 Mon Sep 17 00:00:00 2001 From: thislight Date: Wed, 20 Nov 2024 15:35:26 +0800 Subject: [PATCH 2/3] Settings/i18n: rename lang-names to generic --- src/settings/Language.tsx | 2 +- src/settings/Region.tsx | 2 +- src/settings/Settings.tsx | 2 +- src/settings/i18n/{lang-names.json => generic.json} | 0 4 files changed, 3 insertions(+), 3 deletions(-) rename src/settings/i18n/{lang-names.json => generic.json} (100%) diff --git a/src/settings/Language.tsx b/src/settings/Language.tsx index c9ec4e3..825aeca 100644 --- a/src/settings/Language.tsx +++ b/src/settings/Language.tsx @@ -29,7 +29,7 @@ import { useNavigator } from "../platform/StackedRouter"; const ChooseLang: Component = () => { const { pop } = useNavigator(); const [t] = createTranslator( - () => import("./i18n/lang-names.json"), + () => import("./i18n/generic.json"), (code) => import(`./i18n/${code}.json`) as Promise<{ default: Record & { diff --git a/src/settings/Region.tsx b/src/settings/Region.tsx index c4b7a50..ec85e6d 100644 --- a/src/settings/Region.tsx +++ b/src/settings/Region.tsx @@ -27,7 +27,7 @@ import { useNavigator } from "../platform/StackedRouter"; const ChooseRegion: Component = () => { const {pop} = useNavigator(); const [t] = createTranslator( - () => import("./i18n/lang-names.json"), + () => import("./i18n/generic.json"), (code) => import(`./i18n/${code}.json`) as Promise<{ default: Record & { diff --git a/src/settings/Settings.tsx b/src/settings/Settings.tsx index 219052d..e879714 100644 --- a/src/settings/Settings.tsx +++ b/src/settings/Settings.tsx @@ -161,7 +161,7 @@ const Settings: Component = () => { import(`./i18n/${code}.json`) as Promise<{ default: Strings; }>, - () => import(`./i18n/lang-names.json`), + () => import(`./i18n/generic.json`), ); const { pop } = useNavigator(); const settings$ = useStore($settings); diff --git a/src/settings/i18n/lang-names.json b/src/settings/i18n/generic.json similarity index 100% rename from src/settings/i18n/lang-names.json rename to src/settings/i18n/generic.json From cff0c2880ad19f5cad78c830e62e1ce72ed6a1cb Mon Sep 17 00:00:00 2001 From: thislight Date: Wed, 20 Nov 2024 15:51:14 +0800 Subject: [PATCH 3/3] 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;