Styling loading indicator, removing unused routes, adding "getting started" explanation
Also, only update relative time every minute instead of 6 seconds. My bad
This commit is contained in:
Eugen Rochko
parent
e8a8703a4b
commit
a4b8069cf5
|
|
@ -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;
|
||||
|
|
@ -35,7 +35,7 @@ const RelativeTimestamp = React.createClass({
|
|||
|
||||
componentWillMount () {
|
||||
this._updateMomentText();
|
||||
this.interval = setInterval(this._updateMomentText, 6000);
|
||||
this.interval = setInterval(this._updateMomentText, 60000);
|
||||
},
|
||||
|
||||
componentWillUnmount () {
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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 (
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
@ -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);
|
||||
|
|
@ -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');
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Reference in New Issue