moon
/
soapbox
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Revert "Add scrolling SubNavigation to Home and Account timelines" 

This reverts commit b1da9dc455.

This solution feels wrong
This commit is contained in:
Alex Gleason 2021-10-15 22:05:59 -05:00
parent b1da9dc455
commit 5017804b0a
No known key found for this signature in database
GPG Key ID: 7211D1F99744FBB7
9 changed files with 62 additions and 112 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
app/soapbox/components/sub_navigation.js
View File

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

55
app/soapbox/features/account_timeline/components/column_settings.js
View File

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

34
app/soapbox/features/account_timeline/index.js
View File

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

13
app/soapbox/features/home_timeline/index.js
View File

@ -4,13 +4,11 @@ import { expandHomeTimeline } from '../../actions/timelines';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import StatusListContainer from '../ui/containers/status_list_container'; import StatusListContainer from '../ui/containers/status_list_container';
import Column from '../../components/column'; import Column from '../../components/column';
import ColumnSettings from './containers/column_settings_container';
import BundleContainer from 'soapbox/features/ui/containers/bundle_container'; import BundleContainer from 'soapbox/features/ui/containers/bundle_container';
import { defineMessages, injectIntl, FormattedMessage } from 'react-intl'; import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
import { Link } from 'react-router-dom'; import { Link } from 'react-router-dom';
import { OrderedSet as ImmutableOrderedSet } from 'immutable'; import { OrderedSet as ImmutableOrderedSet } from 'immutable';
import { getFeatures } from 'soapbox/utils/features'; import { getFeatures } from 'soapbox/utils/features';
import SubNavigation from 'soapbox/components/sub_navigation';
function FollowRecommendationsContainer() { function FollowRecommendationsContainer() {
return import(/* webpackChunkName: "features/follow_recommendations" */'soapbox/features/follow_recommendations/components/follow_recommendations_container'); return import(/* webpackChunkName: "features/follow_recommendations" */'soapbox/features/follow_recommendations/components/follow_recommendations_container');
@ -101,24 +99,19 @@ class HomeTimeline extends React.PureComponent {
const showSuggestions = features.suggestions && isEmpty && !isLoading && !done; const showSuggestions = features.suggestions && isEmpty && !isLoading && !done;
return ( return (
<Column label={intl.formatMessage(messages.title)} transparent={!showSuggestions} className='home-timeline'> <Column label={intl.formatMessage(messages.title)} transparent={!showSuggestions}>
{showSuggestions ? ( {showSuggestions ? (
<BundleContainer fetchComponent={FollowRecommendationsContainer}> <BundleContainer fetchComponent={FollowRecommendationsContainer}>
{Component => <Component onDone={this.handleDone} />} {Component => <Component onDone={this.handleDone} />}
</BundleContainer> </BundleContainer>
) : (<> ) : (
<SubNavigation
message={intl.formatMessage(messages.title)}
settings={ColumnSettings}
showAfter={300}
/>
<StatusListContainer <StatusListContainer
scrollKey='home_timeline' scrollKey='home_timeline'
onLoadMore={this.handleLoadMore} onLoadMore={this.handleLoadMore}
timelineId='home' 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> }} />} 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> </Column>
); );
} }

10
app/styles/components/account-header.scss
View File

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

6
app/styles/components/columns.scss
View File

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

2
app/styles/components/timeline-queue-header.scss
View File

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

2
app/styles/components/wtf-panel.scss
View File

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

18
app/styles/navigation.scss
View File

@ -128,22 +128,11 @@
align-items: center; align-items: center;
justify-content: center; justify-content: center;
z-index: 999; z-index: 999;
transition: transform 0.2s, border-radius 0.2s;
&--sticking { &--scrolled {
border-radius: 0 !important; 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 { &__content {
width: 100%; width: 100%;
height: 100%; height: 100%;
@ -181,7 +170,6 @@
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
margin-left: auto;
.svg-icon { .svg-icon {
width: 20px; width: 20px;
@ -194,7 +182,3 @@
border-top-right-radius: 10px; border-top-right-radius: 10px;
} }
} }
.home-timeline .sub-navigation__back {
display: none;
}