Stick images inside of CWs

This commit is contained in:
kibigo! 2017-06-25 19:15:03 -07:00
parent 96e1f75679
commit 38a1299975
3 changed files with 35 additions and 20 deletions

View file

@ -225,11 +225,11 @@ class StatusUnextended extends ImmutablePureComponent {
} else if (status.getIn(['media_attachments', 0, 'type']) === 'video') { } 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} />; 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' />; 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 { } else {
media = <MediaGallery media={status.get('media_attachments')} sensitive={status.get('sensitive')} height={110} onOpenMedia={this.props.onOpenMedia} autoPlayGif={this.props.autoPlayGif} />; 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' />; 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 +265,11 @@ class StatusUnextended extends ImmutablePureComponent {
</div> </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} />} {isCollapsed ? null : <StatusActionBar status={status} account={account} {...other} />}
</div> </div>

View file

@ -19,6 +19,7 @@ export default class StatusContent extends React.PureComponent {
onExpandedToggle: PropTypes.func, onExpandedToggle: PropTypes.func,
onHeightUpdate: PropTypes.func, onHeightUpdate: PropTypes.func,
onClick: PropTypes.func, onClick: PropTypes.func,
children: PropTypes.element,
}; };
state = { state = {
@ -107,7 +108,7 @@ export default class StatusContent extends React.PureComponent {
} }
render () { render () {
const { status } = this.props; const { status, children } = this.props;
const hidden = this.props.onExpandedToggle ? !this.props.expanded : this.state.hidden; const hidden = this.props.onExpandedToggle ? !this.props.expanded : this.state.hidden;
@ -144,7 +145,14 @@ export default class StatusContent extends React.PureComponent {
{mentionsPlaceholder} {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> </div>
); );
} else if (this.props.onClick) { } else if (this.props.onClick) {
@ -155,8 +163,10 @@ export default class StatusContent extends React.PureComponent {
style={directionStyle} style={directionStyle}
onMouseDown={this.handleMouseDown} onMouseDown={this.handleMouseDown}
onMouseUp={this.handleMouseUp} onMouseUp={this.handleMouseUp}
dangerouslySetInnerHTML={content} >
/> <div dangerouslySetInnerHTML={content} />
{children}
</div>
); );
} else { } else {
return ( return (
@ -164,8 +174,12 @@ export default class StatusContent extends React.PureComponent {
ref={this.setRef} ref={this.setRef}
className='status__content' className='status__content'
style={directionStyle} style={directionStyle}
dangerouslySetInnerHTML={content} onMouseDown={this.handleMouseDown}
/> onMouseUp={this.handleMouseUp}
>
<div dangerouslySetInnerHTML={content} />
{children}
</div>
); );
} }
} }

View file

@ -460,8 +460,7 @@
color: $primary-text-color; color: $primary-text-color;
word-wrap: break-word; word-wrap: break-word;
font-weight: 400; font-weight: 400;
overflow: hidden; overflow: visible;
text-overflow: ellipsis;
white-space: pre-wrap; white-space: pre-wrap;
.emojione { .emojione {
@ -504,10 +503,10 @@
} }
} }
.status__content__text { .status__content__spoiler {
display: none; display: none;
&.status__content__text--visible { &.status__content__spoiler--visible {
display: block; display: block;
} }
} }
@ -517,23 +516,20 @@
display: inline-block; display: inline-block;
border-radius: 2px; border-radius: 2px;
background: lighten($ui-base-color, 30%); background: lighten($ui-base-color, 30%);
border: 1px lighten($ui-base-color, 30%) solid; border: none;
color: lighten($ui-base-color, 8%); color: lighten($ui-base-color, 8%);
font-weight: 500; font-weight: 500;
font-size: 11px; font-size: 11px;
padding: 0 5px; padding: 0 5px;
text-transform: uppercase; text-transform: uppercase;
line-height: 18px; line-height: inherit;
cursor: pointer; cursor: pointer;
vertical-align: bottom;
&:hover { &:hover {
background: lighten($ui-base-color, 33%); background: lighten($ui-base-color, 33%);
text-decoration: none; text-decoration: none;
} }
.status-collapsed & {
vertical-align: bottom;
}
} }
.status__prepend-icon-wrapper { .status__prepend-icon-wrapper {
@ -621,6 +617,9 @@
.status__content { .status__content {
height: 20px; height: 20px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
} }
} }
} }