diff options
author | Eugen Rochko <eugen@zeonfederated.com> | 2016-10-06 22:47:35 +0200 |
---|---|---|
committer | Eugen Rochko <eugen@zeonfederated.com> | 2016-10-06 22:47:35 +0200 |
commit | a4b8069cf5ed57d7cba066993f683941a6e60bc3 (patch) | |
tree | 9b211ea3137e62c343cd7d172b11c8a973754f82 /app/assets/javascripts/components | |
parent | e8a8703a4bfd0c245100beb1a0e15551b5c52f84 (diff) |
Styling loading indicator, removing unused routes, adding "getting started" explanation
Also, only update relative time every minute instead of 6 seconds. My bad
Diffstat (limited to 'app/assets/javascripts/components')
8 files changed, 48 insertions, 73 deletions
diff --git a/app/assets/javascripts/components/components/loading_indicator.jsx b/app/assets/javascripts/components/components/loading_indicator.jsx new file mode 100644 index 000000000..7b738ac32 --- /dev/null +++ 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 index 5fcc5e5bb..10b9e0274 100644 --- 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 index 220ddc54d..6c65c303b 100644 --- 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 index c2389af2e..c9de1a848 100644 --- 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 new file mode 100644 index 000000000..d507cb46f --- /dev/null +++ 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 deleted file mode 100644 index f9921d951..000000000 --- a/app/assets/javascripts/components/features/settings/index.jsx +++ /dev/null @@ -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 index f7ce53e99..c294ac1d6 100644 --- 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 deleted file mode 100644 index 780234fd9..000000000 --- a/app/assets/javascripts/components/features/subscriptions/index.jsx +++ /dev/null @@ -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); |