Skip to content

Commit

Permalink
fixed chat responsiveness
Browse files Browse the repository at this point in the history
  • Loading branch information
@HarshRajat
HarshRajat committed May 15, 2024
1 parent 7fa77e1 commit 360083d
Show file tree
Hide file tree
Showing 6 changed files with 147 additions and 139 deletions.
21 changes: 16 additions & 5 deletions packages/uiweb/src/lib/components/chat/ChatProfile/ChatProfile.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -219,10 +219,11 @@ export const ChatProfile: React.FC<IChatProfile> = ({
return (
<Container theme={theme}>
{/* For showing Chat Profile */}
<Section gap="10px">
<AddonComponentSection>
{chatProfileLeftHelperComponent && (
<Section
cursor="pointer"
flex="none"
maxHeight="1.75rem"
overflow="hidden"
justifyContent="center"
Expand All @@ -249,10 +250,10 @@ export const ChatProfile: React.FC<IChatProfile> = ({
}}
loading={initialized.loading || initialized.profile.recipient === '' || initialized.profile.icon === ''}
/>
</Section>
</AddonComponentSection>

{/* For showing group related icons and menu */}
<Section
<AddonComponentSection
zIndex="unset"
flexDirection="row"
gap="10px"
Expand All @@ -265,6 +266,7 @@ export const ChatProfile: React.FC<IChatProfile> = ({
cursor="pointer"
maxHeight="1.75rem"
overflow="hidden"
flex="none"
>
{chatProfileRightHelperComponent}
</Section>
Expand Down Expand Up @@ -322,7 +324,7 @@ export const ChatProfile: React.FC<IChatProfile> = ({
)}
</ImageItem>
)}
</Section>
</AddonComponentSection>

{/* For showing chat info modal | modal && */}
{modal &&
Expand Down Expand Up @@ -352,6 +354,8 @@ export const ChatProfile: React.FC<IChatProfile> = ({

const Container = styled(Section)`
width: auto;
max-width: 100%;
overflow: hidden;
background: ${(props) => props.theme.backgroundColor.chatProfileBackground};
border: ${(props) => props.theme.border?.chatProfile};
border-radius: ${(props) => props.theme.borderRadius?.chatProfile};
Expand All @@ -362,7 +366,14 @@ const Container = styled(Section)`
padding: 6px;
box-sizing: border-box;
align-self: stretch;
box-sizing: border-box;
`;

const AddonComponentSection = styled(Section)`
gap: 10px;
@media ${device.mobileL} {
gap: 5px;
} ;
`;

const ImageItem = styled.div`
Expand Down
20 changes: 9 additions & 11 deletions packages/uiweb/src/lib/components/chat/ChatView/ChatViewComponent.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -119,7 +119,8 @@ export const ChatViewComponent: React.FC<IChatViewComponentProps> = (options: IC
)}

{/* Load ChatViewList if in options */}
<Section
{/* TODO Create theme from styled and then extend theme to have tablet and mobile sizes */}
<ChatViewSection
flex="1 1 auto"
overflow="hidden"
padding={theme.padding?.chatViewListPadding}
Expand All @@ -136,21 +137,12 @@ export const ChatViewComponent: React.FC<IChatViewComponentProps> = (options: IC
chatId={initialized.derivedChatId}
/>
)}
</Section>

{/* Check if user is not in read mode */}
{/* This will probably be not needed anymore */}
{/* {!signer && !(!!account && !!pgpPrivateKey) && !isConnected && (
<Section flex="0 1 auto">
<Span></Span>
</Section>
)} */}
</ChatViewSection>

{/* Load MessageInput if in options and user is present */}
{messageInput && user && (
<Section
flex="0 1 auto"
position="static"
zIndex="2"
padding={theme.padding?.messageInputPadding}
margin={theme.margin?.messageInputMargin}
Expand Down Expand Up @@ -182,3 +174,9 @@ const Conatiner = styled(Section)<IThemeProps>`
border: ${(props) => props.theme.border?.chatViewComponent};
box-sizing: border-box;
`;

const ChatViewSection = styled(Section)<IThemeProps>`
@media (${device.mobileL}) {
margin: 0;
}
`;
2 changes: 1 addition & 1 deletion packages/uiweb/src/lib/components/chat/ChatViewBubble/cards/message/MessageCard.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -287,7 +287,7 @@ const MessageCardSection = styled(Section)`
&.video,
&.frame {
max-width: 512px;
min-width: 240px;
min-width: 200px;
& > ${MessageSection} {
width: 100%;
Expand Down
230 changes: 112 additions & 118 deletions packages/uiweb/src/lib/components/chat/MessageInput/MessageInput.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -550,126 +550,119 @@ export const MessageInput: React.FC<MessageInputProps> = ({
</>
) : null}
{user && !user?.readmode() && (((isRules ? verified : true) && isMember) || (chatInfo && !groupInfo)) && (
<>
<Section
gap="8px"
flex="1"
position="static"
>
{emoji && (
<Div
width="25px"
cursor="pointer"
height="25px"
alignSelf="end"
onClick={() => setShowEmojis(!showEmojis)}
>
<EmojiIcon color={theme.iconColor?.emoji} />
</Div>
)}
{showEmojis && (
<Section
ref={modalRef}
position="absolute"
bottom="2.5rem"
left="2.5rem"
zIndex="700"
>
<EmojiPicker
width={isMobile ? 260 : 320}
height={370}
onEmojiClick={addEmoji}
<SendSection flex="1">
{emoji && (
<Div
width="25px"
cursor="pointer"
height="25px"
alignSelf="end"
onClick={() => setShowEmojis(!showEmojis)}
>
<EmojiIcon color={theme.iconColor?.emoji} />
</Div>
)}
{showEmojis && (
<Section
ref={modalRef}
position="absolute"
bottom="2.5rem"
left="2.5rem"
zIndex="700"
>
<EmojiPicker
width={isMobile ? 260 : 320}
height={370}
onEmojiClick={addEmoji}
/>
</Section>
)}

<MultiLineInput
disabled={loading ? true : false}
theme={theme}
onKeyDown={(event) => {
if (event.key === 'Enter' && !event.shiftKey) {
event.preventDefault();
sendTextMsg();
}
}}
placeholder="Type your message..."
onChange={(e) => onChangeTypedMessage(e.target.value)}
value={typedMessage}
ref={textAreaRef}
rows={1}
/>
{gif && (
<Section
width="30px"
height="24px"
cursor="pointer"
alignSelf="end"
onClick={() => setGifOpen(!gifOpen)}
>
<GifIcon />
</Section>
)}
{gifOpen && (
<Section
position="absolute"
bottom="2.5rem"
zIndex="1"
right={isMobile ? '7rem' : '8rem'}
ref={modalRef}
>
<GifPicker
onGifClick={sendGIF}
width={isMobile ? 260 : 320}
height={370}
tenorApiKey={String(PUBLIC_GOOGLE_TOKEN)}
/>
</Section>
)}
<Section onClick={handleUploadFile}>
{!fileUploading && file && (
<>
<Section
width="18px"
height="24px"
cursor="pointer"
alignSelf="end"
>
<AttachmentIcon color={theme.iconColor?.attachment} />
</Section>
<FileInput
type="file"
ref={fileUploadInputRef}
onChange={(e) => uploadFile(e)}
/>
</Section>
</>
)}
<MultiLineInput
disabled={loading ? true : false}
theme={theme}
onKeyDown={(event) => {
if (event.key === 'Enter' && !event.shiftKey) {
event.preventDefault();
sendTextMsg();
}
}}
placeholder="Type your message..."
onChange={(e) => onChangeTypedMessage(e.target.value)}
value={typedMessage}
ref={textAreaRef}
rows={1}
/>
</Section>
<SendSection position="static">
{gif && (
<Section
width="30px"
height="24px"
cursor="pointer"
alignSelf="end"
onClick={() => setGifOpen(!gifOpen)}
>
<GifIcon />
</Section>
)}
{gifOpen && (
<Section
position="absolute"
bottom="2.5rem"
zIndex="1"
right={isMobile ? '7rem' : '8rem'}
ref={modalRef}
>
<GifPicker
onGifClick={sendGIF}
width={isMobile ? 260 : 320}
height={370}
tenorApiKey={String(PUBLIC_GOOGLE_TOKEN)}
/>
</Section>
)}
<Section onClick={handleUploadFile}>
{!fileUploading && file && (
<>
<Section
width="18px"
height="24px"
cursor="pointer"
alignSelf="end"
>
<AttachmentIcon color={theme.iconColor?.attachment} />
</Section>
<FileInput
type="file"
ref={fileUploadInputRef}
onChange={(e) => uploadFile(e)}
/>
</>
)}
{!(loading || fileUploading) && (
<Section
cursor="pointer"
alignSelf="end"
height="20px"
width="22px"
onClick={() => sendTextMsg()}
>
<SendCompIcon color={theme.iconColor?.sendButton} />
</Section>
{!(loading || fileUploading) && (
<Section
cursor="pointer"
alignSelf="end"
height="20px"
width="22px"
onClick={() => sendTextMsg()}
>
<SendCompIcon color={theme.iconColor?.sendButton} />
</Section>
)}
)}

{(loading || fileUploading) && (
<Section
alignSelf="end"
height="24px"
>
<Spinner
color={theme.spinnerColor}
size="22"
/>
</Section>
)}
</SendSection>
</>
{(loading || fileUploading) && (
<Section
alignSelf="end"
height="24px"
>
<Spinner
color={theme.spinnerColor}
size="22"
/>
</Section>
)}
</SendSection>
)}
</TypebarSection>
</MessageInputContainer>
Expand All @@ -696,9 +689,9 @@ const MessageInputContainer = styled(Section)`
`;

const SendSection = styled(Section)`
gap: 11.5px;
gap: 12px;
@media ${device.mobileL} {
gap: 7.5px;
gap: 8px;
}
`;
const MultiLineInput = styled.textarea<IThemeProps>`
Expand All @@ -717,7 +710,8 @@ const MultiLineInput = styled.textarea<IThemeProps>`
padding-right: 5px;
align-self: end;
@media ${device.mobileL} {
font-size: 14px;
font-size: 16px;
width: 100%;
}
&&::-webkit-scrollbar {
width: 4px;
Expand Down
Loading

0 comments on commit 360083d

Please sign in to comment.