PrivateCoffee/element-web
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 3

feat: use <details> to hide encrypted block

Browse source
This commit is contained in:
Panagiotis 2021-03-03 23:48:39 +02:00
parent 0a1f372371
commit 6d792cc08c
2 changed files with 34 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
res/css/structures/_ViewSource.scss
View file

@ -43,3 +43,7 @@ limitations under the License.
word-wrap: break-word;
white-space: pre-wrap;
}
.mx_ViewSource_details {
margin-top: 0.8em;
}

29
src/components/structures/ViewSource.js
View file

@ -36,29 +36,42 @@ export default class ViewSource extends React.Component {
render() {
const BaseDialog = sdk.getComponent('views.dialogs.BaseDialog');
const DecryptedSection = <>
<div className="mx_ViewSource_separator" />
<div className="mx_ViewSource_heading">{_t("Decrypted event source")}</div>
let content;
if (this.props.isEncrypted) {
content = <>
<details open className="mx_ViewSource_details">
<summary>
<span className="mx_ViewSource_heading">{_t("Decrypted event source")}</span>
</summary>
<SyntaxHighlight className="json">
{ JSON.stringify(this.props.decryptedContent, null, 2) }
</SyntaxHighlight>
</details>
<details className="mx_ViewSource_details">
<summary>
<span className="mx_ViewSource_heading">{_t("Original event source")}</span>
</summary>
<SyntaxHighlight className="json">
{ JSON.stringify(this.props.content, null, 2) }
</SyntaxHighlight>
</details>
</>;
const OriginalSection = <>
<div className="mx_ViewSource_separator" />
} else {
content = <>
<div className="mx_ViewSource_heading">{_t("Original event source")}</div>
<SyntaxHighlight className="json">
{ JSON.stringify(this.props.content, null, 2) }
</SyntaxHighlight>
</>;
}
return (
<BaseDialog className="mx_ViewSource" onFinished={this.props.onFinished} title={_t('View Source')}>
<div className="mx_Dialog_content">
<div className="mx_ViewSource_label_left">Room ID: { this.props.roomId }</div>
<div className="mx_ViewSource_label_left">Event ID: { this.props.eventId }</div>
{ this.props.isEncrypted && DecryptedSection }
{ OriginalSection }
<div className="mx_ViewSource_separator" />
{ content }
</div>
</BaseDialog>
);