Merge branch 'dismiss-explanation-box' into 'develop'

Let fedi explanation box be dismissed, fixes #624

Closes #624

See merge request soapbox-pub/soapbox-fe!486

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,
 

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 (
       <Column label={intl.formatMessage(messages.title)}>
         <HomeColumnHeader activeItem='fediverse' active={hasUnread} >
           <ColumnSettingsContainer />
         </HomeColumnHeader>
-        <div className='explanation-box'>
+        {showExplanationBox && <div className='explanation-box'>
           <Accordion
             headline={<FormattedMessage id='fediverse_tab.explanation_box.title' defaultMessage='What is the Fediverse?' />}
+            menu={this.explanationBoxMenu()}
             expanded={explanationBoxExpanded}
             onToggle={this.toggleExplanationBox}
           >
@@ -112,7 +125,7 @@ class CommunityTimeline extends React.PureComponent {
               }}
             />
           </Accordion>
-        </div>
+        </div>}
         <StatusListContainer
           scrollKey={`${timelineId}_timeline`}
           timelineId={`${timelineId}${onlyMedia ? ':media' : ''}`}

app/soapbox/features/ui/components/accordion.js

@@ -2,6 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { defineMessages, injectIntl } from 'react-intl';
 import classNames from 'classnames';
+import DropdownMenu from 'soapbox/containers/dropdown_menu_container';
 
 const messages = defineMessages({
   collapse: { id: 'accordion.collapse', defaultMessage: 'Collapse' },
@@ -13,6 +14,7 @@ export default @injectIntl class Accordion extends React.PureComponent {
   static propTypes = {
     headline: PropTypes.node.isRequired,
     children: PropTypes.oneOfType([PropTypes.string, PropTypes.element, PropTypes.node]),
+    menu: PropTypes.array,
     expanded: PropTypes.bool,
     onToggle: PropTypes.func,
     intl: PropTypes.object.isRequired,
@@ -29,10 +31,15 @@ export default @injectIntl class Accordion extends React.PureComponent {
   }
 
   render() {
-    const { headline, children, expanded, intl } = this.props;
+    const { headline, children, menu, expanded, intl } = this.props;
 
     return (
       <div className={classNames('accordion', { 'accordion--expanded' : expanded })}>
+        {menu && (
+          <div className='accordion__menu'>
+            <DropdownMenu items={menu} icon='ellipsis-v' size={18} direction='right' />
+          </div>
+        )}
         <button
           type='button'
           className='accordion__title'

app/styles/components/accordion.scss

@@ -9,6 +9,7 @@
   background-color: var(--brand-color--faint);
   border-radius: 8px;
   margin: 0;
+  position: relative;
 
   &__title {
     font-weight: bold !important;
@@ -34,6 +35,12 @@
     }
   }
 
+  &__menu {
+    position: absolute;
+    top: 17px;
+    right: 40px;
+  }
+
   &__content {
     height: 0;
     overflow: hidden;