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,
settings: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
onOpenSettings: PropTypes.func.isRequired,
className: PropTypes.string,
showAfter: PropTypes.number,
}
static contextTypes = {
@ -40,8 +38,7 @@ class SubNavigation extends React.PureComponent {
}
state = {
sticking: false,
visible: typeof this.props.showAfter !== 'number',
scrolled: false,
}
handleBackClick = () => {
@ -74,33 +71,16 @@ class SubNavigation extends React.PureComponent {
window.removeEventListener('scroll', this.handleScroll);
}
updateSticking = () => {
handleScroll = throttle(() => {
if (this.node) {
const { top } = this.node.getBoundingClientRect();
if (top <= 50) {
this.setState({ sticking: true });
this.setState({ scrolled: true });
} 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 });
handleOpenSettings = () => {
@ -112,11 +92,11 @@ class SubNavigation extends React.PureComponent {
}
render() {
const { intl, message, settings: Settings, className, showAfter } = this.props;
const { sticking, visible } = this.state;
const { intl, message, settings: Settings } = this.props;
const { scrolled } = this.state;
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'>
<button
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 PropTypes from 'prop-types';
import ImmutablePropTypes from 'react-immutable-proptypes';
import { injectIntl, defineMessages, FormattedMessage } from 'react-intl';
import IconButton from 'soapbox/components/icon_button';
import { injectIntl, FormattedMessage } from 'react-intl';
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,
onClose: PropTypes.func.isRequired,
intl: PropTypes.object.isRequired,
};
render() {
const { intl, settings, onChange, onClose } = this.props;
const { settings, onChange } = this.props;
return (
<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 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>
);

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 { 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';
@ -18,7 +19,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 SubNavigation from 'soapbox/components/sub_navigation';
import classNames from 'classnames';
const makeMapStateToProps = () => {
const getStatusIds = makeGetStatusIds();
@ -81,6 +82,11 @@ class AccountTimeline extends ImmutablePureComponent {
unavailable: PropTypes.bool,
};
state = {
collapsed: true,
animating: false,
}
componentDidMount() {
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() {
const { statusIds, featuredStatusIds, isLoading, hasMore, isBlocked, isAccount, accountId, unavailable, accountUsername } = this.props;
const { collapsed, animating } = this.state;
if (!isAccount && accountId !== -1) {
return (
@ -161,12 +177,6 @@ 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' />
@ -177,6 +187,16 @@ 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'

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 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');
@ -101,24 +99,19 @@ class HomeTimeline extends React.PureComponent {
const showSuggestions = features.suggestions && isEmpty && !isLoading && !done;
return (
<Column label={intl.formatMessage(messages.title)} transparent={!showSuggestions} className='home-timeline'>
<Column label={intl.formatMessage(messages.title)} transparent={!showSuggestions}>
{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>
);
}

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
.sub-navigation:not(.sub-navigation--hidden) ~ .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 ~ .slist .item-list > article:first-child .material-status__status,
.sub-navigation ~ .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:not(.sub-navigation--hidden) ~ .slist .slist__append {
.sub-navigation ~ .slist .slist__append {
border-top-left-radius: 0;
border-top-right-radius: 0;
}

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

@ -15,7 +15,7 @@
padding: 0 10px;
z-index: 500;
.sub-navigation:not(.sub-navigation--hidden) ~ & {
.sub-navigation ~ & {
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-right-radius: 0;
}

18
app/styles/navigation.scss
View File

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