OpenCloud
/
mastodon
mirror of https://github.com/tootsuite/mastodon
1
1
Fork 0
Code Issues Releases Wiki Activity

add tooltips

pull/9399/head
alxd 2018-12-03 09:21:20 +01:00
parent b147d7c444
commit 27f8158288
1 changed files with 16 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

43
app/javascript/mastodon/features/notifications/components/filter_bar.js
View File

@ -1,12 +1,21 @@
import React from 'react'; import React from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import { FormattedMessage } from 'react-intl'; import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
export default class FilterBar extends React.PureComponent { 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 = { static propTypes = {
selectFilter: PropTypes.func.isRequired, selectFilter: PropTypes.func.isRequired,
selectedFilter: PropTypes.string.isRequired, selectedFilter: PropTypes.string.isRequired,
intl: PropTypes.object.isRequired,
}; };
onClick (notificationType) { onClick (notificationType) {
@ -14,7 +23,7 @@ export default class FilterBar extends React.PureComponent {
} }
render () { render () {
const { selectedFilter } = this.props; const { selectedFilter, intl } = this.props;
return ( return (
<div className='notification__filter-bar'> <div className='notification__filter-bar'>
<button <button
@ -29,49 +38,29 @@ export default class FilterBar extends React.PureComponent {
<button <button
className={selectedFilter === 'mention' ? 'active' : ''} className={selectedFilter === 'mention' ? 'active' : ''}
onClick={this.onClick('mention')} onClick={this.onClick('mention')}
title={intl.formatMessage(tooltips.mentions)}
> >
{/*
<FormattedMessage
id='notifications.filter.mentions'
defaultMessage='Mentions'
/>
*/}
@ @
</button> </button>
<button <button
className={selectedFilter === 'favourite' ? 'active' : ''} className={selectedFilter === 'favourite' ? 'active' : ''}
onClick={this.onClick('favourite')} onClick={this.onClick('favourite')}
title={intl.formatMessage(tooltips.favourites)}
> >
{/*
<FormattedMessage
id='notifications.filter.favourites'
defaultMessage='Favourites'
/>
*/}
<i className='fa fa-fw fa-star' /> <i className='fa fa-fw fa-star' />
</button> </button>
<button <button
className={selectedFilter === 'reblog' ? 'active' : ''} className={selectedFilter === 'reblog' ? 'active' : ''}
onClick={this.onClick('reblog')} onClick={this.onClick('reblog')}
title={intl.formatMessage(tooltips.boosts)}
> >
{/*
<FormattedMessage
id='notifications.filter.boosts'
defaultMessage='Boosts'
/>
*/}
<i className='fa fa-fw fa-retweet' /> <i className='fa fa-fw fa-retweet' />
</button> </button>
<button <button
className={selectedFilter === 'follow' ? 'active' : ''} className={selectedFilter === 'follow' ? 'active' : ''}
onClick={this.onClick('follow')} onClick={this.onClick('follow')}
title={intl.formatMessage(tooltips.follows)}
> >
{/*
<FormattedMessage
id='notifications.filter.follows'
defaultMessage='Follows'
/>
*/}
<i className='fa fa-fw fa-user-plus' /> <i className='fa fa-fw fa-user-plus' />
</button> </button>
</div> </div>