Browse Source

better timeline comments

closed-social-glitch-2
欧醚 1 year ago
parent
commit
68bafcdc54
2 changed files with 57 additions and 20 deletions
  1. +37
    -19
      app/javascript/flavours/glitch/components/status_with_comments.jsx
  2. +20
    -1
      app/javascript/flavours/glitch/styles/components/status.scss

+ 37
- 19
app/javascript/flavours/glitch/components/status_with_comments.jsx View File

@ -9,11 +9,15 @@ const mapStateToProps = (state, { id }) => {
let reblogId = status.get('reblog'); // reblog here is a id
return {
childrenIds: state.getIn(['contexts', 'replies', reblogId || id]),
childrenWithGrandchildren: state.getIn(['contexts', 'replies', reblogId || id], []).map((cid) => ({
cid,
grandchildrenIds: state.getIn(['contexts', 'replies', cid], []),
})),
quotedId: reblogId && state.getIn(['statuses', reblogId, 'in_reply_to_id']),
};
};
const N = 3;
export default @connect(mapStateToProps)
class StatusWithComments extends ImmutablePureComponent {
@ -25,9 +29,14 @@ class StatusWithComments extends ImmutablePureComponent {
show = () => this.setState({ showAll: true });
render() {
const { id, childrenIds, quotedId, ...other } = this.props;
const { id, childrenWithGrandchildren, quotedId, ...other } = this.props;
const { showAll } = this.state;
let hideSome = !showAll && !!childrenIds && childrenIds.size > 3;
const loadMore = (
<LoadMore
visible
onClick={this.show}
/>
);
return (
<div className='status-with-comments'>
{quotedId ? (
@ -41,25 +50,34 @@ class StatusWithComments extends ImmutablePureComponent {
id={id}
{...other}
/>
{childrenIds ? (
{childrenWithGrandchildren.size > 0 && (
<div className='status__comments'>
{childrenIds
.filter((_, idx) => showAll || idx < 3)
.map(cid => (
<StatusContainer
key={`comment-${cid}`}
id={cid}
collapse={hideSome}
/>
{childrenWithGrandchildren
.filter((_, idx) => showAll || idx < N)
.map(({ cid, grandchildrenIds }) => (
<>
<StatusContainer
key={`comment-${cid}`}
id={cid}
/>
{grandchildrenIds.size > 0 && (
<div className='subcomments'>
{grandchildrenIds
.filter((_, idx) => showAll || idx < N)
.map((gid) => (
<StatusContainer
key={`subcomment-${gid}`}
id={gid}
/>
))}
{!showAll && grandchildrenIds.size > N && loadMore}
</div>
)}
</>
))}
{hideSome ? (
<LoadMore
visible={hideSome}
onClick={this.show}
/>
) : null}
{!showAll && childrenWithGrandchildren.size > N && loadMore}
</div>
) : null}
) }
</div>
);
}

+ 20
- 1
app/javascript/flavours/glitch/styles/components/status.scss View File

@ -1113,9 +1113,28 @@ a.status-card.compact:hover {
}
}
.status-with-comments {
border-top: 1px solid #707f88;
}
.status__comments {
margin-left: 30px;
margin-left: 25px;
margin-bottom: 15px;
border-left: 1px solid lighten($ui-base-color, 8%);
border-bottom: 1px solid lighten($ui-base-color, 8%);
.subcomments {
margin-left: 30px;
}
.load-more {
border-top: 1px solid lighten($ui-base-color, 8%);
}
.status__content {
font-size: 14px;
margin: 5px 0;
}
.status__avatar {
display: none;

Loading…
Cancel
Save