Add notification badge feature back

This commit is contained in:
Claire 2024-02-23 19:53:37 +01:00
parent 9ab030bb13
commit 6eede9d84b

View file

@ -52,6 +52,8 @@ const messages = defineMessages({
const mapStateToProps = (state, ownProps) => ({ const mapStateToProps = (state, ownProps) => ({
columns: state.getIn(['settings', 'columns']), columns: state.getIn(['settings', 'columns']),
showSearch: ownProps.multiColumn ? state.getIn(['search', 'submitted']) && !state.getIn(['search', 'hidden']) : false, showSearch: ownProps.multiColumn ? state.getIn(['search', 'submitted']) && !state.getIn(['search', 'hidden']) : false,
unreadNotifications: state.getIn(['notifications', 'unread']),
showNotificationsBadge: state.getIn(['local_settings', 'notifications', 'tab_badge']),
}); });
// ~4% chance you'll end up with an unexpected friend // ~4% chance you'll end up with an unexpected friend
@ -66,6 +68,8 @@ class Compose extends PureComponent {
columns: ImmutablePropTypes.list.isRequired, columns: ImmutablePropTypes.list.isRequired,
multiColumn: PropTypes.bool, multiColumn: PropTypes.bool,
showSearch: PropTypes.bool, showSearch: PropTypes.bool,
unreadNotifications: PropTypes.number,
showNotificationsBadge: PropTypes.bool,
intl: PropTypes.object.isRequired, intl: PropTypes.object.isRequired,
}; };
@ -124,7 +128,7 @@ class Compose extends PureComponent {
}; };
render () { render () {
const { multiColumn, showSearch, intl } = this.props; const { multiColumn, showSearch, showNotificationsBadge, unreadNotifications, intl } = this.props;
const elefriend = [glitchedElephant1, glitchedElephant2, glitchedElephant3, elephantUIPlane][this.state.elefriend]; const elefriend = [glitchedElephant1, glitchedElephant2, glitchedElephant3, elephantUIPlane][this.state.elefriend];
@ -139,7 +143,12 @@ class Compose extends PureComponent {
<Link to='/home' className='drawer__tab' title={intl.formatMessage(messages.home_timeline)} aria-label={intl.formatMessage(messages.home_timeline)}><Icon id='home' icon={HomeIcon} /></Link> <Link to='/home' className='drawer__tab' title={intl.formatMessage(messages.home_timeline)} aria-label={intl.formatMessage(messages.home_timeline)}><Icon id='home' icon={HomeIcon} /></Link>
)} )}
{!columns.some(column => column.get('id') === 'NOTIFICATIONS') && ( {!columns.some(column => column.get('id') === 'NOTIFICATIONS') && (
<Link to='/notifications' className='drawer__tab' title={intl.formatMessage(messages.notifications)} aria-label={intl.formatMessage(messages.notifications)}><Icon id='bell' icon={NotificationsIcon} /></Link> <Link to='/notifications' className='drawer__tab' title={intl.formatMessage(messages.notifications)} aria-label={intl.formatMessage(messages.notifications)}>
<span className='icon-badge-wrapper'>
<Icon id='bell' icon={NotificationsIcon} />
{showNotificationsBadge && unreadNotifications > 0 && <div className='icon-badge' />}
</span>
</Link>
)} )}
{!columns.some(column => column.get('id') === 'COMMUNITY') && ( {!columns.some(column => column.get('id') === 'COMMUNITY') && (
<Link to='/public/local' className='drawer__tab' title={intl.formatMessage(messages.community)} aria-label={intl.formatMessage(messages.community)}><Icon id='users' icon={PeopleIcon} /></Link> <Link to='/public/local' className='drawer__tab' title={intl.formatMessage(messages.community)} aria-label={intl.formatMessage(messages.community)}><Icon id='users' icon={PeopleIcon} /></Link>