diff --git a/app/javascript/mastodon/components/status.js b/app/javascript/mastodon/components/status.js index 98953f194..f24330454 100644 --- a/app/javascript/mastodon/components/status.js +++ b/app/javascript/mastodon/components/status.js @@ -101,7 +101,8 @@ class Status extends ImmutablePureComponent { 'account', 'muted', 'hidden', - 'sonsIds' + 'sonsIds', + 'ancestorsText', ]; state = { @@ -329,7 +330,7 @@ class Status extends ImmutablePureComponent { let statusAvatar, prepend, rebloggedByText; let sons, quote; - const { intl, hidden, featured, otherAccounts, unread, showThread, deep, tree_type, sonsIds } = this.props; + const { intl, hidden, featured, otherAccounts, unread, showThread, deep, tree_type, ancestorsText, sonsIds } = this.props; let { status, account, ...other } = this.props; @@ -489,7 +490,13 @@ class Status extends ImmutablePureComponent { } if (rebloggedByText && status.get('in_reply_to_id')) { - quote =
+ quote = ancestorsText ? +
+ + {ancestorsText} +
+ : +
{ const getStatus = makeGetStatus(); + + const getAncestorsIds = createSelector([ + (_, { id }) => id, + state => state.getIn(['contexts', 'inReplyTos']), + ], (statusId, inReplyTos) => { + let ancestorsIds = Immutable.List(); + ancestorsIds = ancestorsIds.withMutations(mutable => { + let id = statusId; + + while (id) { + mutable.unshift(id); + id = inReplyTos.get(id); + } + }); + + return ancestorsIds; + }); + + const getAncestorsText = createSelector([ + (_, {ids}) => ids, + state => state.get('statuses'), + ], (ids, statuses) => ids.map(i => { + let text = statuses.get(i) ? statuses.get(i).get('search_index') : i; + if(text.length > 16) + text = text.slice(0,13) + "..."; + return text; + }).join(' >> ') + ); + + const getSonsIds = createSelector([ + (_, {id}) => id, + state => state.getIn(['contexts', 'replies']), + ], (statusId, contextReplies) => { + const sons = contextReplies.get(statusId); + return sons ? sons.map(id => ({ + 'id': id, + 'sonsIds' : contextReplies.get(id), + })) + : null; + }); const mapStateToProps = (state, props) => { const status = getStatus(state, props); - const sons = (props.showThread && status!==null) ? state.getIn(['contexts', 'replies', status.getIn(['reblog', 'id'], props.id)]) : null; - return ({ - 'status': status, - 'sonsIds': (props.showThread && sons) ? sons.map(id => ({ - 'id': id, - 'sonsIds' : state.getIn(['contexts', 'replies', id]) - })) - : - null, - }) - } + let ancestorsIds = Immutable.List(); + let ancestorsText; + let sonsIds; + + if (props.showThread && status) { + sonsIds = getSonsIds(state, { id : status.getIn(['reblog', 'id'], props.id)}); + if(status.get('reblog')) { + ancestorsIds = getAncestorsIds(state, { id: status.getIn(['reblog', 'in_reply_to_id']) }); + if(ancestorsIds && ancestorsIds.first() == treeRoot.split('/').pop()) { + ancestorsText = getAncestorsText(state, { ids: ancestorsIds.shift() }); + } + } + } + return { + status, + ancestorsText, + sonsIds, + }; + }; return mapStateToProps; }; diff --git a/app/javascript/styles/closed-social/global.scss b/app/javascript/styles/closed-social/global.scss index e851c5418..3f9d1096e 100644 --- a/app/javascript/styles/closed-social/global.scss +++ b/app/javascript/styles/closed-social/global.scss @@ -65,6 +65,12 @@ div { } } +.status__tree__quote__wrapper { + margin-top:16px; + padding: 10px 5px; + background: #dbdbdb40; +} + @keyframes like { 0% { transform: scale(1); diff --git a/app/javascript/styles/closed-social/timeline_comments.scss b/app/javascript/styles/closed-social/timeline_comments.scss index 8c77af6f4..b220bf9a7 100644 --- a/app/javascript/styles/closed-social/timeline_comments.scss +++ b/app/javascript/styles/closed-social/timeline_comments.scss @@ -26,7 +26,7 @@ box-shadow: $primary-text-color 3.2px 3.2px 8px; } & .comments-timeline-2 { - margin-left:40px; + margin-left:42px; } }