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,
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 });
} else {
this.setState({ sticking: false });
}
}
}
updateVisibile = () => {
const { showAfter } = this.props;
if (typeof showAfter === 'number') {
if (document.documentElement.scrollTop >= showAfter) {
this.setState({ visible: true });
this.setState({ scrolled: true });
} else {
this.setState({ visible: false });
this.setState({ scrolled: 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
Unescape 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
Unescape 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
Unescape 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
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
.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
Unescape 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
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-right-radius: 0;
}

18
app/styles/navigation.scss
Unescape 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;
}

Write Preview
Loading…
Cancel
Save