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

Add header to desktop chats

Browse source
This commit is contained in:
Alex Gleason 2022-09-01 13:07:22 -05:00
parent 624720a7bc
commit 0ac3b0824b
No known key found for this signature in database
GPG key ID: 7211D1F99744FBB7
2 changed files with 12 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
app/soapbox/features/chats/components/chat-box.tsx
View file

@ -1,4 +1,5 @@
import { useMutation } from '@tanstack/react-query'; import { useMutation } from '@tanstack/react-query';
import classNames from 'classnames';
import { OrderedSet as ImmutableOrderedSet } from 'immutable'; import { OrderedSet as ImmutableOrderedSet } from 'immutable';
import React, { MutableRefObject, useEffect, useRef, useState } from 'react'; import React, { MutableRefObject, useEffect, useRef, useState } from 'react';
import { useIntl, defineMessages } from 'react-intl'; import { useIntl, defineMessages } from 'react-intl';
@ -31,14 +32,15 @@ interface IChatBox {
chat: IChat, chat: IChat,
onSetInputRef: (el: HTMLTextAreaElement) => void, onSetInputRef: (el: HTMLTextAreaElement) => void,
autosize?: boolean, autosize?: boolean,
inputRef?: MutableRefObject<HTMLTextAreaElement> inputRef?: MutableRefObject<HTMLTextAreaElement>,
className?: string,
} }
/** /**
* Chat UI with just the messages and textarea. * Chat UI with just the messages and textarea.
* Reused between floating desktop chats and fullscreen/mobile chats. * Reused between floating desktop chats and fullscreen/mobile chats.
*/ */
const ChatBox: React.FC<IChatBox> = ({ chat, onSetInputRef, autosize, inputRef }) => { const ChatBox: React.FC<IChatBox> = ({ chat, onSetInputRef, autosize, inputRef, className }) => {
const intl = useIntl(); const intl = useIntl();
const dispatch = useAppDispatch(); const dispatch = useAppDispatch();
const chatMessageIds = useAppSelector(state => state.chat_message_lists.get(chat.id, ImmutableOrderedSet<string>())); const chatMessageIds = useAppSelector(state => state.chat_message_lists.get(chat.id, ImmutableOrderedSet<string>()));
@ -214,7 +216,7 @@ const ChatBox: React.FC<IChatBox> = ({ chat, onSetInputRef, autosize, inputRef }
}; };
return ( return (
<Stack className='overflow-hidden flex flex-grow' onMouseOver={handleMouseOver}> <Stack className={classNames('overflow-hidden flex flex-grow', className)} onMouseOver={handleMouseOver}>
<div className='flex-grow h-full overflow-hidden flex justify-center'> <div className='flex-grow h-full overflow-hidden flex justify-center'>
<ChatMessageList chat={chat} autosize /> <ChatMessageList chat={chat} autosize />
</div > </div >

8
app/soapbox/features/chats/index.tsx
View file

@ -8,6 +8,7 @@ import AccountSearch from 'soapbox/components/account_search';
import { Card, CardTitle, Stack } from '../../components/ui'; import { Card, CardTitle, Stack } from '../../components/ui';
import Chat from './components/chat';
import ChatBox from './components/chat-box'; import ChatBox from './components/chat-box';
import ChatList from './components/chat-list'; import ChatList from './components/chat-list';
@ -49,7 +50,12 @@ const ChatIndex: React.FC = () => {
</Stack> </Stack>
<Stack className='col-span-6 h-full overflow-hidden'> <Stack className='col-span-6 h-full overflow-hidden'>
{chat && ( {chat && (
<ChatBox chat={chat} onSetInputRef={() => {}} /> <Stack className='h-full overflow-hidden'>
<Chat chat={chat} onClick={() => {}} />
<div className='h-full overflow-hidden'>
<ChatBox className='h-full overflow-hidden' chat={chat} onSetInputRef={() => {}} />
</div>
</Stack>
)} )}
</Stack> </Stack>
</div> </div>