fedi/mastodon
1
0
Fork 1
mirror of https://github.com/mastodon/mastodon.git synced 2024-11-27 15:54:32 +00:00
Code Issues Packages Projects Releases Wiki Activity

[Glitch] Add button to dismiss desktop notifications permissions banner

Browse source 
Port 4790a126be to glitch-soc

Signed-off-by: Thibaut Girka <thib@sitedethib.com>
This commit is contained in:
Eugen Rochko 2020-11-11 05:36:29 +01:00 committed by Thibaut Girka
parent c077cdaba7
commit 0aeb833317
5 changed files with 46 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
app/javascript/flavours/glitch/actions/notifications.js
View file

@ -50,8 +50,9 @@ export const NOTIFICATIONS_SET_VISIBILITY = 'NOTIFICATIONS_SET_VISIBILITY';
export const NOTIFICATIONS_MARK_AS_READ = 'NOTIFICATIONS_MARK_AS_READ';
export const NOTIFICATIONS_SET_BROWSER_SUPPORT = 'NOTIFICATIONS_SET_BROWSER_SUPPORT';
export const NOTIFICATIONS_SET_BROWSER_PERMISSION = 'NOTIFICATIONS_SET_BROWSER_PERMISSION';
export const NOTIFICATIONS_SET_BROWSER_SUPPORT = 'NOTIFICATIONS_SET_BROWSER_SUPPORT';
export const NOTIFICATIONS_SET_BROWSER_PERMISSION = 'NOTIFICATIONS_SET_BROWSER_PERMISSION';
export const NOTIFICATIONS_DISMISS_BROWSER_PERMISSION = 'NOTIFICATIONS_DISMISS_BROWSER_PERMISSION';
defineMessages({
mention: { id: 'notification.mention', defaultMessage: '{name} mentioned you' },
@ -371,3 +372,7 @@ export function setBrowserPermission (value) {
value,
};
}
export const dismissBrowserPermission = () => ({
type: NOTIFICATIONS_DISMISS_BROWSER_PERMISSION,
});

23
app/javascript/flavours/glitch/features/notifications/components/notifications_permission_banner.js
View file

@ -1,25 +1,42 @@
import React from 'react';
import Icon from 'flavours/glitch/components/icon';
import Button from 'flavours/glitch/components/button';
import { requestBrowserPermission } from 'flavours/glitch/actions/notifications';
import IconButton from 'flavours/glitch/components/icon_button';
import { requestBrowserPermission, dismissBrowserPermission } from 'flavours/glitch/actions/notifications';
import { connect } from 'react-redux';
import PropTypes from 'prop-types';
import { FormattedMessage } from 'react-intl';
import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
export default @connect(() => {})
const messages = defineMessages({
close: { id: 'lightbox.close', defaultMessage: 'Close' },
});
export default @connect()
@injectIntl
class NotificationsPermissionBanner extends React.PureComponent {
static propTypes = {
dispatch: PropTypes.func.isRequired,
intl: PropTypes.object.isRequired,
};
handleClick = () => {
this.props.dispatch(requestBrowserPermission());
}
handleClose = () => {
this.props.dispatch(dismissBrowserPermission());
}
render () {
const { intl } = this.props;
return (
<div className='notifications-permission-banner'>
<div className='notifications-permission-banner__close'>
<IconButton icon='times' onClick={this.handleClose} title={intl.formatMessage(messages.close)} />
</div>
<h2><FormattedMessage id='notifications_permission_banner.title' defaultMessage='Never miss a thing' /></h2>
<p><FormattedMessage id='notifications_permission_banner.how_to_control' defaultMessage="To receive notifications when Mastodon isn't open, enable desktop notifications. You can control precisely which types of interactions generate desktop notifications through the {icon} button above once they're enabled." values={{ icon: <Icon id='sliders' /> }} /></p>
<Button onClick={this.handleClick}><FormattedMessage id='notifications_permission_banner.enable' defaultMessage='Enable desktop notifications' /></Button>

11
app/javascript/flavours/glitch/features/picture_in_picture/components/header.js
View file

@ -7,12 +7,18 @@ import IconButton from 'flavours/glitch/components/icon_button';
import { Link } from 'react-router-dom';
import Avatar from 'flavours/glitch/components/avatar';
import DisplayName from 'flavours/glitch/components/display_name';
import { defineMessages, injectIntl } from 'react-intl';
const messages = defineMessages({
close: { id: 'lightbox.close', defaultMessage: 'Close' },
});
const mapStateToProps = (state, { accountId }) => ({
account: state.getIn(['accounts', accountId]),
});
export default @connect(mapStateToProps)
@injectIntl
class Header extends ImmutablePureComponent {
static propTypes = {
@ -20,10 +26,11 @@ class Header extends ImmutablePureComponent {
statusId: PropTypes.string.isRequired,
account: ImmutablePropTypes.map.isRequired,
onClose: PropTypes.func.isRequired,
intl: PropTypes.object.isRequired,
};
render () {
const { account, statusId, onClose } = this.props;
const { account, statusId, onClose, intl } = this.props;
return (
<div className='picture-in-picture__header'>
@ -32,7 +39,7 @@ class Header extends ImmutablePureComponent {
<DisplayName account={account} />
</Link>
<IconButton icon='times' onClick={onClose} title='Close' />
<IconButton icon='times' onClick={onClose} title={intl.formatMessage(messages.close)} />
</div>
);
}

3
app/javascript/flavours/glitch/reducers/notifications.js
View file

@ -19,6 +19,7 @@ import {
NOTIFICATIONS_MARK_AS_READ,
NOTIFICATIONS_SET_BROWSER_SUPPORT,
NOTIFICATIONS_SET_BROWSER_PERMISSION,
NOTIFICATIONS_DISMISS_BROWSER_PERMISSION,
} from 'flavours/glitch/actions/notifications';
import {
ACCOUNT_BLOCK_SUCCESS,
@ -283,6 +284,8 @@ export default function notifications(state = initialState, action) {
return state.set('browserSupport', action.value);
case NOTIFICATIONS_SET_BROWSER_PERMISSION:
return state.set('browserPermission', action.value);
case NOTIFICATIONS_DISMISS_BROWSER_PERMISSION:
return state.set('browserPermission', 'denied');
case NOTIFICATION_MARK_FOR_DELETE:
return markForDelete(state, action.id, action.yes);

7
app/javascript/flavours/glitch/styles/components/columns.scss
View file

@ -702,6 +702,13 @@
flex-direction: column;
align-items: center;
justify-content: center;
position: relative;
&__close {
position: absolute;
top: 10px;
right: 10px;
}
h2 {
font-size: 16px;