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

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 classNames from 'classnames';
import { OrderedSet as ImmutableOrderedSet } from 'immutable';
import React, { MutableRefObject, useEffect, useRef, useState } from 'react';
import { useIntl, defineMessages } from 'react-intl';
@ -31,14 +32,15 @@ interface IChatBox {
chat: IChat,
onSetInputRef: (el: HTMLTextAreaElement) => void,
autosize?: boolean,
inputRef?: MutableRefObject<HTMLTextAreaElement>
inputRef?: MutableRefObject<HTMLTextAreaElement>,
className?: string,
}
/**
* Chat UI with just the messages and textarea.
* 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 dispatch = useAppDispatch();
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 (
<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'>
<ChatMessageList chat={chat} autosize />
</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 Chat from './components/chat';
import ChatBox from './components/chat-box';
import ChatList from './components/chat-list';
@ -49,7 +50,12 @@ const ChatIndex: React.FC = () => {
</Stack>
<Stack className='col-span-6 h-full overflow-hidden'>
{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>
</div>