diff --git a/app/soapbox/features/notifications/components/column_settings.js b/app/soapbox/features/notifications/components/column_settings.js index c48b72fbf..f53ba70c8 100644 --- a/app/soapbox/features/notifications/components/column_settings.js +++ b/app/soapbox/features/notifications/components/column_settings.js @@ -4,6 +4,7 @@ import ImmutablePropTypes from 'react-immutable-proptypes'; import { FormattedMessage } from 'react-intl'; import ClearColumnButton from './clear_column_button'; import SettingToggle from './setting_toggle'; +import MultiSettingToggle from './multi_setting_toggle'; export default class ColumnSettings extends React.PureComponent { @@ -18,15 +19,24 @@ export default class ColumnSettings extends React.PureComponent { this.props.onChange(['push', ...path], checked); } + onAllSoundsChange = (path, checked) => { + const soundSettings = [['sounds', 'follow'], ['sounds', 'favourite'], ['sounds', 'mention'], ['sounds', 'reblog'], ['sounds', 'poll']]; + + for (var i = 0; i < soundSettings.length; i++) { + this.props.onChange(soundSettings[i], checked); + } + } + render() { const { settings, pushSettings, onChange, onClear } = this.props; const filterShowStr = ; const filterAdvancedStr = ; const alertStr = ; + const allSoundsStr = ; const showStr = ; const soundStr = ; - + const soundSettings = [['sounds', 'follow'], ['sounds', 'favourite'], ['sounds', 'mention'], ['sounds', 'reblog'], ['sounds', 'poll']]; const showPushSettings = pushSettings.get('browserSupport') && pushSettings.get('isSubscribed'); const pushStr = showPushSettings && ; @@ -36,11 +46,19 @@ export default class ColumnSettings extends React.PureComponent { +
+ + + + +
+
+
diff --git a/app/soapbox/features/notifications/components/multi_setting_toggle.js b/app/soapbox/features/notifications/components/multi_setting_toggle.js new file mode 100644 index 000000000..392369edc --- /dev/null +++ b/app/soapbox/features/notifications/components/multi_setting_toggle.js @@ -0,0 +1,43 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import ImmutablePropTypes from 'react-immutable-proptypes'; +import Toggle from 'react-toggle'; + +export default class MultiSettingToggle extends React.PureComponent { + + static propTypes = { + prefix: PropTypes.string, + settings: ImmutablePropTypes.map.isRequired, + settingPaths: PropTypes.array.isRequired, + label: PropTypes.node, + onChange: PropTypes.func.isRequired, + icons: PropTypes.oneOfType([ + PropTypes.bool, + PropTypes.object, + ]), + ariaLabel: PropTypes.string, + } + + onChange = ({ target }) => { + for (var i = 0; i < this.props.settingPaths.length; i++) { + this.props.onChange(this.props.settingPaths[i], target.checked); + } + } + + areTrue = (settingPath) => { + return this.props.settings.getIn(settingPath) === true; + } + + render() { + const { prefix, settingPaths, label, icons, ariaLabel } = this.props; + const id = ['setting-toggle', prefix].filter(Boolean).join('-'); + + return ( +
+ + {label && ()} +
+ ); + } + +}