[Glitch] Improve the public hashtag page

Port 8b19903559 to glitch-soc
This commit is contained in:
Thibaut Girka
2019-01-20 11:47:17 +01:00
parent 3e8b623975
commit 02295257b3
4 changed files with 57 additions and 21 deletions

View File

@@ -13,6 +13,7 @@ import ImmutablePureComponent from 'react-immutable-pure-component';
import Video from 'flavours/glitch/features/video';
import VisibilityIcon from 'flavours/glitch/components/status_visibility_icon';
import scheduleIdleTask from 'flavours/glitch/util/schedule_idle_task';
import classNames from 'classnames';
export default class DetailedStatus extends ImmutablePureComponent {
@@ -30,6 +31,7 @@ export default class DetailedStatus extends ImmutablePureComponent {
measureHeight: PropTypes.bool,
onHeightChange: PropTypes.func,
domain: PropTypes.string.isRequired,
compact: PropTypes.bool,
};
state = {
@@ -60,7 +62,7 @@ export default class DetailedStatus extends ImmutablePureComponent {
_measureHeight (heightJustChanged) {
if (this.props.measureHeight && this.node) {
scheduleIdleTask(() => this.node && this.setState({ height: this.node.offsetHeight }));
scheduleIdleTask(() => this.node && this.setState({ height: this.node.scrollHeight }));
if (this.props.onHeightChange && heightJustChanged) {
this.props.onHeightChange();
@@ -95,6 +97,7 @@ export default class DetailedStatus extends ImmutablePureComponent {
const status = this.props.status.get('reblog') ? this.props.status.get('reblog') : this.props.status;
const { expanded, onToggleHidden, settings } = this.props;
const outerStyle = { boxSizing: 'border-box' };
const { compact } = this.props;
if (!status) {
return null;
@@ -200,26 +203,28 @@ export default class DetailedStatus extends ImmutablePureComponent {
}
return (
<div ref={this.setRef} className='detailed-status' data-status-by={status.getIn(['account', 'acct'])} style={outerStyle}>
<a href={status.getIn(['account', 'url'])} onClick={this.handleAccountClick} className='detailed-status__display-name'>
<div className='detailed-status__display-avatar'><Avatar account={status.get('account')} size={48} /></div>
<DisplayName account={status.get('account')} localDomain={this.props.domain} />
</a>
<div style={outerStyle}>
<div ref={this.setRef} className={classNames('detailed-status', { compact })} data-status-by={status.getIn(['account', 'acct'])}>
<a href={status.getIn(['account', 'url'])} onClick={this.handleAccountClick} className='detailed-status__display-name'>
<div className='detailed-status__display-avatar'><Avatar account={status.get('account')} size={48} /></div>
<DisplayName account={status.get('account')} localDomain={this.props.domain} />
</a>
<StatusContent
status={status}
media={media}
mediaIcon={mediaIcon}
expanded={expanded}
collapsed={false}
onExpandedToggle={onToggleHidden}
parseClick={this.parseClick}
/>
<StatusContent
status={status}
media={media}
mediaIcon={mediaIcon}
expanded={expanded}
collapsed={false}
onExpandedToggle={onToggleHidden}
parseClick={this.parseClick}
/>
<div className='detailed-status__meta'>
<a className='detailed-status__datetime' href={status.get('url')} target='_blank' rel='noopener'>
<FormattedDate value={new Date(status.get('created_at'))} hour12={false} year='numeric' month='short' day='2-digit' hour='2-digit' minute='2-digit' />
</a>{applicationLink} · {reblogLink} · {favouriteLink} · <VisibilityIcon visibility={status.get('visibility')} />
<div className='detailed-status__meta'>
<a className='detailed-status__datetime' href={status.get('url')} target='_blank' rel='noopener'>
<FormattedDate value={new Date(status.get('created_at'))} hour12={false} year='numeric' month='short' day='2-digit' hour='2-digit' minute='2-digit' />
</a>{applicationLink} · {reblogLink} · {favouriteLink} · <VisibilityIcon visibility={status.get('visibility')} />
</div>
</div>
</div>
);