namekuji/chuckya
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

[Glitch] Highlight active tab in action bar

Browse source 
Port 7b7c26063e to glitch-soc
This commit is contained in:
Thibaut Girka 2018-09-13 11:20:21 +02:00 committed by ThibG
parent 1cb3af21c5
commit cf142e8556
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/flavours/glitch/features/account/components/action_bar.js
View file

@ -2,7 +2,7 @@ import React from 'react';
import ImmutablePropTypes from 'react-immutable-proptypes';
import PropTypes from 'prop-types';
import DropdownMenuContainer from 'flavours/glitch/containers/dropdown_menu_container';
import { Link } from 'react-router-dom';
import { NavLink } from 'react-router-dom';
import { defineMessages, injectIntl, FormattedMessage, FormattedNumber } from 'react-intl';
import { me, isStaff } from 'flavours/glitch/util/initial_state';
@ -136,20 +136,20 @@ export default class ActionBar extends React.PureComponent {
</div>
<div className='account__action-bar-links'>
<Link className='account__action-bar__tab' to={`/accounts/${account.get('id')}`}>
<NavLink exact activeClassName='active' className='account__action-bar__tab' to={`/accounts/${account.get('id')}`}>
<FormattedMessage id='account.posts' defaultMessage='Posts' />
<strong><FormattedNumber value={account.get('statuses_count')} /></strong>
</Link>
</NavLink>
<Link className='account__action-bar__tab' to={`/accounts/${account.get('id')}/following`}>
<NavLink exact activeClassName='active' className='account__action-bar__tab' to={`/accounts/${account.get('id')}/following`}>
<FormattedMessage id='account.follows' defaultMessage='Follows' />
<strong><FormattedNumber value={account.get('following_count')} /></strong>
</Link>
</NavLink>
<Link className='account__action-bar__tab' to={`/accounts/${account.get('id')}/followers`}>
<NavLink exact activeClassName='active' className='account__action-bar__tab' to={`/accounts/${account.get('id')}/followers`}>
<FormattedMessage id='account.followers' defaultMessage='Followers' />
<strong><FormattedNumber value={account.get('followers_count')} /></strong>
</Link>
</NavLink>
</div>
</div>
</div>

5
app/javascript/flavours/glitch/styles/components/accounts.scss
View file

@ -239,6 +239,11 @@
flex: 0 1 100%;
border-left: 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;