mirror of
https://github.com/cinnyapp/cinny.git
synced 2025-11-05 15:00:30 +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
188
src/app/styles/CustomHtml.css.ts
Normal file
188
src/app/styles/CustomHtml.css.ts
Normal file
|
|
@ -0,0 +1,188 @@
|
|||
import { style } from '@vanilla-extract/css';
|
||||
import { recipe } from '@vanilla-extract/recipes';
|
||||
import { color, config, DefaultReset, toRem } from 'folds';
|
||||
|
||||
export const MarginSpaced = style({
|
||||
marginBottom: config.space.S200,
|
||||
marginTop: config.space.S200,
|
||||
selectors: {
|
||||
'&:first-child': {
|
||||
marginTop: 0,
|
||||
},
|
||||
'&:last-child': {
|
||||
marginBottom: 0,
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
export const Paragraph = style([DefaultReset]);
|
||||
|
||||
export const Heading = style([
|
||||
DefaultReset,
|
||||
MarginSpaced,
|
||||
{
|
||||
marginTop: config.space.S400,
|
||||
selectors: {
|
||||
'&:first-child': {
|
||||
marginTop: 0,
|
||||
},
|
||||
},
|
||||
},
|
||||
]);
|
||||
|
||||
export const BlockQuote = style([
|
||||
DefaultReset,
|
||||
MarginSpaced,
|
||||
{
|
||||
paddingLeft: config.space.S200,
|
||||
borderLeft: `${config.borderWidth.B700} solid ${color.SurfaceVariant.ContainerLine}`,
|
||||
fontStyle: 'italic',
|
||||
},
|
||||
]);
|
||||
|
||||
const BaseCode = style({
|
||||
fontFamily: 'monospace',
|
||||
color: color.Secondary.OnContainer,
|
||||
background: color.Secondary.Container,
|
||||
border: `${config.borderWidth.B300} solid ${color.Secondary.ContainerLine}`,
|
||||
borderRadius: config.radii.R300,
|
||||
});
|
||||
|
||||
export const Code = style([
|
||||
DefaultReset,
|
||||
BaseCode,
|
||||
{
|
||||
padding: `0 ${config.space.S100}`,
|
||||
},
|
||||
]);
|
||||
|
||||
export const Spoiler = recipe({
|
||||
base: [
|
||||
DefaultReset,
|
||||
{
|
||||
padding: `0 ${config.space.S100}`,
|
||||
backgroundColor: color.SurfaceVariant.ContainerActive,
|
||||
borderRadius: config.radii.R300,
|
||||
selectors: {
|
||||
'&[aria-pressed=true]': {
|
||||
color: 'transparent',
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
variants: {
|
||||
active: {
|
||||
true: {
|
||||
color: 'transparent',
|
||||
},
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
export const CodeBlock = style([
|
||||
DefaultReset,
|
||||
BaseCode,
|
||||
MarginSpaced,
|
||||
{
|
||||
fontStyle: 'normal',
|
||||
},
|
||||
]);
|
||||
export const CodeBlockInternal = style({
|
||||
padding: `${config.space.S200} ${config.space.S200} 0`,
|
||||
});
|
||||
|
||||
export const List = style([
|
||||
DefaultReset,
|
||||
MarginSpaced,
|
||||
{
|
||||
padding: `0 ${config.space.S100}`,
|
||||
paddingLeft: config.space.S600,
|
||||
},
|
||||
]);
|
||||
|
||||
export const Img = style([
|
||||
DefaultReset,
|
||||
MarginSpaced,
|
||||
{
|
||||
maxWidth: toRem(296),
|
||||
borderRadius: config.radii.R300,
|
||||
},
|
||||
]);
|
||||
|
||||
export const InlineChromiumBugfix = style({
|
||||
fontSize: 0,
|
||||
lineHeight: 0,
|
||||
});
|
||||
|
||||
export const Mention = recipe({
|
||||
base: [
|
||||
DefaultReset,
|
||||
{
|
||||
backgroundColor: color.SurfaceVariant.Container,
|
||||
color: color.SurfaceVariant.OnContainer,
|
||||
boxShadow: `0 0 0 ${config.borderWidth.B300} ${color.SurfaceVariant.ContainerLine}`,
|
||||
padding: `0 ${toRem(2)}`,
|
||||
borderRadius: config.radii.R300,
|
||||
fontWeight: config.fontWeight.W500,
|
||||
},
|
||||
],
|
||||
variants: {
|
||||
highlight: {
|
||||
true: {
|
||||
backgroundColor: color.Success.Container,
|
||||
color: color.Success.OnContainer,
|
||||
boxShadow: `0 0 0 ${config.borderWidth.B300} ${color.Success.ContainerLine}`,
|
||||
},
|
||||
},
|
||||
focus: {
|
||||
true: {
|
||||
boxShadow: `0 0 0 ${config.borderWidth.B300} ${color.SurfaceVariant.OnContainer}`,
|
||||
},
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
export const EmoticonBase = style([
|
||||
DefaultReset,
|
||||
{
|
||||
display: 'inline-block',
|
||||
padding: '0.05rem',
|
||||
height: '1em',
|
||||
verticalAlign: 'middle',
|
||||
},
|
||||
]);
|
||||
|
||||
export const Emoticon = recipe({
|
||||
base: [
|
||||
DefaultReset,
|
||||
{
|
||||
display: 'inline-flex',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
|
||||
height: '1em',
|
||||
minWidth: '1em',
|
||||
fontSize: '1.47em',
|
||||
lineHeight: '1em',
|
||||
verticalAlign: 'middle',
|
||||
position: 'relative',
|
||||
top: '-0.25em',
|
||||
borderRadius: config.radii.R300,
|
||||
},
|
||||
],
|
||||
variants: {
|
||||
focus: {
|
||||
true: {
|
||||
boxShadow: `0 0 0 ${config.borderWidth.B300} ${color.SurfaceVariant.OnContainer}`,
|
||||
},
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
export const EmoticonImg = style([
|
||||
DefaultReset,
|
||||
{
|
||||
height: '1em',
|
||||
cursor: 'default',
|
||||
},
|
||||
]);
|
||||
Loading…
Add table
Add a link
Reference in a new issue