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

ChatRoom: autosize height on desktop

Browse source
This commit is contained in:
Alex Gleason 2022-06-21 15:58:03 -05:00
parent 31a73224a9
commit c42f60bc77
No known key found for this signature in database
GPG key ID: 7211D1F99744FBB7
3 changed files with 8 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
app/soapbox/features/chats/chat-room.tsx
View file

@ -60,6 +60,7 @@ const ChatRoom: React.FC<IChatRoom> = ({ params }) => {
<ChatBox <ChatBox
chatId={chat.id} chatId={chat.id}
onSetInputRef={handleInputRef} onSetInputRef={handleInputRef}
autosize
/> />
</Column> </Column>
); );

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

@ -25,13 +25,14 @@ const fileKeyGen = (): number => Math.floor((Math.random() * 0x10000));
interface IChatBox { interface IChatBox {
chatId: string, chatId: string,
onSetInputRef: (el: HTMLTextAreaElement) => void, onSetInputRef: (el: HTMLTextAreaElement) => void,
autosize?: boolean,
} }
/** /**
* 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> = ({ chatId, onSetInputRef }) => { const ChatBox: React.FC<IChatBox> = ({ chatId, onSetInputRef, autosize }) => {
const intl = useIntl(); const intl = useIntl();
const dispatch = useAppDispatch(); const dispatch = useAppDispatch();
const chatMessageIds = useAppSelector(state => state.chat_message_lists.get(chatId, ImmutableOrderedSet<string>())); const chatMessageIds = useAppSelector(state => state.chat_message_lists.get(chatId, ImmutableOrderedSet<string>()));
@ -167,7 +168,7 @@ const ChatBox: React.FC<IChatBox> = ({ chatId, onSetInputRef }) => {
return ( return (
<div className='chat-box' onMouseOver={handleHover}> <div className='chat-box' onMouseOver={handleHover}>
<ChatMessageList chatMessageIds={chatMessageIds} chatId={chatId} /> <ChatMessageList chatMessageIds={chatMessageIds} chatId={chatId} autosize />
{renderAttachment()} {renderAttachment()}
{isUploading && ( {isUploading && (
<UploadProgress progress={uploadProgress * 100} /> <UploadProgress progress={uploadProgress * 100} />

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

@ -66,10 +66,12 @@ interface IChatMessageList {
chatId: string, chatId: string,
/** Message IDs to render. */ /** Message IDs to render. */
chatMessageIds: ImmutableOrderedSet<string>, chatMessageIds: ImmutableOrderedSet<string>,
/** Whether to make the chatbox fill the height of the screen. */
autosize?: boolean,
} }
/** Scrollable list of chat messages. */ /** Scrollable list of chat messages. */
const ChatMessageList: React.FC<IChatMessageList> = ({ chatId, chatMessageIds }) => { const ChatMessageList: React.FC<IChatMessageList> = ({ chatId, chatMessageIds, autosize }) => {
const intl = useIntl(); const intl = useIntl();
const dispatch = useAppDispatch(); const dispatch = useAppDispatch();
@ -306,7 +308,7 @@ const ChatMessageList: React.FC<IChatMessageList> = ({ chatId, chatMessageIds })
}, [chatMessageIds.first()]); }, [chatMessageIds.first()]);
return ( return (
<div className='chat-messages' ref={node}> <div className='chat-messages' style={{ height: autosize ? 'calc(100vh - 16rem)' : undefined }} ref={node}>
{chatMessages.reduce((acc, curr, idx) => { {chatMessages.reduce((acc, curr, idx) => {
const lastMessage = chatMessages.get(idx - 1); const lastMessage = chatMessages.get(idx - 1);