commit: fbc509940266dc9de1a197e2261608257396b5a7 parent: 45b379abac8ad4dbea7210285c8111a9ce2612ad Author: Amelia <ameliavoncat@gmail.com> Date: Tue, 25 Apr 2017 16:21:05 -0700 Make the getting started ui more intuitive (#1309)Diffstat:
3 files changed, 28 insertions(+), 2 deletions(-)
diff --git a/app/assets/javascripts/components/features/getting_started/index.jsx b/app/assets/javascripts/components/features/getting_started/index.jsx @@ -1,5 +1,6 @@ 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'; import { defineMessages, injectIntl, FormattedMessage } from 'react-intl'; import { connect } from 'react-redux'; @@ -9,6 +10,8 @@ import ImmutablePropTypes from 'react-immutable-proptypes'; const messages = defineMessages({ heading: { id: 'getting_started.heading', defaultMessage: 'Getting started' }, 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' }, preferences: { id: 'navigation_bar.preferences', defaultMessage: 'Preferences' }, follow_requests: { id: 'navigation_bar.follow_requests', defaultMessage: 'Follow requests' }, @@ -33,14 +36,16 @@ const GettingStarted = ({ intl, me }) => { return ( <Column icon='asterisk' heading={intl.formatMessage(messages.heading)} hideHeadingOnMobile={true}> <div className='getting-started__wrapper'> + <ColumnSubheading text={intl.formatMessage(messages.navigation_subheading)}/> <ColumnLink icon='users' hideOnMobile={true} text={intl.formatMessage(messages.community_timeline)} to='/timelines/public/local' /> <ColumnLink icon='globe' hideOnMobile={true} text={intl.formatMessage(messages.public_timeline)} to='/timelines/public' /> - <ColumnLink icon='cog' text={intl.formatMessage(messages.preferences)} href='/settings/preferences' /> <ColumnLink icon='star' text={intl.formatMessage(messages.favourites)} to='/favourites' /> {followRequests} - <ColumnLink icon='ban' text={intl.formatMessage(messages.blocks)} to='/blocks' /> <ColumnLink icon='volume-off' text={intl.formatMessage(messages.mutes)} to='/mutes' /> + <ColumnLink icon='ban' text={intl.formatMessage(messages.blocks)} to='/blocks' /> + <ColumnSubheading text={intl.formatMessage(messages.settings_subheading)}/> <ColumnLink icon='book' text={intl.formatMessage(messages.info)} href='/about/more' /> + <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> diff --git a/app/assets/javascripts/components/features/ui/components/column_subheading.jsx b/app/assets/javascripts/components/features/ui/components/column_subheading.jsx @@ -0,0 +1,15 @@ +import PropTypes from 'prop-types'; + +const ColumnSubheading = ({ text }) => { + return ( + <div className='column-subheading'> + {text} + </div> + ); + }; + +ColumnSubheading.propTypes = { + text: PropTypes.string.isRequired, +}; + +export default ColumnSubheading; diff --git a/app/assets/stylesheets/components.scss b/app/assets/stylesheets/components.scss @@ -1536,6 +1536,12 @@ a.status__content__spoiler-link { margin-right: 5px; } +.column-subheading { + background: lighten($color1, 20%); + padding: 8px 20px; + font-size: 16px; +} + .autosuggest-textarea, .spoiler-input { position: relative;