Partially fix post navigation
Signed-off-by: marcin mikołajczak <git@mkljczk.pl>
This commit is contained in:
parent
4bc3a0c7dc
commit
1796a35951
5 changed files with 90 additions and 75 deletions
|
@ -11,6 +11,10 @@ export default class Column extends React.PureComponent {
|
|||
label: PropTypes.string,
|
||||
};
|
||||
|
||||
setRef = c => {
|
||||
this.node = c;
|
||||
}
|
||||
|
||||
render() {
|
||||
const { className, label, children, transparent, ...rest } = this.props;
|
||||
|
||||
|
@ -20,6 +24,7 @@ export default class Column extends React.PureComponent {
|
|||
aria-label={label}
|
||||
className={classNames('column', className, { 'column--transparent': transparent })}
|
||||
{...rest}
|
||||
ref={this.setRef}
|
||||
>
|
||||
{children}
|
||||
</div>
|
||||
|
|
|
@ -4,24 +4,24 @@
|
|||
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import StatusContainer from 'soapbox/containers/status_container';
|
||||
|
||||
export default class MaterialStatus extends React.Component {
|
||||
|
||||
static propTypes = {
|
||||
children: PropTypes.node,
|
||||
hidden: PropTypes.bool,
|
||||
}
|
||||
|
||||
render() {
|
||||
// Performance: when hidden, don't render the wrapper divs
|
||||
if (this.props.hidden) {
|
||||
return <StatusContainer {...this.props} />;
|
||||
return this.props.children;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className='material-status' tabIndex={-1}>
|
||||
<div className='material-status__status focusable' tabIndex={0}>
|
||||
<StatusContainer {...this.props} focusable={false} />
|
||||
{this.props.children}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
|
|
@ -95,6 +95,7 @@ class Status extends ImmutablePureComponent {
|
|||
displayMedia: PropTypes.string,
|
||||
allowedEmoji: ImmutablePropTypes.list,
|
||||
focusable: PropTypes.bool,
|
||||
component: PropTypes.func,
|
||||
};
|
||||
|
||||
static defaultProps = {
|
||||
|
@ -316,7 +317,7 @@ class Status extends ImmutablePureComponent {
|
|||
const poll = null;
|
||||
let statusAvatar, prepend, rebloggedByText, reblogContent;
|
||||
|
||||
const { intl, hidden, featured, otherAccounts, unread, showThread, group } = this.props;
|
||||
const { intl, hidden, featured, otherAccounts, unread, showThread, group, wrapperComponent: WrapperComponent } = this.props;
|
||||
|
||||
// FIXME: why does this need to reassign status and account??
|
||||
let { status, account, ...other } = this.props; // eslint-disable-line prefer-const
|
||||
|
@ -494,72 +495,76 @@ class Status extends ImmutablePureComponent {
|
|||
const favicon = status.getIn(['account', 'pleroma', 'favicon']);
|
||||
const domain = getDomain(status.get('account'));
|
||||
|
||||
const wrappedStatus = (
|
||||
<div className={classNames('status__wrapper', `status__wrapper-${status.get('visibility')}`, { 'status__wrapper-reply': !!status.get('in_reply_to_id'), read: unread === false, focusable: this.props.focusable && !this.props.muted })} tabIndex={this.props.focusable && !this.props.muted ? 0 : null} data-featured={featured ? 'true' : null} aria-label={textForScreenReader(intl, status, rebloggedByText)} ref={this.handleRef}>
|
||||
{prepend}
|
||||
|
||||
<div className={classNames('status', `status-${status.get('visibility')}`, { 'status-reply': !!status.get('in_reply_to_id'), muted: this.props.muted, read: unread === false })} data-id={status.get('id')}>
|
||||
<div className='status__expand' onClick={this.handleExpandClick} role='presentation' />
|
||||
<div className='status__info'>
|
||||
<NavLink to={statusUrl} className='status__relative-time'>
|
||||
<RelativeTimestamp timestamp={status.get('created_at')} />
|
||||
</NavLink>
|
||||
|
||||
{favicon &&
|
||||
<div className='status__favicon'>
|
||||
<Link to={`/timeline/${domain}`}>
|
||||
<img src={favicon} alt='' title={domain} />
|
||||
</Link>
|
||||
</div>}
|
||||
|
||||
<div className='status__profile'>
|
||||
<div className='status__avatar'>
|
||||
<HoverRefWrapper accountId={status.getIn(['account', 'id'])}>
|
||||
<NavLink to={`/@${status.getIn(['account', 'acct'])}`} title={status.getIn(['account', 'acct'])}>
|
||||
{statusAvatar}
|
||||
</NavLink>
|
||||
</HoverRefWrapper>
|
||||
</div>
|
||||
<NavLink to={`/@${status.getIn(['account', 'acct'])}`} title={status.getIn(['account', 'acct'])} className='status__display-name'>
|
||||
<DisplayName account={status.get('account')} others={otherAccounts} />
|
||||
</NavLink>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{!group && status.get('group') && (
|
||||
<div className='status__meta'>
|
||||
Posted in <NavLink to={`/groups/${status.getIn(['group', 'id'])}`}>{status.getIn(['group', 'title'])}</NavLink>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<StatusContent
|
||||
status={status}
|
||||
reblogContent={reblogContent}
|
||||
onClick={this.handleClick}
|
||||
expanded={!status.get('hidden')}
|
||||
onExpandedToggle={this.handleExpandedToggle}
|
||||
collapsable
|
||||
/>
|
||||
|
||||
{media}
|
||||
{poll}
|
||||
|
||||
{showThread && status.get('in_reply_to_id') && status.get('in_reply_to_account_id') === status.getIn(['account', 'id']) && (
|
||||
<button className='status__content__read-more-button' onClick={this.handleClick}>
|
||||
<FormattedMessage id='status.show_thread' defaultMessage='Show thread' />
|
||||
</button>
|
||||
)}
|
||||
|
||||
<StatusActionBar
|
||||
status={status}
|
||||
account={account}
|
||||
emojiSelectorFocused={this.state.emojiSelectorFocused}
|
||||
handleEmojiSelectorUnfocus={this.handleEmojiSelectorUnfocus}
|
||||
{...other}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
return (
|
||||
<HotKeys handlers={handlers}>
|
||||
<div className={classNames('status__wrapper', `status__wrapper-${status.get('visibility')}`, { 'status__wrapper-reply': !!status.get('in_reply_to_id'), read: unread === false, focusable: this.props.focusable && !this.props.muted })} tabIndex={this.props.focusable && !this.props.muted ? 0 : null} data-featured={featured ? 'true' : null} aria-label={textForScreenReader(intl, status, rebloggedByText)} ref={this.handleRef}>
|
||||
{prepend}
|
||||
|
||||
<div className={classNames('status', `status-${status.get('visibility')}`, { 'status-reply': !!status.get('in_reply_to_id'), muted: this.props.muted, read: unread === false })} data-id={status.get('id')}>
|
||||
<div className='status__expand' onClick={this.handleExpandClick} role='presentation' />
|
||||
<div className='status__info'>
|
||||
<NavLink to={statusUrl} className='status__relative-time'>
|
||||
<RelativeTimestamp timestamp={status.get('created_at')} />
|
||||
</NavLink>
|
||||
|
||||
{favicon &&
|
||||
<div className='status__favicon'>
|
||||
<Link to={`/timeline/${domain}`}>
|
||||
<img src={favicon} alt='' title={domain} />
|
||||
</Link>
|
||||
</div>}
|
||||
|
||||
<div className='status__profile'>
|
||||
<div className='status__avatar'>
|
||||
<HoverRefWrapper accountId={status.getIn(['account', 'id'])}>
|
||||
<NavLink to={`/@${status.getIn(['account', 'acct'])}`} title={status.getIn(['account', 'acct'])}>
|
||||
{statusAvatar}
|
||||
</NavLink>
|
||||
</HoverRefWrapper>
|
||||
</div>
|
||||
<NavLink to={`/@${status.getIn(['account', 'acct'])}`} title={status.getIn(['account', 'acct'])} className='status__display-name'>
|
||||
<DisplayName account={status.get('account')} others={otherAccounts} />
|
||||
</NavLink>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{!group && status.get('group') && (
|
||||
<div className='status__meta'>
|
||||
Posted in <NavLink to={`/groups/${status.getIn(['group', 'id'])}`}>{status.getIn(['group', 'title'])}</NavLink>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<StatusContent
|
||||
status={status}
|
||||
reblogContent={reblogContent}
|
||||
onClick={this.handleClick}
|
||||
expanded={!status.get('hidden')}
|
||||
onExpandedToggle={this.handleExpandedToggle}
|
||||
collapsable
|
||||
/>
|
||||
|
||||
{media}
|
||||
{poll}
|
||||
|
||||
{showThread && status.get('in_reply_to_id') && status.get('in_reply_to_account_id') === status.getIn(['account', 'id']) && (
|
||||
<button className='status__content__read-more-button' onClick={this.handleClick}>
|
||||
<FormattedMessage id='status.show_thread' defaultMessage='Show thread' />
|
||||
</button>
|
||||
)}
|
||||
|
||||
<StatusActionBar
|
||||
status={status}
|
||||
account={account}
|
||||
emojiSelectorFocused={this.state.emojiSelectorFocused}
|
||||
handleEmojiSelectorUnfocus={this.handleEmojiSelectorUnfocus}
|
||||
{...other}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
{WrapperComponent ? <WrapperComponent>{wrappedStatus}</WrapperComponent> : wrappedStatus}
|
||||
</HotKeys>
|
||||
);
|
||||
}
|
||||
|
|
|
@ -3,6 +3,7 @@ import React from 'react';
|
|||
import { FormattedMessage, defineMessages } from 'react-intl';
|
||||
import ImmutablePropTypes from 'react-immutable-proptypes';
|
||||
import PropTypes from 'prop-types';
|
||||
import StatusContainer from 'soapbox/containers/status_container';
|
||||
import MaterialStatus from 'soapbox/components/material_status';
|
||||
import PendingStatus from 'soapbox/features/ui/components/pending_status';
|
||||
import ImmutablePureComponent from 'react-immutable-pure-component';
|
||||
|
@ -110,7 +111,7 @@ export default class StatusList extends ImmutablePureComponent {
|
|||
const { timelineId, withGroupAdmin, group } = this.props;
|
||||
|
||||
return (
|
||||
<MaterialStatus
|
||||
<StatusContainer
|
||||
key={statusId}
|
||||
id={statusId}
|
||||
onMoveUp={this.handleMoveUp}
|
||||
|
@ -119,6 +120,8 @@ export default class StatusList extends ImmutablePureComponent {
|
|||
group={group}
|
||||
withGroupAdmin={withGroupAdmin}
|
||||
showThread
|
||||
wrapperComponent={MaterialStatus}
|
||||
focusable={false}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
@ -150,7 +153,7 @@ export default class StatusList extends ImmutablePureComponent {
|
|||
if (!featuredStatusIds) return null;
|
||||
|
||||
return featuredStatusIds.map(statusId => (
|
||||
<MaterialStatus
|
||||
<StatusContainer
|
||||
key={`f-${statusId}`}
|
||||
id={statusId}
|
||||
featured
|
||||
|
@ -158,6 +161,8 @@ export default class StatusList extends ImmutablePureComponent {
|
|||
onMoveDown={this.handleMoveDown}
|
||||
contextType={timelineId}
|
||||
showThread
|
||||
wrapperComponent={MaterialStatus}
|
||||
focusable={false}
|
||||
/>
|
||||
));
|
||||
}
|
||||
|
|
|
@ -1,4 +1,4 @@
|
|||
import { OrderedSet as ImmutableOrderedSet } from 'immutable';
|
||||
import { List as ImmutableList, OrderedSet as ImmutableOrderedSet } from 'immutable';
|
||||
import React from 'react';
|
||||
import { connect } from 'react-redux';
|
||||
import PropTypes from 'prop-types';
|
||||
|
@ -410,10 +410,10 @@ class Status extends ImmutablePureComponent {
|
|||
if (id === status.get('id')) {
|
||||
this._selectChild(ancestorsIds.size - 1, true);
|
||||
} else {
|
||||
let index = ancestorsIds.indexOf(id);
|
||||
let index = ImmutableList(ancestorsIds).indexOf(id);
|
||||
|
||||
if (index === -1) {
|
||||
index = descendantsIds.indexOf(id);
|
||||
index = ImmutableList(descendantsIds).indexOf(id);
|
||||
this._selectChild(ancestorsIds.size + index, true);
|
||||
} else {
|
||||
this._selectChild(index - 1, true);
|
||||
|
@ -427,10 +427,10 @@ class Status extends ImmutablePureComponent {
|
|||
if (id === status.get('id')) {
|
||||
this._selectChild(ancestorsIds.size + 1, false);
|
||||
} else {
|
||||
let index = ancestorsIds.indexOf(id);
|
||||
let index = ImmutableList(ancestorsIds).indexOf(id);
|
||||
|
||||
if (index === -1) {
|
||||
index = descendantsIds.indexOf(id);
|
||||
index = ImmutableList(descendantsIds).indexOf(id);
|
||||
this._selectChild(ancestorsIds.size + index + 2, false);
|
||||
} else {
|
||||
this._selectChild(index + 1, false);
|
||||
|
|
Loading…
Reference in a new issue