Add notification quick-filter bar in the frontend app (#9399)

* create FilterBar componer and its container, unstyled

* introduce basic styling for FilterBar

* add selection css

* allow FilterBar to display active CSS with js

* connect the FilterBar to the Redux state

* change getNotifications to use filter

* remove temporary comments

* add an option to turn the FilterBar off in settings

* fix showFilterBar data type to boolean

* fix eslint errors

* add English and Polish translations

* allowed filter bar overflow to accomodate for longer languages

* fix mispelled translation key

* add unified CSS look

* replace text in FilterBar with icons

* add tooltips

* replace text @ with an icon

* introduce simple and advanced filtering view

* add ability to toggle the advanced view

* add Polish translations

* change Advanced View description to be more clear

* make each filter flush notifications and load new ones, fixing pagination

* simplify getNotifications once frontend filtering is not needed for FilterBar

* add a semicolon

* Revert "simplify getNotifications once frontend filtering is not needed for FilterBar"

This reverts commit 9f4be7857135b0327814bd22a3e8a4e7b546f7cc.

* reset filter to 'all' when turning off FilterBar
This commit is contained in:
Paweł Ngei
2018-12-16 05:56:41 +01:00
committed by Eugen Rochko
parent 5f0d3e8bad
commit 13dce12665
11 changed files with 244 additions and 7 deletions

View File

@ -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)