Added BlockedUsers, MutedUsers pages. Updated Settings
• Added: - BlockedUsers, MutedUsers pages • Updated: - SettingsPage, SettingsLayout
This commit is contained in:
mgabdev
parent
7c32c3e2ee
commit
f9a087ca14
|
|
@ -0,0 +1,94 @@
|
|||
import ImmutablePropTypes from 'react-immutable-proptypes'
|
||||
import ImmutablePureComponent from 'react-immutable-pure-component'
|
||||
import { injectIntl, defineMessages } from 'react-intl'
|
||||
import { me } from '../initial_state'
|
||||
import { makeGetAccount } from '../selectors'
|
||||
import SidebarSectionTitle from './sidebar_section_title'
|
||||
import SidebarSectionItem from './sidebar_section_item'
|
||||
import Heading from './heading'
|
||||
import BackButton from './back_button'
|
||||
|
||||
const messages = defineMessages({
|
||||
blocks: { id: 'navigation_bar.blocks', defaultMessage: 'Blocked users' },
|
||||
mutes: { id: 'navigation_bar.mutes', defaultMessage: 'Muted users' },
|
||||
preferences: { id: 'navigation_bar.preferences', defaultMessage: 'Preferences' },
|
||||
menu: { id: 'menu', defaultMessage: 'Menu' },
|
||||
})
|
||||
|
||||
const mapStateToProps = (state) => ({
|
||||
account: makeGetAccount()(state, me),
|
||||
})
|
||||
|
||||
export default
|
||||
@connect(mapStateToProps)
|
||||
@injectIntl
|
||||
class Sidebar extends ImmutablePureComponent {
|
||||
|
||||
static propTypes = {
|
||||
intl: PropTypes.object.isRequired,
|
||||
account: ImmutablePropTypes.map,
|
||||
title: PropTypes.string,
|
||||
}
|
||||
|
||||
render() {
|
||||
const {
|
||||
intl,
|
||||
account,
|
||||
title,
|
||||
} = this.props
|
||||
|
||||
if (!me || !account) return null
|
||||
|
||||
const menuItems = [
|
||||
{
|
||||
title: intl.formatMessage(messages.blocks),
|
||||
to: '/settings/blocks',
|
||||
},
|
||||
{
|
||||
title: intl.formatMessage(messages.mutes),
|
||||
to: '/settings/mutes',
|
||||
},
|
||||
{
|
||||
title: intl.formatMessage(messages.preferences),
|
||||
href: '/settings/preferences',
|
||||
},
|
||||
]
|
||||
|
||||
return (
|
||||
<header role='banner' className={[_s.default, _s.flexGrow1, _s.z3, _s.alignItemsEnd].join(' ')}>
|
||||
<div className={[_s.default, _s.width240PX].join(' ')}>
|
||||
<div className={[_s.default, _s.posFixed, _s.heightCalc53PX, _s.bottom0].join(' ')}>
|
||||
<div className={[_s.default, _s.height100PC, _s.alignItemsStart, _s.width240PX, _s.pr15, _s.py10, _s.noScrollbar, _s.overflowYScroll].join(' ')}>
|
||||
<div className={[_s.default, _s.width100PC].join(' ')}>
|
||||
<div className={[_s.default, _s.flexRow, _s.px5, _s.pt10].join(' ')}>
|
||||
<BackButton
|
||||
icon='arrow-left'
|
||||
toHome
|
||||
/>
|
||||
<Heading size='h1'>
|
||||
{title}
|
||||
</Heading>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<nav aria-label='Primary' role='navigation' className={[_s.default, _s.width100PC, _s.mb15].join(' ')}>
|
||||
<SidebarSectionTitle>{intl.formatMessage(messages.menu)}</SidebarSectionTitle>
|
||||
{
|
||||
menuItems.map((menuItem, i) => {
|
||||
if (menuItem.hidden) return null
|
||||
|
||||
return (
|
||||
<SidebarSectionItem {...menuItem} key={`sidebar-item-menu-${i}`} />
|
||||
)
|
||||
})
|
||||
}
|
||||
</nav>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
)
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -6,10 +6,12 @@ import { me } from '../initial_state'
|
|||
import { fetchBlocks, expandBlocks } from '../actions/blocks'
|
||||
import Account from '../components/account'
|
||||
import Block from '../components/block'
|
||||
import Heading from '../components/heading'
|
||||
import ScrollableList from '../components/scrollable_list'
|
||||
|
||||
const messages = defineMessages({
|
||||
empty: { id: 'empty_column.blocks', defaultMessage: 'You haven\'t blocked any users yet.' },
|
||||
blocks: { id: 'navigation_bar.blocks', defaultMessage: 'Blocked users' },
|
||||
})
|
||||
|
||||
const mapStateToProps = (state) => ({
|
||||
|
|
@ -19,12 +21,8 @@ const mapStateToProps = (state) => ({
|
|||
})
|
||||
|
||||
const mapDispatchToProps = (dispatch) => ({
|
||||
onFetchBlocks() {
|
||||
dispatch(fetchBlocks())
|
||||
},
|
||||
onExpandBlocks() {
|
||||
dispatch(expandBlocks())
|
||||
},
|
||||
onFetchBlocks: () => dispatch(fetchBlocks()),
|
||||
onExpandBlocks: () => dispatch(expandBlocks()),
|
||||
})
|
||||
|
||||
export default
|
||||
|
|
@ -61,6 +59,11 @@ class Blocks extends ImmutablePureComponent {
|
|||
|
||||
return (
|
||||
<Block>
|
||||
<div className={[_s.default, _s.px15, _s.py10, _s.justifyContentCenter].join(' ')}>
|
||||
<Heading size='h2'>
|
||||
{intl.formatMessage(messages.blocks)}
|
||||
</Heading>
|
||||
</div>
|
||||
<ScrollableList
|
||||
scrollKey='blocked_accounts'
|
||||
onLoadMore={this.handleLoadMore}
|
||||
|
|
|
|||
|
|
@ -6,6 +6,7 @@ import { me } from '../initial_state'
|
|||
import { fetchMutes, expandMutes } from '../actions/mutes'
|
||||
import Account from '../components/account'
|
||||
import Block from '../components/block'
|
||||
import Heading from '../components/heading'
|
||||
import ScrollableList from '../components/scrollable_list'
|
||||
|
||||
const mapStateToProps = (state) => ({
|
||||
|
|
@ -15,12 +16,8 @@ const mapStateToProps = (state) => ({
|
|||
})
|
||||
|
||||
const mapDispatchToProps = (dispatch) => ({
|
||||
onFetchMutes() {
|
||||
dispatch(fetchMutes())
|
||||
},
|
||||
onExpandMutes() {
|
||||
dispatch(expandMutes())
|
||||
},
|
||||
onFetchMutes: () => dispatch(fetchMutes()),
|
||||
onExpandMutes: () => dispatch(expandMutes()),
|
||||
})
|
||||
|
||||
export default
|
||||
|
|
@ -53,6 +50,11 @@ class Mutes extends ImmutablePureComponent {
|
|||
|
||||
return (
|
||||
<Block>
|
||||
<div className={[_s.default, _s.px15, _s.py10, _s.justifyContentCenter].join(' ')}>
|
||||
<Heading size='h2'>
|
||||
<FormattedMessage id='navigation_bar.mutes' defaultMessage='Muted users' />
|
||||
</Heading>
|
||||
</div>
|
||||
<ScrollableList
|
||||
scrollKey='mutes'
|
||||
onLoadMore={this.handleLoadMore}
|
||||
|
|
|
|||
|
|
@ -180,19 +180,9 @@ class SwitchingArea extends PureComponent {
|
|||
<WrappedRoute path='/search/hashtags' exact page={SearchPage} component={Search} content={children} />
|
||||
<WrappedRoute path='/search/groups' exact page={SearchPage} component={Search} content={children} />
|
||||
|
||||
{ /*
|
||||
<WrappedRoute path='/settings/account' exact page={SettingsPage} component={AccountSettings} content={children} />
|
||||
<WrappedRoute path='/settings/profile' exact page={SettingsPage} component={ProfileSettings} content={children} />
|
||||
<WrappedRoute path='/settings/relationships' exact page={SettingsPage} component={RelationshipSettings} content={children} />
|
||||
<WrappedRoute path='/settings/development' exact page={SettingsPage} component={Development} content={children} />
|
||||
<WrappedRoute path='/settings/billing' exact page={SettingsPage} component={Billing} content={children} />
|
||||
*/ }
|
||||
|
||||
{ /* <WrappedRoute path='/settings/blocks' exact page={SettingsPage} component={BlockedAccounts} content={children} componentParams={{ title: 'Blocked Accounts' }} />
|
||||
<WrappedRoute path='/settings/domain-blocks' exact page={SettingsPage} component={BlockedDomains} content={children} componentParams={{ title: 'Blocked Domains' }} />
|
||||
<WrappedRoute path='/settings/filters' exact page={SettingsPage} component={Filters} content={children} componentParams={{ title: 'Muted Words' }} />
|
||||
<WrappedRoute path='/settings/mutes' exact page={SettingsPage} component={Mutes} content={children} componentParams={{ title: 'Muted Accounts' }} /> */ }
|
||||
|
||||
<WrappedRoute path='/settings/blocks' exact page={SettingsPage} component={BlockedAccounts} content={children} componentParams={{ title: 'Blocked Users' }} />
|
||||
<WrappedRoute path='/settings/mutes' exact page={SettingsPage} component={Mutes} content={children} componentParams={{ title: 'Muted Users' }} />
|
||||
|
||||
<Redirect from='/@:username' to='/:username' exact />
|
||||
<WrappedRoute path='/:username' publicRoute exact page={ProfilePage} component={AccountTimeline} content={children} />
|
||||
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue