Improve spacing and height of Chats page
This commit is contained in:
Justin
parent
89c1225976
commit
045fe8dcbb
|
|
@ -18,7 +18,7 @@ const ChatListItem: React.FC<IChatListItemInterface> = ({ chat, chatSilence, onC
|
|||
key={chat.id}
|
||||
type='button'
|
||||
onClick={() => onClick(chat)}
|
||||
className='px-4 py-2 w-full flex flex-col hover:bg-gray-100 dark:hover:bg-gray-800 focus:shadow-inset-ring'
|
||||
className='p-2 w-full flex flex-col rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800 focus:shadow-inset-ring'
|
||||
data-testid='chat'
|
||||
>
|
||||
<HStack alignItems='center' justifyContent='between' space={2} className='w-full'>
|
||||
|
|
|
|||
|
|
@ -61,7 +61,11 @@ const ChatList: React.FC<IChatList> = ({ onClickChat, useWindowScroll = false, s
|
|||
endReached={handleLoadMore}
|
||||
itemContent={(_index, chat) => {
|
||||
const chatSilence = chatSilences?.find((chatSilence) => String(chatSilence.target_account_id) === chat.account.id);
|
||||
return <ChatListItem chat={chat} onClick={onClickChat} chatSilence={chatSilence} />;
|
||||
return (
|
||||
<div className='px-2'>
|
||||
<ChatListItem chat={chat} onClick={onClickChat} chatSilence={chatSilence} />
|
||||
</div>
|
||||
);
|
||||
}}
|
||||
components={{
|
||||
ScrollSeekPlaceholder: () => <PlaceholderChat />,
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
import classNames from 'clsx';
|
||||
import React from 'react';
|
||||
import React, { useEffect, useRef, useState } from 'react';
|
||||
|
||||
import { Card, Stack } from 'soapbox/components/ui';
|
||||
import { Stack } from 'soapbox/components/ui';
|
||||
import { useChatContext } from 'soapbox/contexts/chat-context';
|
||||
|
||||
import ChatPageMain from './components/chat-page-main';
|
||||
|
|
@ -10,11 +10,41 @@ import ChatPageSidebar from './components/chat-page-sidebar';
|
|||
const ChatPage = () => {
|
||||
const { chat } = useChatContext();
|
||||
|
||||
const containerRef = useRef<HTMLDivElement>(null);
|
||||
const [height, setHeight] = useState<string | number>('100%');
|
||||
|
||||
const calculateHeight = () => {
|
||||
if (!containerRef.current) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const { top } = containerRef.current.getBoundingClientRect();
|
||||
const fullHeight = document.body.offsetHeight;
|
||||
|
||||
setHeight(fullHeight - top);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
calculateHeight();
|
||||
}, [containerRef.current]);
|
||||
|
||||
useEffect(() => {
|
||||
window.addEventListener('resize', calculateHeight);
|
||||
|
||||
return () => {
|
||||
window.removeEventListener('resize', calculateHeight);
|
||||
};
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<Card className='p-0 h-[calc(100vh-109px)] sm:h-[calc(100vh-176px)] overflow-hidden' variant='rounded'>
|
||||
<div
|
||||
ref={containerRef}
|
||||
style={{ height }}
|
||||
className='h-screen bg-white dark:bg-primary-900 text-gray-900 dark:text-gray-100 shadow-lg dark:shadow-none overflow-hidden sm:rounded-t-xl'
|
||||
>
|
||||
<div className='grid grid-cols-9 overflow-hidden h-full dark:divide-x-2 dark:divide-solid dark:divide-gray-800'>
|
||||
<Stack
|
||||
className={classNames('col-span-9 sm:col-span-3 p-6 bg-gradient-to-r from-white to-gray-100 dark:bg-gray-900 dark:bg-none overflow-hidden dark:inset', {
|
||||
className={classNames('col-span-9 sm:col-span-3 bg-gradient-to-r from-white to-gray-100 dark:bg-gray-900 dark:bg-none overflow-hidden dark:inset', {
|
||||
'hidden sm:block': chat,
|
||||
})}
|
||||
>
|
||||
|
|
@ -28,7 +58,7 @@ const ChatPage = () => {
|
|||
<ChatPageMain />
|
||||
</Stack>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -72,13 +72,15 @@ const ChatPageMain = () => {
|
|||
<Stack className='h-full overflow-hidden'>
|
||||
<HStack alignItems='center' justifyContent='between' space={2} className='px-4 py-2 w-full'>
|
||||
<HStack alignItems='center' space={2} className='overflow-hidden'>
|
||||
<HStack alignItems='center'>
|
||||
<IconButton
|
||||
src={require('@tabler/icons/arrow-left.svg')}
|
||||
className='sm:hidden h-7 w-7'
|
||||
className='sm:hidden h-7 w-7 mr-2 sm:mr-0'
|
||||
onClick={() => setChat(null)}
|
||||
/>
|
||||
|
||||
<Avatar src={chat.account?.avatar} size={40} className='flex-none' />
|
||||
</HStack>
|
||||
|
||||
<Stack alignItems='start' className='overflow-hidden'>
|
||||
<div className='flex items-center space-x-1 flex-grow w-full'>
|
||||
|
|
|
|||
|
|
@ -45,15 +45,17 @@ const ChatPageSidebar = () => {
|
|||
const handleClickChat = (chat: IChat) => setChat(chat);
|
||||
|
||||
return (
|
||||
<Stack space={6} className='h-full'>
|
||||
<Stack space={4} className='h-full'>
|
||||
<Stack space={4} className='px-4 pt-4'>
|
||||
<CardTitle title={intl.formatMessage(messages.title)} />
|
||||
|
||||
<AccountSearch
|
||||
placeholder={intl.formatMessage(messages.searchPlaceholder)}
|
||||
onSelected={handleSuggestion}
|
||||
/>
|
||||
</Stack>
|
||||
|
||||
<Stack className='-mx-3 flex-grow h-full'>
|
||||
<Stack className='flex-grow h-full'>
|
||||
<ChatList onClickChat={handleClickChat} />
|
||||
</Stack>
|
||||
</Stack>
|
||||
|
|
|
|||
|
|
@ -10,6 +10,9 @@ const ChatWidget = () => {
|
|||
const account = useOwnAccount();
|
||||
const dispatch = useAppDispatch();
|
||||
|
||||
const path = location.pathname;
|
||||
const shouldHideWidget = Boolean(path.match(/^\/chats/));
|
||||
|
||||
useEffect(() => {
|
||||
const disconnect = dispatch(connectDirectStream());
|
||||
|
||||
|
|
@ -18,7 +21,7 @@ const ChatWidget = () => {
|
|||
});
|
||||
}, []);
|
||||
|
||||
if (!account?.chats_onboarded) {
|
||||
if (!account?.chats_onboarded || shouldHideWidget) {
|
||||
return null;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@ import React from 'react';
|
|||
/** Custom layout for chats on desktop. */
|
||||
const ChatsPage: React.FC = ({ children }) => {
|
||||
return (
|
||||
<div className='md:col-span-12 lg:col-span-9'>
|
||||
<div className='md:col-span-12 lg:col-span-9 pb-16 sm:pb-0'>
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
Loading…
Reference in New Issue