me/glitchier-soc
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Highlight active tab in action bar (#8673)

Browse source 
* NavLinks with activeclass instead of Link in actionbar to highlight active tab

* highlight border-bottom in action bar consistent to public view
This commit is contained in:
rhoio 2018-09-13 01:50:41 +02:00 committed by Eugen Rochko
parent f555f38ea6
commit c2c352f511
2 changed files with 12 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
app/javascript/mastodon/features/account/components/action_bar.js
View file

@ -2,7 +2,7 @@ import React from 'react';
import ImmutablePropTypes from 'react-immutable-proptypes'; import ImmutablePropTypes from 'react-immutable-proptypes';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import DropdownMenuContainer from '../../../containers/dropdown_menu_container'; 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 { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
import { me } from '../../../initial_state'; import { me } from '../../../initial_state';
import { shortNumberFormat } from '../../../utils/numbers'; 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'>
<div className='account__action-bar-links'> <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' /> <FormattedMessage id='account.posts' defaultMessage='Toots' />
<strong>{shortNumberFormat(account.get('statuses_count'))}</strong> <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' /> <FormattedMessage id='account.follows' defaultMessage='Follows' />
<strong>{shortNumberFormat(account.get('following_count'))}</strong> <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' /> <FormattedMessage id='account.followers' defaultMessage='Followers' />
<strong>{shortNumberFormat(account.get('followers_count'))}</strong> <strong>{shortNumberFormat(account.get('followers_count'))}</strong>
</Link> </NavLink>
</div> </div>
<div className='account__action-bar-dropdown'> <div className='account__action-bar-dropdown'>

5
app/javascript/styles/mastodon/components.scss
View file

@ -1297,6 +1297,11 @@ a .account__avatar {
flex: 0 1 100%; flex: 0 1 100%;
border-right: 1px solid lighten($ui-base-color, 8%); border-right: 1px solid lighten($ui-base-color, 8%);
padding: 10px 0; padding: 10px 0;
border-bottom: 4px solid transparent;
&.active {
border-bottom: 4px solid $ui-highlight-color;
}
& > span { & > span {
display: block; display: block;