treehouse
/
mastodon
21
8
Fork 5
Code Issues 32 Pull Requests Projects 1 Releases Wiki Activity

Styling loading indicator, removing unused routes, adding "getting started" explanation 

Also, only update relative time every minute instead of 6 seconds. My bad
remotes/1727458204337373841/tmp_refs/heads/signup-info-prompt
Eugen Rochko 2016-10-06 22:47:35 +02:00
parent e8a8703a4b
commit a4b8069cf5
9 changed files with 66 additions and 73 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
app/assets/javascripts/components/components/loading_indicator.jsx Normal file
View File

@ -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;

2
app/assets/javascripts/components/components/relative_timestamp.jsx
View File

@ -35,7 +35,7 @@ const RelativeTimestamp = React.createClass({
componentWillMount () {
this._updateMomentText();
this.interval = setInterval(this._updateMomentText, 6000);
this.interval = setInterval(this._updateMomentText, 60000);
},
componentWillUnmount () {

31
app/assets/javascripts/components/containers/mastodon.jsx
View File

@ -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>

3
app/assets/javascripts/components/features/account/index.jsx
View File

@ -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 (

13
app/assets/javascripts/components/features/getting_started/index.jsx Normal file
View File

@ -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;

28
app/assets/javascripts/components/features/settings/index.jsx
View File

@ -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);

3
app/assets/javascripts/components/features/status/index.jsx
View File

@ -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');

28
app/assets/javascripts/components/features/subscriptions/index.jsx
View File

@ -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);

18
app/assets/stylesheets/components.scss
View File

@ -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;
}
}