From 661acb73c9022a74e6f3eb1cc3edf5bf44f2bb41 Mon Sep 17 00:00:00 2001 From: abirc8010 Date: Wed, 2 Oct 2024 02:18:30 +0530 Subject: [PATCH] Fixed UI issues for Sidebar --- .../react/src/views/Message/Message.styles.js | 2 +- .../common/MessageAggregator.js | 16 +++++++++---- .../common/MessageAggregator.styles.js | 12 +++++++++- .../views/RoomInformation/RoomInformation.js | 18 +++++++++++--- .../RoomInformation/RoomInformation.styles.js | 14 +++++++++++ .../react/src/views/RoomMembers/RoomMember.js | 14 +++++++++-- .../views/RoomMembers/RoomMembers.styles.js | 24 +++++++++++++++---- 7 files changed, 85 insertions(+), 15 deletions(-) create mode 100644 packages/react/src/views/RoomInformation/RoomInformation.styles.js diff --git a/packages/react/src/views/Message/Message.styles.js b/packages/react/src/views/Message/Message.styles.js index b6b978fb4c..fa7e55ee5f 100644 --- a/packages/react/src/views/Message/Message.styles.js +++ b/packages/react/src/views/Message/Message.styles.js @@ -75,7 +75,7 @@ export const getMessageDividerStyles = (theme) => { line-height: 1rem; position: relative; display: flex; - z-index: 1000; + z-index: 1; align-items: center; margin-top: 0.5rem; margin-bottom: 0.75rem; diff --git a/packages/react/src/views/MessageAggregators/common/MessageAggregator.js b/packages/react/src/views/MessageAggregators/common/MessageAggregator.js index 9b9c573066..711c3ee94e 100644 --- a/packages/react/src/views/MessageAggregators/common/MessageAggregator.js +++ b/packages/react/src/views/MessageAggregators/common/MessageAggregator.js @@ -1,5 +1,5 @@ -import React, { useState } from 'react'; -import { isSameDay, format } from 'date-fns'; +import React, { useEffect, useState } from 'react'; +import { isSameDay, format, set } from 'date-fns'; import { Box, Sidebar, Popup, useTheme } from '@embeddedchat/ui-elements'; import { MessageDivider } from '../../Message/MessageDivider'; import Message from '../../Message/Message'; @@ -41,14 +41,22 @@ export const MessageAggregator = ({ const noMessages = messageList?.length === 0 || !messageRendered; const ViewComponent = viewType === 'Popup' ? Popup : Sidebar; - + const [isSmallScreen, setIsSmallScreen] = useState(false); + useEffect(() => { + setIsSmallScreen(window.innerWidth < 780); + }, []); return ( setExclusiveState(null)} - style={{ padding: 0 }} + style={{ + ...(isSmallScreen && viewType === 'Sidebar' + ? styles.sidebarStyles + : null), + backgroundColor: theme.colors.background, + }} {...(viewType === 'Popup' ? { isPopupHeader: true, diff --git a/packages/react/src/views/MessageAggregators/common/MessageAggregator.styles.js b/packages/react/src/views/MessageAggregators/common/MessageAggregator.styles.js index 1f18222e3e..95afe37856 100644 --- a/packages/react/src/views/MessageAggregators/common/MessageAggregator.styles.js +++ b/packages/react/src/views/MessageAggregators/common/MessageAggregator.styles.js @@ -1,6 +1,6 @@ import { css } from '@emotion/react'; -const getMessageAggregatorStyles = () => { +const getMessageAggregatorStyles = (theme) => { const styles = { listContainerStyles: css` flex: 1; @@ -9,6 +9,7 @@ const getMessageAggregatorStyles = () => { justify-content: initial; align-items: initial; max-width: 100%; + overflow-y: auto; `, noMessageStyles: css` @@ -21,6 +22,15 @@ const getMessageAggregatorStyles = () => { flex-direction: column; align-items: center; `, + sidebarStyles: { + position: 'absolute', + left: '0', + bottom: '0', + top: '2', + width: '100%', + height: '93%', + zIndex: 1, + }, }; return styles; diff --git a/packages/react/src/views/RoomInformation/RoomInformation.js b/packages/react/src/views/RoomInformation/RoomInformation.js index 504b0f4ba8..d5490c1863 100644 --- a/packages/react/src/views/RoomInformation/RoomInformation.js +++ b/packages/react/src/views/RoomInformation/RoomInformation.js @@ -1,4 +1,4 @@ -import React, { useContext } from 'react'; +import React, { useContext, useState, useEffect } from 'react'; import { css } from '@emotion/react'; import { Box, @@ -6,14 +6,17 @@ import { Sidebar, Popup, useComponentOverrides, + useTheme, } from '@embeddedchat/ui-elements'; +import { getRoomInformationStyles } from './RoomInformation.styles'; import RCContext from '../../context/RCInstance'; import { useChannelStore } from '../../store'; import useSetExclusiveState from '../../hooks/useSetExclusiveState'; const Roominfo = () => { const { RCInstance } = useContext(RCContext); - + const { theme } = useTheme(); + const styles = getRoomInformationStyles(theme); const channelInfo = useChannelStore((state) => state.channelInfo); const { variantOverrides } = useComponentOverrides('RoomMember'); const viewType = variantOverrides.viewType || 'Sidebar'; @@ -24,12 +27,21 @@ const Roominfo = () => { }; const ViewComponent = viewType === 'Popup' ? Popup : Sidebar; - + const [isSmallScreen, setIsSmallScreen] = useState(false); + useEffect(() => { + setIsSmallScreen(window.innerWidth < 780); + }, []); return ( setExclusiveState(null)} + style={{ + ...(isSmallScreen && viewType === 'Sidebar' + ? styles.sidebarStyles + : null), + backgroundColor: theme.colors.background, + }} {...(viewType === 'Popup' ? { isPopupHeader: true, diff --git a/packages/react/src/views/RoomInformation/RoomInformation.styles.js b/packages/react/src/views/RoomInformation/RoomInformation.styles.js new file mode 100644 index 0000000000..87485d7c24 --- /dev/null +++ b/packages/react/src/views/RoomInformation/RoomInformation.styles.js @@ -0,0 +1,14 @@ +export const getRoomInformationStyles = () => { + const styles = { + sidebarStyles: { + position: 'absolute', + left: '0', + bottom: '0', + top: '1', + width: '100%', + height: '93%', + zIndex: 1, + }, + }; + return styles; +}; diff --git a/packages/react/src/views/RoomMembers/RoomMember.js b/packages/react/src/views/RoomMembers/RoomMember.js index c52f48c9dd..f364d5c086 100644 --- a/packages/react/src/views/RoomMembers/RoomMember.js +++ b/packages/react/src/views/RoomMembers/RoomMember.js @@ -50,11 +50,21 @@ const RoomMembers = ({ members }) => { const roles = userInfo && userInfo.roles ? userInfo.roles : []; const isAdmin = roles.includes('admin'); const ViewComponent = viewType === 'Popup' ? Popup : Sidebar; + const [isSmallScreen, setIsSmallScreen] = useState(false); + useEffect(() => { + setIsSmallScreen(window.innerWidth < 780); + }, []); return ( setExclusiveState(null)} + style={{ + ...(isSmallScreen && viewType === 'Sidebar' + ? styles.containerStyles + : null), + backgroundColor: theme.colors.background, + }} {...(viewType === 'Popup' ? { isPopupHeader: true, @@ -64,7 +74,7 @@ const RoomMembers = ({ members }) => { {isLoading ? ( ) : ( - + {showInvite ? ( ) : ( @@ -75,7 +85,7 @@ const RoomMembers = ({ members }) => { {isAdmin && (