Skip to content
Snippets Groups Projects

Compare revisions

Changes are shown as if the source revision was being merged into the target revision. Learn more about comparing revisions.

Source

Select target project
No results found

Target

Select target project
No results found
Show changes
Expand all Hide whitespace changes
Inline Side-by-side
Showing
with 1596 additions and 824 deletions
src/components/common/IconBase.tsx
View file @ 1ac5de17
import { Attachment } from "revolt.js/dist/api/objects"; import { Attachment } from "revolt-api/types/Autumn";
import styled, { css } from "styled-components"; import styled, { css } from "styled-components";
export interface IconBaseProps<T> { export interface IconBaseProps<T> {
...@@ -6,11 +6,13 @@ export interface IconBaseProps<T> { ...@@ -6,11 +6,13 @@ export interface IconBaseProps<T> {
attachment?: Attachment; attachment?: Attachment;
size: number; size: number;
hover?: boolean;
animate?: boolean; animate?: boolean;
} }
interface IconModifiers { interface IconModifiers {
square?: boolean square?: boolean;
hover?: boolean;
} }
export default styled.svg<IconModifiers>` export default styled.svg<IconModifiers>`
...@@ -21,17 +23,37 @@ export default styled.svg<IconModifiers>` ...@@ -21,17 +23,37 @@ export default styled.svg<IconModifiers>`
height: 100%; height: 100%;
object-fit: cover; object-fit: cover;
${ props => !props.square && css` ${(props) =>
border-radius: 50%; !props.square &&
` } css`
border-radius: 50%;
`}
} }
${(props) =>
props.hover &&
css`
&:hover .icon {
filter: brightness(0.8);
}
`}
`; `;
export const ImageIconBase = styled.img<IconModifiers>` export const ImageIconBase = styled.img<IconModifiers>`
flex-shrink: 0; flex-shrink: 0;
object-fit: cover; object-fit: cover;
${ props => !props.square && css` ${(props) =>
border-radius: 50%; !props.square &&
` } css`
border-radius: 50%;
`}
${(props) =>
props.hover &&
css`
&:hover img {
filter: brightness(0.8);
}
`}
`; `;
src/components/common/LocaleSelector.tsx
View file @ 1ac5de17
import ComboBox from "../ui/ComboBox"; import { dispatch } from "../../redux";
import { connectState } from "../../redux/connector"; import { connectState } from "../../redux/connector";
import { WithDispatcher } from "../../redux/reducers";
import { LanguageEntry, Languages } from "../../context/Locale";
type Props = WithDispatcher & { import { Language, Languages } from "../../context/Locale";
import ComboBox from "../ui/ComboBox";
type Props = {
locale: string; locale: string;
}; };
...@@ -11,18 +13,16 @@ export function LocaleSelector(props: Props) { ...@@ -11,18 +13,16 @@ export function LocaleSelector(props: Props) {
return ( return (
<ComboBox <ComboBox
value={props.locale} value={props.locale}
onChange={e => onChange={(e) =>
props.dispatcher && dispatch({
props.dispatcher({
type: "SET_LOCALE", type: "SET_LOCALE",
locale: e.currentTarget.value as any locale: e.currentTarget.value as Language,
}) })
} }>
> {Object.keys(Languages).map((x) => {
{Object.keys(Languages).map(x => { const l = Languages[x as keyof typeof Languages];
const l = (Languages as any)[x] as LanguageEntry;
return ( return (
<option value={x}> <option value={x} key={x}>
{l.emoji} {l.display} {l.emoji} {l.display}
</option> </option>
); );
...@@ -31,12 +31,8 @@ export function LocaleSelector(props: Props) { ...@@ -31,12 +31,8 @@ export function LocaleSelector(props: Props) {
); );
} }
export default connectState( export default connectState(LocaleSelector, (state) => {
LocaleSelector, return {
state => { locale: state.locale,
return { };
locale: state.locale });
};
},
true
);
src/components/common/ServerHeader.tsx
View file @ 1ac5de17
import Header from "../ui/Header";
import styled from "styled-components";
import { Link } from "react-router-dom";
import IconButton from "../ui/IconButton";
import { Cog } from "@styled-icons/boxicons-solid"; import { Cog } from "@styled-icons/boxicons-solid";
import { Server } from "revolt.js/dist/api/objects"; import { observer } from "mobx-react-lite";
import { Link } from "react-router-dom";
import { ServerPermission } from "revolt.js/dist/api/permissions"; import { ServerPermission } from "revolt.js/dist/api/permissions";
import { HookContext, useServerPermission } from "../../context/revoltjs/hooks"; import { Server } from "revolt.js/dist/maps/Servers";
import styled from "styled-components";
import Header from "../ui/Header";
import IconButton from "../ui/IconButton";
interface Props { interface Props {
server: Server, server: Server;
ctx: HookContext
} }
const ServerName = styled.div` const ServerName = styled.div`
flex-grow: 1; flex-grow: 1;
`; `;
export default function ServerHeader({ server, ctx }: Props) { export default observer(({ server }: Props) => {
const permissions = useServerPermission(server._id, ctx); const bannerURL = server.generateBannerURL({ width: 480 });
const bannerURL = ctx.client.servers.getBannerURL(server._id, { width: 480 }, true);
return ( return (
<Header borders <Header
borders
placement="secondary" placement="secondary"
background={typeof bannerURL !== 'undefined'} background={typeof bannerURL !== "undefined"}
style={{ background: bannerURL ? `url('${bannerURL}')` : undefined }}> style={{
<ServerName> background: bannerURL ? `url('${bannerURL}')` : undefined,
{ server.name } }}>
</ServerName> <ServerName>{server.name}</ServerName>
{ (permissions & ServerPermission.ManageServer) > 0 && <div className="actions"> {(server.permission & ServerPermission.ManageServer) > 0 && (
<Link to={`/server/${server._id}/settings`}> <div className="actions">
<IconButton> <Link to={`/server/${server._id}/settings`}>
<Cog size={24} /> <IconButton>
</IconButton> <Cog size={24} />
</Link> </IconButton>
</div> } </Link>
</div>
)}
</Header> </Header>
) );
} });
src/components/common/ServerIcon.tsx
View file @ 1ac5de17
import { observer } from "mobx-react-lite";
import { Server } from "revolt.js/dist/maps/Servers";
import styled from "styled-components"; import styled from "styled-components";
import { useContext } from "preact/hooks"; import { useContext } from "preact/hooks";
import { Server } from "revolt.js/dist/api/objects";
import { IconBaseProps, ImageIconBase } from "./IconBase";
import { AppContext } from "../../context/revoltjs/RevoltClient"; import { AppContext } from "../../context/revoltjs/RevoltClient";
import { IconBaseProps, ImageIconBase } from "./IconBase";
interface Props extends IconBaseProps<Server> { interface Props extends IconBaseProps<Server> {
server_name?: string; server_name?: string;
} }
const ServerText = styled.div` const ServerText = styled.div`
display: grid; display: grid;
padding: .2em; padding: 0.2em;
overflow: hidden; overflow: hidden;
border-radius: 50%; border-radius: 50%;
place-items: center; place-items: center;
...@@ -18,30 +22,47 @@ const ServerText = styled.div` ...@@ -18,30 +22,47 @@ const ServerText = styled.div`
background: var(--primary-background); background: var(--primary-background);
`; `;
const fallback = '/assets/group.png'; // const fallback = "/assets/group.png";
export default function ServerIcon(props: Props & Omit<JSX.HTMLAttributes<HTMLImageElement>, keyof Props>) { export default observer(
const client = useContext(AppContext); (
props: Props &
Omit<
JSX.HTMLAttributes<HTMLImageElement>,
keyof Props | "children" | "as"
>,
) => {
const client = useContext(AppContext);
const { target, attachment, size, animate, server_name, ...imgProps } =
props;
const iconURL = client.generateFileURL(
target?.icon ?? attachment,
{ max_side: 256 },
animate,
);
const { target, attachment, size, animate, server_name, children, as, ...imgProps } = props; if (typeof iconURL === "undefined") {
const iconURL = client.generateFileURL(target?.icon ?? attachment, { max_side: 256 }, animate); const name = target?.name ?? server_name ?? "";
if (typeof iconURL === 'undefined') { return (
const name = target?.name ?? server_name ?? ''; <ServerText style={{ width: size, height: size }}>
{name
.split(" ")
.map((x) => x[0])
.filter((x) => typeof x !== "undefined")}
</ServerText>
);
}
return ( return (
<ServerText style={{ width: size, height: size }}> <ImageIconBase
{ name.split(' ') {...imgProps}
.map(x => x[0]) width={size}
.filter(x => typeof x !== 'undefined') } height={size}
</ServerText> src={iconURL}
) loading="lazy"
} aria-hidden="true"
/>
return ( );
<ImageIconBase {...imgProps} },
width={size} );
height={size}
aria-hidden="true"
src={iconURL} />
);
}
src/components/common/Tooltip.tsx
View file @ 1ac5de17
import { Text } from "preact-i18n"; import Tippy, { TippyProps } from "@tippyjs/react";
import styled from "styled-components"; import styled from "styled-components";
import { Text } from "preact-i18n";
import { Children } from "../../types/Preact"; import { Children } from "../../types/Preact";
import Tippy, { TippyProps } from '@tippyjs/react';
type Props = Omit<TippyProps, 'children'> & { type Props = Omit<TippyProps, "children"> & {
children: Children; children: Children;
content: Children; content: Children;
} };
export default function Tooltip(props: Props) { export default function Tooltip(props: Props) {
const { children, content, ...tippyProps } = props; const { children, content, ...tippyProps } = props;
...@@ -14,8 +16,8 @@ export default function Tooltip(props: Props) { ...@@ -14,8 +16,8 @@ export default function Tooltip(props: Props) {
return ( return (
<Tippy content={content} {...tippyProps}> <Tippy content={content} {...tippyProps}>
{/* {/*
// @ts-expect-error */} // @ts-expect-error Type mis-match. */}
<div>{ children }</div> <div style={`display: flex;`}>{children}</div>
</Tippy> </Tippy>
); );
} }
...@@ -24,7 +26,7 @@ const PermissionTooltipBase = styled.div` ...@@ -24,7 +26,7 @@ const PermissionTooltipBase = styled.div`
display: flex; display: flex;
align-items: center; align-items: center;
flex-direction: column; flex-direction: column;
span { span {
font-weight: 700; font-weight: 700;
text-transform: uppercase; text-transform: uppercase;
...@@ -33,17 +35,26 @@ const PermissionTooltipBase = styled.div` ...@@ -33,17 +35,26 @@ const PermissionTooltipBase = styled.div`
} }
code { code {
font-family: var(--monoscape-font); font-family: var(--monospace-font);
} }
`; `;
export function PermissionTooltip(props: Omit<Props, 'content'> & { permission: string }) { export function PermissionTooltip(
props: Omit<Props, "content"> & { permission: string },
) {
const { permission, ...tooltipProps } = props; const { permission, ...tooltipProps } = props;
return ( return (
<Tooltip content={<PermissionTooltipBase> <Tooltip
<span><Text id="app.permissions.required" /></span> content={
<code>{ permission }</code> <PermissionTooltipBase>
</PermissionTooltipBase>} {...tooltipProps} /> <span>
) <Text id="app.permissions.required" />
</span>
<code>{permission}</code>
</PermissionTooltipBase>
}
{...tooltipProps}
/>
);
} }
src/components/common/UpdateIndicator.tsx
View file @ 1ac5de17
import { updateSW } from "../../main"; /* eslint-disable react-hooks/rules-of-hooks */
import IconButton from "../ui/IconButton"; import { Download, CloudDownload } from "@styled-icons/boxicons-regular";
import { ThemeContext } from "../../context/Theme";
import { Download } from "@styled-icons/boxicons-regular";
import { internalSubscribe } from "../../lib/eventEmitter";
import { useContext, useEffect, useState } from "preact/hooks"; import { useContext, useEffect, useState } from "preact/hooks";
var pendingUpdate = false; import { internalSubscribe } from "../../lib/eventEmitter";
internalSubscribe('PWA', 'update', () => pendingUpdate = true);
import { ThemeContext } from "../../context/Theme";
export default function UpdateIndicator() { import IconButton from "../ui/IconButton";
const [ pending, setPending ] = useState(pendingUpdate);
import { updateSW } from "../../main";
import Tooltip from "./Tooltip";
let pendingUpdate = false;
internalSubscribe("PWA", "update", () => (pendingUpdate = true));
interface Props {
style: "titlebar" | "channel";
}
export default function UpdateIndicator({ style }: Props) {
const [pending, setPending] = useState(pendingUpdate);
useEffect(() => { useEffect(() => {
return internalSubscribe('PWA', 'update', () => setPending(true)); return internalSubscribe("PWA", "update", () => setPending(true));
}); });
if (!pending) return; if (!pending) return null;
const theme = useContext(ThemeContext); const theme = useContext(ThemeContext);
if (style === "titlebar") {
return (
<div class="actions">
<Tooltip
content="A new update is available!"
placement="bottom">
<div onClick={() => updateSW(true)}>
<CloudDownload size={22} color={theme.success} />
</div>
</Tooltip>
</div>
);
}
if (window.isNative) return null;
return ( return (
<IconButton onClick={() => updateSW(true)}> <IconButton onClick={() => updateSW(true)}>
<Download size={22} color={theme.success} /> <Download size={22} color={theme.success} />
</IconButton> </IconButton>
) );
} }
src/components/common/messaging/Message.tsx
View file @ 1ac5de17
import Embed from "./embed/Embed"; import { observer } from "mobx-react-lite";
import UserIcon from "../user/UserIcon"; import { Message as MessageObject } from "revolt.js/dist/maps/Messages";
import { Username } from "../user/UserShort";
import Markdown from "../../markdown/Markdown";
import { Children } from "../../../types/Preact";
import Attachment from "./attachments/Attachment";
import { attachContextMenu } from "preact-context-menu"; import { attachContextMenu } from "preact-context-menu";
import { useUser } from "../../../context/revoltjs/hooks"; import { memo } from "preact/compat";
import { useState } from "preact/hooks";
import { QueuedMessage } from "../../../redux/reducers/queue"; import { QueuedMessage } from "../../../redux/reducers/queue";
import { MessageObject } from "../../../context/revoltjs/util";
import MessageBase, { MessageContent, MessageDetail, MessageInfo } from "./MessageBase"; import { useIntermediate } from "../../../context/intermediate/Intermediate";
import { useClient } from "../../../context/revoltjs/RevoltClient";
import Overline from "../../ui/Overline"; import Overline from "../../ui/Overline";
import { useContext } from "preact/hooks";
import { AppContext } from "../../../context/revoltjs/RevoltClient"; import { Children } from "../../../types/Preact";
import { memo } from "preact/compat"; import Markdown from "../../markdown/Markdown";
import UserIcon from "../user/UserIcon";
import { Username } from "../user/UserShort";
import MessageBase, {
MessageContent,
MessageDetail,
MessageInfo,
} from "./MessageBase";
import Attachment from "./attachments/Attachment";
import { MessageReply } from "./attachments/MessageReply"; import { MessageReply } from "./attachments/MessageReply";
import { useIntermediate } from "../../../context/intermediate/Intermediate"; import Embed from "./embed/Embed";
interface Props { interface Props {
attachContext?: boolean attachContext?: boolean;
queued?: QueuedMessage queued?: QueuedMessage;
message: MessageObject message: MessageObject;
contrast?: boolean highlight?: boolean;
content?: Children contrast?: boolean;
head?: boolean content?: Children;
head?: boolean;
} }
function Message({ attachContext, message, contrast, content: replacement, head: preferHead, queued }: Props) { const Message = observer(
// TODO: Can improve re-renders here by providing a list ({
// TODO: of dependencies. We only need to update on u/avatar. highlight,
const user = useUser(message.author); attachContext,
const client = useContext(AppContext); message,
const { openScreen } = useIntermediate(); contrast,
content: replacement,
head: preferHead,
queued,
}: Props) => {
const client = useClient();
const user = message.author;
const content = message.content as string; const { openScreen } = useIntermediate();
const head = preferHead || (message.replies && message.replies.length > 0);
const userContext = attachContext ? attachContextMenu('Menu', { user: message.author, contextualChannel: message.channel }) : undefined as any; // ! FIXME: tell fatal to make this type generic const content = message.content as string;
const openProfile = () => openScreen({ id: 'profile', user_id: message.author }); const head =
preferHead || (message.reply_ids && message.reply_ids.length > 0);
return ( // ! TODO: tell fatal to make this type generic
<div id={message._id}> // bree: Fatal please...
{ message.replies?.map((message_id, index) => <MessageReply index={index} id={message_id} channel={message.channel} />) } const userContext = attachContext
<MessageBase ? (attachContextMenu("Menu", {
head={head && !(message.replies && message.replies.length > 0)} user: message.author_id,
contrast={contrast} contextualChannel: message.channel_id,
sending={typeof queued !== 'undefined'} // eslint-disable-next-line
mention={message.mentions?.includes(client.user!._id)} }) as any)
failed={typeof queued?.error !== 'undefined'} : undefined;
onContextMenu={attachContext ? attachContextMenu('Menu', { message, contextualChannel: message.channel, queued }) : undefined}>
<MessageInfo> const openProfile = () =>
{ head ? openScreen({ id: "profile", user_id: message.author_id });
<UserIcon target={user} size={36} onContextMenu={userContext} onClick={openProfile} /> :
<MessageDetail message={message} position="left" /> } // ! FIXME(?): animate on hover
</MessageInfo> const [animate, setAnimate] = useState(false);
<MessageContent>
{ head && <span className="detail"> return (
<Username className="author" user={user} onContextMenu={userContext} onClick={openProfile} /> <div id={message._id}>
<MessageDetail message={message} position="top" /> {message.reply_ids?.map((message_id, index) => (
</span> } <MessageReply
{ replacement ?? <Markdown content={content} /> } key={message_id}
{ queued?.error && <Overline type="error" error={queued.error} /> } index={index}
{ message.attachments?.map((attachment, index) => id={message_id}
<Attachment key={index} attachment={attachment} hasContent={ index > 0 || content.length > 0 } />) } channel={message.channel!}
{ message.embeds?.map((embed, index) => />
<Embed key={index} embed={embed} />) } ))}
</MessageContent> <MessageBase
</MessageBase> highlight={highlight}
</div> head={
) (head &&
} !(
message.reply_ids &&
message.reply_ids.length > 0
)) ??
false
}
contrast={contrast}
sending={typeof queued !== "undefined"}
mention={message.mention_ids?.includes(client.user!._id)}
failed={typeof queued?.error !== "undefined"}
onContextMenu={
attachContext
? attachContextMenu("Menu", {
message,
contextualChannel: message.channel_id,
queued,
})
: undefined
}
onMouseEnter={() => setAnimate(true)}
onMouseLeave={() => setAnimate(false)}>
<MessageInfo>
{head ? (
<UserIcon
target={user}
size={36}
onContextMenu={userContext}
onClick={openProfile}
animate={animate}
/>
) : (
<MessageDetail message={message} position="left" />
)}
</MessageInfo>
<MessageContent>
{head && (
<span className="detail">
<Username
className="author"
user={user}
onContextMenu={userContext}
onClick={openProfile}
/>
<MessageDetail
message={message}
position="top"
/>
</span>
)}
{replacement ?? <Markdown content={content} />}
{queued?.error && (
<Overline type="error" error={queued.error} />
)}
{message.attachments?.map((attachment, index) => (
<Attachment
key={index}
attachment={attachment}
hasContent={index > 0 || content.length > 0}
/>
))}
{message.embeds?.map((embed, index) => (
<Embed key={index} embed={embed} />
))}
</MessageContent>
</MessageBase>
</div>
);
},
);
export default memo(Message); export default memo(Message);
src/components/common/messaging/MessageBase.tsx
View file @ 1ac5de17
import dayjs from "dayjs"; import { observer } from "mobx-react-lite";
import Tooltip from "../Tooltip"; import { Message } from "revolt.js/dist/maps/Messages";
import styled, { css, keyframes } from "styled-components";
import { decodeTime } from "ulid"; import { decodeTime } from "ulid";
import { Text } from "preact-i18n"; import { Text } from "preact-i18n";
import styled, { css } from "styled-components";
import { MessageObject } from "../../../context/revoltjs/util"; import { useDictionary } from "../../../lib/i18n";
import { dayjs } from "../../../context/Locale";
import Tooltip from "../Tooltip";
export interface BaseMessageProps { export interface BaseMessageProps {
head?: boolean, head?: boolean;
failed?: boolean, failed?: boolean;
mention?: boolean, mention?: boolean;
blocked?: boolean, blocked?: boolean;
sending?: boolean, sending?: boolean;
contrast?: boolean contrast?: boolean;
highlight?: boolean;
} }
const highlight = keyframes`
0% { background: var(--mention); }
66% { background: var(--mention); }
100% { background: transparent; }
`;
export default styled.div<BaseMessageProps>` export default styled.div<BaseMessageProps>`
display: flex; display: flex;
overflow-x: none; overflow: none;
padding: .125rem; padding: 0.125rem;
flex-direction: row; flex-direction: row;
padding-right: 16px; padding-inline-end: 16px;
${ props => props.contrast && css` @media (pointer: coarse) {
padding: .3rem; user-select: none;
border-radius: 4px; }
background: var(--hover);
` }
${ props => props.head && css` ${(props) =>
margin-top: 12px; props.contrast &&
` } css`
padding: 0.3rem;
background: var(--hover);
border-radius: var(--border-radius);
`}
${ props => props.mention && css` ${(props) =>
background: var(--mention); props.head &&
` } css`
margin-top: 12px;
`}
${ props => props.blocked && css` ${(props) =>
filter: blur(4px); props.mention &&
transition: 0.2s ease filter; css`
background: var(--mention);
`}
&:hover { ${(props) =>
filter: none; props.blocked &&
} css`
` } filter: blur(4px);
transition: 0.2s ease filter;
${ props => props.sending && css` &:hover {
opacity: 0.8; filter: none;
color: var(--tertiary-foreground); }
` } `}
${(props) =>
props.sending &&
css`
opacity: 0.8;
color: var(--tertiary-foreground);
`}
${(props) =>
props.failed &&
css`
color: var(--error);
`}
${ props => props.failed && css` ${(props) =>
color: var(--error); props.highlight &&
` } css`
animation-name: ${highlight};
animation-timing-function: ease;
animation-duration: 3s;
`}
.detail { .detail {
gap: 8px; gap: 8px;
display: flex; display: flex;
align-items: center; align-items: center;
flex-shrink: 0;
} }
.author { .author {
overflow: hidden;
cursor: pointer; cursor: pointer;
font-weight: 600 !important; font-weight: 600 !important;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
text-overflow: ellipsis;
white-space: normal;
&:hover { &:hover {
text-decoration: underline; text-decoration: underline;
} }
} }
.copy { .copy {
display: block; display: block;
overflow: hidden; overflow: hidden;
...@@ -113,7 +158,8 @@ export const MessageInfo = styled.div` ...@@ -113,7 +158,8 @@ export const MessageInfo = styled.div`
opacity: 0; opacity: 0;
} }
time, .edited { time,
.edited {
margin-top: 1px; margin-top: 1px;
cursor: default; cursor: default;
display: inline; display: inline;
...@@ -121,12 +167,17 @@ export const MessageInfo = styled.div` ...@@ -121,12 +167,17 @@ export const MessageInfo = styled.div`
color: var(--tertiary-foreground); color: var(--tertiary-foreground);
} }
time, .edited > div { time,
.edited > div {
&::selection { &::selection {
background-color: transparent; background-color: transparent;
color: var(--tertiary-foreground); color: var(--tertiary-foreground);
} }
} }
.header {
cursor: pointer;
}
`; `;
export const MessageContent = styled.div` export const MessageContent = styled.div`
...@@ -134,56 +185,75 @@ export const MessageContent = styled.div` ...@@ -134,56 +185,75 @@ export const MessageContent = styled.div`
flex-grow: 1; flex-grow: 1;
display: flex; display: flex;
// overflow: hidden; // overflow: hidden;
font-size: .875rem;
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
font-size: var(--text-size);
`; `;
export const DetailBase = styled.div` export const DetailBase = styled.div`
flex-shrink: 0;
gap: 4px; gap: 4px;
font-size: 10px; font-size: 10px;
display: inline-flex; display: inline-flex;
color: var(--tertiary-foreground); color: var(--tertiary-foreground);
.edited {
cursor: default;
&::selection {
background-color: transparent;
color: var(--tertiary-foreground);
}
}
`; `;
export function MessageDetail({ message, position }: { message: MessageObject, position: 'left' | 'top' }) { export const MessageDetail = observer(
if (position === 'left') { ({ message, position }: { message: Message; position: "left" | "top" }) => {
if (message.edited) { const dict = useDictionary();
return (
<> if (position === "left") {
<time className="copyTime"> if (message.edited) {
<i className="copyBracket">[</i> return (
{dayjs(decodeTime(message._id)).format("H:mm")} <>
<i className="copyBracket">]</i> <time className="copyTime">
</time> <i className="copyBracket">[</i>
<span className="edited"> {dayjs(decodeTime(message._id)).format(
<Tooltip content={dayjs(message.edited).format("LLLL")}> dict.dayjs?.timeFormat,
<Text id="app.main.channel.edited" /> )}
</Tooltip> <i className="copyBracket">]</i>
</span> </time>
</> <span className="edited">
) <Tooltip
} else { content={dayjs(message.edited).format("LLLL")}>
<Text id="app.main.channel.edited" />
</Tooltip>
</span>
</>
);
}
return ( return (
<> <>
<time> <time>
<i className="copyBracket">[</i> <i className="copyBracket">[</i>
{ dayjs(decodeTime(message._id)).format("H:mm") } {dayjs(decodeTime(message._id)).format(
dict.dayjs?.timeFormat,
)}
<i className="copyBracket">]</i> <i className="copyBracket">]</i>
</time> </time>
</> </>
) );
} }
}
return ( return (
<DetailBase> <DetailBase>
<time> <time>{dayjs(decodeTime(message._id)).calendar()}</time>
{dayjs(decodeTime(message._id)).calendar()} {message.edited && (
</time> <Tooltip content={dayjs(message.edited).format("LLLL")}>
{ message.edited && <Tooltip content={dayjs(message.edited).format("LLLL")}> <span className="edited">
<Text id="app.main.channel.edited" /> <Text id="app.main.channel.edited" />
</Tooltip> } </span>
</DetailBase> </Tooltip>
) )}
} </DetailBase>
);
},
);
src/components/common/messaging/attachments/AttachmentActions.module.scss 0 → 100644
View file @ 1ac5de17
.actions.imageAction {
grid-template:
"name icon external download" auto
"size icon external download" auto
/ minmax(20px, 1fr) min-content min-content;
}
.actions {
display: grid;
grid-template:
"icon name external download" auto
"icon size external download" auto
/ min-content minmax(20px, 1fr) min-content;
align-items: center;
column-gap: 12px;
width: 100%;
padding: 8px;
overflow: none;
color: var(--foreground);
background: var(--secondary-background);
span {
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
.filesize {
grid-area: size;
font-size: 10px;
color: var(--secondary-foreground);
}
.downloadIcon {
grid-area: download;
}
.externalType {
grid-area: external;
}
.iconType {
grid-area: icon;
}
}
src/components/common/messaging/attachments/Grid.tsx 0 → 100644
View file @ 1ac5de17
import styled from "styled-components";
import { Children } from "../../../../types/Preact";
const Grid = styled.div`
display: grid;
overflow: hidden;
max-width: min(var(--attachment-max-width), 100%, var(--width));
max-height: min(var(--attachment-max-height), var(--height));
aspect-ratio: var(--aspect-ratio);
img,
video {
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
max-width: 100%;
max-height: 100%;
grid-area: 1 / 1;
}
&.spoiler {
img,
video {
filter: blur(44px);
}
border-radius: var(--border-radius);
}
`;
export default Grid;
type Props = Omit<
JSX.HTMLAttributes<HTMLDivElement>,
"children" | "as" | "style"
> & {
style?: JSX.CSSProperties;
children?: Children;
width: number;
height: number;
};
export function SizedGrid(props: Props) {
const { width, height, children, style, ...divProps } = props;
return (
<Grid
{...divProps}
style={{
...style,
"--width": `${width}px`,
"--height": `${height}px`,
"--aspect-ratio": width / height,
}}>
{children}
</Grid>
);
}
src/components/common/messaging/attachments/Spoiler.tsx 0 → 100644
View file @ 1ac5de17
This diff is collapsed.