add toggle to collapse and expand Fediverse tab explaination box, fixes #63

app/soapbox/actions/settings.js

@@ -22,6 +22,7 @@ const defaultSettings = ImmutableMap({
   defaultPrivacy: 'public',
   themeMode: 'light',
   locale: navigator.language.split(/[-_]/)[0] || 'en',
+  explanationBox: true,
 
   systemFont: false,
   dyslexicFont: false,

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

@@ -1,25 +1,65 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import ImmutablePropTypes from 'react-immutable-proptypes';
+import { connect } from 'react-redux';
+import { defineMessages, injectIntl } from 'react-intl';
+import IconButton from 'soapbox/components/icon_button';
+import { changeSetting, getSettings } from 'soapbox/actions/settings';
 
-export default
+
+const messages = defineMessages({
+  collapse: { id: 'explanation_box.collapse', defaultMessage: 'Collapse explanation box' },
+  expand: { id: 'explanation_box.expand', defaultMessage: 'Expand explanation box' },
+});
+
+const mapStateToProps = state => {
+  return {
+    settings: getSettings(state),
+  };
+};
+
+const mapDispatchToProps = (dispatch) => ({
+  toggleExplanationBox(setting) {
+    dispatch(changeSetting(['explanationBox'], setting));
+  },
+});
+
+export default @connect(mapStateToProps, mapDispatchToProps)
+@injectIntl
 class ExplanationBox extends React.PureComponent {
 
   static propTypes = {
     title: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
     explanation: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
     dismissable: PropTypes.bool,
+    intl: PropTypes.object.isRequired,
+    settings: ImmutablePropTypes.map.isRequired,
+    toggleExplanationBox: PropTypes.func,
   };
 
+  handleToggleExplanationBox = () => {
+    this.props.toggleExplanationBox(this.props.settings.get('explanationBox') === true ? false : true);
+  }
+
   render() {
-    const { title, explanation, dismissable } = this.props;
+    const { title, explanation, dismissable, settings, intl } = this.props;
 
     return (
       <div className='explanation-box'>
-        {title && <div className='explanation-box__title'>{title}</div>}
+        {title && <div className='explanation-box__title'>{title}
-        <div className='explanation-box__explanation'>
+          <IconButton
-          {explanation}
+            className='explanation_box__toggle' size={20}
-          {dismissable && <span className='explanation-box__dismiss'>Dismiss</span>}
+            title={settings.get('explanationBox') ? intl.formatMessage(messages.collapse) : intl.formatMessage(messages.expand)}
-        </div>
+            icon={settings.get('explanationBox') ? 'angle-down' : 'angle-up'}
+            onClick={this.handleToggleExplanationBox}
+          />
+        </div>}
+        {settings.get('explanationBox') &&
+          <div className='explanation-box__explanation'>
+            {explanation}
+            {dismissable && <span className='explanation-box__dismiss'>Dismiss</span>}
+          </div>
+        }
       </div>
     );
   }

app/styles/basics.scss

@@ -170,7 +170,10 @@ body {
   &__title {
     font-weight: bold;
     font-size: 16px;
-    margin-bottom: 1em;
+  }
+
+  &__explanation {
+    margin-top: 1em;
   }
 
   &__dismiss {