forked from mastodon/mastodon
-
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Add notification quick-filter bar in the frontend app (mastodon#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 9f4be78. * reset filter to 'all' when turning off FilterBar
- Loading branch information
1 parent
356ed3c
commit 00b9600
Showing
11 changed files
with
244 additions
and
7 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
93 changes: 93 additions & 0 deletions
93
app/javascript/mastodon/features/notifications/components/filter_bar.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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 ? ( | ||
| <div className='notification__filter-bar'> | ||
| <button | ||
| className={selectedFilter === 'all' ? 'active' : ''} | ||
| onClick={this.onClick('all')} | ||
| > | ||
| <FormattedMessage | ||
| id='notifications.filter.all' | ||
| defaultMessage='All' | ||
| /> | ||
| </button> | ||
| <button | ||
| className={selectedFilter === 'mention' ? 'active' : ''} | ||
| onClick={this.onClick('mention')} | ||
| > | ||
| <FormattedMessage | ||
| id='notifications.filter.mentions' | ||
| defaultMessage='Mentions' | ||
| /> | ||
| </button> | ||
| </div> | ||
| ) : ( | ||
| <div className='notification__filter-bar'> | ||
| <button | ||
| className={selectedFilter === 'all' ? 'active' : ''} | ||
| onClick={this.onClick('all')} | ||
| > | ||
| <FormattedMessage | ||
| id='notifications.filter.all' | ||
| defaultMessage='All' | ||
| /> | ||
| </button> | ||
| <button | ||
| className={selectedFilter === 'mention' ? 'active' : ''} | ||
| onClick={this.onClick('mention')} | ||
| title={intl.formatMessage(tooltips.mentions)} | ||
| > | ||
| <i className='fa fa-fw fa-at' /> | ||
| </button> | ||
| <button | ||
| className={selectedFilter === 'favourite' ? 'active' : ''} | ||
| onClick={this.onClick('favourite')} | ||
| title={intl.formatMessage(tooltips.favourites)} | ||
| > | ||
| <i className='fa fa-fw fa-star' /> | ||
| </button> | ||
| <button | ||
| className={selectedFilter === 'reblog' ? 'active' : ''} | ||
| onClick={this.onClick('reblog')} | ||
| title={intl.formatMessage(tooltips.boosts)} | ||
| > | ||
| <i className='fa fa-fw fa-retweet' /> | ||
| </button> | ||
| <button | ||
| className={selectedFilter === 'follow' ? 'active' : ''} | ||
| onClick={this.onClick('follow')} | ||
| title={intl.formatMessage(tooltips.follows)} | ||
| > | ||
| <i className='fa fa-fw fa-user-plus' /> | ||
| </button> | ||
| </div> | ||
| ); | ||
| return renderedElement; | ||
| } | ||
|
|
||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
16 changes: 16 additions & 0 deletions
16
app/javascript/mastodon/features/notifications/containers/filter_bar_container.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.