diff --git a/app/soapbox/actions/settings.js b/app/soapbox/actions/settings.js index fc908b696..d3d572715 100644 --- a/app/soapbox/actions/settings.js +++ b/app/soapbox/actions/settings.js @@ -25,6 +25,7 @@ export const defaultSettings = ImmutableMap({ defaultContentType: 'text/plain', themeMode: 'light', locale: navigator.language.split(/[-_]/)[0] || 'en', + showExplanationBox: true, explanationBox: true, otpEnabled: false, diff --git a/app/soapbox/features/public_timeline/index.js b/app/soapbox/features/public_timeline/index.js index 0708ca1c1..dc204f0eb 100644 --- a/app/soapbox/features/public_timeline/index.js +++ b/app/soapbox/features/public_timeline/index.js @@ -14,6 +14,7 @@ import { changeSetting, getSettings } from 'soapbox/actions/settings'; const messages = defineMessages({ title: { id: 'column.public', defaultMessage: 'Federated timeline' }, + dismiss: { id: 'fediverse_tab.explanation_box.dismiss', defaultMessage: 'Don\'t show again' }, }); const mapStateToProps = state => { @@ -28,6 +29,7 @@ const mapStateToProps = state => { hasUnread: state.getIn(['timelines', `${timelineId}${onlyMedia ? ':media' : ''}`, 'unread']) > 0, siteTitle: state.getIn(['instance', 'title']), explanationBoxExpanded: settings.get('explanationBox'), + showExplanationBox: settings.get('showExplanationBox'), }; }; @@ -46,6 +48,7 @@ class CommunityTimeline extends React.PureComponent { onlyMedia: PropTypes.bool, timelineId: PropTypes.string, siteTitle: PropTypes.string, + showExplanationBox: PropTypes.bool, explanationBoxExpanded: PropTypes.bool, }; @@ -72,6 +75,15 @@ class CommunityTimeline extends React.PureComponent { } } + explanationBoxMenu = () => { + const { intl } = this.props; + return [{ text: intl.formatMessage(messages.dismiss), action: this.dismissExplanationBox }]; + } + + dismissExplanationBox = () => { + this.props.dispatch(changeSetting(['showExplanationBox'], false)); + } + toggleExplanationBox = (setting) => { this.props.dispatch(changeSetting(['explanationBox'], setting)); } @@ -82,16 +94,17 @@ class CommunityTimeline extends React.PureComponent { } render() { - const { intl, hasUnread, onlyMedia, timelineId, siteTitle, explanationBoxExpanded } = this.props; + const { intl, hasUnread, onlyMedia, timelineId, siteTitle, showExplanationBox, explanationBoxExpanded } = this.props; return ( -
+ {showExplanationBox &&
} + menu={this.explanationBoxMenu()} expanded={explanationBoxExpanded} onToggle={this.toggleExplanationBox} > @@ -112,7 +125,7 @@ class CommunityTimeline extends React.PureComponent { }} /> -
+
} + {menu && ( +
+ +
+ )}