diff --git a/app/javascript/mastodon/actions/notifications.js b/app/javascript/mastodon/actions/notifications.js
index d24f39ad2b2..4c145febc4f 100644
--- a/app/javascript/mastodon/actions/notifications.js
+++ b/app/javascript/mastodon/actions/notifications.js
@@ -8,6 +8,7 @@ import {
importFetchedStatuses,
} from './importer';
import { defineMessages } from 'react-intl';
+import { List as ImmutableList } from 'immutable';
import { unescapeHTML } from '../utils/html';
import { getFilters, regexFromFilters } from '../selectors';
@@ -18,6 +19,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_FILTER_SET = 'NOTIFICATIONS_FILTER_SET';
+
export const NOTIFICATIONS_CLEAR = 'NOTIFICATIONS_CLEAR';
export const NOTIFICATIONS_SCROLL_TOP = 'NOTIFICATIONS_SCROLL_TOP';
@@ -88,10 +91,16 @@ export function updateNotifications(notification, intlMessages, intlLocale) {
const excludeTypesFromSettings = state => state.getIn(['settings', 'notifications', 'shows']).filter(enabled => !enabled).keySeq().toJS();
+const excludeTypesFromFilter = filter => {
+ const allTypes = ImmutableList(['follow', 'favourite', 'reblog', 'mention']);
+ return allTypes.filterNot(item => item === filter).toJS();
+};
+
const noOp = () => {};
export function expandNotifications({ maxId } = {}, done = noOp) {
return (dispatch, getState) => {
+ const activeFilter = getState().getIn(['settings', 'notifications', 'quickFilter', 'active']);
const notifications = getState().get('notifications');
const isLoadingMore = !!maxId;
@@ -102,7 +111,9 @@ export function expandNotifications({ maxId } = {}, done = noOp) {
const params = {
max_id: maxId,
- exclude_types: excludeTypesFromSettings(getState()),
+ exclude_types: activeFilter === 'all'
+ ? excludeTypesFromSettings(getState())
+ : excludeTypesFromFilter(activeFilter),
};
if (!maxId && notifications.get('items').size > 0) {
@@ -167,3 +178,14 @@ export function scrollTopNotifications(top) {
top,
};
};
+
+export function setFilter (filterType) {
+ return dispatch => {
+ dispatch({
+ type: NOTIFICATIONS_FILTER_SET,
+ path: ['notifications', 'quickFilter', 'active'],
+ value: filterType,
+ });
+ dispatch(expandNotifications());
+ };
+};
diff --git a/app/javascript/mastodon/features/notifications/components/column_settings.js b/app/javascript/mastodon/features/notifications/components/column_settings.js
index fcdf5c6e65c..a334fd63cc8 100644
--- a/app/javascript/mastodon/features/notifications/components/column_settings.js
+++ b/app/javascript/mastodon/features/notifications/components/column_settings.js
@@ -21,9 +21,11 @@ export default class ColumnSettings extends React.PureComponent {
render () {
const { settings, pushSettings, onChange, onClear } = this.props;
- const alertStr = ;
- const showStr = ;
- const soundStr = ;
+ const filterShowStr = ;
+ const filterAdvancedStr = ;
+ const alertStr = ;
+ const showStr = ;
+ const soundStr = ;
const showPushSettings = pushSettings.get('browserSupport') && pushSettings.get('isSubscribed');
const pushStr = showPushSettings && ;
@@ -34,6 +36,16 @@ export default class ColumnSettings extends React.PureComponent {
+
diff --git a/app/javascript/mastodon/features/notifications/components/filter_bar.js b/app/javascript/mastodon/features/notifications/components/filter_bar.js
new file mode 100644
index 00000000000..f95a2c9dea6
--- /dev/null
+++ b/app/javascript/mastodon/features/notifications/components/filter_bar.js
@@ -0,0 +1,93 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
+
+const tooltips = defineMessages({
+ mentions: { id: 'notifications.filter.mentions', defaultMessage: 'Mentions' },
+ favourites: { id: 'notifications.filter.favourites', defaultMessage: 'Favourites' },
+ boosts: { id: 'notifications.filter.boosts', defaultMessage: 'Boosts' },
+ follows: { id: 'notifications.filter.follows', defaultMessage: 'Follows' },
+});
+
+export default @injectIntl
+class FilterBar extends React.PureComponent {
+
+ static propTypes = {
+ selectFilter: PropTypes.func.isRequired,
+ selectedFilter: PropTypes.string.isRequired,
+ advancedMode: PropTypes.bool.isRequired,
+ intl: PropTypes.object.isRequired,
+ };
+
+ onClick (notificationType) {
+ return () => this.props.selectFilter(notificationType);
+ }
+
+ render () {
+ const { selectedFilter, advancedMode, intl } = this.props;
+ const renderedElement = !advancedMode ? (
+
+
+
+
+ ) : (
+
+
+
+
+
+
+
+ );
+ return renderedElement;
+ }
+
+}
diff --git a/app/javascript/mastodon/features/notifications/containers/column_settings_container.js b/app/javascript/mastodon/features/notifications/containers/column_settings_container.js
index e9cef0a7bc3..a67f262953f 100644
--- a/app/javascript/mastodon/features/notifications/containers/column_settings_container.js
+++ b/app/javascript/mastodon/features/notifications/containers/column_settings_container.js
@@ -2,6 +2,7 @@ import { connect } from 'react-redux';
import { defineMessages, injectIntl } from 'react-intl';
import ColumnSettings from '../components/column_settings';
import { changeSetting } from '../../../actions/settings';
+import { setFilter } from '../../../actions/notifications';
import { clearNotifications } from '../../../actions/notifications';
import { changeAlerts as changePushNotifications } from '../../../actions/push_notifications';
import { openModal } from '../../../actions/modal';
@@ -21,6 +22,9 @@ const mapDispatchToProps = (dispatch, { intl }) => ({
onChange (path, checked) {
if (path[0] === 'push') {
dispatch(changePushNotifications(path.slice(1), checked));
+ } else if (path[0] === 'quickFilter') {
+ dispatch(changeSetting(['notifications', ...path], checked));
+ dispatch(setFilter('all'));
} else {
dispatch(changeSetting(['notifications', ...path], checked));
}
diff --git a/app/javascript/mastodon/features/notifications/containers/filter_bar_container.js b/app/javascript/mastodon/features/notifications/containers/filter_bar_container.js
new file mode 100644
index 00000000000..4d495c29081
--- /dev/null
+++ b/app/javascript/mastodon/features/notifications/containers/filter_bar_container.js
@@ -0,0 +1,16 @@
+import { connect } from 'react-redux';
+import FilterBar from '../components/filter_bar';
+import { setFilter } from '../../../actions/notifications';
+
+const makeMapStateToProps = state => ({
+ selectedFilter: state.getIn(['settings', 'notifications', 'quickFilter', 'active']),
+ advancedMode: state.getIn(['settings', 'notifications', 'quickFilter', 'advanced']),
+});
+
+const mapDispatchToProps = (dispatch) => ({
+ selectFilter (newActiveFilter) {
+ dispatch(setFilter(newActiveFilter));
+ },
+});
+
+export default connect(makeMapStateToProps, mapDispatchToProps)(FilterBar);
diff --git a/app/javascript/mastodon/features/notifications/index.js b/app/javascript/mastodon/features/notifications/index.js
index aa82dbbb979..9430b205050 100644
--- a/app/javascript/mastodon/features/notifications/index.js
+++ b/app/javascript/mastodon/features/notifications/index.js
@@ -9,6 +9,7 @@ import { addColumn, removeColumn, moveColumn } from '../../actions/columns';
import NotificationContainer from './containers/notification_container';
import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
import ColumnSettingsContainer from './containers/column_settings_container';
+import FilterBarContainer from './containers/filter_bar_container';
import { createSelector } from 'reselect';
import { List as ImmutableList } from 'immutable';
import { debounce } from 'lodash';
@@ -20,11 +21,22 @@ const messages = defineMessages({
});
const getNotifications = createSelector([
+ state => state.getIn(['settings', 'notifications', 'quickFilter', 'show']),
+ state => state.getIn(['settings', 'notifications', 'quickFilter', 'active']),
state => ImmutableList(state.getIn(['settings', 'notifications', 'shows']).filter(item => !item).keys()),
state => state.getIn(['notifications', 'items']),
-], (excludedTypes, notifications) => notifications.filterNot(item => item !== null && excludedTypes.includes(item.get('type'))));
+], (showFilterBar, allowedType, excludedTypes, notifications) => {
+ if (!showFilterBar || allowedType === 'all') {
+ // used if user changed the notification settings after loading the notifications from the server
+ // otherwise a list of notifications will come pre-filtered from the backend
+ // we need to turn it off for FilterBar in order not to block ourselves from seeing a specific category
+ return notifications.filterNot(item => item !== null && excludedTypes.includes(item.get('type')));
+ }
+ return notifications.filter(item => item !== null && allowedType === item.get('type'));
+});
const mapStateToProps = state => ({
+ showFilterBar: state.getIn(['settings', 'notifications', 'quickFilter', 'show']),
notifications: getNotifications(state),
isLoading: state.getIn(['notifications', 'isLoading'], true),
isUnread: state.getIn(['notifications', 'unread']) > 0,
@@ -38,6 +50,7 @@ class Notifications extends React.PureComponent {
static propTypes = {
columnId: PropTypes.string,
notifications: ImmutablePropTypes.list.isRequired,
+ showFilterBar: PropTypes.bool.isRequired,
dispatch: PropTypes.func.isRequired,
shouldUpdateScroll: PropTypes.func,
intl: PropTypes.object.isRequired,
@@ -117,12 +130,16 @@ class Notifications extends React.PureComponent {
}
render () {
- const { intl, notifications, shouldUpdateScroll, isLoading, isUnread, columnId, multiColumn, hasMore } = this.props;
+ const { intl, notifications, shouldUpdateScroll, isLoading, isUnread, columnId, multiColumn, hasMore, showFilterBar } = this.props;
const pinned = !!columnId;
const emptyMessage =
;
let scrollableContent = null;
+ const filterBarContainer = showFilterBar
+ ? (
)
+ : null;
+
if (isLoading && this.scrollableContent) {
scrollableContent = this.scrollableContent;
} else if (notifications.size > 0 || hasMore) {
@@ -179,7 +196,7 @@ class Notifications extends React.PureComponent {
>
-
+ {filterBarContainer}
{scrollContainer}
);
diff --git a/app/javascript/mastodon/locales/en.json b/app/javascript/mastodon/locales/en.json
index 9a15d84b705..414b9def333 100644
--- a/app/javascript/mastodon/locales/en.json
+++ b/app/javascript/mastodon/locales/en.json
@@ -223,6 +223,14 @@
"notification.reblog": "{name} boosted your status",
"notifications.clear": "Clear notifications",
"notifications.clear_confirmation": "Are you sure you want to permanently clear all your notifications?",
+ "notifications.filter.all": "All",
+ "notifications.filter.mentions": "Mentions",
+ "notifications.filter.favourites": "Favourites",
+ "notifications.filter.boosts": "Boosts",
+ "notifications.filter.follows": "Follows",
+ "notifications.column_settings.filter_bar.category": "Quick filter bar",
+ "notifications.column_settings.filter_bar.show": "Show",
+ "notifications.column_settings.filter_bar.advanced": "Display all categories",
"notifications.column_settings.alert": "Desktop notifications",
"notifications.column_settings.favourite": "Favourites:",
"notifications.column_settings.follow": "New followers:",
diff --git a/app/javascript/mastodon/locales/pl.json b/app/javascript/mastodon/locales/pl.json
index ae673cf9f5e..0589b06f594 100644
--- a/app/javascript/mastodon/locales/pl.json
+++ b/app/javascript/mastodon/locales/pl.json
@@ -223,6 +223,14 @@
"notification.reblog": "{name} podbił(a) Twój wpis",
"notifications.clear": "Wyczyść powiadomienia",
"notifications.clear_confirmation": "Czy na pewno chcesz bezpowrotnie usunąć wszystkie powiadomienia?",
+ "notifications.filter.all": "Wszystkie",
+ "notifications.filter.mentions": "Wspomnienia",
+ "notifications.filter.favourites": "Ulubione",
+ "notifications.filter.boosts": "Podbicia",
+ "notifications.filter.follows": "Śledzenia",
+ "notifications.column_settings.filter_bar.category": "Szybkie filtrowanie",
+ "notifications.column_settings.filter_bar.show": "Pokaż",
+ "notifications.column_settings.filter_bar.advanced": "Wyświetl wszystkie kategorie",
"notifications.column_settings.alert": "Powiadomienia na pulpicie",
"notifications.column_settings.favourite": "Dodanie do ulubionych:",
"notifications.column_settings.follow": "Nowi śledzący:",
diff --git a/app/javascript/mastodon/reducers/notifications.js b/app/javascript/mastodon/reducers/notifications.js
index d71ae00aec3..19a02f5b154 100644
--- a/app/javascript/mastodon/reducers/notifications.js
+++ b/app/javascript/mastodon/reducers/notifications.js
@@ -3,6 +3,7 @@ import {
NOTIFICATIONS_EXPAND_SUCCESS,
NOTIFICATIONS_EXPAND_REQUEST,
NOTIFICATIONS_EXPAND_FAIL,
+ NOTIFICATIONS_FILTER_SET,
NOTIFICATIONS_CLEAR,
NOTIFICATIONS_SCROLL_TOP,
} from '../actions/notifications';
@@ -98,6 +99,8 @@ export default function notifications(state = initialState, action) {
return state.set('isLoading', true);
case NOTIFICATIONS_EXPAND_FAIL:
return state.set('isLoading', false);
+ case NOTIFICATIONS_FILTER_SET:
+ return state.set('items', ImmutableList()).set('hasMore', true);
case NOTIFICATIONS_SCROLL_TOP:
return updateTop(state, action.top);
case NOTIFICATIONS_UPDATE:
diff --git a/app/javascript/mastodon/reducers/settings.js b/app/javascript/mastodon/reducers/settings.js
index 12bcc2583fa..2e1878cf782 100644
--- a/app/javascript/mastodon/reducers/settings.js
+++ b/app/javascript/mastodon/reducers/settings.js
@@ -1,4 +1,5 @@
import { SETTING_CHANGE, SETTING_SAVE } from '../actions/settings';
+import { NOTIFICATIONS_FILTER_SET } from '../actions/notifications';
import { COLUMN_ADD, COLUMN_REMOVE, COLUMN_MOVE, COLUMN_PARAMS_CHANGE } from '../actions/columns';
import { STORE_HYDRATE } from '../actions/store';
import { EMOJI_USE } from '../actions/emojis';
@@ -32,6 +33,12 @@ const initialState = ImmutableMap({
mention: true,
}),
+ quickFilter: ImmutableMap({
+ active: 'all',
+ show: true,
+ advanced: false,
+ }),
+
shows: ImmutableMap({
follow: true,
favourite: true,
@@ -112,6 +119,7 @@ export default function settings(state = initialState, action) {
switch(action.type) {
case STORE_HYDRATE:
return hydrate(state, action.state.get('settings'));
+ case NOTIFICATIONS_FILTER_SET:
case SETTING_CHANGE:
return state
.setIn(action.path, action.value)
diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss
index c880e99a9f6..1c1b8c50676 100644
--- a/app/javascript/styles/mastodon/components.scss
+++ b/app/javascript/styles/mastodon/components.scss
@@ -1484,6 +1484,52 @@ a.account__display-name {
}
}
+.notification__filter-bar {
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: space-between;
+ background: $ui-base-color;
+
+ & > button {
+ position: relative;
+ flex-grow: 1;
+ color: $primary-text-color;
+ padding: 10px 5px 12px;
+ text-decoration: none;
+ font-weight: 400;
+ font-size: 15px;
+ line-height: 18px;
+ background: darken($ui-base-color, 4%);
+ border: 0;
+ border-bottom: 1px solid lighten($ui-base-color, 8%);
+ cursor: default;
+
+ &.active {
+ color: $secondary-text-color;
+
+ &::before,
+ &::after {
+ display: block;
+ content: "";
+ position: absolute;
+ bottom: 0;
+ left: 50%;
+ width: 0;
+ height: 0;
+ transform: translateX(-50%);
+ border-style: solid;
+ border-width: 0 10px 10px;
+ border-color: transparent transparent lighten($ui-base-color, 8%);
+ }
+
+ &::after {
+ bottom: -1px;
+ border-color: transparent transparent $ui-base-color;
+ }
+ }
+ }
+}
+
.notification__message {
margin: 0 10px 0 68px;
padding: 8px 0 0;