chinwagsocial/app/assets/javascripts/components/features/notifications/components/column_settings.jsx
Eugen Rochko 65647a2472 See #244 - Added notifications column settings to filter what's displayed
in the column and what appears as desktop notifications. Settings do not
persist yet
2017-01-02 14:09:57 +01:00

150 lines
5.3 KiB
JavaScript

import PureRenderMixin from 'react-addons-pure-render-mixin';
import ImmutablePropTypes from 'react-immutable-proptypes';
import Toggle from 'react-toggle';
import { Motion, spring } from 'react-motion';
import { FormattedMessage } from 'react-intl';
const outerStyle = {
background: '#373b4a',
padding: '15px'
};
const iconStyle = {
fontSize: '16px',
padding: '15px',
position: 'absolute',
right: '0',
top: '-48px',
cursor: 'pointer'
};
const labelStyle = {
display: 'block',
lineHeight: '24px',
verticalAlign: 'middle'
};
const labelSpanStyle = {
display: 'inline-block',
verticalAlign: 'middle',
marginBottom: '14px',
marginLeft: '8px',
color: '#9baec8'
};
const sectionStyle = {
cursor: 'default',
display: 'block',
fontWeight: '500',
color: '#9baec8',
marginBottom: '10px'
};
const rowStyle = {
};
const ColumnSettings = React.createClass({
propTypes: {
settings: ImmutablePropTypes.map.isRequired,
onChange: React.PropTypes.func.isRequired
},
getInitialState () {
return {
collapsed: true
};
},
mixins: [PureRenderMixin],
handleToggleCollapsed () {
this.setState({ collapsed: !this.state.collapsed });
},
handleChange (key, e) {
this.props.onChange(key, e.target.checked);
},
render () {
const { settings } = this.props;
const { collapsed } = this.state;
const alertStr = <FormattedMessage id='notifications.column_settings.alert' defaultMessage='Desktop notifications' />;
const showStr = <FormattedMessage id='notifications.column_settings.show' defaultMessage='Show in column' />;
return (
<div style={{ position: 'relative' }}>
<div style={{...iconStyle, color: collapsed ? '#9baec8' : '#fff', background: collapsed ? '#2f3441' : '#373b4a' }} onClick={this.handleToggleCollapsed}><i className='fa fa-sliders' /></div>
<Motion defaultStyle={{ opacity: 0, height: 0 }} style={{ opacity: spring(collapsed ? 0 : 100), height: spring(collapsed ? 0 : 458) }}>
{({ opacity, height }) =>
<div style={{ overflow: 'hidden', height: `${height}px`, opacity: opacity / 100 }}>
<div style={outerStyle}>
<span style={sectionStyle}><FormattedMessage id='notifications.column_settings.follow' defaultMessage='New followers:' /></span>
<div style={rowStyle}>
<label style={labelStyle}>
<Toggle checked={settings.getIn(['alerts', 'follow'])} onChange={this.handleChange.bind(this, ['alerts', 'follow'])} />
<span style={labelSpanStyle}>{alertStr}</span>
</label>
<label style={labelStyle}>
<Toggle checked={settings.getIn(['shows', 'follow'])} onChange={this.handleChange.bind(this, ['shows', 'follow'])} />
<span style={labelSpanStyle}>{showStr}</span>
</label>
</div>
<span style={sectionStyle}><FormattedMessage id='notifications.column_settings.favourite' defaultMessage='Favourites:' /></span>
<div style={rowStyle}>
<label style={labelStyle}>
<Toggle checked={settings.getIn(['alerts', 'favourite'])} onChange={this.handleChange.bind(this, ['alerts', 'favourite'])} />
<span style={labelSpanStyle}>{alertStr}</span>
</label>
<label style={labelStyle}>
<Toggle checked={settings.getIn(['shows', 'favourite'])} onChange={this.handleChange.bind(this, ['shows', 'favourite'])} />
<span style={labelSpanStyle}>{showStr}</span>
</label>
</div>
<span style={sectionStyle}><FormattedMessage id='notifications.column_settings.mention' defaultMessage='Mentions:' /></span>
<div style={rowStyle}>
<label style={labelStyle}>
<Toggle checked={settings.getIn(['alerts', 'mention'])} onChange={this.handleChange.bind(this, ['alerts', 'mention'])} />
<span style={labelSpanStyle}>{alertStr}</span>
</label>
<label style={labelStyle}>
<Toggle checked={settings.getIn(['shows', 'mention'])} onChange={this.handleChange.bind(this, ['shows', 'mention'])} />
<span style={labelSpanStyle}>{showStr}</span>
</label>
</div>
<span style={sectionStyle}><FormattedMessage id='notifications.column_settings.reblog' defaultMessage='Boosts:' /></span>
<div style={rowStyle}>
<label style={labelStyle}>
<Toggle checked={settings.getIn(['alerts', 'reblog'])} onChange={this.handleChange.bind(this, ['alerts', 'reblog'])} />
<span style={labelSpanStyle}>{alertStr}</span>
</label>
<label style={labelStyle}>
<Toggle checked={settings.getIn(['shows', 'reblog'])} onChange={this.handleChange.bind(this, ['shows', 'reblog'])} />
<span style={labelSpanStyle}>{showStr}</span>
</label>
</div>
</div>
</div>
}
</Motion>
</div>
);
}
});
export default ColumnSettings;