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

Merge branch 'chats-styles' into 'develop'

Browse source 
Improve chats styles and chat placeholder

See merge request soapbox-pub/soapbox!1951
This commit is contained in:
marcin mikołajczak 2022-11-26 22:44:26 +00:00
commit 78779a814f
4 changed files with 37 additions and 60 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

44
app/soapbox/features/chats/components/chat.tsx
View file

@ -35,29 +35,29 @@ const Chat: React.FC<IChat> = ({ chatId, onClick }) => {
<button className='floating-link' onClick={() => onClick(chat)} /> <button className='floating-link' onClick={() => onClick(chat)} />
<HStack key={account.id} space={3} className='relative overflow-hidden'> <HStack key={account.id} space={3} className='relative overflow-hidden'>
<Avatar className='flex-none' src={account.avatar} size={36} /> <Avatar className='flex-none' src={account.avatar} size={36} />
<Stack className='overflow-hidden'> <Stack className='overflow-hidden flex-1'>
<DisplayName account={account} withSuffix={false} /> <DisplayName account={account} withSuffix={false} />
{attachment && ( <HStack space={1} justifyContent='between'>
<Icon {content ? (
className='chat__attachment-icon' <Text
src={image ? require('@tabler/icons/photo.svg') : require('@tabler/icons/paperclip.svg')} theme='muted'
/> size='sm'
)} className='max-h-5'
{content ? ( dangerouslySetInnerHTML={{ __html: parsedContent }}
<Text truncate
theme='muted' />
size='sm' ) : attachment && (
className='chat__last-message' <Text theme='muted' size='sm' className='italic'>
dangerouslySetInnerHTML={{ __html: parsedContent }} {image ? <FormattedMessage id='chats.attachment_image' defaultMessage='Image' /> : <FormattedMessage id='chats.attachment' defaultMessage='Attachment' />}
truncate </Text>
/> )}
) : attachment && ( {attachment && (
<span <Icon
className='chat__last-message attachment' className='chat__attachment-icon'
> src={image ? require('@tabler/icons/photo.svg') : require('@tabler/icons/paperclip.svg')}
{image ? <FormattedMessage id='chats.attachment_image' defaultMessage='Image' /> : <FormattedMessage id='chats.attachment' defaultMessage='Attachment' />} />
</span> )}
)} </HStack>
{unreadCount > 0 && ( {unreadCount > 0 && (
<div className='absolute top-1 right-0'> <div className='absolute top-1 right-0'>
<Counter count={unreadCount} /> <Counter count={unreadCount} />

26
app/soapbox/features/placeholder/components/placeholder-chat.tsx
View file

@ -1,5 +1,7 @@
import React from 'react'; import React from 'react';
import { HStack, Stack } from 'soapbox/components/ui';
import { randomIntFromInterval, generateText } from '../utils'; import { randomIntFromInterval, generateText } from '../utils';
import PlaceholderAvatar from './placeholder-avatar'; import PlaceholderAvatar from './placeholder-avatar';
@ -10,20 +12,16 @@ const PlaceholderChat: React.FC = () => {
const messageLength = randomIntFromInterval(5, 75); const messageLength = randomIntFromInterval(5, 75);
return ( return (
<div className='chat-list-item chat-list-item--placeholder'> <div className='account chat-list-item--placeholder'>
<div className='account'> <HStack space={3}>
<div className='account__wrapper'> <PlaceholderAvatar size={36} />
<div className='account__display-name'> <Stack className='overflow-hidden'>
<div className='account__avatar-wrapper'> <PlaceholderDisplayName minLength={3} maxLength={25} withSuffix={false} />
<PlaceholderAvatar size={36} /> <span className='overflow-hidden text-ellipsis whitespace-nowrap text-primary-50 dark:text-primary-800'>
</div> {generateText(messageLength)}
<PlaceholderDisplayName minLength={3} maxLength={25} /> </span>
<span className='chat__last-message'> </Stack>
{generateText(messageLength)} </HStack>
</span>
</div>
</div>
</div>
</div> </div>
); );
}; };

5
app/soapbox/features/placeholder/components/placeholder-display-name.tsx
View file

@ -5,17 +5,18 @@ import { randomIntFromInterval, generateText } from '../utils';
interface IPlaceholderDisplayName { interface IPlaceholderDisplayName {
maxLength: number, maxLength: number,
minLength: number, minLength: number,
withSuffix?: boolean,
} }
/** Fake display name to show when data is loading. */ /** Fake display name to show when data is loading. */
const PlaceholderDisplayName: React.FC<IPlaceholderDisplayName> = ({ minLength, maxLength }) => { const PlaceholderDisplayName: React.FC<IPlaceholderDisplayName> = ({ minLength, maxLength, withSuffix = true }) => {
const length = randomIntFromInterval(maxLength, minLength); const length = randomIntFromInterval(maxLength, minLength);
const acctLength = randomIntFromInterval(maxLength, minLength); const acctLength = randomIntFromInterval(maxLength, minLength);
return ( return (
<div className='flex flex-col text-primary-50 dark:text-primary-800'> <div className='flex flex-col text-primary-50 dark:text-primary-800'>
<p>{generateText(length)}</p> <p>{generateText(length)}</p>
<p>{generateText(acctLength)}</p> {withSuffix && <p>{generateText(acctLength)}</p>}
</div> </div>
); );
}; };

22
app/styles/chats.scss
View file

@ -306,28 +306,6 @@
} }
} }
.chat {
&__attachment-icon {
float: right;
}
&__last-message {
display: block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
max-height: 19px;
a {
color: var(--highlight-text-color);
}
&.attachment {
font-style: italic;
}
}
}
.chat-message__media { .chat-message__media {
height: 120px; height: 120px;
} }