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 { class ChatSettingsSidebar extends React.PureComponent {
render() { render() {
const { isXS } = this.props
return ( return (
<ResponsiveClassesComponent <ResponsiveClassesComponent
classNames={[_s.d, _s.w340PX, _s.h100PC, _s.bgPrimary, _s.borderLeft1PX, _s.borderRight1PX, _s.borderColorSecondary].join(' ')} 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(' ')} 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 <List
items={[ items={[
{ {
@ -39,4 +42,8 @@ class ChatSettingsSidebar extends React.PureComponent {
} }
ChatSettingsSidebar.propTypes = {
isXS: PropTypes.bool,
}
export default ChatSettingsSidebar export default ChatSettingsSidebar

View File

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