Tiny Status improvements
- Media toots are no longer auto-collapsed if the media is behind a CW - Display names no longer appear clickable when a toot is collapsed - Fixed #36 by adding reduplicating the media icon inside the SHOW MORE/LESS
This commit is contained in:
parent
19690d3e33
commit
99889ea57d
3 changed files with 15 additions and 8 deletions
|
@ -176,7 +176,7 @@ class Status extends ImmutablePureComponent {
|
||||||
else if (settings.getIn(['collapsed', 'auto', 'all'])) this.collapse();
|
else if (settings.getIn(['collapsed', 'auto', 'all'])) this.collapse();
|
||||||
else if (settings.getIn(['collapsed', 'auto', 'lengthy']) && node.clientHeight > 400) this.collapse();
|
else if (settings.getIn(['collapsed', 'auto', 'lengthy']) && node.clientHeight > 400) this.collapse();
|
||||||
else if (settings.getIn(['collapsed', 'auto', 'replies']) && status.get('in_reply_to_id', null) !== null) this.collapse();
|
else if (settings.getIn(['collapsed', 'auto', 'replies']) && status.get('in_reply_to_id', null) !== null) this.collapse();
|
||||||
else if (settings.getIn(['collapsed', 'auto', 'media']) && status.get('media_attachments').size > 0) this.collapse();
|
else if (settings.getIn(['collapsed', 'auto', 'media']) && !(status.get('spoiler_text').length > 0) && status.get('media_attachments').size > 0) this.collapse();
|
||||||
|
|
||||||
if (!this.props.intersectionObserverWrapper) {
|
if (!this.props.intersectionObserverWrapper) {
|
||||||
// TODO: enable IntersectionObserver optimization for notification statuses.
|
// TODO: enable IntersectionObserver optimization for notification statuses.
|
||||||
|
@ -268,7 +268,7 @@ class Status extends ImmutablePureComponent {
|
||||||
|
|
||||||
render () {
|
render () {
|
||||||
let media = null;
|
let media = null;
|
||||||
let mediaType = null;
|
let mediaIcon = null;
|
||||||
let statusAvatar;
|
let statusAvatar;
|
||||||
|
|
||||||
// Exclude intersectionObserverWrapper from `other` variable
|
// Exclude intersectionObserverWrapper from `other` variable
|
||||||
|
@ -297,10 +297,10 @@ class Status 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' />;
|
mediaIcon = 'video-camera';
|
||||||
} 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' />;
|
mediaIcon = 'picture-o';
|
||||||
}
|
}
|
||||||
|
|
||||||
if (!status.get('sensitive') && !(status.get('spoiler_text').length > 0) && settings.getIn(['collapsed', 'backgrounds', 'preview_images'])) background = status.getIn(['media_attachments', 0]).get('preview_url');
|
if (!status.get('sensitive') && !(status.get('spoiler_text').length > 0) && settings.getIn(['collapsed', 'backgrounds', 'preview_images'])) background = status.getIn(['media_attachments', 0]).get('preview_url');
|
||||||
|
@ -317,7 +317,7 @@ class Status extends ImmutablePureComponent {
|
||||||
<div className='status__info'>
|
<div className='status__info'>
|
||||||
|
|
||||||
<div className='status__info__icons'>
|
<div className='status__info__icons'>
|
||||||
{mediaType}
|
{mediaIcon ? <i className={`fa fa-fw fa-${mediaIcon}`} aria-hidden='true' /> : null}
|
||||||
{settings.getIn(['collapsed', 'enabled']) ? <IconButton
|
{settings.getIn(['collapsed', 'enabled']) ? <IconButton
|
||||||
className='status__collapse-button'
|
className='status__collapse-button'
|
||||||
animate flip
|
animate flip
|
||||||
|
@ -338,7 +338,7 @@ class Status extends ImmutablePureComponent {
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<StatusContent status={status} onClick={this.handleClick} expanded={isExpanded} collapsed={isCollapsed} onExpandedToggle={this.handleExpandedToggle} onHeightUpdate={this.saveHeight}>
|
<StatusContent status={status} mediaIcon={mediaIcon} onClick={this.handleClick} expanded={isExpanded} collapsed={isCollapsed} onExpandedToggle={this.handleExpandedToggle} onHeightUpdate={this.saveHeight}>
|
||||||
|
|
||||||
{isCollapsed ? null : media}
|
{isCollapsed ? null : media}
|
||||||
|
|
||||||
|
|
|
@ -20,6 +20,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,
|
||||||
|
mediaIcon: PropTypes.string,
|
||||||
children: PropTypes.element,
|
children: PropTypes.element,
|
||||||
};
|
};
|
||||||
|
|
||||||
|
@ -119,7 +120,7 @@ export default class StatusContent extends React.PureComponent {
|
||||||
}
|
}
|
||||||
|
|
||||||
render () {
|
render () {
|
||||||
const { status, children } = this.props;
|
const { status, children, mediaIcon } = this.props;
|
||||||
|
|
||||||
const hidden = this.props.onExpandedToggle ? !this.props.expanded : this.state.hidden;
|
const hidden = this.props.onExpandedToggle ? !this.props.expanded : this.state.hidden;
|
||||||
|
|
||||||
|
@ -151,7 +152,9 @@ export default class StatusContent extends React.PureComponent {
|
||||||
<p style={{ marginBottom: hidden && status.get('mentions').isEmpty() ? '0px' : null }}>
|
<p style={{ marginBottom: hidden && status.get('mentions').isEmpty() ? '0px' : null }}>
|
||||||
<span dangerouslySetInnerHTML={spoilerContent} />
|
<span dangerouslySetInnerHTML={spoilerContent} />
|
||||||
{' '}
|
{' '}
|
||||||
<button tabIndex='0' className='status__content__spoiler-link' onClick={this.handleSpoilerClick}>{toggleText}</button>
|
<button tabIndex='0' className='status__content__spoiler-link' onClick={this.handleSpoilerClick}>
|
||||||
|
{toggleText} {mediaIcon ? <i className={`fa fa-fw fa-${mediaIcon}`} aria-hidden='true' /> : null}
|
||||||
|
</button>
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
{mentionsPlaceholder}
|
{mentionsPlaceholder}
|
||||||
|
|
|
@ -584,6 +584,10 @@
|
||||||
content: "";
|
content: "";
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.status__display-name:hover strong {
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
.status__content {
|
.status__content {
|
||||||
height: 20px;
|
height: 20px;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
|
|
Loading…
Reference in a new issue