mirror of
https://github.com/cinnyapp/cinny.git
synced 2025-11-11 17:50:29 +03:00
Refactor timeline (#1346)
* fix intersection & resize observer * add binary search util * add scroll info util * add virtual paginator hook - WIP * render timeline using paginator hook * add continuous pagination to fill timeline * add doc comments in virtual paginator hook * add scroll to element func in virtual paginator * extract timeline pagination login into hook * add sliding name for timeline messages - testing * scroll with live event * change message rending style * make message timestamp smaller * remove unused imports * add random number between util * add compact message component * add sanitize html types * fix sending alias in room mention * get room member display name util * add get room with canonical alias util * add sanitize html util * render custom html with new styles * fix linkifying link text * add reaction component * display message reactions in timeline * Change mention color * show edited message * add event sent by function factory * add functions to get emoji shortcode * add component for reaction msg * add tooltip for who has reacted * add message layouts & placeholder * fix reaction size * fix dark theme colors * add code highlight with prismjs * add options to configure spacing in msgs * render message reply * fix trim reply from body regex * fix crash when loading reply * fix reply hover style * decrypt event on timeline paginate * update custom html code style * remove console logs * fix virtual paginator scroll to func * fix virtual paginator scroll to types * add stop scroll for in view item options * fix virtual paginator out of range scroll to index * scroll to and highlight reply on click * fix reply hover style * make message avatar clickable * fix scrollTo issue in virtual paginator * load reply from fetch * import virtual paginator restore scroll * load timeline for specific event * Fix back pagination recalibration * fix reply min height * revert code block colors to secondary * stop sanitizing text in code block * add decrypt file util * add image media component * update folds * fix code block font style * add msg event type * add scale dimension util * strict msg layout type * add image renderer component * add message content fallback components * add message matrix event renderer components * render matrix event using hooks * add attachment component * add attachment content types * handle error when rendering image in timeline * add video component * render video * include blurhash in thumbnails * generate thumbnails for image message * fix reactToDom spoiler opts * add hooks for HTMLMediaElement * render audio file in timeline * add msg image content component * fix image content props * add video content component * render new image/video component in timeline * remove console.log * convert seconds to milliseconds in video info * add load thumbnail prop to video content component * add file saver types * add file header component * add file content component * render file in timeline * add media control component * render audio message in room timeline * remove moved components * safely load message reply * add media loading hook * update media control layout * add loading indication in audio component * fill audio play icon when playing audio * fix media expanding * add image viewer - WIP * add pan and zoom control to image viewer * add text based file viewer * add pdf viewer * add error handling in pdf viewer * add download btn to pdf viewer * fix file button spinner fill * fix file opens on re-render * add range slider in audio content player * render location in timeline * update folds * display membership event in timeline * make reactions toggle * render sticker messages in timeline * render room name, topic, avatar change and event * fix typos * update render state event type style * add room intro in start of timeline * add power levels context * fix wrong param passing in RoomView * fix sending typing notification in wrong room Slate onChange callback was not updating with react re-renders. * send typing status on key up * add typing indicator component * add typing member atom * display typing status in member drawer * add room view typing member component * display typing members in room view * remove old roomTimeline uses * add event readers hook * add latest event hook * display following members in room view * fetch event instead of event context for reply * fix typo in virtual paginator hook * add scroll to latest btn in timeline * change scroll to latest chip variant * destructure paginator object to improve perf * restore forward dir scroll in virtual paginator * run scroll to bottom in layout effect * display unread message indicator in timeline * make component for room timeline float * add timeline divider component * add day divider and format message time * apply message spacing to dividers * format date in room intro * send read receipt on message arrive * add event readers component * add reply, read receipt, source delete opt * bug fixes * update timeline on delete & show reason * fix empty reaction container style * show msg selection effect on msg option open * add report message options * add options to send quick reactions * add emoji board in message options * add reaction viewer * fix styles * show view reaction in msg options menu * fix spacing between two msg by same person * add option menu in other rendered event * handle m.room.encrypted messages * fix italic reply text overflow cut * handle encrypted sticker messages * remove console log * prevent message context menu with alt key pressed * make mentions clickable in messages * add options to show and hidden events in timeline * add option to disable media autoload * remove old emojiboard opener * add options to use system emoji * refresh timeline on reset * fix stuck typing member in member drawer
This commit is contained in:
Ajay Bura
GitHub
parent
fcd7723f73
commit
3a95d0da01
124 changed files with 9438 additions and 258 deletions
66
src/app/components/message/MessageContentFallback.tsx
Normal file
66
src/app/components/message/MessageContentFallback.tsx
Normal file
|
|
@ -0,0 +1,66 @@
|
|||
import { Box, Icon, Icons, Text, as, color, config } from 'folds';
|
||||
import React from 'react';
|
||||
|
||||
const warningStyle = { color: color.Warning.Main, opacity: config.opacity.P300 };
|
||||
const criticalStyle = { color: color.Critical.Main, opacity: config.opacity.P300 };
|
||||
|
||||
export const MessageDeletedContent = as<'div', { children?: never; reason?: string }>(
|
||||
({ reason, ...props }, ref) => (
|
||||
<Box as="span" alignItems="Center" gap="100" style={warningStyle} {...props} ref={ref}>
|
||||
<Icon size="50" src={Icons.Delete} />
|
||||
{reason ? (
|
||||
<i>This message has been deleted. {reason}</i>
|
||||
) : (
|
||||
<i>This message has been deleted</i>
|
||||
)}
|
||||
</Box>
|
||||
)
|
||||
);
|
||||
|
||||
export const MessageUnsupportedContent = as<'div', { children?: never }>(({ ...props }, ref) => (
|
||||
<Box as="span" alignItems="Center" gap="100" style={criticalStyle} {...props} ref={ref}>
|
||||
<Icon size="50" src={Icons.Warning} />
|
||||
<i>Unsupported message</i>
|
||||
</Box>
|
||||
));
|
||||
|
||||
export const MessageFailedContent = as<'div', { children?: never }>(({ ...props }, ref) => (
|
||||
<Box as="span" alignItems="Center" gap="100" style={criticalStyle} {...props} ref={ref}>
|
||||
<Icon size="50" src={Icons.Warning} />
|
||||
<i>Failed to load message</i>
|
||||
</Box>
|
||||
));
|
||||
|
||||
export const MessageBadEncryptedContent = as<'div', { children?: never }>(({ ...props }, ref) => (
|
||||
<Box as="span" alignItems="Center" gap="100" style={warningStyle} {...props} ref={ref}>
|
||||
<Icon size="50" src={Icons.Lock} />
|
||||
<i>Unable to decrypt message</i>
|
||||
</Box>
|
||||
));
|
||||
|
||||
export const MessageNotDecryptedContent = as<'div', { children?: never }>(({ ...props }, ref) => (
|
||||
<Box as="span" alignItems="Center" gap="100" style={warningStyle} {...props} ref={ref}>
|
||||
<Icon size="50" src={Icons.Lock} />
|
||||
<i>This message is not decrypted yet</i>
|
||||
</Box>
|
||||
));
|
||||
|
||||
export const MessageBrokenContent = as<'div', { children?: never }>(({ ...props }, ref) => (
|
||||
<Box as="span" alignItems="Center" gap="100" style={criticalStyle} {...props} ref={ref}>
|
||||
<Icon size="50" src={Icons.Warning} />
|
||||
<i>Broken message</i>
|
||||
</Box>
|
||||
));
|
||||
|
||||
export const MessageEmptyContent = as<'div', { children?: never }>(({ ...props }, ref) => (
|
||||
<Box as="span" alignItems="Center" gap="100" style={criticalStyle} {...props} ref={ref}>
|
||||
<Icon size="50" src={Icons.Warning} />
|
||||
<i>Empty message</i>
|
||||
</Box>
|
||||
));
|
||||
|
||||
export const MessageEditedContent = as<'span', { children?: never }>(({ ...props }, ref) => (
|
||||
<Text as="span" size="T200" priority="300" {...props} ref={ref}>
|
||||
{' (edited)'}
|
||||
</Text>
|
||||
));
|
||||
75
src/app/components/message/Reaction.css.ts
Normal file
75
src/app/components/message/Reaction.css.ts
Normal file
|
|
@ -0,0 +1,75 @@
|
|||
import { createVar, style } from '@vanilla-extract/css';
|
||||
import { DefaultReset, FocusOutline, color, config, toRem } from 'folds';
|
||||
|
||||
const Container = createVar();
|
||||
const ContainerHover = createVar();
|
||||
const ContainerActive = createVar();
|
||||
const ContainerLine = createVar();
|
||||
const OnContainer = createVar();
|
||||
|
||||
export const Reaction = style([
|
||||
FocusOutline,
|
||||
{
|
||||
vars: {
|
||||
[Container]: color.SurfaceVariant.Container,
|
||||
[ContainerHover]: color.SurfaceVariant.ContainerHover,
|
||||
[ContainerActive]: color.SurfaceVariant.ContainerActive,
|
||||
[ContainerLine]: color.SurfaceVariant.ContainerLine,
|
||||
[OnContainer]: color.SurfaceVariant.OnContainer,
|
||||
},
|
||||
padding: `${toRem(2)} ${config.space.S200} ${toRem(2)} ${config.space.S100}`,
|
||||
backgroundColor: Container,
|
||||
border: `${config.borderWidth.B300} solid ${ContainerLine}`,
|
||||
borderRadius: config.radii.R300,
|
||||
|
||||
selectors: {
|
||||
'button&': {
|
||||
cursor: 'pointer',
|
||||
},
|
||||
'&[aria-pressed=true]': {
|
||||
vars: {
|
||||
[Container]: color.Primary.Container,
|
||||
[ContainerHover]: color.Primary.ContainerHover,
|
||||
[ContainerActive]: color.Primary.ContainerActive,
|
||||
[ContainerLine]: color.Primary.ContainerLine,
|
||||
[OnContainer]: color.Primary.OnContainer,
|
||||
},
|
||||
backgroundColor: Container,
|
||||
},
|
||||
'&[aria-selected=true]': {
|
||||
borderColor: color.Secondary.Main,
|
||||
borderWidth: config.borderWidth.B400,
|
||||
},
|
||||
'&:hover, &:focus-visible': {
|
||||
backgroundColor: ContainerHover,
|
||||
},
|
||||
'&:active': {
|
||||
backgroundColor: ContainerActive,
|
||||
},
|
||||
'&[aria-disabled=true], &:disabled': {
|
||||
cursor: 'not-allowed',
|
||||
},
|
||||
},
|
||||
},
|
||||
]);
|
||||
|
||||
export const ReactionText = style([
|
||||
DefaultReset,
|
||||
{
|
||||
minWidth: 0,
|
||||
maxWidth: toRem(150),
|
||||
display: 'inline-flex',
|
||||
alignItems: 'center',
|
||||
lineHeight: toRem(20),
|
||||
},
|
||||
]);
|
||||
|
||||
export const ReactionImg = style([
|
||||
DefaultReset,
|
||||
{
|
||||
height: '1em',
|
||||
minWidth: 0,
|
||||
maxWidth: toRem(150),
|
||||
objectFit: 'contain',
|
||||
},
|
||||
]);
|
||||
113
src/app/components/message/Reaction.tsx
Normal file
113
src/app/components/message/Reaction.tsx
Normal file
|
|
@ -0,0 +1,113 @@
|
|||
import React from 'react';
|
||||
import { Box, Text, as } from 'folds';
|
||||
import classNames from 'classnames';
|
||||
import { MatrixClient, MatrixEvent, Room } from 'matrix-js-sdk';
|
||||
import * as css from './Reaction.css';
|
||||
import { getHexcodeForEmoji, getShortcodeFor } from '../../plugins/emoji';
|
||||
import { getMemberDisplayName } from '../../utils/room';
|
||||
import { eventWithShortcode, getMxIdLocalPart } from '../../utils/matrix';
|
||||
|
||||
export const Reaction = as<
|
||||
'button',
|
||||
{
|
||||
mx: MatrixClient;
|
||||
count: number;
|
||||
reaction: string;
|
||||
}
|
||||
>(({ className, mx, count, reaction, ...props }, ref) => (
|
||||
<Box
|
||||
as="button"
|
||||
className={classNames(css.Reaction, className)}
|
||||
alignItems="Center"
|
||||
shrink="No"
|
||||
gap="200"
|
||||
{...props}
|
||||
ref={ref}
|
||||
>
|
||||
<Text className={css.ReactionText} as="span" size="T400">
|
||||
{reaction.startsWith('mxc://') ? (
|
||||
<img
|
||||
className={css.ReactionImg}
|
||||
src={mx.mxcUrlToHttp(reaction) ?? reaction}
|
||||
alt={reaction}
|
||||
/>
|
||||
) : (
|
||||
<Text as="span" size="Inherit" truncate>
|
||||
{reaction}
|
||||
</Text>
|
||||
)}
|
||||
</Text>
|
||||
<Text as="span" size="T300">
|
||||
{count}
|
||||
</Text>
|
||||
</Box>
|
||||
));
|
||||
|
||||
type ReactionTooltipMsgProps = {
|
||||
room: Room;
|
||||
reaction: string;
|
||||
events: MatrixEvent[];
|
||||
};
|
||||
|
||||
export function ReactionTooltipMsg({ room, reaction, events }: ReactionTooltipMsgProps) {
|
||||
const shortCodeEvt = events.find(eventWithShortcode);
|
||||
const shortcode =
|
||||
shortCodeEvt?.getContent().shortcode ??
|
||||
getShortcodeFor(getHexcodeForEmoji(reaction)) ??
|
||||
reaction;
|
||||
const names = events.map(
|
||||
(ev: MatrixEvent) =>
|
||||
getMemberDisplayName(room, ev.getSender() ?? 'Unknown') ??
|
||||
getMxIdLocalPart(ev.getSender() ?? 'Unknown') ??
|
||||
'Unknown'
|
||||
);
|
||||
|
||||
return (
|
||||
<>
|
||||
{names.length === 1 && <b>{names[0]}</b>}
|
||||
{names.length === 2 && (
|
||||
<>
|
||||
<b>{names[0]}</b>
|
||||
<Text as="span" size="Inherit" priority="300">
|
||||
{' and '}
|
||||
</Text>
|
||||
<b>{names[1]}</b>
|
||||
</>
|
||||
)}
|
||||
{names.length === 3 && (
|
||||
<>
|
||||
<b>{names[0]}</b>
|
||||
<Text as="span" size="Inherit" priority="300">
|
||||
{', '}
|
||||
</Text>
|
||||
<b>{names[1]}</b>
|
||||
<Text as="span" size="Inherit" priority="300">
|
||||
{' and '}
|
||||
</Text>
|
||||
<b>{names[2]}</b>
|
||||
</>
|
||||
)}
|
||||
{names.length > 3 && (
|
||||
<>
|
||||
<b>{names[0]}</b>
|
||||
<Text as="span" size="Inherit" priority="300">
|
||||
{', '}
|
||||
</Text>
|
||||
<b>{names[1]}</b>
|
||||
<Text as="span" size="Inherit" priority="300">
|
||||
{', '}
|
||||
</Text>
|
||||
<b>{names[2]}</b>
|
||||
<Text as="span" size="Inherit" priority="300">
|
||||
{' and '}
|
||||
</Text>
|
||||
<b>{names.length - 3} others</b>
|
||||
</>
|
||||
)}
|
||||
<Text as="span" size="Inherit" priority="300">
|
||||
{' reacted with '}
|
||||
</Text>
|
||||
:<b>{shortcode}</b>:
|
||||
</>
|
||||
);
|
||||
}
|
||||
25
src/app/components/message/Reply.css.ts
Normal file
25
src/app/components/message/Reply.css.ts
Normal file
|
|
@ -0,0 +1,25 @@
|
|||
import { style } from '@vanilla-extract/css';
|
||||
import { config, toRem } from 'folds';
|
||||
|
||||
export const Reply = style({
|
||||
padding: `0 ${config.space.S100}`,
|
||||
marginBottom: toRem(1),
|
||||
cursor: 'pointer',
|
||||
minWidth: 0,
|
||||
maxWidth: '100%',
|
||||
minHeight: config.lineHeight.T300,
|
||||
});
|
||||
|
||||
export const ReplyContent = style({
|
||||
opacity: config.opacity.P300,
|
||||
|
||||
selectors: {
|
||||
[`${Reply}:hover &`]: {
|
||||
opacity: config.opacity.P500,
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
export const ReplyContentText = style({
|
||||
paddingRight: config.space.S100,
|
||||
});
|
||||
100
src/app/components/message/Reply.tsx
Normal file
100
src/app/components/message/Reply.tsx
Normal file
|
|
@ -0,0 +1,100 @@
|
|||
import { Box, Icon, Icons, Text, as, color, toRem } from 'folds';
|
||||
import { EventTimelineSet, MatrixClient, MatrixEvent, Room } from 'matrix-js-sdk';
|
||||
import { CryptoBackend } from 'matrix-js-sdk/lib/common-crypto/CryptoBackend';
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import to from 'await-to-js';
|
||||
import classNames from 'classnames';
|
||||
import colorMXID from '../../../util/colorMXID';
|
||||
import { getMemberDisplayName } from '../../utils/room';
|
||||
import { getMxIdLocalPart, trimReplyFromBody } from '../../utils/matrix';
|
||||
import { LinePlaceholder } from './placeholder';
|
||||
import { randomNumberBetween } from '../../utils/common';
|
||||
import * as css from './Reply.css';
|
||||
import {
|
||||
MessageBadEncryptedContent,
|
||||
MessageDeletedContent,
|
||||
MessageFailedContent,
|
||||
} from './MessageContentFallback';
|
||||
|
||||
type ReplyProps = {
|
||||
mx: MatrixClient;
|
||||
room: Room;
|
||||
timelineSet: EventTimelineSet;
|
||||
eventId: string;
|
||||
};
|
||||
|
||||
export const Reply = as<'div', ReplyProps>(
|
||||
({ className, mx, room, timelineSet, eventId, ...props }, ref) => {
|
||||
const [replyEvent, setReplyEvent] = useState<MatrixEvent | null | undefined>(
|
||||
timelineSet.findEventById(eventId)
|
||||
);
|
||||
|
||||
const { body } = replyEvent?.getContent() ?? {};
|
||||
const sender = replyEvent?.getSender();
|
||||
|
||||
const fallbackBody = replyEvent?.isRedacted() ? (
|
||||
<MessageDeletedContent />
|
||||
) : (
|
||||
<MessageFailedContent />
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
let disposed = false;
|
||||
const loadEvent = async () => {
|
||||
const [err, evt] = await to(mx.fetchRoomEvent(room.roomId, eventId));
|
||||
const mEvent = new MatrixEvent(evt);
|
||||
if (disposed) return;
|
||||
if (err) {
|
||||
setReplyEvent(null);
|
||||
return;
|
||||
}
|
||||
if (mEvent.isEncrypted() && mx.getCrypto()) {
|
||||
await to(mEvent.attemptDecryption(mx.getCrypto() as CryptoBackend));
|
||||
}
|
||||
setReplyEvent(mEvent);
|
||||
};
|
||||
if (replyEvent === undefined) loadEvent();
|
||||
return () => {
|
||||
disposed = true;
|
||||
};
|
||||
}, [replyEvent, mx, room, eventId]);
|
||||
|
||||
return (
|
||||
<Box
|
||||
className={classNames(css.Reply, className)}
|
||||
alignItems="Center"
|
||||
gap="100"
|
||||
{...props}
|
||||
ref={ref}
|
||||
>
|
||||
<Box style={{ color: colorMXID(sender ?? eventId) }} alignItems="Center" shrink="No">
|
||||
<Icon src={Icons.ReplyArrow} size="50" />
|
||||
{sender && (
|
||||
<Text size="T300" truncate>
|
||||
{getMemberDisplayName(room, sender) ?? getMxIdLocalPart(sender)}
|
||||
</Text>
|
||||
)}
|
||||
</Box>
|
||||
<Box grow="Yes" className={css.ReplyContent}>
|
||||
{replyEvent !== undefined ? (
|
||||
<Text className={css.ReplyContentText} size="T300" truncate>
|
||||
{replyEvent?.getContent().msgtype === 'm.bad.encrypted' ? (
|
||||
<MessageBadEncryptedContent />
|
||||
) : (
|
||||
(body && trimReplyFromBody(body)) ?? fallbackBody
|
||||
)}
|
||||
</Text>
|
||||
) : (
|
||||
<LinePlaceholder
|
||||
style={{
|
||||
backgroundColor: color.SurfaceVariant.ContainerActive,
|
||||
maxWidth: toRem(randomNumberBetween(40, 400)),
|
||||
width: '100%',
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</Box>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
);
|
||||
27
src/app/components/message/Time.tsx
Normal file
27
src/app/components/message/Time.tsx
Normal file
|
|
@ -0,0 +1,27 @@
|
|||
import React from 'react';
|
||||
import { Text, as } from 'folds';
|
||||
import { timeDayMonYear, timeHourMinute, today, yesterday } from '../../utils/time';
|
||||
|
||||
export type TimeProps = {
|
||||
compact?: boolean;
|
||||
ts: number;
|
||||
};
|
||||
|
||||
export const Time = as<'span', TimeProps>(({ compact, ts, ...props }, ref) => {
|
||||
let time = '';
|
||||
if (compact) {
|
||||
time = timeHourMinute(ts);
|
||||
} else if (today(ts)) {
|
||||
time = timeHourMinute(ts);
|
||||
} else if (yesterday(ts)) {
|
||||
time = `Yesterday ${timeHourMinute(ts)}`;
|
||||
} else {
|
||||
time = `${timeDayMonYear(ts)} ${timeHourMinute(ts)}`;
|
||||
}
|
||||
|
||||
return (
|
||||
<Text as="time" style={{ flexShrink: 0 }} size="T200" priority="300" {...props} ref={ref}>
|
||||
{time}
|
||||
</Text>
|
||||
);
|
||||
});
|
||||
42
src/app/components/message/attachment/Attachment.css.ts
Normal file
42
src/app/components/message/attachment/Attachment.css.ts
Normal file
|
|
@ -0,0 +1,42 @@
|
|||
import { style } from '@vanilla-extract/css';
|
||||
import { RecipeVariants, recipe } from '@vanilla-extract/recipes';
|
||||
import { DefaultReset, color, config, toRem } from 'folds';
|
||||
|
||||
export const Attachment = recipe({
|
||||
base: {
|
||||
backgroundColor: color.SurfaceVariant.Container,
|
||||
color: color.SurfaceVariant.OnContainer,
|
||||
borderRadius: config.radii.R400,
|
||||
overflow: 'hidden',
|
||||
maxWidth: '100%',
|
||||
width: toRem(400),
|
||||
},
|
||||
variants: {
|
||||
outlined: {
|
||||
true: {
|
||||
boxShadow: `inset 0 0 0 ${config.borderWidth.B300} ${color.SurfaceVariant.ContainerLine}`,
|
||||
},
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
export type AttachmentVariants = RecipeVariants<typeof Attachment>;
|
||||
|
||||
export const AttachmentHeader = style({
|
||||
padding: config.space.S300,
|
||||
});
|
||||
|
||||
export const AttachmentBox = style([
|
||||
DefaultReset,
|
||||
{
|
||||
maxWidth: '100%',
|
||||
maxHeight: toRem(600),
|
||||
width: toRem(400),
|
||||
overflow: 'hidden',
|
||||
},
|
||||
]);
|
||||
|
||||
export const AttachmentContent = style({
|
||||
padding: config.space.S300,
|
||||
paddingTop: 0,
|
||||
});
|
||||
44
src/app/components/message/attachment/Attachment.tsx
Normal file
44
src/app/components/message/attachment/Attachment.tsx
Normal file
|
|
@ -0,0 +1,44 @@
|
|||
import React from 'react';
|
||||
import { Box, as } from 'folds';
|
||||
import classNames from 'classnames';
|
||||
import * as css from './Attachment.css';
|
||||
|
||||
export const Attachment = as<'div', css.AttachmentVariants>(
|
||||
({ className, outlined, ...props }, ref) => (
|
||||
<Box
|
||||
display="InlineFlex"
|
||||
direction="Column"
|
||||
className={classNames(css.Attachment({ outlined }), className)}
|
||||
{...props}
|
||||
ref={ref}
|
||||
/>
|
||||
)
|
||||
);
|
||||
|
||||
export const AttachmentHeader = as<'div'>(({ className, ...props }, ref) => (
|
||||
<Box
|
||||
shrink="No"
|
||||
gap="200"
|
||||
className={classNames(css.AttachmentHeader, className)}
|
||||
{...props}
|
||||
ref={ref}
|
||||
/>
|
||||
));
|
||||
|
||||
export const AttachmentBox = as<'div'>(({ className, ...props }, ref) => (
|
||||
<Box
|
||||
direction="Column"
|
||||
className={classNames(css.AttachmentBox, className)}
|
||||
{...props}
|
||||
ref={ref}
|
||||
/>
|
||||
));
|
||||
|
||||
export const AttachmentContent = as<'div'>(({ className, ...props }, ref) => (
|
||||
<Box
|
||||
direction="Column"
|
||||
className={classNames(css.AttachmentContent, className)}
|
||||
{...props}
|
||||
ref={ref}
|
||||
/>
|
||||
));
|
||||
1
src/app/components/message/attachment/index.ts
Normal file
1
src/app/components/message/attachment/index.ts
Normal file
|
|
@ -0,0 +1 @@
|
|||
export * from './Attachment';
|
||||
7
src/app/components/message/index.ts
Normal file
7
src/app/components/message/index.ts
Normal file
|
|
@ -0,0 +1,7 @@
|
|||
export * from './layout';
|
||||
export * from './placeholder';
|
||||
export * from './Reaction';
|
||||
export * from './attachment';
|
||||
export * from './Reply';
|
||||
export * from './MessageContentFallback';
|
||||
export * from './Time';
|
||||
25
src/app/components/message/layout/Base.tsx
Normal file
25
src/app/components/message/layout/Base.tsx
Normal file
|
|
@ -0,0 +1,25 @@
|
|||
import React from 'react';
|
||||
import { as } from 'folds';
|
||||
import classNames from 'classnames';
|
||||
import * as css from './layout.css';
|
||||
|
||||
export const MessageBase = as<'div', css.MessageBaseVariants>(
|
||||
({ className, highlight, selected, collapse, autoCollapse, space, ...props }, ref) => (
|
||||
<div
|
||||
className={classNames(
|
||||
css.MessageBase({ highlight, selected, collapse, autoCollapse, space }),
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
ref={ref}
|
||||
/>
|
||||
)
|
||||
);
|
||||
|
||||
export const AvatarBase = as<'span'>(({ className, ...props }, ref) => (
|
||||
<span className={classNames(css.AvatarBase, className)} {...props} ref={ref} />
|
||||
));
|
||||
|
||||
export const Username = as<'span'>(({ as: AsUsername = 'span', className, ...props }, ref) => (
|
||||
<AsUsername className={classNames(css.Username, className)} {...props} ref={ref} />
|
||||
));
|
||||
18
src/app/components/message/layout/Bubble.tsx
Normal file
18
src/app/components/message/layout/Bubble.tsx
Normal file
|
|
@ -0,0 +1,18 @@
|
|||
import React, { ReactNode } from 'react';
|
||||
import { Box, as } from 'folds';
|
||||
import * as css from './layout.css';
|
||||
|
||||
type BubbleLayoutProps = {
|
||||
before?: ReactNode;
|
||||
};
|
||||
|
||||
export const BubbleLayout = as<'div', BubbleLayoutProps>(({ before, children, ...props }, ref) => (
|
||||
<Box gap="300" {...props} ref={ref}>
|
||||
<Box className={css.BubbleBefore} shrink="No">
|
||||
{before}
|
||||
</Box>
|
||||
<Box className={css.BubbleContent} direction="Column">
|
||||
{children}
|
||||
</Box>
|
||||
</Box>
|
||||
));
|
||||
18
src/app/components/message/layout/Compact.tsx
Normal file
18
src/app/components/message/layout/Compact.tsx
Normal file
|
|
@ -0,0 +1,18 @@
|
|||
import React, { ReactNode } from 'react';
|
||||
import { Box, as } from 'folds';
|
||||
import * as css from './layout.css';
|
||||
|
||||
type CompactLayoutProps = {
|
||||
before?: ReactNode;
|
||||
};
|
||||
|
||||
export const CompactLayout = as<'div', CompactLayoutProps>(
|
||||
({ before, children, ...props }, ref) => (
|
||||
<Box gap="200" {...props} ref={ref}>
|
||||
<Box className={css.CompactHeader} gap="200" shrink="No">
|
||||
{before}
|
||||
</Box>
|
||||
{children}
|
||||
</Box>
|
||||
)
|
||||
);
|
||||
18
src/app/components/message/layout/Modern.tsx
Normal file
18
src/app/components/message/layout/Modern.tsx
Normal file
|
|
@ -0,0 +1,18 @@
|
|||
import React, { ReactNode } from 'react';
|
||||
import { Box, as } from 'folds';
|
||||
import * as css from './layout.css';
|
||||
|
||||
type ModernLayoutProps = {
|
||||
before?: ReactNode;
|
||||
};
|
||||
|
||||
export const ModernLayout = as<'div', ModernLayoutProps>(({ before, children, ...props }, ref) => (
|
||||
<Box gap="300" {...props} ref={ref}>
|
||||
<Box className={css.ModernBefore} shrink="No">
|
||||
{before}
|
||||
</Box>
|
||||
<Box grow="Yes" direction="Column">
|
||||
{children}
|
||||
</Box>
|
||||
</Box>
|
||||
));
|
||||
4
src/app/components/message/layout/index.ts
Normal file
4
src/app/components/message/layout/index.ts
Normal file
|
|
@ -0,0 +1,4 @@
|
|||
export * from './Modern';
|
||||
export * from './Compact';
|
||||
export * from './Bubble';
|
||||
export * from './Base';
|
||||
155
src/app/components/message/layout/layout.css.ts
Normal file
155
src/app/components/message/layout/layout.css.ts
Normal file
|
|
@ -0,0 +1,155 @@
|
|||
import { createVar, keyframes, style, styleVariants } from '@vanilla-extract/css';
|
||||
import { recipe, RecipeVariants } from '@vanilla-extract/recipes';
|
||||
import { DefaultReset, color, config, toRem } from 'folds';
|
||||
|
||||
export const StickySection = style({
|
||||
position: 'sticky',
|
||||
top: config.space.S100,
|
||||
});
|
||||
|
||||
const SpacingVar = createVar();
|
||||
const SpacingVariant = styleVariants({
|
||||
'0': {
|
||||
vars: {
|
||||
[SpacingVar]: config.space.S0,
|
||||
},
|
||||
},
|
||||
'100': {
|
||||
vars: {
|
||||
[SpacingVar]: config.space.S100,
|
||||
},
|
||||
},
|
||||
'200': {
|
||||
vars: {
|
||||
[SpacingVar]: config.space.S200,
|
||||
},
|
||||
},
|
||||
'300': {
|
||||
vars: {
|
||||
[SpacingVar]: config.space.S300,
|
||||
},
|
||||
},
|
||||
'400': {
|
||||
vars: {
|
||||
[SpacingVar]: config.space.S400,
|
||||
},
|
||||
},
|
||||
'500': {
|
||||
vars: {
|
||||
[SpacingVar]: config.space.S500,
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
const highlightAnime = keyframes({
|
||||
'0%': {
|
||||
backgroundColor: color.Primary.Container,
|
||||
},
|
||||
'25%': {
|
||||
backgroundColor: color.Primary.ContainerActive,
|
||||
},
|
||||
'50%': {
|
||||
backgroundColor: color.Primary.Container,
|
||||
},
|
||||
'75%': {
|
||||
backgroundColor: color.Primary.ContainerActive,
|
||||
},
|
||||
'100%': {
|
||||
backgroundColor: color.Primary.Container,
|
||||
},
|
||||
});
|
||||
const HighlightVariant = styleVariants({
|
||||
true: {
|
||||
animation: `${highlightAnime} 2000ms ease-in-out`,
|
||||
},
|
||||
});
|
||||
|
||||
const SelectedVariant = styleVariants({
|
||||
true: {
|
||||
backgroundColor: color.Surface.ContainerActive,
|
||||
},
|
||||
});
|
||||
|
||||
const AutoCollapse = style({
|
||||
selectors: {
|
||||
[`&+&`]: {
|
||||
marginTop: 0,
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
export const MessageBase = recipe({
|
||||
base: [
|
||||
DefaultReset,
|
||||
{
|
||||
marginTop: SpacingVar,
|
||||
padding: `${config.space.S100} ${config.space.S200} ${config.space.S100} ${config.space.S400}`,
|
||||
borderRadius: `0 ${config.radii.R400} ${config.radii.R400} 0`,
|
||||
},
|
||||
],
|
||||
variants: {
|
||||
space: SpacingVariant,
|
||||
collapse: {
|
||||
true: {
|
||||
marginTop: 0,
|
||||
},
|
||||
},
|
||||
autoCollapse: {
|
||||
true: AutoCollapse,
|
||||
},
|
||||
highlight: HighlightVariant,
|
||||
selected: SelectedVariant,
|
||||
},
|
||||
defaultVariants: {
|
||||
space: '400',
|
||||
},
|
||||
});
|
||||
|
||||
export type MessageBaseVariants = RecipeVariants<typeof MessageBase>;
|
||||
|
||||
export const CompactHeader = style([
|
||||
DefaultReset,
|
||||
StickySection,
|
||||
{
|
||||
maxWidth: toRem(170),
|
||||
width: '100%',
|
||||
},
|
||||
]);
|
||||
|
||||
export const AvatarBase = style({
|
||||
paddingTop: toRem(4),
|
||||
cursor: 'pointer',
|
||||
transition: 'transform 200ms cubic-bezier(0, 0.8, 0.67, 0.97)',
|
||||
|
||||
selectors: {
|
||||
'&:hover': {
|
||||
transform: `translateY(${toRem(-4)})`,
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
export const ModernBefore = style({
|
||||
minWidth: toRem(36),
|
||||
});
|
||||
|
||||
export const BubbleBefore = style([ModernBefore]);
|
||||
|
||||
export const BubbleContent = style({
|
||||
maxWidth: toRem(800),
|
||||
padding: config.space.S200,
|
||||
backgroundColor: color.SurfaceVariant.Container,
|
||||
color: color.SurfaceVariant.OnContainer,
|
||||
borderRadius: config.radii.R400,
|
||||
});
|
||||
|
||||
export const Username = style({
|
||||
cursor: 'pointer',
|
||||
overflow: 'hidden',
|
||||
whiteSpace: 'nowrap',
|
||||
textOverflow: 'ellipsis',
|
||||
selectors: {
|
||||
'&:hover, &:focus-visible': {
|
||||
textDecoration: 'underline',
|
||||
},
|
||||
},
|
||||
});
|
||||
|
|
@ -0,0 +1,22 @@
|
|||
import React from 'react';
|
||||
import { as, toRem } from 'folds';
|
||||
import { randomNumberBetween } from '../../../utils/common';
|
||||
import { LinePlaceholder } from './LinePlaceholder';
|
||||
import { CompactLayout, MessageBase } from '../layout';
|
||||
|
||||
export const CompactPlaceholder = as<'div'>(({ ...props }, ref) => (
|
||||
<MessageBase>
|
||||
<CompactLayout
|
||||
{...props}
|
||||
ref={ref}
|
||||
before={
|
||||
<>
|
||||
<LinePlaceholder style={{ maxWidth: toRem(50) }} />
|
||||
<LinePlaceholder style={{ maxWidth: toRem(randomNumberBetween(40, 100)) }} />
|
||||
</>
|
||||
}
|
||||
>
|
||||
<LinePlaceholder style={{ maxWidth: toRem(randomNumberBetween(120, 500)) }} />
|
||||
</CompactLayout>
|
||||
</MessageBase>
|
||||
));
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
import React, { CSSProperties } from 'react';
|
||||
import { Avatar, Box, as, color, toRem } from 'folds';
|
||||
import { randomNumberBetween } from '../../../utils/common';
|
||||
import { LinePlaceholder } from './LinePlaceholder';
|
||||
import { MessageBase, ModernLayout } from '../layout';
|
||||
|
||||
const contentMargin: CSSProperties = { marginTop: toRem(3) };
|
||||
const avatarBg: CSSProperties = { backgroundColor: color.SurfaceVariant.Container };
|
||||
|
||||
export const DefaultPlaceholder = as<'div'>(({ ...props }, ref) => (
|
||||
<MessageBase>
|
||||
<ModernLayout {...props} ref={ref} before={<Avatar style={avatarBg} size="300" />}>
|
||||
<Box style={contentMargin} grow="Yes" direction="Column" gap="200">
|
||||
<Box grow="Yes" gap="200" alignItems="Center" justifyContent="SpaceBetween">
|
||||
<LinePlaceholder style={{ maxWidth: toRem(randomNumberBetween(40, 100)) }} />
|
||||
<LinePlaceholder style={{ maxWidth: toRem(50) }} />
|
||||
</Box>
|
||||
<Box grow="Yes" gap="200" wrap="Wrap">
|
||||
<LinePlaceholder style={{ maxWidth: toRem(randomNumberBetween(80, 200)) }} />
|
||||
<LinePlaceholder style={{ maxWidth: toRem(randomNumberBetween(80, 200)) }} />
|
||||
</Box>
|
||||
</Box>
|
||||
</ModernLayout>
|
||||
</MessageBase>
|
||||
));
|
||||
|
|
@ -0,0 +1,12 @@
|
|||
import { style } from '@vanilla-extract/css';
|
||||
import { DefaultReset, color, config, toRem } from 'folds';
|
||||
|
||||
export const LinePlaceholder = style([
|
||||
DefaultReset,
|
||||
{
|
||||
width: '100%',
|
||||
height: toRem(16),
|
||||
borderRadius: config.radii.R300,
|
||||
backgroundColor: color.SurfaceVariant.Container,
|
||||
},
|
||||
]);
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
import React from 'react';
|
||||
import { Box, as } from 'folds';
|
||||
import classNames from 'classnames';
|
||||
import * as css from './LinePlaceholder.css';
|
||||
|
||||
export const LinePlaceholder = as<'div'>(({ className, ...props }, ref) => (
|
||||
<Box className={classNames(css.LinePlaceholder, className)} shrink="No" {...props} ref={ref} />
|
||||
));
|
||||
3
src/app/components/message/placeholder/index.ts
Normal file
3
src/app/components/message/placeholder/index.ts
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
export * from './LinePlaceholder';
|
||||
export * from './CompactPlaceholder';
|
||||
export * from './DefaultPlaceholder';
|
||||
Loading…
Add table
Add a link
Reference in a new issue