diff --git a/app/javascript/mastodon/actions/notifications.js b/app/javascript/mastodon/actions/notifications.js index 93e18fba921..3464ac99597 100644 --- a/app/javascript/mastodon/actions/notifications.js +++ b/app/javascript/mastodon/actions/notifications.js @@ -37,9 +37,8 @@ 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_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' }, @@ -284,7 +283,3 @@ export function setBrowserPermission (value) { value, }; } - -export const dismissBrowserPermission = () => ({ - type: NOTIFICATIONS_DISMISS_BROWSER_PERMISSION, -}); diff --git a/app/javascript/mastodon/features/notifications/components/column_settings.js b/app/javascript/mastodon/features/notifications/components/column_settings.js index 169e4b44de8..8339a367ebc 100644 --- a/app/javascript/mastodon/features/notifications/components/column_settings.js +++ b/app/javascript/mastodon/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 = ; @@ -42,6 +43,14 @@ export default class ColumnSettings extends React.PureComponent { )} + {alertsEnabled && browserSupport && browserPermission === 'default' && ( +
+ + + +
+ )} +
@@ -61,7 +70,7 @@ export default class ColumnSettings extends React.PureComponent {
- + {showPushSettings && } @@ -72,7 +81,7 @@ export default class ColumnSettings extends React.PureComponent {
- + {showPushSettings && } @@ -83,7 +92,7 @@ export default class ColumnSettings extends React.PureComponent {
- + {showPushSettings && } @@ -94,7 +103,7 @@ export default class ColumnSettings extends React.PureComponent {
- + {showPushSettings && } @@ -105,7 +114,7 @@ export default class ColumnSettings extends React.PureComponent {
- + {showPushSettings && } @@ -116,7 +125,7 @@ export default class ColumnSettings extends React.PureComponent {
- + {showPushSettings && } @@ -127,7 +136,7 @@ export default class ColumnSettings extends React.PureComponent {
- + {showPushSettings && } diff --git a/app/javascript/mastodon/features/notifications/components/grant_permission_button.js b/app/javascript/mastodon/features/notifications/components/grant_permission_button.js new file mode 100644 index 00000000000..798e4c7872b --- /dev/null +++ b/app/javascript/mastodon/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/mastodon/features/notifications/components/notifications_permission_banner.js b/app/javascript/mastodon/features/notifications/components/notifications_permission_banner.js index 6daf75814a1..df9b7fb1b82 100644 --- a/app/javascript/mastodon/features/notifications/components/notifications_permission_banner.js +++ b/app/javascript/mastodon/features/notifications/components/notifications_permission_banner.js @@ -2,7 +2,8 @@ import React from 'react'; import Icon from 'mastodon/components/icon'; import Button from 'mastodon/components/button'; import IconButton from 'mastodon/components/icon_button'; -import { requestBrowserPermission, dismissBrowserPermission } from 'mastodon/actions/notifications'; +import { requestBrowserPermission } from 'mastodon/actions/notifications'; +import { changeSetting } from 'mastodon/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/mastodon/features/notifications/index.js b/app/javascript/mastodon/features/notifications/index.js index 2e0afd8634f..108470c9a71 100644 --- a/app/javascript/mastodon/features/notifications/index.js +++ b/app/javascript/mastodon/features/notifications/index.js @@ -62,7 +62,7 @@ const mapStateToProps = state => ({ numPending: state.getIn(['notifications', 'pendingItems'], ImmutableList()).size, lastReadId: state.getIn(['notifications', 'readMarkerId']), canMarkAsRead: 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']), }); export default @connect(mapStateToProps) diff --git a/app/javascript/mastodon/reducers/notifications.js b/app/javascript/mastodon/reducers/notifications.js index 46a9d5376d9..1d48747176b 100644 --- a/app/javascript/mastodon/reducers/notifications.js +++ b/app/javascript/mastodon/reducers/notifications.js @@ -12,7 +12,6 @@ import { NOTIFICATIONS_MARK_AS_READ, NOTIFICATIONS_SET_BROWSER_SUPPORT, NOTIFICATIONS_SET_BROWSER_PERMISSION, - NOTIFICATIONS_DISMISS_BROWSER_PERMISSION, } from '../actions/notifications'; import { ACCOUNT_BLOCK_SUCCESS, @@ -251,8 +250,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'); default: return state; } diff --git a/app/javascript/mastodon/reducers/settings.js b/app/javascript/mastodon/reducers/settings.js index 057fa353a27..357ab352aee 100644 --- a/app/javascript/mastodon/reducers/settings.js +++ b/app/javascript/mastodon/reducers/settings.js @@ -44,6 +44,8 @@ const initialState = ImmutableMap({ advanced: false, }), + dismissPermissionBanner: false, + shows: ImmutableMap({ follow: true, follow_request: false, diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss index 22bf025fb69..2163d74fc42 100644 --- a/app/javascript/styles/mastodon/components.scss +++ b/app/javascript/styles/mastodon/components.scss @@ -3459,6 +3459,12 @@ a.status-card.compact:hover { } } +.column-header__permission-btn { + display: inline; + font-weight: inherit; + text-decoration: underline; +} + .column-header__setting-arrows { float: right; @@ -3857,7 +3863,7 @@ a.status-card.compact:hover { } .column-settings__row { - .text-btn { + .text-btn:not(.column-header__permission-btn) { margin-bottom: 15px; } }