diff --git a/app/javascript/flavours/glitch/components/status_with_comments.jsx b/app/javascript/flavours/glitch/components/status_with_comments.jsx
index 143a2a7e1..9a4468290 100644
--- a/app/javascript/flavours/glitch/components/status_with_comments.jsx
+++ b/app/javascript/flavours/glitch/components/status_with_comments.jsx
@@ -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 = (
+
+ );
return (
{quotedId ? (
@@ -41,25 +50,34 @@ class StatusWithComments extends ImmutablePureComponent {
id={id}
{...other}
/>
- {childrenIds ? (
+ {childrenWithGrandchildren.size > 0 && (
- {childrenIds
- .filter((_, idx) => showAll || idx < 3)
- .map(cid => (
-
+ {childrenWithGrandchildren
+ .filter((_, idx) => showAll || idx < N)
+ .map(({ cid, grandchildrenIds }) => (
+ <>
+
+ {grandchildrenIds.size > 0 && (
+
+ {grandchildrenIds
+ .filter((_, idx) => showAll || idx < N)
+ .map((gid) => (
+
+ ))}
+ {!showAll && grandchildrenIds.size > N && loadMore}
+
+ )}
+ >
))}
- {hideSome ? (
-
- ) : null}
+ {!showAll && childrenWithGrandchildren.size > N && loadMore}
- ) : null}
+ ) }
);
}
diff --git a/app/javascript/flavours/glitch/styles/components/status.scss b/app/javascript/flavours/glitch/styles/components/status.scss
index 70df4e754..d4dc1a3b0 100644
--- a/app/javascript/flavours/glitch/styles/components/status.scss
+++ b/app/javascript/flavours/glitch/styles/components/status.scss
@@ -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;