From e0a253fb2245e538f1854090eb0b72416a21b5bf Mon Sep 17 00:00:00 2001 From: ThibG Date: Tue, 15 Dec 2020 18:43:54 +0100 Subject: [PATCH] [Glitch] Change notification permission handling Port 79efcf8aad17b8bc47d98592151fbd24b977cbeb to glitch-soc Co-authored-by: Claire Signed-off-by: Claire --- .../flavours/glitch/actions/notifications.js | 9 ++----- .../components/column_settings.js | 25 +++++++++++++------ .../components/grant_permission_button.js | 19 ++++++++++++++ .../notifications_permission_banner.js | 5 ++-- .../glitch/features/notifications/index.js | 2 +- .../flavours/glitch/reducers/notifications.js | 3 --- .../flavours/glitch/reducers/settings.js | 2 ++ .../glitch/styles/components/columns.scss | 8 +++++- 8 files changed, 51 insertions(+), 22 deletions(-) create mode 100644 app/javascript/flavours/glitch/features/notifications/components/grant_permission_button.js diff --git a/app/javascript/flavours/glitch/actions/notifications.js b/app/javascript/flavours/glitch/actions/notifications.js index 9f12df77383..bd3a34e5d90 100644 --- a/app/javascript/flavours/glitch/actions/notifications.js +++ b/app/javascript/flavours/glitch/actions/notifications.js @@ -50,9 +50,8 @@ 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_DISMISS_BROWSER_PERMISSION = 'NOTIFICATIONS_DISMISS_BROWSER_PERMISSION'; +export const NOTIFICATIONS_SET_BROWSER_SUPPORT = 'NOTIFICATIONS_SET_BROWSER_SUPPORT'; +export const NOTIFICATIONS_SET_BROWSER_PERMISSION = 'NOTIFICATIONS_SET_BROWSER_PERMISSION'; defineMessages({ mention: { id: 'notification.mention', defaultMessage: '{name} mentioned you' }, @@ -372,7 +371,3 @@ export function setBrowserPermission (value) { value, }; } - -export const dismissBrowserPermission = () => ({ - type: NOTIFICATIONS_DISMISS_BROWSER_PERMISSION, -}); diff --git a/app/javascript/flavours/glitch/features/notifications/components/column_settings.js b/app/javascript/flavours/glitch/features/notifications/components/column_settings.js index 9748219dd95..e502c3173f7 100644 --- a/app/javascript/flavours/glitch/features/notifications/components/column_settings.js +++ b/app/javascript/flavours/glitch/features/notifications/components/column_settings.js @@ -3,6 +3,7 @@ import PropTypes from 'prop-types'; import ImmutablePropTypes from 'react-immutable-proptypes'; import { FormattedMessage } from 'react-intl'; import ClearColumnButton from './clear_column_button'; +import GrantPermissionButton from './grant_permission_button'; import SettingToggle from './setting_toggle'; export default class ColumnSettings extends React.PureComponent { @@ -23,7 +24,7 @@ export default class ColumnSettings extends React.PureComponent { } render () { - const { settings, pushSettings, onChange, onClear, alertsEnabled, browserSupport, browserPermission } = this.props; + const { settings, pushSettings, onChange, onClear, alertsEnabled, browserSupport, browserPermission, onRequestNotificationPermission } = this.props; const filterShowStr = ; const filterAdvancedStr = ; @@ -43,6 +44,14 @@ export default class ColumnSettings extends React.PureComponent { )} + {alertsEnabled && browserSupport && browserPermission === 'default' && ( +
+ + + +
+ )} +
@@ -62,7 +71,7 @@ export default class ColumnSettings extends React.PureComponent {
- + {showPushSettings && } @@ -73,7 +82,7 @@ export default class ColumnSettings extends React.PureComponent {
- + {showPushSettings && } @@ -84,7 +93,7 @@ export default class ColumnSettings extends React.PureComponent {
- + {showPushSettings && } @@ -95,7 +104,7 @@ export default class ColumnSettings extends React.PureComponent {
- + {showPushSettings && } @@ -106,7 +115,7 @@ export default class ColumnSettings extends React.PureComponent {
- + {showPushSettings && } @@ -117,7 +126,7 @@ export default class ColumnSettings extends React.PureComponent {
- + {showPushSettings && } @@ -128,7 +137,7 @@ export default class ColumnSettings extends React.PureComponent {
- + {showPushSettings && } diff --git a/app/javascript/flavours/glitch/features/notifications/components/grant_permission_button.js b/app/javascript/flavours/glitch/features/notifications/components/grant_permission_button.js new file mode 100644 index 00000000000..798e4c7872b --- /dev/null +++ b/app/javascript/flavours/glitch/features/notifications/components/grant_permission_button.js @@ -0,0 +1,19 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import { FormattedMessage } from 'react-intl'; + +export default class GrantPermissionButton extends React.PureComponent { + + static propTypes = { + onClick: PropTypes.func.isRequired, + }; + + render () { + return ( + + ); + } + +} 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 73fc05dea33..dd163225e93 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 @@ -2,7 +2,8 @@ import React from 'react'; import Icon from 'flavours/glitch/components/icon'; import Button from 'flavours/glitch/components/button'; import IconButton from 'flavours/glitch/components/icon_button'; -import { requestBrowserPermission, dismissBrowserPermission } from 'flavours/glitch/actions/notifications'; +import { requestBrowserPermission } from 'flavours/glitch/actions/notifications'; +import { changeSetting } from 'flavours/glitch/actions/settings'; import { connect } from 'react-redux'; import PropTypes from 'prop-types'; import { defineMessages, injectIntl, FormattedMessage } from 'react-intl'; @@ -25,7 +26,7 @@ class NotificationsPermissionBanner extends React.PureComponent { } handleClose = () => { - this.props.dispatch(dismissBrowserPermission()); + this.props.dispatch(changeSetting(['notifications', 'dismissPermissionBanner'], true)); } render () { diff --git a/app/javascript/flavours/glitch/features/notifications/index.js b/app/javascript/flavours/glitch/features/notifications/index.js index 73d969517f9..5ceda9a91ce 100644 --- a/app/javascript/flavours/glitch/features/notifications/index.js +++ b/app/javascript/flavours/glitch/features/notifications/index.js @@ -69,7 +69,7 @@ const mapStateToProps = state => ({ notifCleaningActive: state.getIn(['notifications', 'cleaningMode']), lastReadId: state.getIn(['local_settings', 'notifications', 'show_unread']) ? state.getIn(['notifications', 'readMarkerId']) : '0', canMarkAsRead: state.getIn(['local_settings', 'notifications', 'show_unread']) && state.getIn(['notifications', 'readMarkerId']) !== '0' && getNotifications(state).some(item => item !== null && compareId(item.get('id'), state.getIn(['notifications', 'readMarkerId'])) > 0), - needsNotificationPermission: state.getIn(['settings', 'notifications', 'alerts']).includes(true) && state.getIn(['notifications', 'browserSupport']) && state.getIn(['notifications', 'browserPermission']) === 'default', + needsNotificationPermission: state.getIn(['settings', 'notifications', 'alerts']).includes(true) && state.getIn(['notifications', 'browserSupport']) && state.getIn(['notifications', 'browserPermission']) === 'default' && !state.getIn(['settings', 'notifications', 'dismissPermissionBanner']), }); /* glitch */ diff --git a/app/javascript/flavours/glitch/reducers/notifications.js b/app/javascript/flavours/glitch/reducers/notifications.js index c630cc7e3b6..b4c5ef71a07 100644 --- a/app/javascript/flavours/glitch/reducers/notifications.js +++ b/app/javascript/flavours/glitch/reducers/notifications.js @@ -19,7 +19,6 @@ 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, @@ -284,8 +283,6 @@ 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/reducers/settings.js b/app/javascript/flavours/glitch/reducers/settings.js index bf0545c4804..091b8feecf0 100644 --- a/app/javascript/flavours/glitch/reducers/settings.js +++ b/app/javascript/flavours/glitch/reducers/settings.js @@ -48,6 +48,8 @@ const initialState = ImmutableMap({ advanced: false, }), + dismissPermissionBanner: false, + shows: ImmutableMap({ follow: true, follow_request: false, diff --git a/app/javascript/flavours/glitch/styles/components/columns.scss b/app/javascript/flavours/glitch/styles/components/columns.scss index 2550f50f472..2d080d3b9c2 100644 --- a/app/javascript/flavours/glitch/styles/components/columns.scss +++ b/app/javascript/flavours/glitch/styles/components/columns.scss @@ -443,6 +443,12 @@ } } +.column-header__permission-btn { + display: inline; + font-weight: inherit; + text-decoration: underline; +} + .column-header__setting-arrows { float: right; @@ -690,7 +696,7 @@ } .column-settings__row { - .text-btn { + .text-btn:not(.column-header__permission-btn) { margin-bottom: 15px; } }