tarrien/Mastodon
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Home column filters

Browse Source
This commit is contained in:
Eugen Rochko
2017-01-10 17:25:10 +01:00
parent 1e9d2c4b1e
commit 312c51b5c8
16 changed files with 455 additions and 143 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
app/assets/javascripts/components/actions/settings.jsx
View File

@ -3,13 +3,15 @@ import axios from 'axios';
export const SETTING_CHANGE = 'SETTING_CHANGE';
export function changeSetting(key, value) {
return (dispatch, getState) => {
dispatch({
type: SETTING_CHANGE,
key,
value
});
return {
type: SETTING_CHANGE,
key,
value
};
};
export function saveSettings() {
return (_, getState) => {
axios.put('/api/web/settings', {
data: getState().get('settings').toJS()
});

60
app/assets/javascripts/components/components/column_collapsable.jsx Normal file
View File

@ -0,0 +1,60 @@
import PureRenderMixin from 'react-addons-pure-render-mixin';
import { Motion, spring } from 'react-motion';
const iconStyle = {
fontSize: '16px',
padding: '15px',
position: 'absolute',
right: '0',
top: '-48px',
cursor: 'pointer'
};
const ColumnCollapsable = React.createClass({
propTypes: {
icon: React.PropTypes.string.isRequired,
fullHeight: React.PropTypes.number.isRequired,
children: React.PropTypes.node,
onCollapse: React.PropTypes.func
},
getInitialState () {
return {
collapsed: true
};
},
mixins: [PureRenderMixin],
handleToggleCollapsed () {
const currentState = this.state.collapsed;
this.setState({ collapsed: !currentState });
if (!currentState && this.props.onCollapse) {
this.props.onCollapse();
}
},
render () {
const { icon, fullHeight, children } = this.props;
const { collapsed } = this.state;
return (
<div style={{ position: 'relative' }}>
<div style={{...iconStyle, color: collapsed ? '#9baec8' : '#fff', background: collapsed ? '#2f3441' : '#373b4a' }} onClick={this.handleToggleCollapsed}><i className={`fa fa-${icon}`} /></div>
<Motion defaultStyle={{ opacity: 0, height: 0 }} style={{ opacity: spring(collapsed ? 0 : 100), height: spring(collapsed ? 0 : fullHeight) }}>
{({ opacity, height }) =>
<div style={{ overflow: 'hidden', height: `${height}px`, opacity: opacity / 100 }}>
{children}
</div>
}
</Motion>
</div>
);
}
});
export default ColumnCollapsable;

68
app/assets/javascripts/components/features/home_timeline/components/column_settings.jsx Normal file
View File

@ -0,0 +1,68 @@
import PureRenderMixin from 'react-addons-pure-render-mixin';
import ImmutablePropTypes from 'react-immutable-proptypes';
import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
import ColumnCollapsable from '../../../components/column_collapsable';
import SettingToggle from '../../notifications/components/setting_toggle';
import SettingText from './setting_text';
const messages = defineMessages({
filter_regex: { id: 'home.column_settings.filter_regex', defaultMessage: 'Filter by regular expressions' }
});
const outerStyle = {
background: '#373b4a',
padding: '15px'
};
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,
onSave: React.PropTypes.func.isRequired,
intl: React.PropTypes.object.isRequired
},
mixins: [PureRenderMixin],
render () {
const { settings, onChange, onSave, intl } = this.props;
return (
<ColumnCollapsable icon='sliders' fullHeight={209} onCollapse={onSave}>
<div style={outerStyle}>
<span style={sectionStyle}><FormattedMessage id='home.column_settings.basic' defaultMessage='Basic' /></span>
<div style={rowStyle}>
<SettingToggle settings={settings} settingKey={['shows', 'reblog']} onChange={onChange} label={<FormattedMessage id='home.column_settings.show_reblogs' defaultMessage='Show reblogs' />} />
</div>
<div style={rowStyle}>
<SettingToggle settings={settings} settingKey={['shows', 'reply']} onChange={onChange} label={<FormattedMessage id='home.column_settings.show_replies' defaultMessage='Show replies' />} />
</div>
<span style={sectionStyle}><FormattedMessage id='home.column_settings.advanced' defaultMessage='Advanced' /></span>
<div style={rowStyle}>
<SettingText settings={settings} settingKey={['regex', 'body']} onChange={onChange} label={intl.formatMessage(messages.filter_regex)} />
</div>
</div>
</ColumnCollapsable>
);
}
});
export default injectIntl(ColumnSettings);

41
app/assets/javascripts/components/features/home_timeline/components/setting_text.jsx Normal file
View File

@ -0,0 +1,41 @@
import ImmutablePropTypes from 'react-immutable-proptypes';
const style = {
display: 'block',
fontFamily: 'inherit',
marginBottom: '10px',
padding: '7px 0',
boxSizing: 'border-box',
width: '100%'
};
const SettingText = React.createClass({
propTypes: {
settings: ImmutablePropTypes.map.isRequired,
settingKey: React.PropTypes.array.isRequired,
label: React.PropTypes.string.isRequired,
onChange: React.PropTypes.func.isRequired
},
handleChange (e) {
this.props.onChange(this.props.settingKey, e.target.value)
},
render () {
const { settings, settingKey, label } = this.props;
return (
<input
style={style}
className='setting-text'
value={settings.getIn(settingKey)}
onChange={this.handleChange}
placeholder={label}
/>
);
}
});
export default SettingText;

21
app/assets/javascripts/components/features/home_timeline/containers/column_settings_container.jsx Normal file
View File

@ -0,0 +1,21 @@
import { connect } from 'react-redux';
import ColumnSettings from '../components/column_settings';
import { changeSetting, saveSettings } from '../../../actions/settings';
const mapStateToProps = state => ({
settings: state.getIn(['settings', 'home'])
});
const mapDispatchToProps = dispatch => ({
onChange (key, checked) {
dispatch(changeSetting(['home', ...key], checked));
},
onSave () {
dispatch(saveSettings());
}
});
export default connect(mapStateToProps, mapDispatchToProps)(ColumnSettings);

5
app/assets/javascripts/components/features/home_timeline/index.jsx
View File

@ -4,6 +4,7 @@ import StatusListContainer from '../ui/containers/status_list_container';
import Column from '../ui/components/column';
import { refreshTimeline } from '../../actions/timelines';
import { defineMessages, injectIntl } from 'react-intl';
import ColumnSettingsContainer from './containers/column_settings_container';
const messages = defineMessages({
title: { id: 'column.home', defaultMessage: 'Home' }
@ -12,7 +13,8 @@ const messages = defineMessages({
const HomeTimeline = React.createClass({
propTypes: {
dispatch: React.PropTypes.func.isRequired
dispatch: React.PropTypes.func.isRequired,
intl: React.PropTypes.object.isRequired
},
mixins: [PureRenderMixin],
@ -26,6 +28,7 @@ const HomeTimeline = React.createClass({
return (
<Column icon='home' heading={intl.formatMessage(messages.title)}>
<ColumnSettingsContainer />
<StatusListContainer {...this.props} type='home' />
</Column>
);

131
app/assets/javascripts/components/features/notifications/components/column_settings.jsx
View File

@ -1,37 +1,14 @@
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';
import ColumnCollapsable from '../../../components/column_collapsable';
import SettingToggle from './setting_toggle';
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',
@ -48,100 +25,50 @@ const ColumnSettings = React.createClass({
propTypes: {
settings: ImmutablePropTypes.map.isRequired,
onChange: React.PropTypes.func.isRequired
},
getInitialState () {
return {
collapsed: true
};
onChange: React.PropTypes.func.isRequired,
onSave: React.PropTypes.func.isRequired
},
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 { settings, onChange, onSave } = this.props;
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>
<ColumnCollapsable icon='sliders' fullHeight={458} onCollapse={onSave}>
<div style={outerStyle}>
<span style={sectionStyle}><FormattedMessage id='notifications.column_settings.follow' defaultMessage='New followers:' /></span>
<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}>
<SettingToggle settings={settings} settingKey={['alerts', 'follow']} onChange={onChange} label={alertStr} />
<SettingToggle settings={settings} settingKey={['shows', 'follow']} onChange={onChange} label={showStr} />
</div>
<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>
<span style={sectionStyle}><FormattedMessage id='notifications.column_settings.favourite' defaultMessage='Favourites:' /></span>
<label style={labelStyle}>
<Toggle checked={settings.getIn(['shows', 'follow'])} onChange={this.handleChange.bind(this, ['shows', 'follow'])} />
<span style={labelSpanStyle}>{showStr}</span>
</label>
</div>
<div style={rowStyle}>
<SettingToggle settings={settings} settingKey={['alerts', 'favourite']} onChange={onChange} label={alertStr} />
<SettingToggle settings={settings} settingKey={['shows', 'favourite']} onChange={onChange} label={showStr} />
</div>
<span style={sectionStyle}><FormattedMessage id='notifications.column_settings.favourite' defaultMessage='Favourites:' /></span>
<span style={sectionStyle}><FormattedMessage id='notifications.column_settings.mention' defaultMessage='Mentions:' /></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>
<div style={rowStyle}>
<SettingToggle settings={settings} settingKey={['alerts', 'mention']} onChange={onChange} label={alertStr} />
<SettingToggle settings={settings} settingKey={['shows', 'mention']} onChange={onChange} label={showStr} />
</div>
<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.reblog' defaultMessage='Boosts:' /></span>
<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>
<div style={rowStyle}>
<SettingToggle settings={settings} settingKey={['alerts', 'reblog']} onChange={onChange} label={alertStr} />
<SettingToggle settings={settings} settingKey={['shows', 'reblog']} onChange={onChange} label={showStr} />
</div>
</div>
</ColumnCollapsable>
);
}

32
app/assets/javascripts/components/features/notifications/components/setting_toggle.jsx Normal file
View File

@ -0,0 +1,32 @@
import ImmutablePropTypes from 'react-immutable-proptypes';
import Toggle from 'react-toggle';
const labelStyle = {
display: 'block',
lineHeight: '24px',
verticalAlign: 'middle'
};
const labelSpanStyle = {
display: 'inline-block',
verticalAlign: 'middle',
marginBottom: '14px',
marginLeft: '8px',
color: '#9baec8'
};
const SettingToggle = ({ settings, settingKey, label, onChange }) => (
<label style={labelStyle}>
<Toggle checked={settings.getIn(settingKey)} onChange={(e) => onChange(settingKey, e.target.checked)} />
<span style={labelSpanStyle}>{label}</span>
</label>
);
SettingToggle.propTypes = {
settings: ImmutablePropTypes.map.isRequired,
settingKey: React.PropTypes.array.isRequired,
label: React.PropTypes.node.isRequired,
onChange: React.PropTypes.func.isRequired
};
export default SettingToggle;

6
app/assets/javascripts/components/features/notifications/containers/column_settings_container.jsx
View File

@ -1,6 +1,6 @@
import { connect } from 'react-redux';
import ColumnSettings from '../components/column_settings';
import { changeSetting } from '../../../actions/settings';
import { changeSetting, saveSettings } from '../../../actions/settings';
const mapStateToProps = state => ({
settings: state.getIn(['settings', 'notifications'])
@ -10,6 +10,10 @@ const mapDispatchToProps = dispatch => ({
onChange (key, checked) {
dispatch(changeSetting(['notifications', ...key], checked));
},
onSave () {
dispatch(saveSettings());
}
});

59
app/assets/javascripts/components/features/ui/containers/status_list_container.jsx
View File

@ -2,26 +2,55 @@ import { connect } from 'react-redux';
import StatusList from '../../../components/status_list';
import { expandTimeline, scrollTopTimeline } from '../../../actions/timelines';
import Immutable from 'immutable';
import { createSelector } from 'reselect';
const getStatusIds = createSelector([
(state, { type }) => state.getIn(['settings', type]),
(state, { type }) => state.getIn(['timelines', type, 'items'], Immutable.List()),
(state) => state.get('statuses')
], (columnSettings, statusIds, statuses) => statusIds.filter(id => {
const statusForId = statuses.get(id);
let showStatus = true;
if (columnSettings.getIn(['shows', 'reblog']) === false) {
showStatus = showStatus && statusForId.get('reblog') === null;
}
if (columnSettings.getIn(['shows', 'reply']) === false) {
showStatus = showStatus && statusForId.get('in_reply_to_id') === null;
}
if (columnSettings.getIn(['regex', 'body'], '').trim().length > 0) {
try {
const regex = new RegExp(columnSettings.getIn(['regex', 'body']).trim(), 'i');
showStatus = showStatus && !regex.test(statusForId.get('reblog') ? statuses.getIn([statusForId.get('reblog'), 'content']) : statusForId.get('content'));
} catch(e) {
// Bad regex, don't affect filters
}
}
return showStatus;
}));
const mapStateToProps = (state, props) => ({
statusIds: state.getIn(['timelines', props.type, 'items'], Immutable.List())
statusIds: getStatusIds(state, props)
});
const mapDispatchToProps = function (dispatch, props) {
return {
onScrollToBottom () {
dispatch(scrollTopTimeline(props.type, false));
dispatch(expandTimeline(props.type, props.id));
},
const mapDispatchToProps = (dispatch, { type, id }) => ({
onScrollToTop () {
dispatch(scrollTopTimeline(props.type, true));
},
onScrollToBottom () {
dispatch(scrollTopTimeline(type, false));
dispatch(expandTimeline(type, id));
},
onScroll () {
dispatch(scrollTopTimeline(props.type, false));
}
};
};
onScrollToTop () {
dispatch(scrollTopTimeline(type, true));
},
onScroll () {
dispatch(scrollTopTimeline(type, false));
}
});
export default connect(mapStateToProps, mapDispatchToProps)(StatusList);

8
app/assets/javascripts/components/locales/de.jsx
View File

@ -65,7 +65,13 @@ const en = {
"notifications.column_settings.mention": "Erwähnungen:",
"notifications.column_settings.reblog": "Geteilte Beiträge:",
"follow_request.authorize": "Erlauben",
"follow_request.reject": "Ablehnen"
"follow_request.reject": "Ablehnen",
"home.column_settings.basic": "Einfach",
"home.column_settings.advanced": "Fortgeschritten",
"home.column_settings.show_reblogs": "Geteilte Beiträge anzeigen",
"home.column_settings.show_replies": "Antworten anzeigen",
"home.column_settings.filter_regex": "Filter durch reguläre Ausdrücke",
"missing_indicator.label": "Nicht gefunden"
};
export default en;

7
app/assets/javascripts/components/reducers/settings.jsx
View File

@ -3,6 +3,13 @@ import { STORE_HYDRATE } from '../actions/store';
import Immutable from 'immutable';
const initialState = Immutable.Map({
home: Immutable.Map({
shows: Immutable.Map({
reblog: true,
reply: true
})
}),
notifications: Immutable.Map({
alerts: Immutable.Map({
follow: true,

14
app/assets/stylesheets/components.scss
View File

@ -649,4 +649,16 @@
right: 8px !important;
left: initial !important;
}
}
}
.setting-text {
color: #9baec8;
background: transparent;
border: none;
border-bottom: 2px solid #9baec8;
&:focus, &:active {
color: #fff;
border-bottom-color: #2b90d9;
}
}

2
app/controllers/api/web/settings_controller.rb
View File

@ -6,7 +6,7 @@ class Api::Web::SettingsController < ApiController
before_action :require_user!
def update
setting = Web::Setting.where(user: current_user).first_or_initialize(user: current_user)
setting = ::Web::Setting.where(user: current_user).first_or_initialize(user: current_user)
setting.data = params[:data]
setting.save!