151 lines
5.3 KiB
JavaScript
151 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;
|