Added BlockedUsers, MutedUsers pages. Updated Settings

• Added:
- BlockedUsers, MutedUsers pages

• Updated:
- SettingsPage, SettingsLayout
This commit is contained in:
mgabdev
2020-06-10 12:08:31 -04:00
parent 7c32c3e2ee
commit f9a087ca14
5 changed files with 175 additions and 54 deletions

View File

@@ -1,48 +1,80 @@
import Sticky from 'react-stickynode'
import Search from '../components/search'
import ColumnHeader from '../components/column_header'
import Sidebar from '../components/sidebar'
import {
CX,
BREAKPOINT_EXTRA_SMALL,
} from '../constants'
import { me } from '../initial_state'
import SidebarXS from '../components/sidebar_xs'
import NavigationBar from '../components/navigation_bar'
import FooterBar from '../components/footer_bar'
import Responsive from '../features/ui/util/responsive_component'
import ResponsiveClassesComponent from '../features/ui/util/responsive_classes_component'
import SettingsSidebar from '../components/settings_sidebar'
export default class SettingsLayout extends PureComponent {
static propTypes = {
actions: PropTypes.array,
tabs: PropTypes.array,
title: PropTypes.string,
}
render() {
const { children, actions, tabs, title } = this.props
const { children, title } = this.props
const mainBlockClasses = CX({
default: 1,
width1015PX: 1,
flexRow: 1,
justifyContentEnd: 1,
py15: 1,
mlAuto: !me,
mrAuto: !me,
})
return (
<div className={[_s.default, _s.flexRow, _s.width100PC, _s.heightMin100VH, _s.bgTertiary].join(' ')}>
<div className={[_s.default, _s.width100PC, _s.heightMin100VH, _s.bgTertiary].join(' ')}>
<Sidebar />
<Responsive max={BREAKPOINT_EXTRA_SMALL}>
<SidebarXS />
</Responsive>
<main role='main' className={[_s.default, _s.flexShrink1, _s.flexGrow1, _s.borderColorSecondary, _s.borderLeft1PX].join(' ')}>
<NavigationBar
title={title}
noSearch
/>
<div className={[_s.default, _s.height53PX, _s.borderBottom1PX, _s.borderColorSecondary, _s.bgTertiary, _s.z3, _s.top0, _s.posFixed].join(' ')}>
<div className={[_s.default, _s.height53PX, _s.pl15, _s.width1015PX, _s.flexRow, _s.justifyContentSpaceBetween].join(' ')}>
<div className={[_s.default, _s.width100PC].join(' ')}>
<ColumnHeader
title={title}
showBackBtn={true}
actions={actions}
tabs={tabs}
/>
</div>
</div>
</div>
<div className={[_s.default, _s.flexRow, _s.width100PC].join(' ')}>
<div className={[_s.default, _s.height53PX].join(' ')}></div>
<Responsive min={BREAKPOINT_EXTRA_SMALL}>
<SettingsSidebar title='Settings' />
</Responsive>
<div className={[_s.default, _s.width1015PX, _s.flexRow, _s.justifyContentSpaceBetween, _s.pl15, _s.py15].join(' ')}>
<div className={[_s.default, _s.z1, _s.width100PC].join(' ')}>
{children}
</div>
</div>
<ResponsiveClassesComponent
classNames={[_s.default, _s.flexShrink1, _s.flexGrow1].join(' ')}
classNamesSmall={[_s.default, _s.flexShrink1, _s.flexGrow1].join(' ')}
classNamesXS={[_s.default, _s.width100PC].join(' ')}
>
<main role='main'>
</main>
<ResponsiveClassesComponent
classNames={mainBlockClasses}
classNamesXS={[_s.default, _s.width1015PX, _s.justifyContentEnd, _s.pb15].join(' ')}
>
<div className={[_s.default, _s.width1015PX, _s.z1].join(' ')}>
<div className={_s.default}>
{children}
</div>
</div>
</ResponsiveClassesComponent>
</main>
</ResponsiveClassesComponent>
</div>
<Responsive max={BREAKPOINT_EXTRA_SMALL}>
<FooterBar />
</Responsive>
</div>
)
}