mirror of https://github.com/mastodon/mastodon
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 9f4be78571.
* reset filter to 'all' when turning off FilterBar
pull/9537/head
Paweł Ngei
7 years ago
committed by
Eugen Rochko
parent
5f0d3e8bad
commit
13dce12665
@ -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;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
@ -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);
|
||||||
Loading…
Reference in New Issue