diff options
| -rw-r--r-- | .babelrc | 3 | ||||
| -rw-r--r-- | .eslintrc | 2 | ||||
| -rw-r--r-- | app/assets/javascripts/components/actions/interactions.jsx | 4 | ||||
| -rw-r--r-- | app/assets/javascripts/components/components/display_name.jsx | 19 | ||||
| -rw-r--r-- | app/assets/javascripts/components/components/reply_indicator.jsx | 3 | ||||
| -rw-r--r-- | app/assets/javascripts/components/components/status.jsx | 20 | ||||
| -rw-r--r-- | app/assets/stylesheets/components.scss | 6 | ||||
| -rw-r--r-- | package.json | 1 |
8 files changed, 51 insertions, 7 deletions
diff --git a/.babelrc b/.babelrc index 86c445f54..47c9aceb7 100644 --- a/.babelrc +++ b/.babelrc @@ -1,3 +1,4 @@ { - "presets": ["es2015", "react"] + "presets": ["es2015", "react"], + "plugins": ["transform-object-rest-spread"] } diff --git a/.eslintrc b/.eslintrc index be3d78d59..10bf70546 100644 --- a/.eslintrc +++ b/.eslintrc @@ -5,6 +5,8 @@ "es6": true }, + "parser": "babel-eslint", + "plugins": [ "react" ], diff --git a/app/assets/javascripts/components/actions/interactions.jsx b/app/assets/javascripts/components/actions/interactions.jsx index 281d3be87..964655530 100644 --- a/app/assets/javascripts/components/actions/interactions.jsx +++ b/app/assets/javascripts/components/actions/interactions.jsx @@ -15,7 +15,9 @@ export function reblog(status) { dispatch(reblogRequest(status)); api(getState).post(`/api/statuses/${status.get('id')}/reblog`).then(function (response) { - dispatch(reblogSuccess(status, response.data)); + // The reblog API method returns a new status wrapped around the original. In this case we are only + // interested in how the original is modified, hence passing it skipping the wrapper + dispatch(reblogSuccess(status, response.data.reblog)); }).catch(function (error) { dispatch(reblogFail(status, error)); }); diff --git a/app/assets/javascripts/components/components/display_name.jsx b/app/assets/javascripts/components/components/display_name.jsx new file mode 100644 index 000000000..1d579731b --- /dev/null +++ b/app/assets/javascripts/components/components/display_name.jsx @@ -0,0 +1,19 @@ +import ImmutablePropTypes from 'react-immutable-proptypes'; + +const DisplayName = React.createClass({ + + propTypes: { + account: ImmutablePropTypes.map.isRequired + }, + + render () { + return ( + <span style={{ display: 'block', maxWidth: '100%', overflow: 'hidden', whiteSpace: 'nowrap', textOverflow: 'ellipsis' }}> + <strong style={{ fontWeight: 'bold' }}>{this.props.account.get('display_name')}</strong> <span style={{ fontSize: '14px' }}>@{this.props.account.get('acct')}</span> + </span> + ); + } + +}); + +export default DisplayName; diff --git a/app/assets/javascripts/components/components/reply_indicator.jsx b/app/assets/javascripts/components/components/reply_indicator.jsx index 2531b7f43..9598a5874 100644 --- a/app/assets/javascripts/components/components/reply_indicator.jsx +++ b/app/assets/javascripts/components/components/reply_indicator.jsx @@ -2,6 +2,7 @@ import PureRenderMixin from 'react-addons-pure-render-mixin'; import ImmutablePropTypes from 'react-immutable-proptypes'; import Avatar from './avatar'; import IconButton from './icon_button'; +import DisplayName from './display_name'; const ReplyIndicator = React.createClass({ @@ -26,7 +27,7 @@ const ReplyIndicator = React.createClass({ <a href={this.props.status.getIn(['account', 'url'])} className='reply-indicator__display-name' style={{ display: 'block', maxWidth: '100%', paddingRight: '25px', color: '#282c37', textDecoration: 'none', overflow: 'hidden', lineHeight: '24px' }}> <div style={{ float: 'left', marginRight: '5px' }}><Avatar size={24} src={this.props.status.getIn(['account', 'avatar'])} /></div> - <strong style={{ fontWeight: '500' }}>{this.props.status.getIn(['account', 'display_name'])}</strong> <span>@{this.props.status.getIn(['account', 'acct'])}</span> + <DisplayName account={this.props.status.get('account')} /> </a> </div> diff --git a/app/assets/javascripts/components/components/status.jsx b/app/assets/javascripts/components/components/status.jsx index 7885360e6..fabe85bab 100644 --- a/app/assets/javascripts/components/components/status.jsx +++ b/app/assets/javascripts/components/components/status.jsx @@ -3,6 +3,7 @@ import Avatar from './avatar'; import RelativeTimestamp from './relative_timestamp'; import PureRenderMixin from 'react-addons-pure-render-mixin'; import IconButton from './icon_button'; +import DisplayName from './display_name'; const Status = React.createClass({ @@ -29,7 +30,20 @@ const Status = React.createClass({ render () { var content = { __html: this.props.status.get('content') }; - var status = this.props.status; + var { status, ...other } = this.props; + + if (status.get('reblog') !== null) { + return ( + <div> + <div style={{ marginLeft: '68px', color: '#616b86', padding: '8px 0', paddingBottom: '2px', fontSize: '14px', position: 'relative' }}> + <div style={{ position: 'absolute', 'left': '-26px'}}><i className='fa fa-fw fa-retweet'></i></div> + <a href={status.getIn(['account', 'url'])} style={{ color: '#616b86' }}>{status.getIn(['account', 'display_name'])}</a> reblogged + </div> + + <Status {...other} status={status.get('reblog')} /> + </div> + ); + } return ( <div style={{ padding: '8px 10px', paddingLeft: '68px', position: 'relative', minHeight: '48px', borderBottom: '1px solid #363c4b', cursor: 'pointer' }}> @@ -43,9 +57,7 @@ const Status = React.createClass({ <Avatar src={status.getIn(['account', 'avatar'])} size={48} /> </div> - <span style={{ display: 'block', maxWidth: '100%', overflow: 'hidden', whiteSpace: 'nowrap', textOverflow: 'ellipsis' }}> - <strong style={{ fontWeight: 'bold', color: '#fff' }}>{status.getIn(['account', 'display_name'])}</strong> <span style={{ fontSize: '14px' }}>@{status.getIn(['account', 'acct'])}</span> - </span> + <DisplayName account={status.get('account')} /> </a> </div> diff --git a/app/assets/stylesheets/components.scss b/app/assets/stylesheets/components.scss index 4050babf9..f17160161 100644 --- a/app/assets/stylesheets/components.scss +++ b/app/assets/stylesheets/components.scss @@ -76,6 +76,12 @@ text-decoration: none; } +.status__display-name { + strong { + color: #fff; + } +} + .status__display-name, .reply-indicator__display-name { &:hover { strong { diff --git a/package.json b/package.json index 8f6300e12..57e9ded3d 100644 --- a/package.json +++ b/package.json @@ -2,6 +2,7 @@ "name": "mastodon", "devDependencies": { "babel-plugin-react-transform": "^2.0.2", + "babel-plugin-transform-object-rest-spread": "^6.8.0", "babel-preset-es2015": "^6.13.2", "babel-preset-react": "^6.11.1", "babelify": "^7.3.0", |