diff options
author | Thibaut Girka <thib@sitedethib.com> | 2018-09-06 19:17:14 +0200 |
---|---|---|
committer | ThibG <thib@sitedethib.com> | 2018-09-07 20:37:17 +0200 |
commit | 2cdc00bc8b41235b06090d34187ca71b8749aa27 (patch) | |
tree | 885179bab4b4f9297e4cfce15cc86f75719471a2 /app/javascript/flavours | |
parent | 0f155af32a330bc8eb79c6e3ccec5331a1e37922 (diff) |
Add unread notifications badge to the navigation bar
Diffstat (limited to 'app/javascript/flavours')
3 files changed, 28 insertions, 1 deletions
diff --git a/app/javascript/flavours/glitch/features/drawer/header/index.js b/app/javascript/flavours/glitch/features/drawer/header/index.js index deec42435..435538de4 100644 --- a/app/javascript/flavours/glitch/features/drawer/header/index.js +++ b/app/javascript/flavours/glitch/features/drawer/header/index.js @@ -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, }; diff --git a/app/javascript/flavours/glitch/features/drawer/index.js b/app/javascript/flavours/glitch/features/drawer/index.js index 4649e404f..e8d9c86cb 100644 --- a/app/javascript/flavours/glitch/features/drawer/index.js +++ b/app/javascript/flavours/glitch/features/drawer/index.js @@ -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, diff --git a/app/javascript/flavours/glitch/styles/components/index.scss b/app/javascript/flavours/glitch/styles/components/index.scss index 1419888fa..52fe90885 100644 --- a/app/javascript/flavours/glitch/styles/components/index.scss +++ b/app/javascript/flavours/glitch/styles/components/index.scss @@ -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; } |