diff --git a/app/javascript/flavours/glitch/actions/timelines.js b/app/javascript/flavours/glitch/actions/timelines.js index eb817daf9..7d9b279a2 100644 --- a/app/javascript/flavours/glitch/actions/timelines.js +++ b/app/javascript/flavours/glitch/actions/timelines.js @@ -1,5 +1,6 @@ import { importFetchedStatus, importFetchedStatuses } from './importer'; import { submitMarkers } from './markers'; +import { fetchContext } from './statuses'; import api, { getLinks } from 'flavours/glitch/api'; import { Map as ImmutableMap, List as ImmutableList } from 'immutable'; import compareId from 'flavours/glitch/compare_id'; @@ -125,6 +126,17 @@ export function expandTimeline(timelineId, path, params = {}, done = noOp) { dispatch(importFetchedStatuses(response.data)); dispatch(expandTimelineSuccess(timelineId, response.data, next ? next.uri : null, response.status === 206, isLoadingRecent, isLoadingMore, isLoadingRecent && preferPendingItems)); + response.data.forEach((status) => { + // FIXME: better cache + if (!('REPLIES_COUNT' in window)) { + window.REPLIES_COUNT = {}; + } + if (status.replies_count > 0 && status.replies_count !== window.REPLIES_COUNT[status.id]) { + dispatch(fetchContext(status.id)); + window.REPLIES_COUNT[status.id] = status.replies_count; + } + }); + if (timelineId === 'home') { dispatch(submitMarkers()); } diff --git a/app/javascript/flavours/glitch/components/status_list.jsx b/app/javascript/flavours/glitch/components/status_list.jsx index a9c06f693..623a06579 100644 --- a/app/javascript/flavours/glitch/components/status_list.jsx +++ b/app/javascript/flavours/glitch/components/status_list.jsx @@ -2,11 +2,12 @@ import { debounce } from 'lodash'; import React from 'react'; import ImmutablePropTypes from 'react-immutable-proptypes'; import PropTypes from 'prop-types'; -import StatusContainer from 'flavours/glitch/containers/status_container'; import ImmutablePureComponent from 'react-immutable-pure-component'; import LoadGap from './load_gap'; import ScrollableList from './scrollable_list'; import RegenerationIndicator from 'flavours/glitch/components/regeneration_indicator'; +import StatusWithComments from './status_with_comments'; + export default class StatusList extends ImmutablePureComponent { @@ -94,7 +95,7 @@ export default class StatusList extends ImmutablePureComponent { onClick={onLoadMore} /> ) : ( - ( - { + let status = state.getIn(['statuses', id]); + let reblogId = status.get('reblog'); // reblog here is a id + + return { + childrenIds: state.getIn(['contexts', 'replies', reblogId || id]), + quotedId: reblogId && state.getIn(['statuses', reblogId, 'in_reply_to_id']), + }; +}; + + +export default @connect(mapStateToProps) +class StatusWithComments extends ImmutablePureComponent { + + state = { + showAll: false, + }; + + show = () => this.setState({ showAll: true }); + + render() { + const { id, childrenIds, quotedId, ...other } = this.props; + const { showAll } = this.state; + let hideSome = !showAll && !!childrenIds && childrenIds.size > 3; + return ( +
+ {quotedId ? ( +
+ +
+ ) : null} + + {childrenIds ? ( +
+ {childrenIds + .filter((_, idx) => showAll || idx < 3) + .map(cid => ( + + ))} + {hideSome ? ( + + ) : null} +
+ ) : null} +
+ ); + } + +} diff --git a/app/javascript/flavours/glitch/styles/components/status.scss b/app/javascript/flavours/glitch/styles/components/status.scss index 1a7dfe9ae..e65350840 100644 --- a/app/javascript/flavours/glitch/styles/components/status.scss +++ b/app/javascript/flavours/glitch/styles/components/status.scss @@ -1112,3 +1112,36 @@ a.status-card.compact:hover { border-color: lighten($ui-base-color, 12%); } } + +.status__comments { + margin-left: 30px; + border-left: 1px solid lighten($ui-base-color, 8%); + + .status__avatar { + display: none; + } + + .display-name strong { + display: inline-block; + } + + .load-more { + border-bottom: 1px solid lighten($ui-base-color, 8%); + } +} + +.status__quoted-status { + border-left: 4px solid #eee; + border-top: 2px solid #eee; + max-height: 200px; + overflow: hidden; + background: #eee2; + -webkit-mask-image: linear-gradient(#0002, #000d); + mask-image: linear-gradient(#0002, #000d); + transform: scale(.9); + transform-origin: bottom; + + .status__info, .status__action-bar { + display: none; + } +}