forked from treehouse/mastodon
Highlight active tab in action bar (#8673)
* NavLinks with activeclass instead of Link in actionbar to highlight active tab * highlight border-bottom in action bar consistent to public viewrebase/4.0.0rc2
parent
bda0f7ac73
commit
7b7c26063e
|
@ -2,7 +2,7 @@ import React from 'react';
|
|||
import ImmutablePropTypes from 'react-immutable-proptypes';
|
||||
import PropTypes from 'prop-types';
|
||||
import DropdownMenuContainer from '../../../containers/dropdown_menu_container';
|
||||
import { Link } from 'react-router-dom';
|
||||
import { NavLink } from 'react-router-dom';
|
||||
import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
|
||||
import { me } from '../../../initial_state';
|
||||
import { shortNumberFormat } from '../../../utils/numbers';
|
||||
|
@ -147,20 +147,20 @@ export default class ActionBar extends React.PureComponent {
|
|||
|
||||
<div className='account__action-bar'>
|
||||
<div className='account__action-bar-links'>
|
||||
<Link className='account__action-bar__tab' to={`/accounts/${account.get('id')}`} title={intl.formatNumber(account.get('statuses_count'))}>
|
||||
<NavLink exact activeClassName='active' className='account__action-bar__tab' to={`/accounts/${account.get('id')}`} title={intl.formatNumber(account.get('statuses_count'))}>
|
||||
<FormattedMessage id='account.posts' defaultMessage='Toots' />
|
||||
<strong>{shortNumberFormat(account.get('statuses_count'))}</strong>
|
||||
</Link>
|
||||
</NavLink>
|
||||
|
||||
<Link className='account__action-bar__tab' to={`/accounts/${account.get('id')}/following`} title={intl.formatNumber(account.get('following_count'))}>
|
||||
<NavLink exact activeClassName='active' className='account__action-bar__tab' to={`/accounts/${account.get('id')}/following`} title={intl.formatNumber(account.get('following_count'))}>
|
||||
<FormattedMessage id='account.follows' defaultMessage='Follows' />
|
||||
<strong>{shortNumberFormat(account.get('following_count'))}</strong>
|
||||
</Link>
|
||||
</NavLink>
|
||||
|
||||
<Link className='account__action-bar__tab' to={`/accounts/${account.get('id')}/followers`} title={intl.formatNumber(account.get('followers_count'))}>
|
||||
<NavLink exact activeClassName='active' className='account__action-bar__tab' to={`/accounts/${account.get('id')}/followers`} title={intl.formatNumber(account.get('followers_count'))}>
|
||||
<FormattedMessage id='account.followers' defaultMessage='Followers' />
|
||||
<strong>{shortNumberFormat(account.get('followers_count'))}</strong>
|
||||
</Link>
|
||||
</NavLink>
|
||||
</div>
|
||||
|
||||
<div className='account__action-bar-dropdown'>
|
||||
|
|
|
@ -1297,6 +1297,11 @@ a .account__avatar {
|
|||
flex: 0 1 100%;
|
||||
border-right: 1px solid lighten($ui-base-color, 8%);
|
||||
padding: 10px 0;
|
||||
border-bottom: 4px solid transparent;
|
||||
|
||||
&.active {
|
||||
border-bottom: 4px solid $ui-highlight-color;
|
||||
}
|
||||
|
||||
& > span {
|
||||
display: block;
|
||||
|
|
Loading…
Reference in New Issue