Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fixed ChatUI Components responsiveness #1287

Merged
merged 2 commits into from
May 16, 2024
Merged

Fixed ChatUI Components responsiveness #1287

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
360083d
fixed chat responsiveness
HarshRajat May 15, 2024
d864378
fixed preview link alignment to right
HarshRajat May 15, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
21 changes: 16 additions & 5 deletions packages/uiweb/src/lib/components/chat/ChatProfile/ChatProfile.tsx
View file
Open in desktop
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
Open in desktop
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;
}
`;
1 change: 1 addition & 0 deletions packages/uiweb/src/lib/components/chat/ChatViewBubble/cards/message/FrameRenderer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -523,4 +523,5 @@ const FrameInput = styled.input<FrameInputProps>`

const PreviewAnchor = styled(Anchor)`
text-decoration: none;
align-self: flex-end;
`;
2 changes: 1 addition & 1 deletion packages/uiweb/src/lib/components/chat/ChatViewBubble/cards/message/MessageCard.tsx
View file
Open in desktop
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
Open in desktop
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