nest quotes, but only when people want to click through them

loads pre-emptively

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
This commit is contained in:
Michael Telatynski 2017-12-18 19:28:01 +00:00
parent 882068078d
commit 47d4e5f8d1
No known key found for this signature in database
GPG key ID: 3F879DA5AD802A5E
2 changed files with 29 additions and 13 deletions

View file

@ -54,6 +54,8 @@ export default class Quote extends React.Component {
url: PropTypes.string, url: PropTypes.string,
// The parent event // The parent event
parentEv: PropTypes.instanceOf(MatrixEvent), parentEv: PropTypes.instanceOf(MatrixEvent),
// Whether this isn't the first Quote, and we're being nested
isNested: PropTypes.bool,
}; };
constructor(props, context) { constructor(props, context) {
@ -62,7 +64,10 @@ export default class Quote extends React.Component {
this.state = { this.state = {
// The event related to this quote // The event related to this quote
event: null, event: null,
show: !this.props.isNested,
}; };
this.onShowNested = this.onShowNested.bind(this);
} }
getChildContext() { getChildContext() {
@ -112,20 +117,33 @@ export default class Quote extends React.Component {
this.setState({room, event}); this.setState({room, event});
} }
onShowNested() {
this.setState({
show: true,
});
}
render() { render() {
const ev = this.state.event; const ev = this.state.event;
if (ev) { if (ev) {
const EventTile = sdk.getComponent('views.rooms.EventTile'); if (this.state.show) {
let dateSep = null; const EventTile = sdk.getComponent('views.rooms.EventTile');
if (wantsDateSeparator(this.props.parentEv, this.state.event)) { let dateSep = null;
const DateSeparator = sdk.getComponent('messages.DateSeparator'); if (wantsDateSeparator(this.props.parentEv, this.state.event)) {
dateSep = <a href={this.props.url}><DateSeparator ts={this.state.event.getDate()} /></a>; const DateSeparator = sdk.getComponent('messages.DateSeparator');
dateSep = <a href={this.props.url}><DateSeparator ts={this.state.event.getDate()} /></a>;
}
return <blockquote className="mx_Quote">
{ dateSep }
<EventTile mxEvent={ev} tileShape="quote" />
</blockquote>;
} }
return <blockquote className="mx_Quote"> return <div>
{ dateSep } <a onClick={this.onShowNested} className="mx_Quote_show">{ _t('Quote') }</a>
<EventTile mxEvent={ev} tileShape="quote" /> <br />
</blockquote>; </div>;
} }
// Deliberately render nothing if the URL isn't recognised // Deliberately render nothing if the URL isn't recognised

View file

@ -202,14 +202,12 @@ module.exports = React.createClass({
// update the current node with one that's now taken its place // update the current node with one that's now taken its place
node = pillContainer; node = pillContainer;
} else if (SettingsStore.isFeatureEnabled("feature_rich_quoting") && this.props.tileShape !== 'quote' && } else if (SettingsStore.isFeatureEnabled("feature_rich_quoting") && Quote.isMessageUrl(href)) {
Quote.isMessageUrl(href)
) {
// only allow this branch if we're not already in a quote, as fun as infinite nesting is. // only allow this branch if we're not already in a quote, as fun as infinite nesting is.
const quoteContainer = document.createElement('span'); const quoteContainer = document.createElement('span');
const quote = const quote =
<Quote url={href} parentEv={this.props.mxEvent} />; <Quote url={href} parentEv={this.props.mxEvent} isNested={this.props.tileShape === 'quote'} />;
ReactDOM.render(quote, quoteContainer); ReactDOM.render(quote, quoteContainer);
node.parentNode.replaceChild(quoteContainer, node); node.parentNode.replaceChild(quoteContainer, node);