mirror of
https://github.com/element-hq/element-web
synced 2024-11-24 18:25:49 +03:00
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:
parent
882068078d
commit
47d4e5f8d1
2 changed files with 29 additions and 13 deletions
|
@ -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
|
||||||
|
|
|
@ -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);
|
||||||
|
|
Loading…
Reference in a new issue