diff --git a/app/javascript/mastodon/actions/notifications.js b/app/javascript/mastodon/actions/notifications.js
index c4fa664282..d40b65745b 100644
--- a/app/javascript/mastodon/actions/notifications.js
+++ b/app/javascript/mastodon/actions/notifications.js
@@ -37,8 +37,9 @@ export const NOTIFICATIONS_UNMOUNT = 'NOTIFICATIONS_UNMOUNT';
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' },
@@ -283,3 +284,7 @@ export function setBrowserPermission (value) {
value,
};
}
+
+export const dismissBrowserPermission = () => ({
+ type: NOTIFICATIONS_DISMISS_BROWSER_PERMISSION,
+});
diff --git a/app/javascript/mastodon/features/notifications/components/notifications_permission_banner.js b/app/javascript/mastodon/features/notifications/components/notifications_permission_banner.js
index 766c9bb5ba..6daf75814a 100644
--- a/app/javascript/mastodon/features/notifications/components/notifications_permission_banner.js
+++ b/app/javascript/mastodon/features/notifications/components/notifications_permission_banner.js
@@ -1,25 +1,42 @@
import React from 'react';
import Icon from 'mastodon/components/icon';
import Button from 'mastodon/components/button';
-import { requestBrowserPermission } from 'mastodon/actions/notifications';
+import IconButton from 'mastodon/components/icon_button';
+import { requestBrowserPermission, dismissBrowserPermission } from 'mastodon/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 (
+
+
+
+
}} />
diff --git a/app/javascript/mastodon/features/picture_in_picture/components/header.js b/app/javascript/mastodon/features/picture_in_picture/components/header.js
index 4cb6de1a40..7dd199b752 100644
--- a/app/javascript/mastodon/features/picture_in_picture/components/header.js
+++ b/app/javascript/mastodon/features/picture_in_picture/components/header.js
@@ -7,12 +7,18 @@ import IconButton from 'mastodon/components/icon_button';
import { Link } from 'react-router-dom';
import Avatar from 'mastodon/components/avatar';
import DisplayName from 'mastodon/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 (
@@ -32,7 +39,7 @@ class Header extends ImmutablePureComponent {
-
+
);
}
diff --git a/app/javascript/mastodon/reducers/notifications.js b/app/javascript/mastodon/reducers/notifications.js
index 1d48747176..46a9d5376d 100644
--- a/app/javascript/mastodon/reducers/notifications.js
+++ b/app/javascript/mastodon/reducers/notifications.js
@@ -12,6 +12,7 @@ import {
NOTIFICATIONS_MARK_AS_READ,
NOTIFICATIONS_SET_BROWSER_SUPPORT,
NOTIFICATIONS_SET_BROWSER_PERMISSION,
+ NOTIFICATIONS_DISMISS_BROWSER_PERMISSION,
} from '../actions/notifications';
import {
ACCOUNT_BLOCK_SUCCESS,
@@ -250,6 +251,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');
default:
return state;
}
diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss
index 9cbd7505c6..056ea3dd2d 100644
--- a/app/javascript/styles/mastodon/components.scss
+++ b/app/javascript/styles/mastodon/components.scss
@@ -7204,6 +7204,13 @@ noscript {
flex-direction: column;
align-items: center;
justify-content: center;
+ position: relative;
+
+ &__close {
+ position: absolute;
+ top: 10px;
+ right: 10px;
+ }
h2 {
font-size: 16px;