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

[Glitch] Hide section headline for timelines in production 

Port 4eeda67727 to glitch-soc
remotes/1727458204337373841/tmp_refs/heads/signup-info-prompt
Thibaut Girka 2018-05-27 21:28:24 +02:00 committed by ThibG
parent 593f88acb1
commit a693d6e2f2
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/flavours/glitch/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/flavours/glitch/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 'flavours/glitch/features/ui/containers/status_list_container';
import Column from 'flavours/glitch/components/column';
@ -9,6 +8,7 @@ import ColumnHeader from 'flavours/glitch/components/column_header';
import { expandCommunityTimeline } from 'flavours/glitch/actions/timelines';
import { addColumn, removeColumn, moveColumn, changeColumnParams } from 'flavours/glitch/actions/columns';
import ColumnSettingsContainer from './containers/column_settings_container';
// import SectionHeadline from './components/section_headline';
import { connectCommunityStream } from 'flavours/glitch/actions/streaming';
const messages = defineMessages({
@ -94,8 +94,6 @@ export default class CommunityTimeline extends React.PureComponent {
}
handleHeadlineLinkClick = e => {
e.preventDefault();
const { columnId, dispatch } = this.props;
const onlyMedia = /\/media$/.test(e.currentTarget.href);
@ -106,21 +104,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} name='local' label={intl.formatMessage(messages.title)}>
@ -138,7 +132,7 @@ export default class CommunityTimeline extends React.PureComponent {
</ColumnHeader>
<StatusListContainer
prepend={headline}
// prepend={headline}
trackScroll={!pinned}
scrollKey={`community_timeline-${columnId}`}
shouldUpdateScroll={this.shouldUpdateScroll}

32
app/javascript/flavours/glitch/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 'flavours/glitch/features/ui/containers/status_list_container';
import Column from 'flavours/glitch/components/column';
@ -9,6 +8,7 @@ import ColumnHeader from 'flavours/glitch/components/column_header';
import { expandPublicTimeline } from 'flavours/glitch/actions/timelines';
import { addColumn, removeColumn, moveColumn, changeColumnParams } from 'flavours/glitch/actions/columns';
import ColumnSettingsContainer from './containers/column_settings_container';
// import SectionHeadline from '../community_timeline/components/section_headline';
import { connectPublicStream } from 'flavours/glitch/actions/streaming';
const messages = defineMessages({
@ -94,8 +94,6 @@ export default class PublicTimeline extends React.PureComponent {
}
handleHeadlineLinkClick = e => {
e.preventDefault();
const { columnId, dispatch } = this.props;
const onlyMedia = /\/media$/.test(e.currentTarget.href);
@ -106,21 +104,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} name='federated' label={intl.formatMessage(messages.title)}>
@ -138,7 +132,7 @@ export default class PublicTimeline extends React.PureComponent {
</ColumnHeader>
<StatusListContainer
prepend={headline}
// prepend={headline}
timelineId={`public${onlyMedia ? ':media' : ''}`}
onLoadMore={this.handleLoadMore}
trackScroll={!pinned}