Commit f9a087ca authored by mgabdev's avatar mgabdev

Added BlockedUsers, MutedUsers pages. Updated Settings

• Added:
- BlockedUsers, MutedUsers pages

• Updated:
- SettingsPage, SettingsLayout
parent 7c32c3e2
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>
)
}
}
\ No newline at end of file
......@@ -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} />
......
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(' ')}>
<Responsive max={BREAKPOINT_EXTRA_SMALL}>
<SidebarXS />
</Responsive>
<NavigationBar
title={title}
noSearch
/>
<div className={[_s.default, _s.flexRow, _s.width100PC].join(' ')}>
<Responsive min={BREAKPOINT_EXTRA_SMALL}>
<SettingsSidebar title='Settings' />
</Responsive>
<Sidebar />
<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 role='main' className={[_s.default, _s.flexShrink1, _s.flexGrow1, _s.borderColorSecondary, _s.borderLeft1PX].join(' ')}>
<ResponsiveClassesComponent
classNames={mainBlockClasses}
classNamesXS={[_s.default, _s.width1015PX, _s.justifyContentEnd, _s.pb15].join(' ')}
>
<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.width1015PX, _s.z1].join(' ')}>
<div className={[_s.default, _s.height53PX].join(' ')}></div>
<div className={_s.default}>
{children}
</div>
</div>
<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>
</main>
</main>
</ResponsiveClassesComponent>
</div>
<Responsive max={BREAKPOINT_EXTRA_SMALL}>
<FooterBar />
</Responsive>
</div>
)
}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment