mirrors
/
mastodon-glitch
mirror of https://github.com/glitch-soc/mastodon
3
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Add preferences for notification badges

pull/721/head
Thibaut Girka 2018-09-06 20:55:11 +02:00 committed by ThibG
parent ba4521b175
commit 324ce93368
6 changed files with 39 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
app/javascript/flavours/glitch/features/drawer/header/index.js
View File

@ -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,
};

4
app/javascript/flavours/glitch/features/drawer/index.js
View File

@ -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,

20
app/javascript/flavours/glitch/features/local_settings/page/index.js
View File

@ -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}

6
app/javascript/flavours/glitch/features/ui/components/tabs_bar.js
View File

@ -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>
);
}

7
app/javascript/flavours/glitch/features/ui/index.js
View File

@ -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);
}
}
}

4
app/javascript/flavours/glitch/reducers/local_settings.js
View File

@ -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);