bigbuffet/bigbuffet-rw
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Chats: improve design of attachments, fix sizing bug

Browse source
This commit is contained in:
Alex Gleason 2023-01-17 14:33:04 -06:00
parent 988d466fcd
commit 687fcdc294
No known key found for this signature in database
GPG key ID: 7211D1F99744FBB7
1 changed files with 33 additions and 27 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

60
app/soapbox/features/chats/components/chat-message-list.tsx
View file

@ -312,39 +312,45 @@ const ChatMessageList: React.FC<IChatMessageList> = ({ chat }) => {
</div> </div>
)} )}
<HStack <Stack
alignItems='bottom' space={0.5}
className={classNames({ className={classNames({
'max-w-[85%]': true, 'max-w-[85%]': true,
'flex-1': chatMessage.attachment,
'order-2': isMyMessage, 'order-2': isMyMessage,
'order-1': !isMyMessage, 'order-1': !isMyMessage,
})} })}
justifyContent={isMyMessage ? 'end' : 'start'} alignItems={isMyMessage ? 'end' : 'start'}
> >
<div {maybeRenderMedia(chatMessage)}
title={getFormattedTimestamp(chatMessage)}
className={ {content && (
classNames({ <HStack alignItems='bottom'>
'text-ellipsis break-words relative rounded-md py-2 px-3 max-w-full space-y-2 [&_.mention]:underline': true, <div
'[&_.mention]:text-primary-600 dark:[&_.mention]:text-accent-blue': !isMyMessage, title={getFormattedTimestamp(chatMessage)}
'[&_.mention]:text-white dark:[&_.mention]:white': isMyMessage, className={
'bg-primary-500 text-white': isMyMessage, classNames({
'bg-gray-200 dark:bg-gray-800 text-gray-900 dark:text-gray-100': !isMyMessage, 'text-ellipsis break-words relative rounded-md py-2 px-3 max-w-full space-y-2 [&_.mention]:underline': true,
'!bg-transparent !p-0 emoji-lg': isOnlyEmoji, '[&_.mention]:text-primary-600 dark:[&_.mention]:text-accent-blue': !isMyMessage,
}) '[&_.mention]:text-white dark:[&_.mention]:white': isMyMessage,
} 'bg-primary-500 text-white': isMyMessage,
ref={setBubbleRef} 'bg-gray-200 dark:bg-gray-800 text-gray-900 dark:text-gray-100': !isMyMessage,
tabIndex={0} '!bg-transparent !p-0 emoji-lg': isOnlyEmoji,
> })
{maybeRenderMedia(chatMessage)} }
<Text ref={setBubbleRef}
size='sm' tabIndex={0}
theme='inherit' >
className='break-word-nested' <Text
dangerouslySetInnerHTML={{ __html: content }} size='sm'
/> theme='inherit'
</div> className='break-word-nested'
</HStack> dangerouslySetInnerHTML={{ __html: content }}
/>
</div>
</HStack>
)}
</Stack>
</HStack> </HStack>
<HStack <HStack