Added BlockedUsers, MutedUsers pages. Updated Settings
• Added: - BlockedUsers, MutedUsers pages • Updated: - SettingsPage, SettingsLayout
This commit is contained in:
@@ -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>
|
||||
)
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user