X-Git-Url: https://awoo.directory/mastodon.git/blobdiff_plain/2e112e240666b62b8c3d4fa201fb24b841f6c92b..18b451c0e6cf6a927a22084f94b423982de0ee8b:/app/javascript/mastodon/features/getting_started/index.js diff --git a/app/javascript/mastodon/features/getting_started/index.js b/app/javascript/mastodon/features/getting_started/index.js index d1123878e..67ec7665b 100644 --- a/app/javascript/mastodon/features/getting_started/index.js +++ b/app/javascript/mastodon/features/getting_started/index.js @@ -2,90 +2,175 @@ import React from 'react'; import Column from '../ui/components/column'; import ColumnLink from '../ui/components/column_link'; import ColumnSubheading from '../ui/components/column_subheading'; -import Link from 'react-router/lib/Link'; import { defineMessages, injectIntl, FormattedMessage } 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, profile_directory, showTrends } from '../../initial_state'; +import { fetchFollowRequests } from 'mastodon/actions/accounts'; +import { List as ImmutableList } from 'immutable'; +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({ - heading: { id: 'getting_started.heading', defaultMessage: 'Getting started' }, + home_timeline: { id: 'tabs_bar.home', defaultMessage: 'Home' }, + notifications: { id: 'tabs_bar.notifications', defaultMessage: 'Notifications' }, public_timeline: { id: 'navigation_bar.public_timeline', defaultMessage: 'Federated timeline' }, - navigation_subheading: { id: 'column_subheading.navigation', defaultMessage: 'Navigation'}, - settings_subheading: { id: 'column_subheading.settings', defaultMessage: 'Settings'}, + settings_subheading: { id: 'column_subheading.settings', defaultMessage: 'Settings' }, community_timeline: { id: 'navigation_bar.community_timeline', defaultMessage: 'Local timeline' }, + direct: { id: 'navigation_bar.direct', defaultMessage: 'Direct messages' }, preferences: { id: 'navigation_bar.preferences', defaultMessage: 'Preferences' }, follow_requests: { id: 'navigation_bar.follow_requests', defaultMessage: 'Follow requests' }, - sign_out: { id: 'navigation_bar.logout', defaultMessage: 'Logout' }, favourites: { id: 'navigation_bar.favourites', defaultMessage: 'Favourites' }, blocks: { id: 'navigation_bar.blocks', defaultMessage: 'Blocked users' }, + domain_blocks: { id: 'navigation_bar.domain_blocks', defaultMessage: 'Hidden domains' }, mutes: { id: 'navigation_bar.mutes', defaultMessage: 'Muted users' }, - info: { id: 'navigation_bar.info', defaultMessage: 'Extended information' }, + pins: { id: 'navigation_bar.pins', defaultMessage: 'Pinned toots' }, + lists: { id: 'navigation_bar.lists', defaultMessage: 'Lists' }, + 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 => ({ - me: state.getIn(['accounts', state.getIn(['meta', 'me'])]), + myAccount: state.getIn(['accounts', me]), + unreadFollowRequests: state.getIn(['user_lists', 'follow_requests', 'items'], ImmutableList()).size, }); +const mapDispatchToProps = dispatch => ({ + fetchFollowRequests: () => dispatch(fetchFollowRequests()), +}); + +const badgeDisplay = (number, limit) => { + if (number === 0) { + return undefined; + } else if (limit && number >= limit) { + return `${limit}+`; + } else { + return number; + } +}; + +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, + }; + static propTypes = { intl: PropTypes.object.isRequired, - me: ImmutablePropTypes.map.isRequired, + myAccount: ImmutablePropTypes.map.isRequired, + columns: ImmutablePropTypes.list, + multiColumn: PropTypes.bool, + fetchFollowRequests: PropTypes.func.isRequired, + unreadFollowRequests: PropTypes.number, + unreadNotifications: PropTypes.number, }; + componentDidMount () { + const { fetchFollowRequests, multiColumn } = this.props; + + if (!multiColumn && window.innerWidth >= NAVIGATION_PANEL_BREAKPOINT) { + this.context.router.history.replace('/timelines/home'); + return; + } + + fetchFollowRequests(); + } + render () { - const { intl, me } = this.props; + const { intl, myAccount, multiColumn, unreadFollowRequests } = this.props; + + const navItems = []; + let i = 1; + let height = (multiColumn) ? 0 : 60; + + if (multiColumn) { + navItems.push( + , + , + , + ); + + height += 34 + 48*2; + + if (profile_directory) { + navItems.push( + + ); - let followRequests = ''; + height += 48; + } - if (me.get('locked')) { - followRequests = ; + navItems.push( + + ); + + height += 34; + } else if (profile_directory) { + navItems.push( + + ); + + height += 48; + } + + navItems.push( + , + , + + ); + + height += 48*3; + + if (myAccount.get('locked') || unreadFollowRequests > 0) { + navItems.push(); + height += 48; + } + + if (!multiColumn) { + navItems.push( + , + , + ); + + height += 34 + 48; } return ( - -
- - - - - {followRequests} - - - - - - -
+ + {multiColumn &&
+

+ +

+
} -
-
-

- , - userguide: , - apps: , - }} - /> -

-

- tootsuite/mastodon }} - /> -

+
+
+ {!multiColumn && } + {navItems}
+ + {!multiColumn &&
} + +
+ + {multiColumn && showTrends && } ); } } - -export default connect(mapStateToProps)(injectIntl(GettingStarted));