commit: a4b8069cf5ed57d7cba066993f683941a6e60bc3
parent: e8a8703a4bfd0c245100beb1a0e15551b5c52f84
Author: Eugen Rochko <eugen@zeonfederated.com>
Date: Thu, 6 Oct 2016 22:47:35 +0200
Styling loading indicator, removing unused routes, adding "getting started" explanation
Also, only update relative time every minute instead of 6 seconds. My bad
Diffstat:
9 files changed, 66 insertions(+), 73 deletions(-)
diff --git a/app/assets/javascripts/components/components/loading_indicator.jsx b/app/assets/javascripts/components/components/loading_indicator.jsx
@@ -0,0 +1,13 @@
+const LoadingIndicator = () => {
+ const style = {
+ textAlign: 'center',
+ fontSize: '16px',
+ fontWeight: '500',
+ color: '#616b86',
+ paddingTop: '120px'
+ };
+
+ return <div style={style}>Loading...</div>;
+};
+
+export default LoadingIndicator;
diff --git a/app/assets/javascripts/components/components/relative_timestamp.jsx b/app/assets/javascripts/components/components/relative_timestamp.jsx
@@ -35,7 +35,7 @@ const RelativeTimestamp = React.createClass({
componentWillMount () {
this._updateMomentText();
- this.interval = setInterval(this._updateMomentText, 6000);
+ this.interval = setInterval(this._updateMomentText, 60000);
},
componentWillUnmount () {
diff --git a/app/assets/javascripts/components/containers/mastodon.jsx b/app/assets/javascripts/components/containers/mastodon.jsx
@@ -1,20 +1,24 @@
-import { Provider } from 'react-redux';
-import configureStore from '../store/configureStore';
+import { Provider } from 'react-redux';
+import configureStore from '../store/configureStore';
import {
refreshTimelineSuccess,
updateTimeline,
deleteFromTimelines,
refreshTimeline
-} from '../actions/timelines';
-import { setAccessToken } from '../actions/meta';
-import { setAccountSelf } from '../actions/accounts';
-import PureRenderMixin from 'react-addons-pure-render-mixin';
-import { Router, Route, hashHistory } from 'react-router';
-import Account from '../features/account';
-import Settings from '../features/settings';
-import Status from '../features/status';
-import Subscriptions from '../features/subscriptions';
-import UI from '../features/ui';
+} from '../actions/timelines';
+import { setAccessToken } from '../actions/meta';
+import { setAccountSelf } from '../actions/accounts';
+import PureRenderMixin from 'react-addons-pure-render-mixin';
+import {
+ Router,
+ Route,
+ hashHistory,
+ IndexRoute
+} from 'react-router';
+import Account from '../features/account';
+import Status from '../features/status';
+import GettingStarted from '../features/getting_started';
+import UI from '../features/ui';
const store = configureStore();
@@ -70,8 +74,7 @@ const Mastodon = React.createClass({
<Provider store={store}>
<Router history={hashHistory}>
<Route path='/' component={UI}>
- <Route path='/settings' component={Settings} />
- <Route path='/subscriptions' component={Subscriptions} />
+ <IndexRoute component={GettingStarted} />
<Route path='/statuses/:statusId' component={Status} />
<Route path='/accounts/:accountId' component={Account} />
</Route>
diff --git a/app/assets/javascripts/components/features/account/index.jsx b/app/assets/javascripts/components/features/account/index.jsx
@@ -24,6 +24,7 @@ import {
selectAccount
} from '../../reducers/timelines';
import StatusList from '../../components/status_list';
+import LoadingIndicator from '../../components/loading_indicator';
import Immutable from 'immutable';
import ActionBar from './components/action_bar';
@@ -108,7 +109,7 @@ const Account = React.createClass({
const { account, statuses, me } = this.props;
if (account === null) {
- return <div>Loading {this.props.params.accountId}...</div>;
+ return <LoadingIndicator />;
}
return (
diff --git a/app/assets/javascripts/components/features/getting_started/index.jsx b/app/assets/javascripts/components/features/getting_started/index.jsx
@@ -0,0 +1,13 @@
+const GettingStarted = () => {
+ return (
+ <div className='static-content'>
+ <h1>Getting started</h1>
+ <p>Mastodon is still in development and one of the lacking areas at the moment is user discovery.</p>
+ <p>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 in the bottom of the sidebar.</p>
+ <p>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>The developer of this project can be followed as Gargron@mastodon.social</p>
+ </div>
+ );
+};
+
+export default GettingStarted;
diff --git a/app/assets/javascripts/components/features/settings/index.jsx b/app/assets/javascripts/components/features/settings/index.jsx
@@ -1,28 +0,0 @@
-import { connect } from 'react-redux';
-import PureRenderMixin from 'react-addons-pure-render-mixin';
-import ImmutablePropTypes from 'react-immutable-proptypes';
-
-const mapStateToProps = (state, props) => ({
-
-});
-
-const Settings = React.createClass({
-
- propTypes: {
- params: React.PropTypes.object.isRequired,
- dispatch: React.PropTypes.func.isRequired
- },
-
- mixins: [PureRenderMixin],
-
- componentWillMount () {
- //
- },
-
- render () {
- return <div>Settings</div>;
- }
-
-});
-
-export default connect(mapStateToProps)(Settings);
diff --git a/app/assets/javascripts/components/features/status/index.jsx b/app/assets/javascripts/components/features/status/index.jsx
@@ -4,6 +4,7 @@ import ImmutablePropTypes from 'react-immutable-proptypes';
import { fetchStatus } from '../../actions/statuses';
import Immutable from 'immutable';
import EmbeddedStatus from '../../components/status';
+import LoadingIndicator from '../../components/loading_indicator';
import DetailedStatus from './components/detailed_status';
import ActionBar from './components/action_bar';
import { favourite, reblog } from '../../actions/interactions';
@@ -63,7 +64,7 @@ const Status = React.createClass({
const { status, ancestors, descendants, me } = this.props;
if (status === null) {
- return <div>Loading {this.props.params.statusId}...</div>;
+ return <LoadingIndicator />;
}
const account = status.get('account');
diff --git a/app/assets/javascripts/components/features/subscriptions/index.jsx b/app/assets/javascripts/components/features/subscriptions/index.jsx
@@ -1,28 +0,0 @@
-import { connect } from 'react-redux';
-import PureRenderMixin from 'react-addons-pure-render-mixin';
-import ImmutablePropTypes from 'react-immutable-proptypes';
-
-const mapStateToProps = (state, props) => ({
-
-});
-
-const Subscriptions = React.createClass({
-
- propTypes: {
- params: React.PropTypes.object.isRequired,
- dispatch: React.PropTypes.func.isRequired
- },
-
- mixins: [PureRenderMixin],
-
- componentWillMount () {
- //
- },
-
- render () {
- return <div>Subscriptions</div>;
- }
-
-});
-
-export default connect(mapStateToProps)(Subscriptions);
diff --git a/app/assets/stylesheets/components.scss b/app/assets/stylesheets/components.scss
@@ -209,3 +209,21 @@
}
}
}
+
+.static-content {
+ padding: 10px;
+ padding-top: 20px;
+ color: #616b86;
+
+ h1 {
+ font-size: 16px;
+ font-weight: 500;
+ margin-bottom: 40px;
+ text-align: center;
+ }
+
+ p {
+ font-size: 13px;
+ margin-bottom: 20px;
+ }
+}
