@@ -110,7 +84,7 @@ export default class ColumnSettings extends React.PureComponent {
-
+
{showPushSettings &&
}
@@ -121,7 +95,7 @@ export default class ColumnSettings extends React.PureComponent {
-
+
{showPushSettings &&
}
@@ -132,7 +106,7 @@ export default class ColumnSettings extends React.PureComponent {
-
+
{showPushSettings &&
}
@@ -143,12 +117,23 @@ export default class ColumnSettings extends React.PureComponent {
-
+
{showPushSettings && }
+
+
+
+
+
+
+ {showPushSettings && }
+
+
+
+
);
}
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
new file mode 100644
index 0000000000..8e77f5a03d
--- /dev/null
+++ b/app/javascript/flavours/glitch/features/notifications/components/notifications_permission_banner.js
@@ -0,0 +1,30 @@
+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 { connect } from 'react-redux';
+import PropTypes from 'prop-types';
+import { FormattedMessage } from 'react-intl';
+
+export default @connect(() => {})
+class NotificationsPermissionBanner extends React.PureComponent {
+
+ static propTypes = {
+ dispatch: PropTypes.func.isRequired,
+ };
+
+ handleClick = () => {
+ this.props.dispatch(requestBrowserPermission());
+ }
+
+ render () {
+ return (
+
+ );
+ }
+
+}
diff --git a/app/javascript/flavours/glitch/features/notifications/components/setting_toggle.js b/app/javascript/flavours/glitch/features/notifications/components/setting_toggle.js
index 0264b68156..e472f7c4fe 100644
--- a/app/javascript/flavours/glitch/features/notifications/components/setting_toggle.js
+++ b/app/javascript/flavours/glitch/features/notifications/components/setting_toggle.js
@@ -13,6 +13,7 @@ export default class SettingToggle extends React.PureComponent {
meta: PropTypes.node,
onChange: PropTypes.func.isRequired,
defaultValue: PropTypes.bool,
+ disabled: PropTypes.bool,
}
onChange = ({ target }) => {
@@ -20,12 +21,12 @@ export default class SettingToggle extends React.PureComponent {
}
render () {
- const { prefix, settings, settingPath, label, meta, defaultValue } = this.props;
+ const { prefix, settings, settingPath, label, meta, defaultValue, disabled } = this.props;
const id = ['setting-toggle', prefix, ...settingPath].filter(Boolean).join('-');
return (
-
+
{meta && {meta}}
diff --git a/app/javascript/flavours/glitch/features/notifications/containers/column_settings_container.js b/app/javascript/flavours/glitch/features/notifications/containers/column_settings_container.js
index b4e309fcec..c2564f44ea 100644
--- a/app/javascript/flavours/glitch/features/notifications/containers/column_settings_container.js
+++ b/app/javascript/flavours/glitch/features/notifications/containers/column_settings_container.js
@@ -11,7 +11,7 @@ import { showAlert } from 'flavours/glitch/actions/alerts';
const messages = defineMessages({
clearMessage: { id: 'notifications.clear_confirmation', defaultMessage: 'Are you sure you want to permanently clear all your notifications?' },
clearConfirm: { id: 'notifications.clear', defaultMessage: 'Clear notifications' },
- permissionDenied: { id: 'notifications.permission_denied', defaultMessage: 'Cannot enable desktop notifications as permission has been denied.' },
+ permissionDenied: { id: 'notifications.permission_denied_alert', defaultMessage: 'Desktop notifications can\'t be enabled, as browser permission has been denied before' },
});
const mapStateToProps = state => ({
diff --git a/app/javascript/flavours/glitch/features/notifications/index.js b/app/javascript/flavours/glitch/features/notifications/index.js
index 87fb3074b4..af928594d7 100644
--- a/app/javascript/flavours/glitch/features/notifications/index.js
+++ b/app/javascript/flavours/glitch/features/notifications/index.js
@@ -27,6 +27,7 @@ import ScrollableList from 'flavours/glitch/components/scrollable_list';
import LoadGap from 'flavours/glitch/components/load_gap';
import Icon from 'flavours/glitch/components/icon';
import compareId from 'flavours/glitch/util/compare_id';
+import NotificationsPermissionBanner from './components/notifications_permission_banner';
import NotificationPurgeButtonsContainer from 'flavours/glitch/containers/notification_purge_buttons_container';
@@ -62,7 +63,7 @@ const mapStateToProps = state => ({
notifCleaningActive: state.getIn(['notifications', 'cleaningMode']),
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']) !== 'granted',
+ needsNotificationPermission: state.getIn(['settings', 'notifications', 'alerts']).includes(true) && state.getIn(['notifications', 'browserSupport']) && state.getIn(['notifications', 'browserPermission']) === 'default',
});
/* glitch */
@@ -213,7 +214,7 @@ class Notifications extends React.PureComponent {
}
render () {
- const { intl, notifications, shouldUpdateScroll, isLoading, isUnread, columnId, multiColumn, hasMore, numPending, showFilterBar, lastReadId, canMarkAsRead } = this.props;
+ const { intl, notifications, shouldUpdateScroll, isLoading, isUnread, columnId, multiColumn, hasMore, numPending, showFilterBar, lastReadId, canMarkAsRead, needsNotificationPermission } = this.props;
const { notifCleaning, notifCleaningActive } = this.props;
const { animatingNCD } = this.state;
const pinned = !!columnId;
@@ -259,6 +260,8 @@ class Notifications extends React.PureComponent {
showLoading={isLoading && notifications.size === 0}
hasMore={hasMore}
numPending={numPending}
+ prepend={needsNotificationPermission &&
}
+ alwaysPrepend
emptyMessage={emptyMessage}
onLoadMore={this.handleLoadOlder}
onLoadPending={this.handleLoadPending}
@@ -335,7 +338,6 @@ class Notifications extends React.PureComponent {
multiColumn={multiColumn}
localSettings={this.props.localSettings}
extraButton={extraButtons}
- collapseIssues={this.props.needsNotificationPermission}
appendContent={notifCleaningDrawer}
>
diff --git a/app/javascript/flavours/glitch/features/ui/components/notifications_counter_icon.js b/app/javascript/flavours/glitch/features/ui/components/notifications_counter_icon.js
index ef195013cc..6b52ef9b46 100644
--- a/app/javascript/flavours/glitch/features/ui/components/notifications_counter_icon.js
+++ b/app/javascript/flavours/glitch/features/ui/components/notifications_counter_icon.js
@@ -3,7 +3,6 @@ import IconWithBadge from 'flavours/glitch/components/icon_with_badge';
const mapStateToProps = state => ({
count: state.getIn(['local_settings', 'notifications', 'tab_badge']) ? state.getIn(['notifications', 'unread']) : 0,
- issueBadge: state.getIn(['settings', 'notifications', 'alerts']).includes(true) && state.getIn(['notifications', 'browserSupport']) && state.getIn(['notifications', 'browserPermission']) !== 'granted',
id: 'bell',
});
diff --git a/app/javascript/flavours/glitch/reducers/settings.js b/app/javascript/flavours/glitch/reducers/settings.js
index 3037c38856..bf0545c480 100644
--- a/app/javascript/flavours/glitch/reducers/settings.js
+++ b/app/javascript/flavours/glitch/reducers/settings.js
@@ -39,6 +39,7 @@ const initialState = ImmutableMap({
reblog: false,
mention: false,
poll: false,
+ status: false,
}),
quickFilter: ImmutableMap({
@@ -54,6 +55,7 @@ const initialState = ImmutableMap({
reblog: true,
mention: true,
poll: true,
+ status: true,
}),
sounds: ImmutableMap({
@@ -63,6 +65,7 @@ const initialState = ImmutableMap({
reblog: true,
mention: true,
poll: true,
+ status: true,
}),
}),
diff --git a/app/javascript/flavours/glitch/styles/components/columns.scss b/app/javascript/flavours/glitch/styles/components/columns.scss
index a618186818..be32ae52e6 100644
--- a/app/javascript/flavours/glitch/styles/components/columns.scss
+++ b/app/javascript/flavours/glitch/styles/components/columns.scss
@@ -583,6 +583,10 @@
margin-bottom: 10px;
}
+.column-settings__row--with-margin {
+ margin-bottom: 15px;
+}
+
.column-settings__hashtags {
.column-settings__row {
margin-bottom: 15px;
@@ -690,3 +694,25 @@
margin-bottom: 15px;
}
}
+
+.notifications-permission-banner {
+ padding: 30px;
+ border-bottom: 1px solid lighten($ui-base-color, 8%);
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+
+ h2 {
+ font-size: 16px;
+ font-weight: 500;
+ margin-bottom: 15px;
+ text-align: center;
+ }
+
+ p {
+ color: $darker-text-color;
+ margin-bottom: 15px;
+ text-align: center;
+ }
+}