diff --git a/src/settings/Language.tsx b/src/settings/Language.tsx index 825aeca..c9ec4e3 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/generic.json"), + () => import("./i18n/lang-names.json"), (code) => import(`./i18n/${code}.json`) as Promise<{ default: Record & { diff --git a/src/settings/Region.tsx b/src/settings/Region.tsx index ec85e6d..c4b7a50 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/generic.json"), + () => import("./i18n/lang-names.json"), (code) => import(`./i18n/${code}.json`) as Promise<{ default: Record & { diff --git a/src/settings/Settings.tsx b/src/settings/Settings.tsx index e879714..219052d 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/generic.json`), + () => import(`./i18n/lang-names.json`), ); const { pop } = useNavigator(); const settings$ = useStore($settings); diff --git a/src/settings/i18n/generic.json b/src/settings/i18n/lang-names.json similarity index 100% rename from src/settings/i18n/generic.json rename to src/settings/i18n/lang-names.json diff --git a/src/timelines/RegularToot.tsx b/src/timelines/RegularToot.tsx index 5a4faa0..f72e4fc 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={cardStyle.cardNoPad} + class={tootStyle.tootContent} /> diff --git a/src/timelines/toot-components/TootContent.css b/src/timelines/toot-components/TootContent.css deleted file mode 100644 index b5e56e6..0000000 --- a/src/timelines/toot-components/TootContent.css +++ /dev/null @@ -1,29 +0,0 @@ -.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 fd0dab6..8b21cef 100644 --- a/src/timelines/toot-components/TootContent.tsx +++ b/src/timelines/toot-components/TootContent.tsx @@ -8,7 +8,6 @@ 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(); @@ -20,14 +19,9 @@ export type TootContentProps = { mentions: mastodon.v1.StatusMention[]; } & JSX.HTMLAttributes; -const TootContent: Component = (oprops) => { +const TootContent: Component = (props) => { const session = useDefaultSession(); - const [props, rest] = splitProps(oprops, [ - "source", - "emojis", - "mentions", - "class", - ]); + const [managed, rest] = splitProps(props, ["source", "emojis", "mentions"]); const clientFinder = createMemo(() => session() ? makeAcctText(session()!) : undefined, @@ -37,10 +31,10 @@ const TootContent: Component = (oprops) => {
{ createRenderEffect(() => { - ref.innerHTML = props.source - ? props.emojis - ? resolveCustomEmoji(props.source, props.emojis) - : props.source + ref.innerHTML = managed.source + ? managed.emojis + ? resolveCustomEmoji(managed.source, managed.emojis) + : managed.source : ""; }); @@ -59,10 +53,9 @@ const TootContent: Component = (oprops) => { } }); }} - class={`TootContent ${props.class || ""}`} {...rest} >
); }; -export default TootContent; +export default TootContent; \ No newline at end of file diff --git a/src/timelines/toot.module.css b/src/timelines/toot.module.css index eae0b32..4042122 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 60ms var(--tutu-anim-curve-sharp), - margin-bottom 60ms var(--tutu-anim-curve-sharp), - height 60ms var(--tutu-anim-curve-sharp), + margin-top 125ms var(--tutu-anim-curve-std), + margin-bottom 125ms var(--tutu-anim-curve-std), + height 225ms var(--tutu-anim-curve-std), var(--tutu-transition-shadow); border-radius: 0; } @@ -89,6 +89,103 @@ 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; @@ -124,6 +221,12 @@ } } +.compactTootContent { + composes: tootContent; + margin-left: 0; + margin-right: 0; +} + .tootRetootGrp { display: flex; gap: 0.25em;