mirrors/cinny
1
0
Fork 0
mirror of https://github.com/cinnyapp/cinny.git synced 2025-11-15 03:30:29 +03:00
Code Issues Projects Releases Packages Wiki Activity Actions

Add arrow to message bubbles and improve spacing (#2474)
Some checks failed
Deploy to Netlify (dev) / Deploy to Netlify (push) Has been cancelled
Details

Browse source 
* Add arrow to message bubbles and improve spacing

* make bubble message avatar smaller

* add bubble layout for event content

* adjust bubble arrow

* fix missing return statement for event content

* hide bubble for event content

* add new arrow to bubble message

* fix avatar username relative alignment

* fix types

* fix code block header background

* revert avatar size and make arrow less sharp

* show event messages timestamp to right when bubble is hidden

* fix avatar base css

* move message header outside bubble

* fix event time appears on left in hidden bubles
This commit is contained in:
Ajay Bura 2025-09-19 16:36:05 +05:30 • committed by GitHub
parent 31efbf73b7
commit afc251aa7c
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
6 changed files with 111 additions and 27 deletions
Download patch file Download diff file Expand all files Collapse all files

12
src/app/features/room/message/Message.tsx
View file

@ -723,6 +723,7 @@ export const Message = as<'div', MessageProps>(
const mx = useMatrixClient();
const useAuthentication = useMediaAuthentication();
const senderId = mEvent.getSender() ?? '';
const [hover, setHover] = useState(false);
const { hoverProps } = useHover({ onHoverChange: setHover });
const { focusWithinProps } = useFocusWithin({ onFocusWithinChange: setHover });
@ -790,7 +791,9 @@ export const Message = as<'div', MessageProps>(
);
const avatarJSX = !collapse && messageLayout !== MessageLayout.Compact && (
<AvatarBase>
<AvatarBase
className={messageLayout === MessageLayout.Bubble ? css.BubbleAvatarBase : undefined}
>
<Avatar
className={css.MessageAvatar}
as="button"
@ -875,7 +878,9 @@ export const Message = as<'div', MessageProps>(
return (
<MessageBase
className={classNames(css.MessageBase, className)}
className={classNames(css.MessageBase, className, {
[css.MessageBaseBubbleCollapsed]: messageLayout === MessageLayout.Bubble && collapse,
})}
tabIndex={0}
space={messageSpacing}
collapse={collapse}
@ -1132,8 +1137,7 @@ export const Message = as<'div', MessageProps>(
</CompactLayout>
)}
{messageLayout === MessageLayout.Bubble && (
<BubbleLayout before={avatarJSX} onContextMenu={handleContextMenu}>
{headerJSX}
<BubbleLayout before={avatarJSX} header={headerJSX} onContextMenu={handleContextMenu}>
{msgContentJSX}
</BubbleLayout>
)}

7
src/app/features/room/message/styles.css.ts
View file

@ -4,6 +4,9 @@ import { DefaultReset, config, toRem } from 'folds';
export const MessageBase = style({
position: 'relative',
});
export const MessageBaseBubbleCollapsed = style({
paddingTop: 0,
});
export const MessageOptionsBase = style([
DefaultReset,
@ -21,6 +24,10 @@ export const MessageOptionsBar = style([
},
]);
export const BubbleAvatarBase = style({
paddingTop: 0,
});
export const MessageAvatar = style({
cursor: 'pointer',
});