Add unread notifications badge to the navigation bar

main
Thibaut Girka 6 years ago committed by ThibG
parent 0f155af32a
commit 2cdc00bc8b

@ -46,6 +46,7 @@ const messages = defineMessages({
// The component.
export default function DrawerHeader ({
columns,
unreadNotifications,
intl,
onSettingsClick,
}) {
@ -77,7 +78,12 @@ export default function DrawerHeader ({
aria-label={intl.formatMessage(messages.notifications)}
title={intl.formatMessage(messages.notifications)}
to='/notifications'
><Icon icon='bell' /></Link>
>
<span className='icon-badge-wrapper'>
<Icon icon='bell' />
{ unreadNotifications > 0 && <div className='icon-badge' />}
</span>
</Link>
))}
{renderForColumn('COMMUNITY', (
<Link
@ -112,6 +118,7 @@ export default function DrawerHeader ({
// Props.
DrawerHeader.propTypes = {
columns: ImmutablePropTypes.list,
unreadNotifications: PropTypes.number,
intl: PropTypes.object,
onSettingsClick: PropTypes.func,
};

@ -34,6 +34,7 @@ const mapStateToProps = state => ({
searchHidden: state.getIn(['search', 'hidden']),
searchValue: state.getIn(['search', 'value']),
submitted: state.getIn(['search', 'submitted']),
unreadNotifications: state.getIn(['notifications', 'unread']),
});
// Dispatch mapping.
@ -87,6 +88,7 @@ class Drawer extends React.Component {
searchValue,
submitted,
isSearchPage,
unreadNotifications,
} = this.props;
const computedClass = classNames('drawer', `mbstobon-${elefriend}`);
@ -96,6 +98,7 @@ class Drawer extends React.Component {
{multiColumn ? (
<DrawerHeader
columns={columns}
unreadNotifications={unreadNotifications}
intl={intl}
onSettingsClick={onOpenSettings}
/>
@ -139,6 +142,7 @@ Drawer.propTypes = {
searchHidden: PropTypes.bool,
searchValue: PropTypes.string,
submitted: PropTypes.bool,
unreadNotifications: PropTypes.number,
// Dispatch props.
onChange: PropTypes.func,

@ -1121,6 +1121,22 @@
left: 0;
}
.icon-badge-wrapper {
position: relative;
}
.icon-badge {
position: absolute;
display: block;
right: -.25em;
top: -.25em;
background-color: $ui-highlight-color;
border-radius: 50%;
font-size: 75%;
width: 1em;
height: 1em;
}
::-webkit-scrollbar-thumb {
border-radius: 0;
}

Loading…
Cancel
Save