Add scrolling SubNavigation to Home and Account timelines

app/soapbox/features/account_timeline/components/column_settings.js

@@ -1,38 +1,55 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import ImmutablePropTypes from 'react-immutable-proptypes';
-import { injectIntl, FormattedMessage } from 'react-intl';
+import { injectIntl, defineMessages, FormattedMessage } from 'react-intl';
+import IconButton from 'soapbox/components/icon_button';
 import SettingToggle from '../../notifications/components/setting_toggle';
 
+const messages = defineMessages({
+  close: { id: 'lightbox.close', defaultMessage: 'Close' },
+});
+
 export default @injectIntl
 class ColumnSettings extends React.PureComponent {
 
   static propTypes = {
+    intl: PropTypes.object.isRequired,
     settings: ImmutablePropTypes.map.isRequired,
     onChange: PropTypes.func.isRequired,
-    intl: PropTypes.object.isRequired,
+    onClose: PropTypes.func.isRequired,
   };
 
   render() {
-    const { settings, onChange } = this.props;
+    const { intl, settings, onChange, onClose } = this.props;
 
     return (
-      <div>
-        <div className='column-settings__row'>
-          <SettingToggle
-            prefix='account_timeline'
-            settings={settings}
-            settingPath={['shows', 'pinned']}
-            onChange={onChange}
-            label={<FormattedMessage id='account_timeline.column_settings.show_pinned' defaultMessage='Show pinned posts' />}
-          />
-          <SettingToggle
-            prefix='account_timeline'
-            settings={settings}
-            settingPath={['shows', 'reblog']}
-            onChange={onChange}
-            label={<FormattedMessage id='home.column_settings.show_reblogs' defaultMessage='Show reposts' />}
-          />
+      <div className='column-settings'>
+        <div className='column-settings__header'>
+          <h1 className='column-settings__title'>
+            <FormattedMessage id='account.column_settings.title' defaultMessage='Acccount timeline settings' />
+          </h1>
+          <div className='column-settings__close'>
+            <IconButton title={intl.formatMessage(messages.close)} src={require('@tabler/icons/icons/x.svg')} onClick={onClose} />
+          </div>
+        </div>
+
+        <div className='column-settings__content'>
+          <div className='column-settings__row'>
+            <SettingToggle
+              prefix='account_timeline'
+              settings={settings}
+              settingPath={['shows', 'pinned']}
+              onChange={onChange}
+              label={<FormattedMessage id='account_timeline.column_settings.show_pinned' defaultMessage='Show pinned posts' />}
+            />
+            <SettingToggle
+              prefix='account_timeline'
+              settings={settings}
+              settingPath={['shows', 'reblog']}
+              onChange={onChange}
+              label={<FormattedMessage id='home.column_settings.show_reblogs' defaultMessage='Show reposts' />}
+            />
+          </div>
         </div>
       </div>
     );

app/soapbox/features/account_timeline/index.js

@@ -4,7 +4,6 @@ import ImmutablePropTypes from 'react-immutable-proptypes';
 import PropTypes from 'prop-types';
 import { fetchAccount, fetchAccountByUsername } from '../../actions/accounts';
 import { expandAccountFeaturedTimeline, expandAccountTimeline } from '../../actions/timelines';
-import Icon from 'soapbox/components/icon';
 import StatusList from '../../components/status_list';
 import LoadingIndicator from '../../components/loading_indicator';
 import Column from '../ui/components/column';
@@ -19,7 +18,7 @@ import { fetchPatronAccount } from '../../actions/patron';
 import { getSoapboxConfig } from 'soapbox/actions/soapbox';
 import { getSettings } from 'soapbox/actions/settings';
 import { makeGetStatusIds, findAccountByUsername } from 'soapbox/selectors';
-import classNames from 'classnames';
+import SubNavigation from 'soapbox/components/sub_navigation';
 
 const makeMapStateToProps = () => {
   const getStatusIds = makeGetStatusIds();
@@ -82,11 +81,6 @@ class AccountTimeline extends ImmutablePureComponent {
     unavailable: PropTypes.bool,
   };
 
-  state = {
-    collapsed: true,
-    animating: false,
-  }
-
   componentDidMount() {
     const { params: { username }, accountId, accountApId, withReplies, me, patronEnabled } = this.props;
 
@@ -135,18 +129,8 @@ class AccountTimeline extends ImmutablePureComponent {
     }
   }
 
-  handleToggleClick = (e) => {
-    e.stopPropagation();
-    this.setState({ collapsed: !this.state.collapsed, animating: true });
-  }
-
-  handleTransitionEnd = () => {
-    this.setState({ animating: false });
-  }
-
   render() {
     const { statusIds, featuredStatusIds, isLoading, hasMore, isBlocked, isAccount, accountId, unavailable, accountUsername } = this.props;
-    const { collapsed, animating } = this.state;
 
     if (!isAccount && accountId !== -1) {
       return (
@@ -177,6 +161,12 @@ class AccountTimeline extends ImmutablePureComponent {
 
     return (
       <Column transparent>
+        <SubNavigation
+          className='account__sub-navigation'
+          message={`@${accountUsername}`}
+          showAfter={300}
+          settings={ColumnSettingsContainer}
+        />
         <div className='account__section-headline'>
           <NavLink exact to={`/@${accountUsername}`}>
             <FormattedMessage id='account.posts' defaultMessage='Posts' />
@@ -187,16 +177,6 @@ class AccountTimeline extends ImmutablePureComponent {
           <NavLink exact to={`/@${accountUsername}/media`}>
             <FormattedMessage id='account.media' defaultMessage='Media' />
           </NavLink>
-          <div className='column-header__buttons'>
-            <button onClick={this.handleToggleClick}>
-              <Icon id='sliders' />
-            </button>
-          </div>
-        </div>
-        <div className={classNames('column-header__collapsible', { collapsed, animating })} onTransitionEnd={this.handleTransitionEnd}>
-          <div className='column-header__collapsible-inner'>
-            {(!collapsed || animating) && <ColumnSettingsContainer />}
-          </div>
         </div>
         <StatusList
           scrollKey='account_timeline'

app/soapbox/features/home_timeline/index.js

@@ -4,11 +4,13 @@ import { expandHomeTimeline } from '../../actions/timelines';
 import PropTypes from 'prop-types';
 import StatusListContainer from '../ui/containers/status_list_container';
 import Column from '../../components/column';
+import ColumnSettings from './containers/column_settings_container';
 import BundleContainer from 'soapbox/features/ui/containers/bundle_container';
 import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
 import { Link } from 'react-router-dom';
 import { OrderedSet as ImmutableOrderedSet } from 'immutable';
 import { getFeatures } from 'soapbox/utils/features';
+import SubNavigation from 'soapbox/components/sub_navigation';
 
 function FollowRecommendationsContainer() {
   return import(/* webpackChunkName: "features/follow_recommendations" */'soapbox/features/follow_recommendations/components/follow_recommendations_container');
@@ -99,19 +101,24 @@ class HomeTimeline extends React.PureComponent {
     const showSuggestions = features.suggestions && isEmpty && !isLoading && !done;
 
     return (
-      <Column label={intl.formatMessage(messages.title)} transparent={!showSuggestions}>
+      <Column label={intl.formatMessage(messages.title)} transparent={!showSuggestions} className='home-timeline'>
         {showSuggestions ? (
           <BundleContainer fetchComponent={FollowRecommendationsContainer}>
             {Component => <Component onDone={this.handleDone} />}
           </BundleContainer>
-        ) : (
+        ) : (<>
+          <SubNavigation
+            message={intl.formatMessage(messages.title)}
+            settings={ColumnSettings}
+            showAfter={300}
+          />
           <StatusListContainer
             scrollKey='home_timeline'
             onLoadMore={this.handleLoadMore}
             timelineId='home'
             emptyMessage={<FormattedMessage id='empty_column.home' defaultMessage='Your home timeline is empty! Visit {public} to get started and meet other users.' values={{ public: <Link to='/timeline/local'><FormattedMessage id='empty_column.home.local_tab' defaultMessage='the {site_title} tab' values={{ site_title: siteTitle }} /></Link> }} />}
           />
-        )}
+        </>)}
       </Column>
     );
   }