commit: 6d1066fe61984f6e5b226a79bb801aa765453d83
parent: 6e7e97c8492be61d6a4a04bc4e83d916ac69ec05
Author: Eugen Rochko <eugen@zeonfederated.com>
Date: Mon, 12 Dec 2016 14:27:52 +0100
Adding some navigation items from #262 to the getting started screen
Diffstat:
4 files changed, 83 insertions(+), 6 deletions(-)
diff --git a/app/assets/javascripts/components/features/getting_started/index.jsx b/app/assets/javascripts/components/features/getting_started/index.jsx
@@ -1,12 +1,40 @@
import Column from '../ui/components/column';
+import ColumnLink from '../ui/components/column_link';
import { Link } from 'react-router';
-import { FormattedMessage } from 'react-intl';
+import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
+import { connect } from 'react-redux';
-const GettingStarted = () => {
+const messages = defineMessages({
+ heading: { id: 'getting_started.heading', defaultMessage: 'Getting started' },
+ public_timeline: { id: 'navigation_bar.public_timeline', defaultMessage: 'Public timeline' },
+ settings: { id: 'navigation_bar.settings', defaultMessage: 'Settings' }
+});
+
+const mapStateToProps = state => ({
+ me: state.getIn(['meta', 'me'])
+});
+
+const hamburgerStyle = {
+ background: '#373b4a',
+ color: '#fff',
+ fontSize: '16px',
+ padding: '15px',
+ position: 'absolute',
+ right: '0',
+ top: '-48px',
+ cursor: 'default'
+};
+
+const GettingStarted = ({ intl, me }) => {
return (
- <Column>
+ <Column icon='asterisk' heading={intl.formatMessage(messages.heading)}>
+ <div style={{ position: 'relative' }}>
+ <div style={hamburgerStyle}><i className='fa fa-bars' /></div>
+ <ColumnLink icon='globe' text={intl.formatMessage(messages.public_timeline)} to='/timelines/public' />
+ <ColumnLink icon='cog' text={intl.formatMessage(messages.settings)} href='/settings/profile' />
+ </div>
+
<div className='static-content'>
- <h1><FormattedMessage id='getting_started.heading' defaultMessage='Getting started' /></h1>
<p><FormattedMessage id='getting_started.about_addressing' defaultMessage='You can follow people if you know their username and the domain they are on by entering an e-mail-esque address into the form at the top of the sidebar.' /></p>
<p><FormattedMessage id='getting_started.about_shortcuts' defaultMessage='If the target user is on the same domain as you, just the username will work. The same rule applies to mentioning people in statuses.' /></p>
<p><FormattedMessage id='getting_started.about_developer' defaultMessage='The developer of this project can be followed as Gargron@mastodon.social' /></p>
@@ -15,4 +43,4 @@ const GettingStarted = () => {
);
};
-export default GettingStarted;
+export default connect(mapStateToProps)(injectIntl(GettingStarted));
diff --git a/app/assets/javascripts/components/features/ui/components/column_link.jsx b/app/assets/javascripts/components/features/ui/components/column_link.jsx
@@ -0,0 +1,41 @@
+import { Link } from 'react-router';
+
+const outerStyle = {
+ display: 'block',
+ padding: '15px',
+ fontSize: '16px',
+ color: '#fff',
+ textDecoration: 'none'
+};
+
+const iconStyle = {
+ display: 'inline-block',
+ marginRight: '5px'
+};
+
+const ColumnLink = ({ icon, text, to, href }) => {
+ if (href) {
+ return (
+ <a href={href} style={outerStyle} className='column-link'>
+ <i className={`fa fa-fw fa-${icon}`} style={iconStyle} />
+ {text}
+ </a>
+ );
+ } else {
+ return (
+ <Link to={to} style={outerStyle} className='column-link'>
+ <i className={`fa fa-fw fa-${icon}`} style={iconStyle} />
+ {text}
+ </Link>
+ );
+ }
+};
+
+ColumnLink.propTypes = {
+ icon: React.PropTypes.string.isRequired,
+ text: React.PropTypes.string.isRequired,
+ to: React.PropTypes.string,
+ href: React.PropTypes.string
+};
+
+export default ColumnLink;
diff --git a/app/assets/javascripts/components/locales/en.jsx b/app/assets/javascripts/components/locales/en.jsx
@@ -23,7 +23,7 @@ const en = {
"account.followers": "Followers",
"account.follows_you": "Follows you",
"getting_started.heading": "Getting started",
- "getting_started.about_addressing": "You can follow people if you know their username and the domain they are on by entering an e-mail-esque address into the form at the top of the sidebar.",
+ "getting_started.about_addressing": "You can follow people if you know their username and the domain they are on by entering an e-mail-esque address into the search form.",
"getting_started.about_shortcuts": "If the target user is on the same domain as you, just the username will work. The same rule applies to mentioning people in statuses.",
"getting_started.about_developer": "The developer of this project can be followed as Gargron@mastodon.social",
"column.home": "Home",
diff --git a/app/assets/stylesheets/components.scss b/app/assets/stylesheets/components.scss
@@ -522,3 +522,11 @@
left: 27px;
border-color: #2b90d9;
}
+
+.column-link {
+ background: #373b4a;
+
+ &:hover {
+ background: lighten(#373b4a, 5%);
+ }
+}
