|
@@ -1,19 +1,20 @@
|
|
|
import React from 'react';
|
|
|
-import Column from '../ui/components/column';
|
|
|
+import Column from 'mastodon/components/column';
|
|
|
+import ColumnHeader from 'mastodon/components/column_header';
|
|
|
import ColumnLink from '../ui/components/column_link';
|
|
|
import ColumnSubheading from '../ui/components/column_subheading';
|
|
|
-import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
|
|
|
+import { defineMessages, injectIntl } from 'react-intl';
|
|
|
import { connect } from 'react-redux';
|
|
|
import PropTypes from 'prop-types';
|
|
|
import ImmutablePropTypes from 'react-immutable-proptypes';
|
|
|
import ImmutablePureComponent from 'react-immutable-pure-component';
|
|
|
-import { me, showTrends } from '../../initial_state';
|
|
|
+import { me, title, showTrends } from '../../initial_state';
|
|
|
import { fetchFollowRequests } from 'mastodon/actions/accounts';
|
|
|
import { List as ImmutableList } from 'immutable';
|
|
|
import NavigationContainer from '../compose/containers/navigation_container';
|
|
|
-import Icon from 'mastodon/components/icon';
|
|
|
import LinkFooter from 'mastodon/features/ui/components/link_footer';
|
|
|
import TrendsContainer from './containers/trends_container';
|
|
|
+import { Helmet } from 'react-helmet';
|
|
|
|
|
|
const messages = defineMessages({
|
|
|
home_timeline: { id: 'tabs_bar.home', defaultMessage: 'Home' },
|
|
@@ -40,7 +41,6 @@ const messages = defineMessages({
|
|
|
|
|
|
const mapStateToProps = state => ({
|
|
|
myAccount: state.getIn(['accounts', me]),
|
|
|
- columns: state.getIn(['settings', 'columns']),
|
|
|
unreadFollowRequests: state.getIn(['user_lists', 'follow_requests', 'items'], ImmutableList()).size,
|
|
|
});
|
|
|
|
|
@@ -58,20 +58,18 @@ const badgeDisplay = (number, limit) => {
|
|
|
}
|
|
|
};
|
|
|
|
|
|
-const NAVIGATION_PANEL_BREAKPOINT = 600 + (285 * 2) + (10 * 2);
|
|
|
-
|
|
|
export default @connect(mapStateToProps, mapDispatchToProps)
|
|
|
@injectIntl
|
|
|
class GettingStarted extends ImmutablePureComponent {
|
|
|
|
|
|
static contextTypes = {
|
|
|
router: PropTypes.object.isRequired,
|
|
|
+ identity: PropTypes.object,
|
|
|
};
|
|
|
|
|
|
static propTypes = {
|
|
|
intl: PropTypes.object.isRequired,
|
|
|
- myAccount: ImmutablePropTypes.map.isRequired,
|
|
|
- columns: ImmutablePropTypes.list,
|
|
|
+ myAccount: ImmutablePropTypes.map,
|
|
|
multiColumn: PropTypes.bool,
|
|
|
fetchFollowRequests: PropTypes.func.isRequired,
|
|
|
unreadFollowRequests: PropTypes.number,
|
|
@@ -79,10 +77,10 @@ class GettingStarted extends ImmutablePureComponent {
|
|
|
};
|
|
|
|
|
|
componentDidMount () {
|
|
|
- const { fetchFollowRequests, multiColumn } = this.props;
|
|
|
+ const { fetchFollowRequests } = this.props;
|
|
|
+ const { signedIn } = this.context.identity;
|
|
|
|
|
|
- if (!multiColumn && window.innerWidth >= NAVIGATION_PANEL_BREAKPOINT) {
|
|
|
- this.context.router.history.replace('/home');
|
|
|
+ if (!signedIn) {
|
|
|
return;
|
|
|
}
|
|
|
|
|
@@ -90,91 +88,57 @@ class GettingStarted extends ImmutablePureComponent {
|
|
|
}
|
|
|
|
|
|
render () {
|
|
|
- const { intl, myAccount, columns, multiColumn, unreadFollowRequests } = this.props;
|
|
|
+ const { intl, myAccount, multiColumn, unreadFollowRequests } = this.props;
|
|
|
+ const { signedIn } = this.context.identity;
|
|
|
|
|
|
const navItems = [];
|
|
|
- let height = (multiColumn) ? 0 : 60;
|
|
|
-
|
|
|
- if (multiColumn) {
|
|
|
- navItems.push(
|
|
|
- <ColumnSubheading key='header-discover' text={intl.formatMessage(messages.discover)} />,
|
|
|
- );
|
|
|
- height += 34;
|
|
|
- }
|
|
|
|
|
|
navItems.push(
|
|
|
+ <ColumnSubheading key='header-discover' text={intl.formatMessage(messages.discover)} />,
|
|
|
<ColumnLink key='explore' icon='hashtag' text={intl.formatMessage(messages.explore)} to='/explore' />,
|
|
|
+ <ColumnLink key='community_timeline' icon='users' text={intl.formatMessage(messages.community_timeline)} to='/public/local' />,
|
|
|
+ <ColumnLink key='public_timeline' icon='globe' text={intl.formatMessage(messages.public_timeline)} to='/public' />,
|
|
|
);
|
|
|
- height += 48;
|
|
|
-
|
|
|
- if (multiColumn) {
|
|
|
- navItems.push(
|
|
|
- <ColumnLink key='community_timeline' icon='users' text={intl.formatMessage(messages.community_timeline)} to='/public/local' />,
|
|
|
- <ColumnLink key='public_timeline' icon='globe' text={intl.formatMessage(messages.public_timeline)} to='/public' />,
|
|
|
- );
|
|
|
-
|
|
|
- height += 48*2;
|
|
|
|
|
|
+ if (signedIn) {
|
|
|
navItems.push(
|
|
|
<ColumnSubheading key='header-personal' text={intl.formatMessage(messages.personal)} />,
|
|
|
- );
|
|
|
-
|
|
|
- height += 34;
|
|
|
- }
|
|
|
-
|
|
|
- if (multiColumn && !columns.find(item => item.get('id') === 'HOME')) {
|
|
|
- navItems.push(
|
|
|
<ColumnLink key='home' icon='home' text={intl.formatMessage(messages.home_timeline)} to='/home' />,
|
|
|
+ <ColumnLink key='direct' icon='at' text={intl.formatMessage(messages.direct)} to='/conversations' />,
|
|
|
+ <ColumnLink key='bookmark' icon='bookmark' text={intl.formatMessage(messages.bookmarks)} to='/bookmarks' />,
|
|
|
+ <ColumnLink key='favourites' icon='star' text={intl.formatMessage(messages.favourites)} to='/favourites' />,
|
|
|
+ <ColumnLink key='lists' icon='list-ul' text={intl.formatMessage(messages.lists)} to='/lists' />,
|
|
|
);
|
|
|
- height += 48;
|
|
|
- }
|
|
|
-
|
|
|
- navItems.push(
|
|
|
- <ColumnLink key='direct' icon='at' text={intl.formatMessage(messages.direct)} to='/conversations' />,
|
|
|
- <ColumnLink key='bookmark' icon='bookmark' text={intl.formatMessage(messages.bookmarks)} to='/bookmarks' />,
|
|
|
- <ColumnLink key='favourites' icon='star' text={intl.formatMessage(messages.favourites)} to='/favourites' />,
|
|
|
- <ColumnLink key='lists' icon='list-ul' text={intl.formatMessage(messages.lists)} to='/lists' />,
|
|
|
- );
|
|
|
|
|
|
- height += 48*4;
|
|
|
+ if (myAccount.get('locked') || unreadFollowRequests > 0) {
|
|
|
+ navItems.push(<ColumnLink key='follow_requests' icon='user-plus' text={intl.formatMessage(messages.follow_requests)} badge={badgeDisplay(unreadFollowRequests, 40)} to='/follow_requests' />);
|
|
|
+ }
|
|
|
|
|
|
- if (myAccount.get('locked') || unreadFollowRequests > 0) {
|
|
|
- navItems.push(<ColumnLink key='follow_requests' icon='user-plus' text={intl.formatMessage(messages.follow_requests)} badge={badgeDisplay(unreadFollowRequests, 40)} to='/follow_requests' />);
|
|
|
- height += 48;
|
|
|
- }
|
|
|
-
|
|
|
- if (!multiColumn) {
|
|
|
navItems.push(
|
|
|
<ColumnSubheading key='header-settings' text={intl.formatMessage(messages.settings_subheading)} />,
|
|
|
<ColumnLink key='preferences' icon='gears' text={intl.formatMessage(messages.preferences)} href='/settings/preferences' />,
|
|
|
);
|
|
|
-
|
|
|
- height += 34 + 48;
|
|
|
}
|
|
|
|
|
|
return (
|
|
|
- <Column bindToDocument={!multiColumn} label={intl.formatMessage(messages.menu)}>
|
|
|
- {multiColumn && <div className='column-header__wrapper'>
|
|
|
- <h1 className='column-header'>
|
|
|
- <button>
|
|
|
- <Icon id='bars' className='column-header__icon' fixedWidth />
|
|
|
- <FormattedMessage id='getting_started.heading' defaultMessage='Getting started' />
|
|
|
- </button>
|
|
|
- </h1>
|
|
|
- </div>}
|
|
|
-
|
|
|
- <div className='getting-started'>
|
|
|
- <div className='getting-started__wrapper' style={{ height }}>
|
|
|
- {!multiColumn && <NavigationContainer />}
|
|
|
+ <Column>
|
|
|
+ {(signedIn && !multiColumn) ? <NavigationContainer /> : <ColumnHeader title={intl.formatMessage(messages.menu)} icon='bars' multiColumn={multiColumn} />}
|
|
|
+
|
|
|
+ <div className='getting-started scrollable scrollable--flex'>
|
|
|
+ <div className='getting-started__wrapper'>
|
|
|
{navItems}
|
|
|
</div>
|
|
|
|
|
|
{!multiColumn && <div className='flex-spacer' />}
|
|
|
|
|
|
- <LinkFooter withHotkeys={multiColumn} />
|
|
|
+ <LinkFooter />
|
|
|
</div>
|
|
|
|
|
|
- {multiColumn && showTrends && <TrendsContainer />}
|
|
|
+ {(multiColumn && showTrends) && <TrendsContainer />}
|
|
|
+
|
|
|
+ <Helmet>
|
|
|
+ <title>{intl.formatMessage(messages.menu)} - {title}</title>
|
|
|
+ </Helmet>
|
|
|
</Column>
|
|
|
);
|
|
|
}
|