Add scrolling SubNavigation to Home and Account timelines

app/soapbox/components/sub_navigation.js

@@ -31,6 +31,8 @@ class SubNavigation extends React.PureComponent {
     message: PropTypes.string,
     settings: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
     onOpenSettings: PropTypes.func.isRequired,
+    className: PropTypes.string,
+    showAfter: PropTypes.number,
   }
 
   static contextTypes = {
@@ -38,7 +40,8 @@ class SubNavigation extends React.PureComponent {
   }
 
   state = {
-    scrolled: false,
+    sticking: false,
+    visible: typeof this.props.showAfter !== 'number',
   }
 
   handleBackClick = () => {
@@ -71,16 +74,33 @@ class SubNavigation extends React.PureComponent {
     window.removeEventListener('scroll', this.handleScroll);
   }
 
-  handleScroll = throttle(() => {
+  updateSticking = () => {
     if (this.node) {
       const { top } = this.node.getBoundingClientRect();
 
       if (top <= 50) {
-        this.setState({ scrolled: true });
+        this.setState({ sticking: true });
       } else {
-        this.setState({ scrolled: false });
+        this.setState({ sticking: false });
       }
     }
+  }
+
+  updateVisibile = () => {
+    const { showAfter } = this.props;
+
+    if (typeof showAfter === 'number') {
+      if (document.documentElement.scrollTop >= showAfter) {
+        this.setState({ visible: true });
+      } else {
+        this.setState({ visible: false });
+      }
+    }
+  }
+
+  handleScroll = throttle(() => {
+    this.updateSticking();
+    this.updateVisibile();
   }, 150, { trailing: true });
 
   handleOpenSettings = () => {
@@ -92,11 +112,11 @@ class SubNavigation extends React.PureComponent {
   }
 
   render() {
-    const { intl, message, settings: Settings } = this.props;
+    const { intl, message, settings: Settings, className, showAfter } = this.props;
-    const { scrolled } = this.state;
+    const { sticking, visible } = this.state;
 
     return (
-      <div className={classNames('sub-navigation', { 'sub-navigation--scrolled': scrolled })} ref={this.setRef}>
+      <div className={classNames(className, 'sub-navigation', { 'sub-navigation--sticking': sticking, 'sub-navigation--hidden': !visible, 'sub-navigation--visible': visible, 'sub-navigation--show-after': typeof showAfter === 'number' })} ref={this.setRef}>
         <div className='sub-navigation__content'>
           <button
             className='sub-navigation__back'

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'>
-        <div className='column-settings__row'>
+        <div className='column-settings__header'>
-          <SettingToggle
+          <h1 className='column-settings__title'>
-            prefix='account_timeline'
+            <FormattedMessage id='account.column_settings.title' defaultMessage='Acccount timeline settings' />
-            settings={settings}
+          </h1>
-            settingPath={['shows', 'pinned']}
+          <div className='column-settings__close'>
-            onChange={onChange}
+            <IconButton title={intl.formatMessage(messages.close)} src={require('@tabler/icons/icons/x.svg')} onClick={onClose} />
-            label={<FormattedMessage id='account_timeline.column_settings.show_pinned' defaultMessage='Show pinned posts' />}
+          </div>
-          />
+        </div>
-          <SettingToggle
+
-            prefix='account_timeline'
+        <div className='column-settings__content'>
-            settings={settings}
+          <div className='column-settings__row'>
-            settingPath={['shows', 'reblog']}
+            <SettingToggle
-            onChange={onChange}
+              prefix='account_timeline'
-            label={<FormattedMessage id='home.column_settings.show_reblogs' defaultMessage='Show reposts' />}
+              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>
     );
   }

app/styles/components/account-header.scss

@@ -335,3 +335,13 @@
     }
   }
 }
+
+.account__sub-navigation {
+  display: none;
+
+  @media (max-width: 897px) {
+    display: flex;
+    position: fixed;
+    margin: 0;
+  }
+}

app/styles/components/columns.scss

@@ -924,8 +924,8 @@
 }
 
 // Make MaterialStatus flush against SubNavigation
-.sub-navigation ~ .slist .item-list > article:first-child .material-status__status,
+.sub-navigation:not(.sub-navigation--hidden) ~ .slist .item-list > article:first-child .material-status__status,
-.sub-navigation ~ .material-status:not(.material-status + .material-status) .material-status__status {
+.sub-navigation:not(.sub-navigation--hidden) ~ .material-status:not(.material-status + .material-status) .material-status__status {
   border-top-left-radius: 0;
   border-top-right-radius: 0;
 }
@@ -940,7 +940,7 @@
     }
   }
 
-  .sub-navigation ~ .slist .slist__append {
+  .sub-navigation:not(.sub-navigation--hidden) ~ .slist .slist__append {
     border-top-left-radius: 0;
     border-top-right-radius: 0;
   }

app/styles/components/timeline-queue-header.scss

@@ -15,7 +15,7 @@
   padding: 0 10px;
   z-index: 500;
 
-  .sub-navigation ~ & {
+  .sub-navigation:not(.sub-navigation--hidden) ~ & {
     top: calc(60px + 41px);
   }
 

app/styles/components/wtf-panel.scss

@@ -162,7 +162,7 @@
   }
 }
 
-.column .sub-navigation ~ .wtf-panel {
+.column .sub-navigation:not(.sub-navigation--hidden) ~ .wtf-panel {
   border-top-left-radius: 0;
   border-top-right-radius: 0;
 }

app/styles/navigation.scss

@@ -128,11 +128,22 @@
   align-items: center;
   justify-content: center;
   z-index: 999;
+  transition: transform 0.2s, border-radius 0.2s;
 
-  &--scrolled {
+  &--sticking {
     border-radius: 0 !important;
   }
 
+  &--show-after {
+    transform: translateY(-41px) scaleY(0);
+    margin-top: -1041px;
+    margin-bottom: 1000px;
+
+    &.sub-navigation--visible {
+      transform: translateY(0) scaleY(1);
+    }
+  }
+
   &__content {
     width: 100%;
     height: 100%;
@@ -170,6 +181,7 @@
     display: flex;
     align-items: center;
     justify-content: center;
+    margin-left: auto;
 
     .svg-icon {
       width: 20px;
@@ -182,3 +194,7 @@
     border-top-right-radius: 10px;
   }
 }
+
+.home-timeline .sub-navigation__back {
+  display: none;
+}