From a4b8069cf5ed57d7cba066993f683941a6e60bc3 Mon Sep 17 00:00:00 2001 From: Eugen Rochko Date: Thu, 6 Oct 2016 22:47:35 +0200 Subject: [PATCH] Styling loading indicator, removing unused routes, adding "getting started" explanation Also, only update relative time every minute instead of 6 seconds. My bad --- .../components/loading_indicator.jsx | 13 ++++++++ .../components/relative_timestamp.jsx | 2 +- .../components/containers/mastodon.jsx | 31 ++++++++++--------- .../components/features/account/index.jsx | 3 +- .../features/getting_started/index.jsx | 13 ++++++++ .../components/features/settings/index.jsx | 28 ----------------- .../components/features/status/index.jsx | 3 +- .../features/subscriptions/index.jsx | 28 ----------------- app/assets/stylesheets/components.scss | 18 +++++++++++ 9 files changed, 66 insertions(+), 73 deletions(-) create mode 100644 app/assets/javascripts/components/components/loading_indicator.jsx create mode 100644 app/assets/javascripts/components/features/getting_started/index.jsx delete mode 100644 app/assets/javascripts/components/features/settings/index.jsx delete mode 100644 app/assets/javascripts/components/features/subscriptions/index.jsx 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
Loading...
; +}; + +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({ - - + 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
Loading {this.props.params.accountId}...
; + return ; } 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 ( +
+

Getting started

+

Mastodon is still in development and one of the lacking areas at the moment is user discovery.

+

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.

+

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.

+

The developer of this project can be followed as Gargron@mastodon.social

+
+ ); +}; + +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
Settings
; - } - -}); - -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
Loading {this.props.params.statusId}...
; + return ; } 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
Subscriptions
; - } - -}); - -export default connect(mapStateToProps)(Subscriptions); diff --git a/app/assets/stylesheets/components.scss b/app/assets/stylesheets/components.scss index 114d380b8..348857393 100644 --- 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; + } +}