treehouse
/
mastodon
21
8
Fork 5
Code Issues 32 Pull Requests Projects 1 Releases Wiki Activity

Hide section headline for timelines in production (#7590) 

* Hide section headline for timelines in production

* comment out
remotes/1727458204337373841/tmp_refs/heads/signup-info-prompt
Yamagishi Kazutoshi 2018-05-22 21:44:32 +09:00 committed by Eugen Rochko
parent 06252ec71e
commit 4eeda67727
3 changed files with 85 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

59
app/javascript/mastodon/features/community_timeline/components/section_headline.js Normal file
View File

@ -0,0 +1,59 @@
import PropTypes from 'prop-types';
import React, { Component, Fragment } from 'react';
import { FormattedMessage } from 'react-intl';
import { NavLink } from 'react-router-dom';
export default class SectionHeadline extends Component {
static propTypes = {
timelineId: PropTypes.string.isRequired,
to: PropTypes.string.isRequired,
pinned: PropTypes.bool.isRequired,
onlyMedia: PropTypes.bool.isRequired,
onClick: PropTypes.func,
};
shouldComponentUpdate (nextProps) {
return (
this.props.onlyMedia !== nextProps.onlyMedia ||
this.props.pinned !== nextProps.pinned ||
this.props.to !== nextProps.to ||
this.props.timelineId !== nextProps.timelineId
);
}
handleClick = e => {
const { onClick } = this.props;
if (typeof onClick === 'function') {
e.preventDefault();
onClick.call(this, e);
}
}
render () {
const { timelineId, to, pinned, onlyMedia } = this.props;
return (
<div className={`${timelineId}-timeline__section-headline`}>
{pinned ? (
<Fragment>
<a href={to} className={!onlyMedia ? 'active' : undefined} onClick={this.handleClick}>
<FormattedMessage id='timeline.posts' defaultMessage='Toots' />
</a>
<a href={`${to}/media`} className={onlyMedia ? 'active' : undefined} onClick={this.handleClick}>
<FormattedMessage id='timeline.media' defaultMessage='Media' />
</a>
</Fragment>
) : (
<Fragment>
<NavLink exact to={to} replace><FormattedMessage id='timeline.posts' defaultMessage='Toots' /></NavLink>
<NavLink exact to={`${to}/media`} replace><FormattedMessage id='timeline.media' defaultMessage='Media' /></NavLink>
</Fragment>
)}
</div>
);
}
}

32
app/javascript/mastodon/features/community_timeline/index.js
View File

@ -1,7 +1,6 @@
import React from 'react';
import { connect } from 'react-redux';
import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
import { NavLink } from 'react-router-dom';
import PropTypes from 'prop-types';
import StatusListContainer from '../ui/containers/status_list_container';
import Column from '../../components/column';
@ -9,6 +8,7 @@ import ColumnHeader from '../../components/column_header';
import { expandCommunityTimeline } from '../../actions/timelines';
import { addColumn, removeColumn, moveColumn, changeColumnParams } from '../../actions/columns';
import ColumnSettingsContainer from './containers/column_settings_container';
// import SectionHeadline from './components/section_headline';
import { connectCommunityStream } from '../../actions/streaming';
const messages = defineMessages({
@ -90,8 +90,6 @@ export default class CommunityTimeline extends React.PureComponent {
}
handleHeadlineLinkClick = e => {
e.preventDefault();
const { columnId, dispatch } = this.props;
const onlyMedia = /\/media$/.test(e.currentTarget.href);
@ -102,21 +100,17 @@ export default class CommunityTimeline extends React.PureComponent {
const { intl, hasUnread, columnId, multiColumn, onlyMedia } = this.props;
const pinned = !!columnId;
const headline = pinned ? (
<div className='community-timeline__section-headline'>
<a href='/timelines/public/local' className={!onlyMedia ? 'active' : undefined} onClick={this.handleHeadlineLinkClick}>
<FormattedMessage id='timeline.posts' defaultMessage='Toots' />
</a>
<a href='/timelines/public/local/media' className={onlyMedia ? 'active' : undefined} onClick={this.handleHeadlineLinkClick}>
<FormattedMessage id='timeline.media' defaultMessage='Media' />
</a>
</div>
) : (
<div className='community-timeline__section-headline'>
<NavLink exact to='/timelines/public/local' replace><FormattedMessage id='timeline.posts' defaultMessage='Toots' /></NavLink>
<NavLink exact to='/timelines/public/local/media' replace><FormattedMessage id='timeline.media' defaultMessage='Media' /></NavLink>
</div>
);
// pending
//
// const headline = (
// <SectionHeadline
// timelineId='community'
// to='/timelines/public/local'
// pinned={pinned}
// onlyMedia={onlyMedia}
// onClick={this.handleHeadlineLinkClick}
// />
// );
return (
<Column ref={this.setRef}>
@ -134,7 +128,7 @@ export default class CommunityTimeline extends React.PureComponent {
</ColumnHeader>
<StatusListContainer
prepend={headline}
// prepend={headline}
trackScroll={!pinned}
scrollKey={`community_timeline-${columnId}`}
timelineId={`community${onlyMedia ? ':media' : ''}`}

32
app/javascript/mastodon/features/public_timeline/index.js
View File

@ -1,7 +1,6 @@
import React from 'react';
import { connect } from 'react-redux';
import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
import { NavLink } from 'react-router-dom';
import PropTypes from 'prop-types';
import StatusListContainer from '../ui/containers/status_list_container';
import Column from '../../components/column';
@ -9,6 +8,7 @@ import ColumnHeader from '../../components/column_header';
import { expandPublicTimeline } from '../../actions/timelines';
import { addColumn, removeColumn, moveColumn, changeColumnParams } from '../../actions/columns';
import ColumnSettingsContainer from './containers/column_settings_container';
// import SectionHeadline from '../community_timeline/components/section_headline';
import { connectPublicStream } from '../../actions/streaming';
const messages = defineMessages({
@ -90,8 +90,6 @@ export default class PublicTimeline extends React.PureComponent {
}
handleHeadlineLinkClick = e => {
e.preventDefault();
const { columnId, dispatch } = this.props;
const onlyMedia = /\/media$/.test(e.currentTarget.href);
@ -102,21 +100,17 @@ export default class PublicTimeline extends React.PureComponent {
const { intl, columnId, hasUnread, multiColumn, onlyMedia } = this.props;
const pinned = !!columnId;
const headline = pinned ? (
<div className='public-timeline__section-headline'>
<a href='/timelines/public' className={!onlyMedia ? 'active' : undefined} onClick={this.handleHeadlineLinkClick}>
<FormattedMessage id='timeline.posts' defaultMessage='Toots' />
</a>
<a href='/timelines/public/media' className={onlyMedia ? 'active' : undefined} onClick={this.handleHeadlineLinkClick}>
<FormattedMessage id='timeline.media' defaultMessage='Media' />
</a>
</div>
) : (
<div className='public-timeline__section-headline'>
<NavLink exact to='/timelines/public' replace><FormattedMessage id='timeline.posts' defaultMessage='Toots' /></NavLink>
<NavLink exact to='/timelines/public/media' replace><FormattedMessage id='timeline.media' defaultMessage='Media' /></NavLink>
</div>
);
// pending
//
// const headline = (
// <SectionHeadline
// timelineId='public'
// to='/timelines/public'
// pinned={pinned}
// onlyMedia={onlyMedia}
// onClick={this.handleHeadlineLinkClick}
// />
// );
return (
<Column ref={this.setRef}>
@ -134,7 +128,7 @@ export default class PublicTimeline extends React.PureComponent {
</ColumnHeader>
<StatusListContainer
prepend={headline}
// prepend={headline}
timelineId={`public${onlyMedia ? ':media' : ''}`}
onLoadMore={this.handleLoadMore}
trackScroll={!pinned}