Add preferences for notification badges
parent
ba4521b175
commit
324ce93368
|
@ -47,6 +47,7 @@ const messages = defineMessages({
|
|||
export default function DrawerHeader ({
|
||||
columns,
|
||||
unreadNotifications,
|
||||
showNotificationsBadge,
|
||||
intl,
|
||||
onSettingsClick,
|
||||
}) {
|
||||
|
@ -81,7 +82,7 @@ export default function DrawerHeader ({
|
|||
>
|
||||
<span className='icon-badge-wrapper'>
|
||||
<Icon icon='bell' />
|
||||
{ unreadNotifications > 0 && <div className='icon-badge' />}
|
||||
{ showNotificationsBadge && unreadNotifications > 0 && <div className='icon-badge' />}
|
||||
</span>
|
||||
</Link>
|
||||
))}
|
||||
|
@ -119,6 +120,7 @@ export default function DrawerHeader ({
|
|||
DrawerHeader.propTypes = {
|
||||
columns: ImmutablePropTypes.list,
|
||||
unreadNotifications: PropTypes.number,
|
||||
showNotificationsBadge: PropTypes.bool,
|
||||
intl: PropTypes.object,
|
||||
onSettingsClick: PropTypes.func,
|
||||
};
|
||||
|
|
|
@ -35,6 +35,7 @@ const mapStateToProps = state => ({
|
|||
searchValue: state.getIn(['search', 'value']),
|
||||
submitted: state.getIn(['search', 'submitted']),
|
||||
unreadNotifications: state.getIn(['notifications', 'unread']),
|
||||
showNotificationsBadge: state.getIn(['local_settings', 'notifications', 'tab_badge']),
|
||||
});
|
||||
|
||||
// Dispatch mapping.
|
||||
|
@ -89,6 +90,7 @@ class Drawer extends React.Component {
|
|||
submitted,
|
||||
isSearchPage,
|
||||
unreadNotifications,
|
||||
showNotificationsBadge,
|
||||
} = this.props;
|
||||
const computedClass = classNames('drawer', `mbstobon-${elefriend}`);
|
||||
|
||||
|
@ -99,6 +101,7 @@ class Drawer extends React.Component {
|
|||
<DrawerHeader
|
||||
columns={columns}
|
||||
unreadNotifications={unreadNotifications}
|
||||
showNotificationsBadge={showNotificationsBadge}
|
||||
intl={intl}
|
||||
onSettingsClick={onOpenSettings}
|
||||
/>
|
||||
|
@ -143,6 +146,7 @@ Drawer.propTypes = {
|
|||
searchValue: PropTypes.string,
|
||||
submitted: PropTypes.bool,
|
||||
unreadNotifications: PropTypes.number,
|
||||
showNotificationsBadge: PropTypes.bool,
|
||||
|
||||
// Dispatch props.
|
||||
onChange: PropTypes.func,
|
||||
|
|
|
@ -42,6 +42,25 @@ export default class LocalSettingsPage extends React.PureComponent {
|
|||
>
|
||||
<FormattedMessage id='settings.show_reply_counter' defaultMessage='Display an estimate of the reply count' />
|
||||
</LocalSettingsPageItem>
|
||||
<section>
|
||||
<h2><FormattedMessage id='settings.notifications_opts' defaultMessage='Notifications options' /></h2>
|
||||
<LocalSettingsPageItem
|
||||
settings={settings}
|
||||
item={['notifications', 'tab_badge']}
|
||||
id='mastodon-settings--notifications-tab_badge'
|
||||
onChange={onChange}
|
||||
>
|
||||
<FormattedMessage id='settings.notifications.tab_badge' defaultMessage="Display a badge for unread notifications if the notifications column isn't open" />
|
||||
</LocalSettingsPageItem>
|
||||
<LocalSettingsPageItem
|
||||
settings={settings}
|
||||
item={['notifications', 'favicon_badge']}
|
||||
id='mastodon-settings--notifications-favicon_badge'
|
||||
onChange={onChange}
|
||||
>
|
||||
<FormattedMessage id='settings.notifications.favicon_badge' defaultMessage='Display unread notifications count in the favicon' />
|
||||
</LocalSettingsPageItem>
|
||||
</section>
|
||||
<section>
|
||||
<h2><FormattedMessage id='settings.layout_opts' defaultMessage='Layout options' /></h2>
|
||||
<LocalSettingsPageItem
|
||||
|
@ -78,7 +97,6 @@ export default class LocalSettingsPage extends React.PureComponent {
|
|||
),
|
||||
({ intl, onChange, settings }) => (
|
||||
<div className='glitch local-settings_page compose_box_opts'>
|
||||
<section>
|
||||
<h1><FormattedMessage id='settings.compose_box_opts' defaultMessage='Compose box options' /></h1>
|
||||
<LocalSettingsPageItem
|
||||
settings={settings}
|
||||
|
|
|
@ -8,20 +8,22 @@ import { connect } from 'react-redux';
|
|||
|
||||
const mapStateToProps = state => ({
|
||||
unreadNotifications: state.getIn(['notifications', 'unread']),
|
||||
showBadge: state.getIn(['local_settings', 'notifications', 'tab_badge']),
|
||||
});
|
||||
|
||||
@connect(mapStateToProps)
|
||||
class NotificationsIcon extends React.PureComponent {
|
||||
static propTypes = {
|
||||
unreadNotifications: PropTypes.number,
|
||||
showBadge: PropTypes.bool,
|
||||
};
|
||||
|
||||
render() {
|
||||
const { unreadNotifications } = this.props;
|
||||
const { unreadNotifications, showBadge } = this.props;
|
||||
return (
|
||||
<span className='icon-badge-wrapper'>
|
||||
<i className='fa fa-fw fa-bell' />
|
||||
{ unreadNotifications > 0 && <div className='icon-badge' />}
|
||||
{ showBadge && unreadNotifications > 0 && <div className='icon-badge' />}
|
||||
</span>
|
||||
);
|
||||
}
|
||||
|
|
|
@ -66,6 +66,7 @@ const mapStateToProps = state => ({
|
|||
navbarUnder: state.getIn(['local_settings', 'navbar_under']),
|
||||
dropdownMenuIsOpen: state.getIn(['dropdown_menu', 'openId']) !== null,
|
||||
unreadNotifications: state.getIn(['notifications', 'unread']),
|
||||
showFaviconBadge: state.getIn(['local_settings', 'notifications', 'favicon_badge']),
|
||||
});
|
||||
|
||||
const keyMap = {
|
||||
|
@ -118,6 +119,7 @@ export default class UI extends React.Component {
|
|||
intl: PropTypes.object.isRequired,
|
||||
dropdownMenuIsOpen: PropTypes.bool,
|
||||
unreadNotifications: PropTypes.number,
|
||||
showFaviconBadge: PropTypes.bool,
|
||||
};
|
||||
|
||||
state = {
|
||||
|
@ -272,9 +274,10 @@ export default class UI extends React.Component {
|
|||
if (![this.props.location.pathname, '/'].includes(prevProps.location.pathname)) {
|
||||
this.columnsAreaNode.handleChildrenContentChange();
|
||||
}
|
||||
if (this.props.unreadNotifications != prevProps.unreadNotifications) {
|
||||
if (this.props.unreadNotifications != prevProps.unreadNotifications ||
|
||||
this.props.showFaviconBadge != prevProps.showFaviconBadge) {
|
||||
if (this.favicon) {
|
||||
this.favicon.badge(this.props.unreadNotifications);
|
||||
this.favicon.badge(this.props.showFaviconBadge ? this.props.unreadNotifications : 0);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -37,6 +37,10 @@ const initialState = ImmutableMap({
|
|||
letterbox : true,
|
||||
fullwidth : true,
|
||||
}),
|
||||
notifications : ImmutableMap({
|
||||
favicon_badge : false,
|
||||
tab_badge : true,
|
||||
}),
|
||||
});
|
||||
|
||||
const hydrate = (state, localSettings) => state.mergeDeep(localSettings);
|
||||
|
|
Loading…
Reference in New Issue