mirror of
https://github.com/cinnyapp/cinny.git
synced 2025-02-13 17:10:06 +00:00
remove message base from message placeholders and add variant
This commit is contained in:
parent
01aafb76f3
commit
2026eda7ba
src/app
components/message/placeholder
features/room
|
@ -1,22 +1,28 @@
|
|||
import React from 'react';
|
||||
import { as, toRem } from 'folds';
|
||||
import { as, ContainerColor, toRem } from 'folds';
|
||||
import { randomNumberBetween } from '../../../utils/common';
|
||||
import { LinePlaceholder } from './LinePlaceholder';
|
||||
import { CompactLayout, MessageBase } from '../layout';
|
||||
import { CompactLayout } from '../layout';
|
||||
|
||||
export const CompactPlaceholder = as<'div'>(({ ...props }, ref) => (
|
||||
<MessageBase>
|
||||
export const CompactPlaceholder = as<'div', { variant?: ContainerColor }>(
|
||||
({ variant, ...props }, ref) => (
|
||||
<CompactLayout
|
||||
{...props}
|
||||
ref={ref}
|
||||
before={
|
||||
<>
|
||||
<LinePlaceholder style={{ maxWidth: toRem(50) }} />
|
||||
<LinePlaceholder style={{ maxWidth: toRem(randomNumberBetween(40, 100)) }} />
|
||||
<LinePlaceholder variant={variant} style={{ maxWidth: toRem(50) }} />
|
||||
<LinePlaceholder
|
||||
variant={variant}
|
||||
style={{ maxWidth: toRem(randomNumberBetween(40, 100)) }}
|
||||
/>
|
||||
</>
|
||||
}
|
||||
>
|
||||
<LinePlaceholder style={{ maxWidth: toRem(randomNumberBetween(120, 500)) }} />
|
||||
<LinePlaceholder
|
||||
variant={variant}
|
||||
style={{ maxWidth: toRem(randomNumberBetween(120, 500)) }}
|
||||
/>
|
||||
</CompactLayout>
|
||||
</MessageBase>
|
||||
));
|
||||
)
|
||||
);
|
||||
|
|
|
@ -1,25 +1,42 @@
|
|||
import React, { CSSProperties } from 'react';
|
||||
import { Avatar, Box, as, color, toRem } from 'folds';
|
||||
import { Avatar, Box, ContainerColor, as, color, toRem } from 'folds';
|
||||
import { randomNumberBetween } from '../../../utils/common';
|
||||
import { LinePlaceholder } from './LinePlaceholder';
|
||||
import { MessageBase, ModernLayout } from '../layout';
|
||||
import { 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" />}>
|
||||
export const DefaultPlaceholder = as<'div', { variant?: ContainerColor }>(
|
||||
({ variant, ...props }, ref) => (
|
||||
<ModernLayout
|
||||
{...props}
|
||||
ref={ref}
|
||||
before={
|
||||
<Avatar
|
||||
style={{ backgroundColor: color[variant ?? 'SurfaceVariant'].Container }}
|
||||
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) }} />
|
||||
<LinePlaceholder
|
||||
variant={variant}
|
||||
style={{ maxWidth: toRem(randomNumberBetween(40, 100)) }}
|
||||
/>
|
||||
<LinePlaceholder variant={variant} 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)) }} />
|
||||
<LinePlaceholder
|
||||
variant={variant}
|
||||
style={{ maxWidth: toRem(randomNumberBetween(80, 200)) }}
|
||||
/>
|
||||
<LinePlaceholder
|
||||
variant={variant}
|
||||
style={{ maxWidth: toRem(randomNumberBetween(80, 200)) }}
|
||||
/>
|
||||
</Box>
|
||||
</Box>
|
||||
</ModernLayout>
|
||||
</MessageBase>
|
||||
));
|
||||
)
|
||||
);
|
||||
|
|
|
@ -1,12 +1,35 @@
|
|||
import { style } from '@vanilla-extract/css';
|
||||
import { DefaultReset, color, config, toRem } from 'folds';
|
||||
import { ComplexStyleRule } from '@vanilla-extract/css';
|
||||
import { recipe, RecipeVariants } from '@vanilla-extract/recipes';
|
||||
import { ContainerColor, DefaultReset, color, config, toRem } from 'folds';
|
||||
|
||||
export const LinePlaceholder = style([
|
||||
DefaultReset,
|
||||
{
|
||||
width: '100%',
|
||||
height: toRem(16),
|
||||
borderRadius: config.radii.R300,
|
||||
backgroundColor: color.SurfaceVariant.Container,
|
||||
const getVariant = (variant: ContainerColor): ComplexStyleRule => ({
|
||||
backgroundColor: color[variant].Container,
|
||||
});
|
||||
|
||||
export const LinePlaceholder = recipe({
|
||||
base: [
|
||||
DefaultReset,
|
||||
{
|
||||
width: '100%',
|
||||
height: toRem(16),
|
||||
borderRadius: config.radii.R300,
|
||||
},
|
||||
],
|
||||
variants: {
|
||||
variant: {
|
||||
Background: getVariant('Background'),
|
||||
Surface: getVariant('Surface'),
|
||||
SurfaceVariant: getVariant('SurfaceVariant'),
|
||||
Primary: getVariant('Primary'),
|
||||
Secondary: getVariant('Secondary'),
|
||||
Success: getVariant('Success'),
|
||||
Warning: getVariant('Warning'),
|
||||
Critical: getVariant('Critical'),
|
||||
},
|
||||
},
|
||||
]);
|
||||
defaultVariants: {
|
||||
variant: 'SurfaceVariant',
|
||||
},
|
||||
});
|
||||
|
||||
export type LinePlaceholderVariants = RecipeVariants<typeof LinePlaceholder>;
|
||||
|
|
|
@ -3,6 +3,13 @@ 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} />
|
||||
));
|
||||
export const LinePlaceholder = as<'div', css.LinePlaceholderVariants>(
|
||||
({ className, variant, ...props }, ref) => (
|
||||
<Box
|
||||
className={classNames(css.LinePlaceholder({ variant }), className)}
|
||||
shrink="No"
|
||||
{...props}
|
||||
ref={ref}
|
||||
/>
|
||||
)
|
||||
);
|
||||
|
|
|
@ -1554,17 +1554,33 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
|
|||
{(canPaginateBack || !rangeAtStart) &&
|
||||
(messageLayout === 1 ? (
|
||||
<>
|
||||
<CompactPlaceholder />
|
||||
<CompactPlaceholder />
|
||||
<CompactPlaceholder />
|
||||
<CompactPlaceholder />
|
||||
<CompactPlaceholder ref={observeBackAnchor} />
|
||||
<MessageBase>
|
||||
<CompactPlaceholder />
|
||||
</MessageBase>
|
||||
<MessageBase>
|
||||
<CompactPlaceholder />
|
||||
</MessageBase>
|
||||
<MessageBase>
|
||||
<CompactPlaceholder />
|
||||
</MessageBase>
|
||||
<MessageBase>
|
||||
<CompactPlaceholder />
|
||||
</MessageBase>
|
||||
<MessageBase ref={observeBackAnchor}>
|
||||
<CompactPlaceholder />
|
||||
</MessageBase>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<DefaultPlaceholder />
|
||||
<DefaultPlaceholder />
|
||||
<DefaultPlaceholder ref={observeBackAnchor} />
|
||||
<MessageBase>
|
||||
<DefaultPlaceholder />
|
||||
</MessageBase>
|
||||
<MessageBase>
|
||||
<DefaultPlaceholder />
|
||||
</MessageBase>
|
||||
<MessageBase ref={observeBackAnchor}>
|
||||
<DefaultPlaceholder />
|
||||
</MessageBase>
|
||||
</>
|
||||
))}
|
||||
|
||||
|
@ -1573,17 +1589,33 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
|
|||
{(!liveTimelineLinked || !rangeAtEnd) &&
|
||||
(messageLayout === 1 ? (
|
||||
<>
|
||||
<CompactPlaceholder ref={observeFrontAnchor} />
|
||||
<CompactPlaceholder />
|
||||
<CompactPlaceholder />
|
||||
<CompactPlaceholder />
|
||||
<CompactPlaceholder />
|
||||
<MessageBase ref={observeFrontAnchor}>
|
||||
<CompactPlaceholder />
|
||||
</MessageBase>
|
||||
<MessageBase>
|
||||
<CompactPlaceholder />
|
||||
</MessageBase>
|
||||
<MessageBase>
|
||||
<CompactPlaceholder />
|
||||
</MessageBase>
|
||||
<MessageBase>
|
||||
<CompactPlaceholder />
|
||||
</MessageBase>
|
||||
<MessageBase>
|
||||
<CompactPlaceholder />
|
||||
</MessageBase>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<DefaultPlaceholder ref={observeFrontAnchor} />
|
||||
<DefaultPlaceholder />
|
||||
<DefaultPlaceholder />
|
||||
<MessageBase ref={observeFrontAnchor}>
|
||||
<DefaultPlaceholder />
|
||||
</MessageBase>
|
||||
<MessageBase>
|
||||
<DefaultPlaceholder />
|
||||
</MessageBase>
|
||||
<MessageBase>
|
||||
<DefaultPlaceholder />
|
||||
</MessageBase>
|
||||
</>
|
||||
))}
|
||||
<span ref={atBottomAnchorRef} />
|
||||
|
|
Loading…
Reference in a new issue