Progress on DMs responsiveness

Progress on DMs responsiveness
This commit is contained in:
mgabdev 2020-12-03 22:31:11 -05:00
parent f6a7422704
commit 4c4193fa09
2 changed files with 17 additions and 4 deletions

View File

@ -7,12 +7,15 @@ import List from '../../../components/list'
class ChatSettingsSidebar extends React.PureComponent {
render() {
const { isXS } = this.props
return (
<ResponsiveClassesComponent
classNames={[_s.d, _s.w340PX, _s.h100PC, _s.bgPrimary, _s.borderLeft1PX, _s.borderRight1PX, _s.borderColorSecondary].join(' ')}
classNamesSmall={[_s.d, _s.w300PX, _s.h100PC, _s.bgPrimary, _s.borderLeft1PX, _s.borderRight1PX, _s.borderColorSecondary].join(' ')}
classNamesXS={[_s.d, _s.w100PC, _s.bgPrimary].join(' ')}
>
<ChatSettingsHeader />
{ !isXS && <ChatSettingsHeader /> }
<List
items={[
{
@ -39,4 +42,8 @@ class ChatSettingsSidebar extends React.PureComponent {
}
ChatSettingsSidebar.propTypes = {
isXS: PropTypes.bool,
}
export default ChatSettingsSidebar

View File

@ -62,7 +62,7 @@ class MessagesLayout extends React.PureComponent {
const isXS = width <= BREAKPOINT_EXTRA_SMALL
if (isXS) {
if (!selectedChatConversationId) {
if (!selectedChatConversationId && !isSettings) {
return (
<div className={[_s.d, _s.w100PC, _s.minH100VH, _s.bgTertiary].join(' ')}>
<DefaultNavigationBar
@ -71,6 +71,10 @@ class MessagesLayout extends React.PureComponent {
{
icon: 'add',
to: '/messages/new',
},
{
icon: 'cog',
to: '/messages/settings',
}
]}
title={title}
@ -79,7 +83,7 @@ class MessagesLayout extends React.PureComponent {
<div className={[_s.d, _s.w100PC, _s.flexRow, _s.pb15].join(' ')}>
{
(isSettings || currentConversationIsRequest) &&
<ChatSettingsSidebar />
<ChatSettingsSidebar isXS />
}
{
!isSettings && !currentConversationIsRequest &&
@ -90,7 +94,7 @@ class MessagesLayout extends React.PureComponent {
</main>
</div>
)
} else {
} else if (selectedChatConversationId && !isSettings) {
return (
<div className={[_s.d, _s.w100PC, _s.minH100VH, _s.bgTertiary].join(' ')}>
<ChatNavigationBar chatConversationId={selectedChatConversationId} />
@ -101,6 +105,8 @@ class MessagesLayout extends React.PureComponent {
{ !currentConversationIsRequest && <ChatMessageComposeForm chatConversationId={selectedChatConversationId} isXS={isXS} /> }
</div>
)
} else {
//settings
}
}