|
|
- 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;
|