AccountTimeline: add SubNavigation

app/soapbox/components/sub_navigation.js

@@ -73,9 +73,9 @@ class SubNavigation extends React.PureComponent {
 
   handleScroll = throttle(() => {
     if (this.node) {
-      const { top } = this.node.getBoundingClientRect();
+      const { offsetTop } = this.node;
 
-      if (top <= 50) {
+      if (offsetTop > 0) {
         this.setState({ scrolled: true });
       } else {
         this.setState({ scrolled: false });

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

@@ -1,38 +1,59 @@
 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='Account 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__description'>
+            <FormattedMessage id='account.column_settings.description' defaultMessage='These settings apply to all account timelines.' />
+          </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>
         </div>
       </div>
     );

app/soapbox/features/account_timeline/index.js

@@ -9,6 +9,7 @@ import StatusList from '../../components/status_list';
 import LoadingIndicator from '../../components/loading_indicator';
 import Column from '../ui/components/column';
 import ColumnSettingsContainer from './containers/column_settings_container';
+import SubNavigation from 'soapbox/components/sub_navigation';
 import { OrderedSet as ImmutableOrderedSet } from 'immutable';
 import ImmutablePureComponent from 'react-immutable-pure-component';
 import { FormattedMessage } from 'react-intl';
@@ -19,7 +20,6 @@ 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';
 
 const makeMapStateToProps = () => {
   const getStatusIds = makeGetStatusIds();
@@ -146,7 +146,6 @@ class AccountTimeline extends ImmutablePureComponent {
 
   render() {
     const { statusIds, featuredStatusIds, isLoading, hasMore, isBlocked, isAccount, accountId, unavailable, accountUsername } = this.props;
-    const { collapsed, animating } = this.state;
 
     if (!isAccount && accountId !== -1) {
       return (
@@ -176,7 +175,8 @@ class AccountTimeline extends ImmutablePureComponent {
     }
 
     return (
-      <Column transparent>
+      <Column className='account-timeline' transparent>
+        <SubNavigation message={`@${accountUsername}`} settings={ColumnSettingsContainer} />
         <div className='account__section-headline'>
           <NavLink exact to={`/@${accountUsername}`}>
             <FormattedMessage id='account.posts' defaultMessage='Posts' />
@@ -193,11 +193,6 @@ class AccountTimeline extends ImmutablePureComponent {
             </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'
           statusIds={statusIds}

app/styles/components/account-header.scss

@@ -335,3 +335,9 @@
     }
   }
 }
+
+@media (min-width: 896px) {
+  .account-timeline .sub-navigation {
+    top: 134px;
+  }
+}

app/styles/components/columns.scss

@@ -625,6 +625,12 @@
     overflow-y: auto;
   }
 
+  &__description {
+    font-size: 14px;
+    margin: 5px 0 15px;
+    color: var(--primary-text-color--faint);
+  }
+
   &__close {
     display: flex;
     align-items: center;
@@ -949,3 +955,7 @@
 .column .explanation-box {
   background: var(--foreground-color);
 }
+
+.sub-navigation + .account__section-headline {
+  background: var(--foreground-color);
+}

app/styles/components/tabs-bar.scss

@@ -8,7 +8,7 @@
   width: 100%;
   position: sticky;
   top: 0;
-  z-index: 1000;
+  z-index: 1100;
   transition: transform 0.2s ease;
 
   &--collapsed {

app/styles/ui.scss

@@ -346,10 +346,11 @@
     width: 100%;
 
     &__top {
+      @include standard-panel-shadow;
       display: flex;
       width: 100%;
       height: auto;
-      z-index: 105;
+      z-index: 1000;
       background: var(--foreground-color);
 
       @media (min-width: 896px) {