Display unread marker for notifications

This commit is contained in:
Thibaut Girka
2020-09-15 18:09:08 +02:00
committed by ThibG
parent ae698469d0
commit 66e9a77e36
6 changed files with 39 additions and 5 deletions

View File

@ -5,6 +5,7 @@ import PropTypes from 'prop-types';
import { FormattedMessage } from 'react-intl';
import ImmutablePureComponent from 'react-immutable-pure-component';
import { HotKeys } from 'react-hotkeys';
import classNames from 'classnames';
// Our imports.
import Permalink from 'flavours/glitch/components/permalink';
@ -19,6 +20,7 @@ export default class NotificationFollow extends ImmutablePureComponent {
id: PropTypes.string.isRequired,
account: ImmutablePropTypes.map.isRequired,
notification: ImmutablePropTypes.map.isRequired,
unread: PropTypes.bool,
};
handleMoveUp = () => {
@ -59,7 +61,7 @@ export default class NotificationFollow extends ImmutablePureComponent {
}
render () {
const { account, notification, hidden } = this.props;
const { account, notification, hidden, unread } = this.props;
// Links to the display name.
const displayName = account.get('display_name_html') || account.get('username');
@ -76,7 +78,7 @@ export default class NotificationFollow extends ImmutablePureComponent {
// Renders.
return (
<HotKeys handlers={this.getHandlers()}>
<div className='notification notification-follow focusable' tabIndex='0'>
<div className={classNames('notification notification-follow focusable', { unread })} tabIndex='0'>
<div className='notification__message'>
<div className='notification__favourite-icon-wrapper'>
<Icon fixedWidth id='user-plus' />