import PropTypes from 'prop-types';
import ImmutablePropTypes from 'react-immutable-proptypes';
import ImmutablePureComponent from 'react-immutable-pure-component';
-import { me } from '../../initial_state';
-import { fetchFollowRequests } from '../../actions/accounts';
+import { me, profile_directory, showTrends } from '../../initial_state';
+import { fetchFollowRequests } from 'mastodon/actions/accounts';
import { List as ImmutableList } from 'immutable';
-import { Link } from 'react-router-dom';
-import { fetchTrends } from '../../actions/trends';
-import Hashtag from '../../components/hashtag';
import NavigationBar from '../compose/components/navigation_bar';
+import Icon from 'mastodon/components/icon';
+import LinkFooter from 'mastodon/features/ui/components/link_footer';
+import TrendsContainer from './containers/trends_container';
const messages = defineMessages({
home_timeline: { id: 'tabs_bar.home', defaultMessage: 'Home' },
mutes: { id: 'navigation_bar.mutes', defaultMessage: 'Muted users' },
pins: { id: 'navigation_bar.pins', defaultMessage: 'Pinned toots' },
lists: { id: 'navigation_bar.lists', defaultMessage: 'Lists' },
- refresh_trends: { id: 'trends.refresh', defaultMessage: 'Refresh' },
discover: { id: 'navigation_bar.discover', defaultMessage: 'Discover' },
personal: { id: 'navigation_bar.personal', defaultMessage: 'Personal' },
security: { id: 'navigation_bar.security', defaultMessage: 'Security' },
+ menu: { id: 'getting_started.heading', defaultMessage: 'Getting started' },
+ profile_directory: { id: 'getting_started.directory', defaultMessage: 'Profile directory' },
});
const mapStateToProps = state => ({
myAccount: state.getIn(['accounts', me]),
unreadFollowRequests: state.getIn(['user_lists', 'follow_requests', 'items'], ImmutableList()).size,
- trends: state.get('trends'),
});
const mapDispatchToProps = dispatch => ({
fetchFollowRequests: () => dispatch(fetchFollowRequests()),
- fetchTrends: () => dispatch(fetchTrends()),
});
const badgeDisplay = (number, limit) => {
}
};
-@connect(mapStateToProps, mapDispatchToProps)
+const NAVIGATION_PANEL_BREAKPOINT = 600 + (285 * 2) + (10 * 2);
+
+export default @connect(mapStateToProps, mapDispatchToProps)
@injectIntl
-export default class GettingStarted extends ImmutablePureComponent {
+class GettingStarted extends ImmutablePureComponent {
+
+ static contextTypes = {
+ router: PropTypes.object.isRequired,
+ };
static propTypes = {
intl: PropTypes.object.isRequired,
fetchFollowRequests: PropTypes.func.isRequired,
unreadFollowRequests: PropTypes.number,
unreadNotifications: PropTypes.number,
- trends: ImmutablePropTypes.list,
};
componentDidMount () {
- const { myAccount, fetchFollowRequests } = this.props;
+ const { fetchFollowRequests, multiColumn } = this.props;
- if (myAccount.get('locked')) {
- fetchFollowRequests();
+ if (!multiColumn && window.innerWidth >= NAVIGATION_PANEL_BREAKPOINT) {
+ this.context.router.history.replace('/timelines/home');
+ return;
}
- setTimeout(() => this.props.fetchTrends(), 5000);
- }
-
- handleRefreshTrends = () => {
- this.props.fetchTrends();
+ fetchFollowRequests();
}
render () {
- const { intl, myAccount, multiColumn, unreadFollowRequests, trends } = this.props;
+ const { intl, myAccount, multiColumn, unreadFollowRequests } = this.props;
const navItems = [];
let i = 1;
+ let height = (multiColumn) ? 0 : 60;
if (multiColumn) {
navItems.push(
<ColumnSubheading key={i++} text={intl.formatMessage(messages.discover)} />,
<ColumnLink key={i++} icon='users' text={intl.formatMessage(messages.community_timeline)} to='/timelines/public/local' />,
<ColumnLink key={i++} icon='globe' text={intl.formatMessage(messages.public_timeline)} to='/timelines/public' />,
+ );
+
+ height += 34 + 48*2;
+
+ if (profile_directory) {
+ navItems.push(
+ <ColumnLink key={i++} icon='address-book' text={intl.formatMessage(messages.profile_directory)} to='/directory' />
+ );
+
+ height += 48;
+ }
+
+ navItems.push(
<ColumnSubheading key={i++} text={intl.formatMessage(messages.personal)} />
);
+
+ height += 34;
+ } else if (profile_directory) {
+ navItems.push(
+ <ColumnLink key={i++} icon='address-book' text={intl.formatMessage(messages.profile_directory)} to='/directory' />
+ );
+
+ height += 48;
}
navItems.push(
<ColumnLink key={i++} icon='envelope' text={intl.formatMessage(messages.direct)} to='/timelines/direct' />,
<ColumnLink key={i++} icon='star' text={intl.formatMessage(messages.favourites)} to='/favourites' />,
- <ColumnLink key={i++} icon='bars' text={intl.formatMessage(messages.lists)} to='/lists' />
+ <ColumnLink key={i++} icon='list-ul' text={intl.formatMessage(messages.lists)} to='/lists' />
);
- if (myAccount.get('locked')) {
- navItems.push(<ColumnLink key={i++} icon='users' text={intl.formatMessage(messages.follow_requests)} badge={badgeDisplay(unreadFollowRequests, 40)} to='/follow_requests' />);
+ height += 48*3;
+
+ if (myAccount.get('locked') || unreadFollowRequests > 0) {
+ navItems.push(<ColumnLink key={i++} icon='user-plus' text={intl.formatMessage(messages.follow_requests)} badge={badgeDisplay(unreadFollowRequests, 40)} to='/follow_requests' />);
+ height += 48;
}
if (!multiColumn) {
navItems.push(
<ColumnSubheading key={i++} text={intl.formatMessage(messages.settings_subheading)} />,
<ColumnLink key={i++} icon='gears' text={intl.formatMessage(messages.preferences)} href='/settings/preferences' />,
- <ColumnLink key={i++} icon='lock' text={intl.formatMessage(messages.security)} href='/auth/edit' />
);
+
+ height += 34 + 48;
}
return (
- <Column>
+ <Column bindToDocument={!multiColumn} label={intl.formatMessage(messages.menu)}>
{multiColumn && <div className='column-header__wrapper'>
<h1 className='column-header'>
<button>
- <i className='fa fa-bars fa-fw column-header__icon' />
+ <Icon id='bars' className='column-header__icon' fixedWidth />
<FormattedMessage id='getting_started.heading' defaultMessage='Getting started' />
</button>
</h1>
</div>}
- <div className='getting-started__wrapper'>
- {!multiColumn && <NavigationBar account={myAccount} />}
- {navItems}
- </div>
-
- {multiColumn && trends && <div className='getting-started__trends'>
- <div className='column-header__wrapper'>
- <h1 className='column-header'>
- <button>
- <i className='fa fa-fire fa-fw' />
- <FormattedMessage id='trends.header' defaultMessage='Trending now' />
- </button>
- <div className='column-header__buttons'>
- <button onClick={this.handleRefreshTrends} className='column-header__button' title={intl.formatMessage(messages.refresh_trends)} aria-label={intl.formatMessage(messages.refresh_trends)}><i className='fa fa-refresh' /></button>
- </div>
- </h1>
+ <div className='getting-started'>
+ <div className='getting-started__wrapper' style={{ height }}>
+ {!multiColumn && <NavigationBar account={myAccount} />}
+ {navItems}
</div>
- <div className='getting-started__scrollable'>{trends.take(3).map(hashtag => <Hashtag key={hashtag.get('name')} hashtag={hashtag} />)}</div>
- </div>}
+ {!multiColumn && <div className='flex-spacer' />}
- {!multiColumn && <div className='flex-spacer' />}
-
- <div className='getting-started getting-started__footer'>
- <ul>
- {multiColumn && <li><Link to='/keyboard-shortcuts'><FormattedMessage id='navigation_bar.keyboard_shortcuts' defaultMessage='Hotkeys' /></Link> · </li>}
- <li><a href='/about/more' target='_blank'><FormattedMessage id='navigation_bar.info' defaultMessage='About this instance' /></a> · </li>
- <li><a href='/terms' target='_blank'><FormattedMessage id='getting_started.terms' defaultMessage='Terms of service' /></a> · </li>
- <li><a href='https://github.com/tootsuite/documentation#documentation' target='_blank'><FormattedMessage id='getting_started.documentation' defaultMessage='Documentation' /></a> · </li>
- <li><a href='/auth/sign_out' data-method='delete'><FormattedMessage id='navigation_bar.logout' defaultMessage='Logout' /></a></li>
- </ul>
-
- <p>
- <FormattedMessage
- id='getting_started.open_source_notice'
- defaultMessage='Mastodon is open source software. You can contribute or report issues on GitHub at {github}.'
- values={{ github: <a href='https://github.com/tootsuite/mastodon' rel='noopener' target='_blank'>tootsuite/mastodon</a> }}
- />
- </p>
+ <LinkFooter withHotkeys={multiColumn} />
</div>
+
+ {multiColumn && showTrends && <TrendsContainer />}
</Column>
);
}
cat aescling's git repositories / mastodon.git / blobdiff