smallsolar
/
mastodon
mirror of https://github.com/mastodon/mastodon.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

allow FilterBar to display active CSS with js

This commit is contained in:
alxd 2018-11-30 11:42:56 +01:00
parent 44e62a40cf
commit d5ded638b9
2 changed files with 10 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -6,13 +6,15 @@ export default class FilterBar extends React.PureComponent {
// static propTypes = { // static propTypes = {
// onClick: PropTypes.func.isRequired, // onClick: PropTypes.func.isRequired,
// isSelected: PropTypes.bool.isRequired // selectedFilter: PropTypes.string.isRequired
// }; // };
render () { render () {
const { selectedFilter } = this.props
return ( return (
<div className='notification__filter-bar'> <div className='notification__filter-bar'>
<button <button
className={selectedFilter === 'all' ? 'active' : ''}
onClick={() => console.log('all')} onClick={() => console.log('all')}
> >
<FormattedMessage <FormattedMessage
@ -21,6 +23,7 @@ export default class FilterBar extends React.PureComponent {
/> />
</button> </button>
<button <button
className={selectedFilter === 'mentions' ? 'active' : ''}
onClick={() => console.log('mentions')} onClick={() => console.log('mentions')}
> >
<FormattedMessage <FormattedMessage
@ -29,6 +32,7 @@ export default class FilterBar extends React.PureComponent {
/> />
</button> </button>
<button <button
className={selectedFilter === 'favourites' ? 'active' : ''}
onClick={() => console.log('favourites')} onClick={() => console.log('favourites')}
> >
<FormattedMessage <FormattedMessage
@ -37,14 +41,16 @@ export default class FilterBar extends React.PureComponent {
/> />
</button> </button>
<button <button
onClick={() => console.log('Boosts')} className={selectedFilter === 'boosts' ? 'active' : ''}
onClick={() => console.log('boosts')}
> >
<FormattedMessage <FormattedMessage
id='notifications.filter.Boosts' id='notifications.filter.boosts'
defaultMessage='Boosts' defaultMessage='Boosts'
/> />
</button> </button>
<button <button
className={selectedFilter === 'follows' ? 'active' : ''}
onClick={() => console.log('follows')} onClick={() => console.log('follows')}
> >
<FormattedMessage <FormattedMessage

2
app/javascript/styles/mastodon/components.scss
View File

@ -1513,7 +1513,7 @@ a.account__display-name {
background: lighten($ui-base-color, 4%); background: lighten($ui-base-color, 4%);
} }
&:active { &.active {
border-bottom-color: $highlight-text-color; border-bottom-color: $highlight-text-color;
} }
} }