Commit e64cbdfd authored by 2458773093's avatar 2458773093

group timeline reply filter

parent 57ddfabf
import React from 'react';
import PropTypes from 'prop-types';
import ImmutablePropTypes from 'react-immutable-proptypes';
import { injectIntl, FormattedMessage } from 'react-intl';
import SettingToggle from '../../../notifications/components/setting_toggle';
export default @injectIntl
class ColumnSettings extends React.PureComponent {
static propTypes = {
settings: ImmutablePropTypes.map.isRequired,
onChange: PropTypes.func.isRequired,
intl: PropTypes.object.isRequired,
};
render () {
const { settings, onChange } = this.props;
return (
<div>
<span className='column-settings__section'><FormattedMessage id='home.column_settings.basic' defaultMessage='Basic' /></span>
<div className='column-settings__row'>
<SettingToggle prefix='home_timeline' settings={settings} settingPath={['shows', 'reply']} onChange={onChange} label={<FormattedMessage id='home.column_settings.show_replies' defaultMessage='Show replies' />} />
</div>
</div>
);
}
}
import { connect } from 'react-redux';
import ColumnSettings from '../components/column_settings';
import { changeSetting, saveSettings } from '../../../../actions/settings';
const mapStateToProps = state => ({
settings: state.getIn(['settings', 'group']),
});
const mapDispatchToProps = dispatch => ({
onChange (key, checked) {
dispatch(changeSetting(['group', ...key], checked));
},
onSave () {
dispatch(saveSettings());
},
});
export default connect(mapStateToProps, mapDispatchToProps)(ColumnSettings);
...@@ -14,9 +14,13 @@ import { me } from 'gabsocial/initial_state'; ...@@ -14,9 +14,13 @@ import { me } from 'gabsocial/initial_state';
import Avatar from '../../../components/avatar'; import Avatar from '../../../components/avatar';
import { Link } from 'react-router-dom'; import { Link } from 'react-router-dom';
import classNames from 'classnames'; import classNames from 'classnames';
import ColumnSettingsContainer from "./containers/column_settings_container";
import Icon from 'gabsocial/components/icon';
const messages = defineMessages({ const messages = defineMessages({
tabLatest: { id: 'group.timeline.tab_latest', defaultMessage: 'Latest' }, tabLatest: { id: 'group.timeline.tab_latest', defaultMessage: 'Latest' },
show: { id: 'group.timeline.show_settings', defaultMessage: 'Show settings' },
hide: { id: 'group.timeline.hide_settings', defaultMessage: 'Hide settings' },
}); });
const mapStateToProps = (state, props) => ({ const mapStateToProps = (state, props) => ({
...@@ -44,6 +48,10 @@ class GroupTimeline extends React.PureComponent { ...@@ -44,6 +48,10 @@ class GroupTimeline extends React.PureComponent {
intl: PropTypes.object.isRequired, intl: PropTypes.object.isRequired,
}; };
state = {
collapsed: true,
}
componentDidMount () { componentDidMount () {
const { dispatch } = this.props; const { dispatch } = this.props;
const { id } = this.props.params; const { id } = this.props.params;
...@@ -65,8 +73,14 @@ class GroupTimeline extends React.PureComponent { ...@@ -65,8 +73,14 @@ class GroupTimeline extends React.PureComponent {
this.props.dispatch(expandGroupTimeline(id, { maxId })); this.props.dispatch(expandGroupTimeline(id, { maxId }));
} }
handleToggleClick = (e) => {
e.stopPropagation();
this.setState({ collapsed: !this.state.collapsed });
}
render () { render () {
const { columnId, group, relationships, account, intl } = this.props; const { columnId, group, relationships, account, intl } = this.props;
const { collapsed } = this.state;
const { id } = this.props.params; const { id } = this.props.params;
if (typeof group === 'undefined' || !relationships) { if (typeof group === 'undefined' || !relationships) {
...@@ -100,7 +114,24 @@ class GroupTimeline extends React.PureComponent { ...@@ -100,7 +114,24 @@ class GroupTimeline extends React.PureComponent {
<Link to={`/groups/${id}`} className={classNames('btn grouped active')}> <Link to={`/groups/${id}`} className={classNames('btn grouped active')}>
{intl.formatMessage(messages.tabLatest)} {intl.formatMessage(messages.tabLatest)}
</Link> </Link>
<div className='column-header__buttons'>
<button
className={classNames('column-header__button', { 'active': !collapsed })}
title={intl.formatMessage(collapsed ? messages.show : messages.hide)}
aria-label={intl.formatMessage(collapsed ? messages.show : messages.hide)}
aria-pressed={collapsed ? 'false' : 'true'}
onClick={this.handleToggleClick}
><Icon id='sliders' /></button>
</div>
</h1> </h1>
{!collapsed && <div className='column-header__collapsible'>
<div className='column-header__collapsible-inner'>
<div className='column-header__collapsible__extra'>
<ColumnSettingsContainer />
</div>
</div>
</div>}
</div> </div>
<StatusListContainer <StatusListContainer
......
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