autonomic-cooperative/hometown
0
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

See #244 - Added notifications column settings to filter what's displayed

Browse Source 
in the column and what appears as desktop notifications. Settings do not
persist yet
This commit is contained in:
Eugen Rochko 2017-01-02 14:09:57 +01:00
parent 75122e162d
commit 65647a2472
7 changed files with 221 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -14,6 +14,8 @@ export const NOTIFICATIONS_EXPAND_REQUEST = 'NOTIFICATIONS_EXPAND_REQUEST';
export const NOTIFICATIONS_EXPAND_SUCCESS = 'NOTIFICATIONS_EXPAND_SUCCESS';
export const NOTIFICATIONS_EXPAND_FAIL = 'NOTIFICATIONS_EXPAND_FAIL';
export const NOTIFICATIONS_SETTING_CHANGE = 'NOTIFICATIONS_SETTING_CHANGE';
const fetchRelatedRelationships = (dispatch, notifications) => {
const accountIds = notifications.filter(item => item.type === 'follow').map(item => item.account.id);
@ -23,7 +25,7 @@ const fetchRelatedRelationships = (dispatch, notifications) => {
};
export function updateNotifications(notification, intlMessages, intlLocale) {
return dispatch => {
return (dispatch, getState) => {
dispatch({
type: NOTIFICATIONS_UPDATE,
notification,
@ -34,7 +36,7 @@ export function updateNotifications(notification, intlMessages, intlLocale) {
fetchRelatedRelationships(dispatch, [notification]);
// Desktop notifications
if (typeof window.Notification !== 'undefined') {
if (typeof window.Notification !== 'undefined' && getState().getIn(['notifications', 'settings', 'alerts', notification.type], false)) {
const title = new IntlMessageFormat(intlMessages[`notification.${notification.type}`], intlLocale).format({ name: notification.account.display_name.length > 0 ? notification.account.display_name : notification.account.username });
const body = $('<p>').html(notification.status ? notification.status.content : '').text();
@ -131,3 +133,11 @@ export function expandNotificationsFail(error) {
error
};
};
export function changeNotificationsSetting(key, checked) {
return {
type: NOTIFICATIONS_SETTING_CHANGE,
key,
checked
};
};

150
app/assets/javascripts/components/features/notifications/components/column_settings.jsx Normal file
View File

@ -0,0 +1,150 @@
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;

17
app/assets/javascripts/components/features/notifications/containers/column_settings_container.jsx Normal file
View File

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

14
app/assets/javascripts/components/features/notifications/index.jsx
View File

@ -9,13 +9,21 @@ import {
import NotificationContainer from './containers/notification_container';
import { ScrollContainer } from 'react-router-scroll';
import { defineMessages, injectIntl } from 'react-intl';
import ColumnSettingsContainer from './containers/column_settings_container';
import { createSelector } from 'reselect';
import Immutable from 'immutable';
const messages = defineMessages({
title: { id: 'column.notifications', defaultMessage: 'Notifications' }
});
const getNotifications = createSelector([
state => Immutable.List(state.getIn(['notifications', 'settings', 'shows']).filter(item => !item).keys()),
state => state.getIn(['notifications', 'items'])
], (excludedTypes, notifications) => notifications.filterNot(item => excludedTypes.includes(item.get('type'))));
const mapStateToProps = state => ({
notifications: state.getIn(['notifications', 'items'])
notifications: getNotifications(state)
});
const Notifications = React.createClass({
@ -23,7 +31,8 @@ const Notifications = React.createClass({
propTypes: {
notifications: ImmutablePropTypes.list.isRequired,
dispatch: React.PropTypes.func.isRequired,
trackScroll: React.PropTypes.bool
trackScroll: React.PropTypes.bool,
intl: React.PropTypes.object.isRequired
},
getDefaultProps () {
@ -69,6 +78,7 @@ const Notifications = React.createClass({
} else {
return (
<Column icon='bell' heading={intl.formatMessage(messages.title)}>
<ColumnSettingsContainer />
{scrollableArea}
</Column>
);

3
app/assets/javascripts/components/features/ui/components/column.jsx
View File

@ -40,7 +40,8 @@ const Column = React.createClass({
propTypes: {
heading: React.PropTypes.string,
icon: React.PropTypes.string
icon: React.PropTypes.string,
children: React.PropTypes.node
},
mixins: [PureRenderMixin],

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

@ -52,7 +52,13 @@ const en = {
"notification.follow": "{name} followed you",
"notification.favourite": "{name} favourited your status",
"notification.reblog": "{name} boosted your status",
"notification.mention": "{name} mentioned you"
"notification.mention": "{name} mentioned you",
"notifications.column_settings.alert": "Desktop notifications",
"notifications.column_settings.show": "Show in column",
"notifications.column_settings.follow": "New followers:",
"notifications.column_settings.favourite": "Favourites:",
"notifications.column_settings.mention": "Mentions:",
"notifications.column_settings.reblog": "Boosts:",
};
export default en;

23
app/assets/javascripts/components/reducers/notifications.jsx
View File

@ -1,7 +1,8 @@
import {
NOTIFICATIONS_UPDATE,
NOTIFICATIONS_REFRESH_SUCCESS,
NOTIFICATIONS_EXPAND_SUCCESS
NOTIFICATIONS_EXPAND_SUCCESS,
NOTIFICATIONS_SETTING_CHANGE
} from '../actions/notifications';
import { ACCOUNT_BLOCK_SUCCESS } from '../actions/accounts';
import Immutable from 'immutable';
@ -9,7 +10,23 @@ import Immutable from 'immutable';
const initialState = Immutable.Map({
items: Immutable.List(),
next: null,
loaded: false
loaded: false,
settings: Immutable.Map({
alerts: Immutable.Map({
follow: true,
favourite: true,
reblog: true,
mention: true
}),
shows: Immutable.Map({
follow: true,
favourite: true,
reblog: true,
mention: true
})
})
});
const notificationToMap = notification => Immutable.Map({
@ -58,6 +75,8 @@ export default function notifications(state = initialState, action) {
return appendNormalizedNotifications(state, action.notifications, action.next);
case ACCOUNT_BLOCK_SUCCESS:
return filterNotifications(state, action.relationship);
case NOTIFICATIONS_SETTING_CHANGE:
return state.setIn(['settings', ...action.key], action.checked);
default:
return state;
}