mirror of
https://github.com/stoatchat/for-legacy-web.git
synced 2026-03-07 09:25:27 +00:00
Use tabWidth 4 without actual tabs.
This commit is contained in:
Paul
@@ -9,204 +9,204 @@ import { MessageObject } from "../../../context/revoltjs/util";
|
||||
import Tooltip from "../Tooltip";
|
||||
|
||||
export interface BaseMessageProps {
|
||||
head?: boolean;
|
||||
failed?: boolean;
|
||||
mention?: boolean;
|
||||
blocked?: boolean;
|
||||
sending?: boolean;
|
||||
contrast?: boolean;
|
||||
head?: boolean;
|
||||
failed?: boolean;
|
||||
mention?: boolean;
|
||||
blocked?: boolean;
|
||||
sending?: boolean;
|
||||
contrast?: boolean;
|
||||
}
|
||||
|
||||
export default styled.div<BaseMessageProps>`
|
||||
display: flex;
|
||||
overflow-x: none;
|
||||
padding: 0.125rem;
|
||||
flex-direction: row;
|
||||
padding-right: 16px;
|
||||
|
||||
${(props) =>
|
||||
props.contrast &&
|
||||
css`
|
||||
padding: 0.3rem;
|
||||
border-radius: 4px;
|
||||
background: var(--hover);
|
||||
`}
|
||||
|
||||
${(props) =>
|
||||
props.head &&
|
||||
css`
|
||||
margin-top: 12px;
|
||||
`}
|
||||
display: flex;
|
||||
overflow-x: none;
|
||||
padding: 0.125rem;
|
||||
flex-direction: row;
|
||||
padding-right: 16px;
|
||||
|
||||
${(props) =>
|
||||
props.mention &&
|
||||
css`
|
||||
background: var(--mention);
|
||||
`}
|
||||
props.contrast &&
|
||||
css`
|
||||
padding: 0.3rem;
|
||||
border-radius: 4px;
|
||||
background: var(--hover);
|
||||
`}
|
||||
|
||||
${(props) =>
|
||||
props.blocked &&
|
||||
css`
|
||||
filter: blur(4px);
|
||||
transition: 0.2s ease filter;
|
||||
|
||||
&:hover {
|
||||
filter: none;
|
||||
}
|
||||
`}
|
||||
props.head &&
|
||||
css`
|
||||
margin-top: 12px;
|
||||
`}
|
||||
|
||||
${(props) =>
|
||||
props.sending &&
|
||||
css`
|
||||
opacity: 0.8;
|
||||
color: var(--tertiary-foreground);
|
||||
`}
|
||||
props.mention &&
|
||||
css`
|
||||
background: var(--mention);
|
||||
`}
|
||||
|
||||
${(props) =>
|
||||
props.failed &&
|
||||
css`
|
||||
color: var(--error);
|
||||
`}
|
||||
props.blocked &&
|
||||
css`
|
||||
filter: blur(4px);
|
||||
transition: 0.2s ease filter;
|
||||
|
||||
&:hover {
|
||||
filter: none;
|
||||
}
|
||||
`}
|
||||
|
||||
${(props) =>
|
||||
props.sending &&
|
||||
css`
|
||||
opacity: 0.8;
|
||||
color: var(--tertiary-foreground);
|
||||
`}
|
||||
|
||||
${(props) =>
|
||||
props.failed &&
|
||||
css`
|
||||
color: var(--error);
|
||||
`}
|
||||
|
||||
.detail {
|
||||
gap: 8px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
gap: 8px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.author {
|
||||
cursor: pointer;
|
||||
font-weight: 600 !important;
|
||||
.author {
|
||||
cursor: pointer;
|
||||
font-weight: 600 !important;
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
.copy {
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
}
|
||||
.copy {
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: var(--hover);
|
||||
&:hover {
|
||||
background: var(--hover);
|
||||
|
||||
time {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
time {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
export const MessageInfo = styled.div`
|
||||
width: 62px;
|
||||
display: flex;
|
||||
flex-shrink: 0;
|
||||
padding-top: 2px;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
width: 62px;
|
||||
display: flex;
|
||||
flex-shrink: 0;
|
||||
padding-top: 2px;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
|
||||
.copyBracket {
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
}
|
||||
.copyBracket {
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.copyTime {
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
}
|
||||
.copyTime {
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
svg {
|
||||
user-select: none;
|
||||
cursor: pointer;
|
||||
svg {
|
||||
user-select: none;
|
||||
cursor: pointer;
|
||||
|
||||
&:active {
|
||||
transform: translateY(1px);
|
||||
}
|
||||
}
|
||||
&:active {
|
||||
transform: translateY(1px);
|
||||
}
|
||||
}
|
||||
|
||||
time {
|
||||
opacity: 0;
|
||||
}
|
||||
time {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
time,
|
||||
.edited {
|
||||
margin-top: 1px;
|
||||
cursor: default;
|
||||
display: inline;
|
||||
font-size: 10px;
|
||||
color: var(--tertiary-foreground);
|
||||
}
|
||||
time,
|
||||
.edited {
|
||||
margin-top: 1px;
|
||||
cursor: default;
|
||||
display: inline;
|
||||
font-size: 10px;
|
||||
color: var(--tertiary-foreground);
|
||||
}
|
||||
|
||||
time,
|
||||
.edited > div {
|
||||
&::selection {
|
||||
background-color: transparent;
|
||||
color: var(--tertiary-foreground);
|
||||
}
|
||||
}
|
||||
time,
|
||||
.edited > div {
|
||||
&::selection {
|
||||
background-color: transparent;
|
||||
color: var(--tertiary-foreground);
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
export const MessageContent = styled.div`
|
||||
min-width: 0;
|
||||
flex-grow: 1;
|
||||
display: flex;
|
||||
// overflow: hidden;
|
||||
font-size: 0.875rem;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
min-width: 0;
|
||||
flex-grow: 1;
|
||||
display: flex;
|
||||
// overflow: hidden;
|
||||
font-size: 0.875rem;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
`;
|
||||
|
||||
export const DetailBase = styled.div`
|
||||
gap: 4px;
|
||||
font-size: 10px;
|
||||
display: inline-flex;
|
||||
color: var(--tertiary-foreground);
|
||||
gap: 4px;
|
||||
font-size: 10px;
|
||||
display: inline-flex;
|
||||
color: var(--tertiary-foreground);
|
||||
`;
|
||||
|
||||
export function MessageDetail({
|
||||
message,
|
||||
position,
|
||||
message,
|
||||
position,
|
||||
}: {
|
||||
message: MessageObject;
|
||||
position: "left" | "top";
|
||||
message: MessageObject;
|
||||
position: "left" | "top";
|
||||
}) {
|
||||
if (position === "left") {
|
||||
if (message.edited) {
|
||||
return (
|
||||
<>
|
||||
<time className="copyTime">
|
||||
<i className="copyBracket">[</i>
|
||||
{dayjs(decodeTime(message._id)).format("H:mm")}
|
||||
<i className="copyBracket">]</i>
|
||||
</time>
|
||||
<span className="edited">
|
||||
<Tooltip content={dayjs(message.edited).format("LLLL")}>
|
||||
<Text id="app.main.channel.edited" />
|
||||
</Tooltip>
|
||||
</span>
|
||||
</>
|
||||
);
|
||||
} else {
|
||||
return (
|
||||
<>
|
||||
<time>
|
||||
<i className="copyBracket">[</i>
|
||||
{dayjs(decodeTime(message._id)).format("H:mm")}
|
||||
<i className="copyBracket">]</i>
|
||||
</time>
|
||||
</>
|
||||
);
|
||||
}
|
||||
}
|
||||
if (position === "left") {
|
||||
if (message.edited) {
|
||||
return (
|
||||
<>
|
||||
<time className="copyTime">
|
||||
<i className="copyBracket">[</i>
|
||||
{dayjs(decodeTime(message._id)).format("H:mm")}
|
||||
<i className="copyBracket">]</i>
|
||||
</time>
|
||||
<span className="edited">
|
||||
<Tooltip content={dayjs(message.edited).format("LLLL")}>
|
||||
<Text id="app.main.channel.edited" />
|
||||
</Tooltip>
|
||||
</span>
|
||||
</>
|
||||
);
|
||||
} else {
|
||||
return (
|
||||
<>
|
||||
<time>
|
||||
<i className="copyBracket">[</i>
|
||||
{dayjs(decodeTime(message._id)).format("H:mm")}
|
||||
<i className="copyBracket">]</i>
|
||||
</time>
|
||||
</>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<DetailBase>
|
||||
<time>{dayjs(decodeTime(message._id)).calendar()}</time>
|
||||
{message.edited && (
|
||||
<Tooltip content={dayjs(message.edited).format("LLLL")}>
|
||||
<Text id="app.main.channel.edited" />
|
||||
</Tooltip>
|
||||
)}
|
||||
</DetailBase>
|
||||
);
|
||||
return (
|
||||
<DetailBase>
|
||||
<time>{dayjs(decodeTime(message._id)).calendar()}</time>
|
||||
{message.edited && (
|
||||
<Tooltip content={dayjs(message.edited).format("LLLL")}>
|
||||
<Text id="app.main.channel.edited" />
|
||||
</Tooltip>
|
||||
)}
|
||||
</DetailBase>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user