bigbuffet/bigbuffet-rw
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Merge branch 'tabs-bar-conditional-counters' into 'develop'

Browse source 
TabsBar: display counters only on profile pages where they're needed

See merge request soapbox-pub/soapbox-fe!805
This commit is contained in:
Alex Gleason 2021-10-19 22:54:15 +00:00
commit 02de1af9fe
1 changed files with 44 additions and 30 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

74
app/soapbox/features/ui/components/tabs_bar.js
View file

@ -53,9 +53,19 @@ class TabsBar extends React.PureComponent {
return pathname === '/' || pathname.startsWith('/timeline/'); return pathname === '/' || pathname.startsWith('/timeline/');
} }
onProfilePage = () => {
try {
const { pathname } = this.context.router.route.location;
return pathname.startsWith('/@') && !pathname.includes('/posts/');
} catch {
return false;
}
}
render() { render() {
const { intl, account, logo, onOpenCompose, onOpenSidebar, features, dashboardCount, notificationCount, chatsCount } = this.props; const { intl, account, logo, onOpenCompose, onOpenSidebar, features, dashboardCount, notificationCount, chatsCount } = this.props;
const { collapsed } = this.state; const { collapsed } = this.state;
const profilePage = this.onProfilePage();
const classes = classNames('tabs-bar', { const classes = classNames('tabs-bar', {
'tabs-bar--collapsed': collapsed, 'tabs-bar--collapsed': collapsed,
@ -84,38 +94,42 @@ class TabsBar extends React.PureComponent {
<div className='tabs-bar__split tabs-bar__split--right'> <div className='tabs-bar__split tabs-bar__split--right'>
{account ? ( {account ? (
<> <>
<NavLink key='notifications' className='tabs-bar__link' to='/notifications' data-preview-title-id='column.notifications'> {profilePage && (
<IconWithCounter <>
src={require('@tabler/icons/icons/bell.svg')} <NavLink key='notifications' className='tabs-bar__link' to='/notifications' data-preview-title-id='column.notifications'>
className={classNames('primary-navigation__icon', { <IconWithCounter
'svg-icon--active': location.pathname === '/notifications', src={require('@tabler/icons/icons/bell.svg')}
'svg-icon--unread': notificationCount > 0, className={classNames('primary-navigation__icon', {
})} 'svg-icon--active': location.pathname === '/notifications',
count={notificationCount} 'svg-icon--unread': notificationCount > 0,
/> })}
<span><FormattedMessage id='tabs_bar.notifications' defaultMessage='Notifications' /></span> count={notificationCount}
</NavLink> />
<span><FormattedMessage id='tabs_bar.notifications' defaultMessage='Notifications' /></span>
</NavLink>
{features.chats && ( {features.chats && (
<NavLink key='chats' className='tabs-bar__link' to='/chats' data-preview-title-id='column.chats'> <NavLink key='chats' className='tabs-bar__link' to='/chats' data-preview-title-id='column.chats'>
<IconWithCounter <IconWithCounter
src={require('@tabler/icons/icons/messages.svg')} src={require('@tabler/icons/icons/messages.svg')}
className={classNames('primary-navigation__icon', { 'svg-icon--active': location.pathname === '/chats' })} className={classNames('primary-navigation__icon', { 'svg-icon--active': location.pathname === '/chats' })}
count={chatsCount} count={chatsCount}
/> />
<span><FormattedMessage id='tabs_bar.chats' defaultMessage='Chats' /></span> <span><FormattedMessage id='tabs_bar.chats' defaultMessage='Chats' /></span>
</NavLink> </NavLink>
)} )}
{isStaff(account) && ( {isStaff(account) && (
<NavLink key='dashboard' className='tabs-bar__link' to='/admin' data-preview-title-id='tabs_bar.dashboard'> <NavLink key='dashboard' className='tabs-bar__link' to='/admin' data-preview-title-id='tabs_bar.dashboard'>
<IconWithCounter <IconWithCounter
src={location.pathname.startsWith('/admin') ? require('icons/dashboard-filled.svg') : require('@tabler/icons/icons/dashboard.svg')} src={location.pathname.startsWith('/admin') ? require('icons/dashboard-filled.svg') : require('@tabler/icons/icons/dashboard.svg')}
className='primary-navigation__icon' className='primary-navigation__icon'
count={dashboardCount} count={dashboardCount}
/> />
<span><FormattedMessage id='tabs_bar.dashboard' defaultMessage='Dashboard' /></span> <span><FormattedMessage id='tabs_bar.dashboard' defaultMessage='Dashboard' /></span>
</NavLink> </NavLink>
)}
</>
)} )}
<ThemeToggle /> <ThemeToggle />