diff options
| -rw-r--r-- | app/javascript/mastodon/components/status.js | 13 | ||||
| -rw-r--r-- | app/javascript/mastodon/components/status_content.js | 26 | ||||
| -rw-r--r-- | app/javascript/styles/components.scss | 19 |
3 files changed, 37 insertions, 21 deletions
diff --git a/app/javascript/mastodon/components/status.js b/app/javascript/mastodon/components/status.js index 9410b086f..d2ede6b2a 100644 --- a/app/javascript/mastodon/components/status.js +++ b/app/javascript/mastodon/components/status.js @@ -153,7 +153,8 @@ class StatusUnextended extends ImmutablePureComponent { } handleClick = () => { - const { status, isCollapsed } = this.props; + const { status } = this.props; + const { isCollapsed } = this.state; if (isCollapsed) this.handleCollapsedClick(); else this.context.router.history.push(`/statuses/${status.getIn(['reblog', 'id'], status.get('id'))}`); } @@ -225,11 +226,11 @@ class StatusUnextended extends ImmutablePureComponent { } else if (status.getIn(['media_attachments', 0, 'type']) === 'video') { media = <VideoPlayer media={status.getIn(['media_attachments', 0])} sensitive={status.get('sensitive')} onOpenVideo={this.props.onOpenVideo} />; mediaType = <i className='fa fa-fw fa-video-camera' aria-hidden='true' />; - 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 = <MediaGallery media={status.get('media_attachments')} sensitive={status.get('sensitive')} height={110} onOpenMedia={this.props.onOpenMedia} autoPlayGif={this.props.autoPlayGif} />; mediaType = status.get('media_attachments').size > 1 ? <i className='fa fa-fw fa-th-large' aria-hidden='true' /> : <i className='fa fa-fw fa-picture-o' aria-hidden='true' />; - 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 +266,11 @@ class StatusUnextended extends ImmutablePureComponent { </div> - <StatusContent status={status} onClick={this.handleClick} expanded={isExpanded} onExpandedToggle={this.handleExpandedToggle} onHeightUpdate={this.saveHeight} /> + <StatusContent status={status} onClick={this.handleClick} expanded={isExpanded} onExpandedToggle={this.handleExpandedToggle} onHeightUpdate={this.saveHeight}> - {isCollapsed ? null : media} + {isCollapsed ? null : media} + + </StatusContent> {isCollapsed ? null : <StatusActionBar status={status} account={account} {...other} />} </div> 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} - <div className={`status__content__text ${!hidden ? 'status__content__text--visible' : ''}`} style={directionStyle} dangerouslySetInnerHTML={content} /> + <div className={`status__content__spoiler ${!hidden ? 'status__content__spoiler--visible' : ''}`}> + + <div style={directionStyle} dangerouslySetInnerHTML={content} /> + + {children} + + </div> + </div> ); } 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} - /> + > + <div dangerouslySetInnerHTML={content} /> + {children} + </div> ); } 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} + > + <div dangerouslySetInnerHTML={content} /> + {children} + </div> ); } } 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; } } } |