Commit a30a918e authored by Haelwenn's avatar Haelwenn
parent 0965a9a4
......@@ -285,7 +285,7 @@ export default class Status extends ImmutablePureComponent {
</a>
</div>
<StatusContent status={status} onClick={this.handleClick} expanded={!status.get('hidden')} onExpandedToggle={this.handleExpandedToggle} />
<StatusContent status={status} onClick={this.handleClick} expanded={!status.get('hidden')} onExpandedToggle={this.handleExpandedToggle} collapsable />
{media}
......
......@@ -17,11 +17,14 @@ export default class StatusContent extends React.PureComponent {
expanded: PropTypes.bool,
onExpandedToggle: PropTypes.func,
onClick: PropTypes.func,
collapsable: PropTypes.bool,
};
state = {
hidden: true,
collapsed: null,
};
// `collapsed: null` indicates that an element doesn't need collapsing, while `true` or `false` indicates that it does (and is/isn't).
_updateStatusLinks () {
const node = this.node;
......@@ -53,6 +56,8 @@ export default class StatusContent extends React.PureComponent {
link.setAttribute('target', '_blank');
link.setAttribute('rel', 'noopener');
}
if (this.props.collapsable && this.state.collapsed === null && node.clientHeight > 200) this.setState({ collapsed: true });
}
componentDidMount () {
......@@ -113,6 +118,11 @@ export default class StatusContent extends React.PureComponent {
}
}
handleCollapsedClick = (e) => {
e.preventDefault();
this.setState({ collapsed: !this.state.collapsed });
}
setRef = (c) => {
this.node = c;
}
......@@ -132,6 +142,8 @@ export default class StatusContent extends React.PureComponent {
const classNames = classnames('status__content', {
'status__content--with-action': this.props.onClick && this.context.router,
'status__content--with-spoiler': status.get('spoiler_text').length > 0,
'status__content--collapsed': this.state.collapsed === true,
'status__content--expanded': this.state.collapsed === false,
});
if (isRtl(status.get('search_index'))) {
......@@ -175,8 +187,17 @@ export default class StatusContent extends React.PureComponent {
style={directionStyle}
onMouseDown={this.handleMouseDown}
onMouseUp={this.handleMouseUp}
dangerouslySetInnerHTML={content}
/>
>
<div dangerouslySetInnerHTML={content} />
{this.state.collapsed !== null ?
<a
className="status__content__collapse-button"
onClick={this.handleCollapsedClick}
>
<i className='fa fa-fw fa-angle-double-down' />
</a>
: null}
</div>
);
} else {
return (
......
......@@ -631,11 +631,13 @@
.status__content,
.reply-indicator__content {
position: relative;
font-size: 15px;
line-height: 20px;
word-wrap: break-word;
font-weight: 400;
overflow: hidden;
text-overflow: ellipsis;
white-space: pre-wrap;
padding-top: 2px;
color: $primary-text-color;
......@@ -721,6 +723,48 @@
}
}
.status__content.status__content--collapsed {
padding-bottom: 25px;
height: 200px;
i {
transform: rotateX(0);
}
}
.status__content.status__content--expanded, {
padding-bottom: 25px;
height: auto;
i {
transform: rotateX(180deg);
}
}
.status__content__collapse-button {
display: block;
position: absolute;
bottom: 0;
left: 0;
right: 0;
width: 100%;
height: 25px;
font-size: 18px;
line-height: 25px;
color: $ui-secondary-color;
text-align: center;
background: linear-gradient(to top, transparent, rgba(lighten($ui-primary-color, 13%), .3)), $ui-primary-color;
transition: background .2s ease-in-out, color .2s ease-in-out;
&:hover {
background-color: lighten($ui-primary-color, 8%);
}
i {
transition: transform .2s ease-in-out;
}
}
.status__content__spoiler-link {
display: inline-block;
border-radius: 2px;
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment