From 7b7c26063e3fcf9e75a61780d81bd60b7c398ead Mon Sep 17 00:00:00 2001 From: rhoio <rhoio@gmx.de> Date: Thu, 13 Sep 2018 01:50:41 +0200 Subject: [PATCH] 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 view --- .../features/account/components/action_bar.js | 14 +++++++------- app/javascript/styles/mastodon/components.scss | 5 +++++ 2 files changed, 12 insertions(+), 7 deletions(-) diff --git a/app/javascript/mastodon/features/account/components/action_bar.js b/app/javascript/mastodon/features/account/components/action_bar.js index bc6f86628e..a00efbbd95 100644 --- a/app/javascript/mastodon/features/account/components/action_bar.js +++ b/app/javascript/mastodon/features/account/components/action_bar.js @@ -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'> diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss index 24fb77d986..048563336f 100644 --- a/app/javascript/styles/mastodon/components.scss +++ b/app/javascript/styles/mastodon/components.scss @@ -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; -- GitLab