mirror_maker
/
soapbox
mirror of https://gitlab.com/soapbox-pub/soapbox
1
0
Fork 1
Code Issues Packages Projects Releases Wiki Activity

Revert "Add scrolling SubNavigation to Home and Account timelines"

Browse Source 
This reverts commit b1da9dc455.

This solution feels wrong
merge-requests/789/head
Alex Gleason 3 years ago
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

34
app/soapbox/components/sub_navigation.js
Unescape 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 {
this.setState({ sticking: false });
}
}
}
updateVisibile = () => {
const { showAfter } = this.props;
if (typeof showAfter === 'number') {
if (document.documentElement.scrollTop >= showAfter) {
this.setState({ visible: true });
} else { } else {
this.setState({ visible: false }); this.setState({ scrolled: 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
Unescape 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
Unescape 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
Unescape 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
Unescape 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
Unescape 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
Unescape 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
Unescape 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
Unescape 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;
}

Write Preview
Loading…
Cancel
Save