diff --git a/app/javascript/mastodon/components/status.js b/app/javascript/mastodon/components/status.js
index 9410b086f..aac3dcee3 100644
--- a/app/javascript/mastodon/components/status.js
+++ b/app/javascript/mastodon/components/status.js
@@ -225,11 +225,11 @@ class StatusUnextended extends ImmutablePureComponent {
} else if (status.getIn(['media_attachments', 0, 'type']) === 'video') {
media = ;
mediaType = ;
- if (!status.get('sensitive')) thumb = status.getIn(['media_attachments', 0]).get('preview_url');
+ if (!status.get('sensitive') && !(status.get('spoiler_text').length > 0)) thumb = status.getIn(['media_attachments', 0]).get('preview_url');
} else {
media = ;
mediaType = status.get('media_attachments').size > 1 ? : ;
- if (!status.get('sensitive')) thumb = status.getIn(['media_attachments', 0]).get('preview_url');
+ if (!status.get('sensitive') && !(status.get('spoiler_text').length > 0)) thumb = status.getIn(['media_attachments', 0]).get('preview_url');
}
}
@@ -265,9 +265,11 @@ class StatusUnextended extends ImmutablePureComponent {
-
+
- {isCollapsed ? null : media}
+ {isCollapsed ? null : media}
+
+
{isCollapsed ? null : }
diff --git a/app/javascript/mastodon/components/status_content.js b/app/javascript/mastodon/components/status_content.js
index 19bde01bd..9b93961ef 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,14 @@ export default class StatusContent extends React.PureComponent {
{mentionsPlaceholder}
-
+
+
);
} else if (this.props.onClick) {
@@ -155,8 +163,10 @@ export default class StatusContent extends React.PureComponent {
style={directionStyle}
onMouseDown={this.handleMouseDown}
onMouseUp={this.handleMouseUp}
- dangerouslySetInnerHTML={content}
- />
+ >
+
+ {children}
+
);
} else {
return (
@@ -164,8 +174,12 @@ export default class StatusContent extends React.PureComponent {
ref={this.setRef}
className='status__content'
style={directionStyle}
- dangerouslySetInnerHTML={content}
- />
+ onMouseDown={this.handleMouseDown}
+ onMouseUp={this.handleMouseUp}
+ >
+
+ {children}
+
);
}
}
diff --git a/app/javascript/styles/components.scss b/app/javascript/styles/components.scss
index 2a9236d5f..6064639cf 100644
--- a/app/javascript/styles/components.scss
+++ b/app/javascript/styles/components.scss
@@ -460,8 +460,7 @@
color: $primary-text-color;
word-wrap: break-word;
font-weight: 400;
- overflow: hidden;
- text-overflow: ellipsis;
+ overflow: visible;
white-space: pre-wrap;
.emojione {
@@ -504,10 +503,10 @@
}
}
- .status__content__text {
+ .status__content__spoiler {
display: none;
- &.status__content__text--visible {
+ &.status__content__spoiler--visible {
display: block;
}
}
@@ -517,23 +516,20 @@
display: inline-block;
border-radius: 2px;
background: lighten($ui-base-color, 30%);
- border: 1px lighten($ui-base-color, 30%) solid;
+ border: none;
color: lighten($ui-base-color, 8%);
font-weight: 500;
font-size: 11px;
padding: 0 5px;
text-transform: uppercase;
- line-height: 18px;
+ line-height: inherit;
cursor: pointer;
+ vertical-align: bottom;
&:hover {
background: lighten($ui-base-color, 33%);
text-decoration: none;
}
-
- .status-collapsed & {
- vertical-align: bottom;
- }
}
.status__prepend-icon-wrapper {
@@ -621,6 +617,9 @@
.status__content {
height: 20px;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
}
}
}