Browse Source
* change chat from a sidebar to a column Using a 2-column layout prevents the chat scrollbar from overlapping the page scrollbar. Also, it no longer needs to calculate extra padding for elements. * remove unused Sidebar.tsx * fix css for chat column * re-center "Go to last message" button * main content column always uses maximum height * lint * re-hide scrollbars in mainContent on chromium * fix chat column width when input is over-full * chat is only fixed-width in desktop --------- Co-authored-by: janWilejan <>pull/3148/head
janWilejan
2 years ago
committed by
GitHub
11 changed files with 110 additions and 192 deletions
@ -1,30 +0,0 @@
@@ -1,30 +0,0 @@
|
||||
@import '../../../styles/mixins'; |
||||
|
||||
.root { |
||||
background-color: var(--theme-color-components-chat-background); |
||||
|
||||
@include screen(desktop) { |
||||
position: fixed; |
||||
right: 0; |
||||
bottom: 0; |
||||
top: 69px; |
||||
z-index:100; |
||||
} |
||||
|
||||
@media screen and (width <= 1120px) and (width >= 768px) { |
||||
top: 65px; |
||||
} |
||||
} |
||||
|
||||
/* |
||||
First div is .ant-layout-sider-children |
||||
Only way to target it apparently |
||||
*/ |
||||
.root > div { |
||||
display: flex; |
||||
flex-flow: column nowrap; |
||||
-moz-box-flex: 1 !important; |
||||
flex-grow: 1 !important; |
||||
height: 100% !important; |
||||
width: 100%!important; |
||||
} |
||||
@ -1,49 +0,0 @@
@@ -1,49 +0,0 @@
|
||||
import Sider from 'antd/lib/layout/Sider'; |
||||
import { useRecoilValue } from 'recoil'; |
||||
import { FC } from 'react'; |
||||
import dynamic from 'next/dynamic'; |
||||
import { Spin } from 'antd'; |
||||
import { ChatMessage } from '../../../interfaces/chat-message.model'; |
||||
import styles from './Sidebar.module.scss'; |
||||
|
||||
import { |
||||
currentUserAtom, |
||||
visibleChatMessagesSelector, |
||||
isChatAvailableSelector, |
||||
} from '../../stores/ClientConfigStore'; |
||||
|
||||
// Lazy loaded components
|
||||
const ChatContainer = dynamic( |
||||
() => import('../../chat/ChatContainer/ChatContainer').then(mod => mod.ChatContainer), |
||||
{ |
||||
ssr: false, |
||||
}, |
||||
); |
||||
|
||||
export const Sidebar: FC = () => { |
||||
const currentUser = useRecoilValue(currentUserAtom); |
||||
const messages = useRecoilValue<ChatMessage[]>(visibleChatMessagesSelector); |
||||
const isChatAvailable = useRecoilValue(isChatAvailableSelector); |
||||
|
||||
if (!currentUser) { |
||||
return ( |
||||
<Sider className={styles.root} collapsedWidth={0} width={320}> |
||||
<Spin spinning size="large" style={{ position: 'relative', top: '40vh' }} /> |
||||
</Sider> |
||||
); |
||||
} |
||||
|
||||
const { id, isModerator, displayName } = currentUser; |
||||
return ( |
||||
<Sider className={styles.root} collapsedWidth={0} width={320}> |
||||
<ChatContainer |
||||
messages={messages} |
||||
usernameToHighlight={displayName} |
||||
chatUserId={id} |
||||
isModerator={isModerator} |
||||
chatAvailable={isChatAvailable} |
||||
showInput={!!currentUser} |
||||
/> |
||||
</Sider> |
||||
); |
||||
}; |
||||
Loading…
Reference in new issue