diff options
author | Eugen Rochko <eugen@zeonfederated.com> | 2018-05-30 18:41:47 +0200 |
---|---|---|
committer | GitHub <noreply@github.com> | 2018-05-30 18:41:47 +0200 |
commit | 1a7a74ff76a129031a3fd6d73688ab9409899002 (patch) | |
tree | 11206fd0870e920b4fcd4c27ce37e39010f2e40b /app/javascript/mastodon/features/getting_started/index.js | |
parent | 9130b3cda9cd460aa137e399a8b50880aba3bb63 (diff) |
Improve getting started column (#7676)
* Adjust footer of getting started column - Improved style - Moved hotkeys, about this instance and logout to footer - Removed FAQ, User Guide, Apps links - Use hamburger icon for the column * Add edit profile action button to profile and more to dropdown * Add "Trending now" to getting started column * Add preferences/security links on mobile layout
Diffstat (limited to 'app/javascript/mastodon/features/getting_started/index.js')
-rw-r--r-- | app/javascript/mastodon/features/getting_started/index.js | 109 |
1 files changed, 65 insertions, 44 deletions
diff --git a/app/javascript/mastodon/features/getting_started/index.js b/app/javascript/mastodon/features/getting_started/index.js index 4a249f301..c45765ec4 100644 --- a/app/javascript/mastodon/features/getting_started/index.js +++ b/app/javascript/mastodon/features/getting_started/index.js @@ -10,38 +10,41 @@ import ImmutablePureComponent from 'react-immutable-pure-component'; import { me } from '../../initial_state'; import { fetchFollowRequests } from '../../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'; 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' }, 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' }, - keyboard_shortcuts: { id: 'navigation_bar.keyboard_shortcuts', defaultMessage: 'Keyboard shortcuts' }, + 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' }, }); const mapStateToProps = state => ({ myAccount: state.getIn(['accounts', me]), - columns: state.getIn(['settings', 'columns']), unreadFollowRequests: state.getIn(['user_lists', 'follow_requests', 'items'], ImmutableList()).size, - unreadNotifications: state.getIn(['notifications', 'unread']), + trends: state.get('trends'), }); const mapDispatchToProps = dispatch => ({ fetchFollowRequests: () => dispatch(fetchFollowRequests()), + fetchTrends: () => dispatch(fetchTrends()), }); const badgeDisplay = (number, limit) => { @@ -66,6 +69,7 @@ export default class GettingStarted extends ImmutablePureComponent { fetchFollowRequests: PropTypes.func.isRequired, unreadFollowRequests: PropTypes.number, unreadNotifications: PropTypes.number, + trends: ImmutablePropTypes.list, }; componentDidMount () { @@ -74,36 +78,26 @@ export default class GettingStarted extends ImmutablePureComponent { if (myAccount.get('locked')) { fetchFollowRequests(); } + + setTimeout(() => this.props.fetchTrends(), 5000); } render () { - const { intl, myAccount, columns, multiColumn, unreadFollowRequests, unreadNotifications } = this.props; + const { intl, myAccount, multiColumn, unreadFollowRequests, trends } = this.props; const navItems = []; if (multiColumn) { - if (!columns.find(item => item.get('id') === 'HOME')) { - navItems.push(<ColumnLink key='0' icon='home' text={intl.formatMessage(messages.home_timeline)} to='/timelines/home' />); - } - - if (!columns.find(item => item.get('id') === 'NOTIFICATIONS')) { - navItems.push(<ColumnLink key='1' icon='bell' text={intl.formatMessage(messages.notifications)} badge={badgeDisplay(unreadNotifications)} to='/notifications' />); - } - - if (!columns.find(item => item.get('id') === 'COMMUNITY')) { - navItems.push(<ColumnLink key='2' icon='users' text={intl.formatMessage(messages.community_timeline)} to='/timelines/public/local' />); - } - - if (!columns.find(item => item.get('id') === 'PUBLIC')) { - navItems.push(<ColumnLink key='3' icon='globe' text={intl.formatMessage(messages.public_timeline)} to='/timelines/public' />); - } - } - - if (!multiColumn || !columns.find(item => item.get('id') === 'DIRECT')) { - navItems.push(<ColumnLink key='4' icon='envelope' text={intl.formatMessage(messages.direct)} to='/timelines/direct' />); + navItems.push( + <ColumnSubheading key='1' text={intl.formatMessage(messages.discover)} />, + <ColumnLink key='2' icon='users' text={intl.formatMessage(messages.community_timeline)} to='/timelines/public/local' />, + <ColumnLink key='3' icon='globe' text={intl.formatMessage(messages.public_timeline)} to='/timelines/public' />, + <ColumnSubheading key='8' text={intl.formatMessage(messages.personal)} /> + ); } navItems.push( + <ColumnLink key='4' icon='envelope' text={intl.formatMessage(messages.direct)} to='/timelines/direct' />, <ColumnLink key='5' icon='star' text={intl.formatMessage(messages.favourites)} to='/favourites' />, <ColumnLink key='6' icon='bars' text={intl.formatMessage(messages.lists)} to='/lists' /> ); @@ -112,30 +106,57 @@ export default class GettingStarted extends ImmutablePureComponent { navItems.push(<ColumnLink key='7' icon='users' text={intl.formatMessage(messages.follow_requests)} badge={badgeDisplay(unreadFollowRequests, 40)} to='/follow_requests' />); } - if (multiColumn) { - navItems.push(<ColumnLink key='8' icon='question' text={intl.formatMessage(messages.keyboard_shortcuts)} to='/keyboard-shortcuts' />); + if (!multiColumn) { + navItems.push( + <ColumnSubheading key='9' text={intl.formatMessage(messages.settings_subheading)} />, + <ColumnLink key='6' icon='gears' text={intl.formatMessage(messages.preferences)} href='/settings/preferences' />, + <ColumnLink key='6' icon='lock' text={intl.formatMessage(messages.security)} href='/auth/edit' /> + ); } - navItems.push(<ColumnLink key='9' icon='book' text={intl.formatMessage(messages.info)} href='/about/more' />); - return ( - <Column icon='asterisk' heading={intl.formatMessage(messages.heading)} hideHeadingOnMobile> + <Column> + {multiColumn && <div className='column-header__wrapper'> + <h1 className='column-header'> + <button> + <i className='fa fa-bars fa-fw column-header__icon' /> + <FormattedMessage id='getting_started.heading' defaultMessage='Getting started' /> + </button> + </h1> + </div>} + <div className='getting-started__wrapper'> - <ColumnSubheading text={intl.formatMessage(messages.navigation_subheading)} /> + {!multiColumn && <NavigationBar account={myAccount} />} {navItems} - <ColumnSubheading text={intl.formatMessage(messages.settings_subheading)} /> - <ColumnLink icon='thumb-tack' text={intl.formatMessage(messages.pins)} to='/pinned' /> - <ColumnLink icon='volume-off' text={intl.formatMessage(messages.mutes)} to='/mutes' /> - <ColumnLink icon='ban' text={intl.formatMessage(messages.blocks)} to='/blocks' /> - <ColumnLink icon='minus-circle' text={intl.formatMessage(messages.domain_blocks)} to='/domain_blocks' /> - <ColumnLink icon='cog' text={intl.formatMessage(messages.preferences)} href='/settings/preferences' /> - <ColumnLink icon='sign-out' text={intl.formatMessage(messages.sign_out)} href='/auth/sign_out' method='delete' /> </div> - <div className='static-content getting-started'> - <p> - <a href='https://github.com/tootsuite/documentation/blob/master/Using-Mastodon/FAQ.md' rel='noopener' target='_blank'><FormattedMessage id='getting_started.faq' defaultMessage='FAQ' /></a> • <a href='https://github.com/tootsuite/documentation/blob/master/Using-Mastodon/User-guide.md' rel='noopener' target='_blank'><FormattedMessage id='getting_started.userguide' defaultMessage='User Guide' /></a> • <a href='https://github.com/tootsuite/documentation/blob/master/Using-Mastodon/Apps.md' rel='noopener' target='_blank'><FormattedMessage id='getting_started.appsshort' defaultMessage='Apps' /></a> - </p> + {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 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> + + <div className='getting-started__scrollable'>{trends.take(3).map(hashtag => <Hashtag key={hashtag.get('name')} hashtag={hashtag} />)}</div> + </div>} + + {!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' |