RegularToot: remove css module
This commit is contained in:
thislight
parent
9fe86d12b0
commit
6895367fad
3 changed files with 93 additions and 106 deletions
78
src/timelines/RegularToot.css
Normal file
78
src/timelines/RegularToot.css
Normal file
|
|
@ -0,0 +1,78 @@
|
|||
.RegularToot {
|
||||
--card-pad: 16px;
|
||||
--card-gut: 16px;
|
||||
--toot-avatar-size: 40px;
|
||||
margin-block: 0;
|
||||
position: relative;
|
||||
contain: layout style;
|
||||
cursor: pointer;
|
||||
|
||||
|
||||
transition:
|
||||
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;
|
||||
|
||||
time {
|
||||
color: var(--tutu-color-secondary-text-on-surface);
|
||||
}
|
||||
|
||||
>.retoot-grp {
|
||||
display: flex;
|
||||
gap: 0.25em;
|
||||
margin-bottom: 8px;
|
||||
align-items: center;
|
||||
|
||||
> :first-child {
|
||||
margin-right: 0.25em;
|
||||
}
|
||||
}
|
||||
|
||||
& .custom-emoji {
|
||||
height: 1em;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
&.expanded {
|
||||
margin-block: 20px;
|
||||
box-shadow: var(--tutu-shadow-e9);
|
||||
}
|
||||
|
||||
&.thread-top,
|
||||
&.thread-mid,
|
||||
&.thread-btm {
|
||||
position: relative;
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 36px;
|
||||
background-color: var(--tutu-color-secondary);
|
||||
width: 2px;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
&.thread-mid {
|
||||
&::before {
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&.thread-top {
|
||||
&::before {
|
||||
top: 16px;
|
||||
bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&.thread-btm {
|
||||
&::before {
|
||||
top: 0;
|
||||
height: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -14,11 +14,7 @@ import tootStyle from "./toot.module.css";
|
|||
import { formatRelative } from "date-fns";
|
||||
import Img from "~material/Img.js";
|
||||
import { Body2 } from "~material/typography.js";
|
||||
import { css } from "solid-styled";
|
||||
import {
|
||||
SmartToySharp,
|
||||
Lock,
|
||||
} from "@suid/icons-material";
|
||||
import { SmartToySharp, Lock } from "@suid/icons-material";
|
||||
import { useTimeSource } from "~platform/timesrc.js";
|
||||
import { resolveCustomEmoji } from "../masto/toot.js";
|
||||
import { Divider } from "@suid/material";
|
||||
|
|
@ -30,7 +26,8 @@ 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"
|
||||
import TootActionGroup from "./toots/TootActionGroup.js";
|
||||
import "./RegularToot.css";
|
||||
|
||||
export type TootEnv = {
|
||||
boost: (value: mastodon.v1.Status) => void;
|
||||
|
|
@ -178,9 +175,9 @@ function onToggleReveal(setValue: Setter<boolean>, event: Event) {
|
|||
* You can extract the intent from the attributes of the "actionable" element.
|
||||
* The action type is the dataset's `action`.
|
||||
*/
|
||||
const RegularToot: Component<RegularTootProps> = (props) => {
|
||||
const RegularToot: Component<RegularTootProps> = (oprops) => {
|
||||
let rootRef: HTMLElement;
|
||||
const [managed, rest] = splitProps(props, [
|
||||
const [props, rest] = splitProps(oprops, [
|
||||
"status",
|
||||
"lang",
|
||||
"class",
|
||||
|
|
@ -189,71 +186,28 @@ const RegularToot: Component<RegularTootProps> = (props) => {
|
|||
"thread",
|
||||
]);
|
||||
const now = useTimeSource();
|
||||
const status = () => managed.status;
|
||||
const status = () => props.status;
|
||||
const toot = () => status().reblog ?? status();
|
||||
const session = useDefaultSession();
|
||||
const [reveal, setReveal] = createSignal(false);
|
||||
|
||||
css`
|
||||
.reply-sep {
|
||||
margin-left: calc(var(--toot-avatar-size) + var(--card-pad) + 8px);
|
||||
margin-block: 8px;
|
||||
}
|
||||
|
||||
.thread-top,
|
||||
.thread-mid,
|
||||
.thread-btm {
|
||||
position: relative;
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 36px;
|
||||
background-color: var(--tutu-color-secondary);
|
||||
width: 2px;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.thread-mid {
|
||||
&::before {
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.thread-top {
|
||||
&::before {
|
||||
top: 16px;
|
||||
bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.thread-btm {
|
||||
&::before {
|
||||
top: 0;
|
||||
height: 16px;
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
return (
|
||||
<>
|
||||
<article
|
||||
classList={{
|
||||
[tootStyle.toot]: true,
|
||||
[tootStyle.expanded]: managed.evaluated,
|
||||
"thread-top": managed.thread === "top",
|
||||
"thread-mid": managed.thread === "middle",
|
||||
"thread-btm": managed.thread === "bottom",
|
||||
[managed.class || ""]: true,
|
||||
"RegularToot": true,
|
||||
"expanded": props.evaluated,
|
||||
"thread-top": props.thread === "top",
|
||||
"thread-mid": props.thread === "middle",
|
||||
"thread-btm": props.thread === "bottom",
|
||||
[props.class || ""]: true,
|
||||
}}
|
||||
ref={rootRef!}
|
||||
lang={toot().language || managed.lang}
|
||||
lang={toot().language || props.lang}
|
||||
{...rest}
|
||||
>
|
||||
<Show when={!!status().reblog}>
|
||||
<div class={tootStyle.tootRetootGrp}>
|
||||
<div class="retoot-grp">
|
||||
<BoostIcon />
|
||||
<Body2
|
||||
ref={(e: { innerHTML: string }) => {
|
||||
|
|
@ -301,7 +255,7 @@ const RegularToot: Component<RegularTootProps> = (props) => {
|
|||
<Show when={toot().poll}>
|
||||
<TootPoll value={toot().poll!} status={toot()} />
|
||||
</Show>
|
||||
<Show when={managed.actionable}>
|
||||
<Show when={props.actionable}>
|
||||
<Divider
|
||||
class={cardStyle.cardNoPad}
|
||||
style={{ "margin-top": "8px" }}
|
||||
|
|
|
|||
|
|
@ -1,37 +1,3 @@
|
|||
.toot {
|
||||
--card-pad: 16px;
|
||||
--card-gut: 16px;
|
||||
--toot-avatar-size: 40px;
|
||||
margin-block: 0;
|
||||
position: relative;
|
||||
contain: content;
|
||||
cursor: pointer;
|
||||
|
||||
&.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),
|
||||
var(--tutu-transition-shadow);
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
time {
|
||||
color: var(--tutu-color-secondary-text-on-surface);
|
||||
}
|
||||
|
||||
& :global(.custom-emoji) {
|
||||
height: 1em;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
&.expanded {
|
||||
margin-block: 20px;
|
||||
box-shadow: var(--tutu-shadow-e9);
|
||||
}
|
||||
}
|
||||
|
||||
.tootAuthorGrp {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
|
|
@ -84,14 +50,3 @@
|
|||
border: 1px solid var(--tutu-color-surface);
|
||||
background-color: var(--tutu-color-surface-d);
|
||||
}
|
||||
|
||||
.tootRetootGrp {
|
||||
display: flex;
|
||||
gap: 0.25em;
|
||||
margin-bottom: 8px;
|
||||
align-items: center;
|
||||
|
||||
> :first-child {
|
||||
margin-right: 0.25em;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue