Add scrolling SubNavigation to Home and Account timelines

2021-10-15 21:55:11 -05:00
parent 17e73a3846
commit b1da9dc455
9 changed files with 112 additions and 62 deletions
--- a/app/soapbox/components/sub_navigation.js
+++ b/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 { scrolled } = this.state;
+    const { intl, message, settings: Settings, className, showAfter } = this.props;
+    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'
--- a/app/soapbox/features/account_timeline/components/column_settings.js
+++ b/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>
    );
--- a/app/soapbox/features/account_timeline/index.js
+++ b/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'
--- a/app/soapbox/features/home_timeline/index.js
+++ b/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>
    );
  }