diff --git a/app/javascript/mastodon/components/status.js b/app/javascript/mastodon/components/status.js index a837659c2c..2d898ac3c6 100644 --- a/app/javascript/mastodon/components/status.js +++ b/app/javascript/mastodon/components/status.js @@ -223,9 +223,11 @@ export default class Status extends ImmutablePureComponent { - + - {media} + {media} + + diff --git a/app/javascript/mastodon/components/status_content.js b/app/javascript/mastodon/components/status_content.js index 19bde01bd3..56e017936f 100644 --- a/app/javascript/mastodon/components/status_content.js +++ b/app/javascript/mastodon/components/status_content.js @@ -19,6 +19,7 @@ export default class StatusContent extends React.PureComponent { onExpandedToggle: PropTypes.func, onHeightUpdate: PropTypes.func, onClick: PropTypes.func, + children: PropTypes.element, }; state = { @@ -107,7 +108,7 @@ export default class StatusContent extends React.PureComponent { } render () { - const { status } = this.props; + const { status, children } = this.props; const hidden = this.props.onExpandedToggle ? !this.props.expanded : this.state.hidden; @@ -144,7 +145,13 @@ export default class StatusContent extends React.PureComponent { {mentionsPlaceholder} -
+
+ +
+ + {children} + +
); } else if (this.props.onClick) { @@ -155,8 +162,10 @@ export default class StatusContent extends React.PureComponent { style={directionStyle} onMouseDown={this.handleMouseDown} onMouseUp={this.handleMouseUp} - dangerouslySetInnerHTML={content} - /> + > +
+ {children} +
); } else { return ( @@ -165,7 +174,10 @@ export default class StatusContent extends React.PureComponent { className='status__content' style={directionStyle} dangerouslySetInnerHTML={content} - /> + > +
+ {children} +
); } } diff --git a/app/javascript/styles/components.scss b/app/javascript/styles/components.scss index 88431fc69a..7d396847c8 100644 --- a/app/javascript/styles/components.scss +++ b/app/javascript/styles/components.scss @@ -427,7 +427,7 @@ line-height: 20px; word-wrap: break-word; font-weight: 400; - overflow: hidden; + overflow: visible; white-space: pre-wrap; .emojione { @@ -470,19 +470,10 @@ } } - .status__content__spoiler-link { - background: lighten($ui-base-color, 30%); - - &:hover { - background: lighten($ui-base-color, 33%); - text-decoration: none; - } - } - - .status__content__text { + .status__content__spoiler { display: none; - &.status__content__text--visible { + &.status__content__spoiler--visible { display: block; } } @@ -491,7 +482,7 @@ .status__content__spoiler-link { display: inline-block; border-radius: 2px; - background: transparent; + background: lighten($ui-base-color, 30%); border: 0; color: lighten($ui-base-color, 8%); font-weight: 500; @@ -500,6 +491,12 @@ text-transform: uppercase; line-height: inherit; cursor: pointer; + vertical-align: bottom; + + &:hover { + background: lighten($ui-base-color, 33%); + text-decoration: none; + } } .status__prepend-icon-wrapper {