diff --git a/app/javascript/flavours/glitch/actions/notifications.js b/app/javascript/flavours/glitch/actions/notifications.js
index eb70870271..7273191b2e 100644
--- a/app/javascript/flavours/glitch/actions/notifications.js
+++ b/app/javascript/flavours/glitch/actions/notifications.js
@@ -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,
+});
diff --git a/app/javascript/flavours/glitch/features/notifications/components/notifications_permission_banner.js b/app/javascript/flavours/glitch/features/notifications/components/notifications_permission_banner.js
index 8e77f5a03d..73fc05dea3 100644
--- a/app/javascript/flavours/glitch/features/notifications/components/notifications_permission_banner.js
+++ b/app/javascript/flavours/glitch/features/notifications/components/notifications_permission_banner.js
@@ -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 (
+
+
+
+
}} />
diff --git a/app/javascript/flavours/glitch/features/picture_in_picture/components/header.js b/app/javascript/flavours/glitch/features/picture_in_picture/components/header.js
index 24adcde257..28526ca88c 100644
--- a/app/javascript/flavours/glitch/features/picture_in_picture/components/header.js
+++ b/app/javascript/flavours/glitch/features/picture_in_picture/components/header.js
@@ -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 (
@@ -32,7 +39,7 @@ class Header extends ImmutablePureComponent {
-
+
);
}
diff --git a/app/javascript/flavours/glitch/reducers/notifications.js b/app/javascript/flavours/glitch/reducers/notifications.js
index b4c5ef71a0..c630cc7e3b 100644
--- a/app/javascript/flavours/glitch/reducers/notifications.js
+++ b/app/javascript/flavours/glitch/reducers/notifications.js
@@ -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);
diff --git a/app/javascript/flavours/glitch/styles/components/columns.scss b/app/javascript/flavours/glitch/styles/components/columns.scss
index be32ae52e6..2550f50f47 100644
--- a/app/javascript/flavours/glitch/styles/components/columns.scss
+++ b/app/javascript/flavours/glitch/styles/components/columns.scss
@@ -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;