forked from treehouse/mastodon
parent
3e8b623975
commit
02295257b3
|
@ -80,7 +80,7 @@ class HashtagTimeline extends React.PureComponent {
|
|||
<div className='statuses-grid__item' key={statusId}>
|
||||
<DetailedStatusContainer
|
||||
id={statusId}
|
||||
showThread
|
||||
compact
|
||||
measureHeight
|
||||
onHeightChange={this.handleHeightChange}
|
||||
/>
|
||||
|
|
|
@ -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>
|
||||
);
|
||||
|
|
|
@ -100,6 +100,7 @@ const makeMapStateToProps = () => {
|
|||
descendantsIds,
|
||||
settings: state.get('local_settings'),
|
||||
askReplyConfirmation: state.getIn(['local_settings', 'confirm_before_clearing_draft']) && state.getIn(['compose', 'text']).trim().length !== 0,
|
||||
domain: state.getIn(['meta', 'domain']),
|
||||
};
|
||||
};
|
||||
|
||||
|
@ -123,6 +124,7 @@ export default class Status extends ImmutablePureComponent {
|
|||
descendantsIds: ImmutablePropTypes.list,
|
||||
intl: PropTypes.object.isRequired,
|
||||
askReplyConfirmation: PropTypes.bool,
|
||||
domain: PropTypes.string.isRequired,
|
||||
};
|
||||
|
||||
state = {
|
||||
|
@ -417,7 +419,7 @@ export default class Status extends ImmutablePureComponent {
|
|||
render () {
|
||||
let ancestors, descendants;
|
||||
const { setExpansion } = this;
|
||||
const { status, settings, ancestorsIds, descendantsIds, intl } = this.props;
|
||||
const { status, settings, ancestorsIds, descendantsIds, intl, domain } = this.props;
|
||||
const { fullscreen, isExpanded } = this.state;
|
||||
|
||||
if (status === null) {
|
||||
|
@ -470,6 +472,7 @@ export default class Status extends ImmutablePureComponent {
|
|||
onOpenMedia={this.handleOpenMedia}
|
||||
expanded={isExpanded}
|
||||
onToggleHidden={this.handleExpandedToggle}
|
||||
domain={domain}
|
||||
/>
|
||||
|
||||
<ActionBar
|
||||
|
|
|
@ -450,5 +450,33 @@ $fluid-breakpoint: $maximum-width + 20px;
|
|||
@media screen and (max-width: $no-gap-breakpoint) {
|
||||
border-bottom: 1px solid lighten($ui-base-color, 12%);
|
||||
}
|
||||
|
||||
&.compact {
|
||||
.detailed-status__meta {
|
||||
margin-top: 15px;
|
||||
}
|
||||
|
||||
.status__content {
|
||||
font-size: 15px;
|
||||
line-height: 20px;
|
||||
|
||||
.emojione {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
margin: -3px 0 0;
|
||||
}
|
||||
|
||||
.status__content__spoiler-link {
|
||||
line-height: 20px;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.media-gallery,
|
||||
.status-card,
|
||||
.video-player {
|
||||
margin-top: 15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue