matrix/matrix-react-sdk
1
0
Fork 0
mirror of https://github.com/matrix-org/matrix-react-sdk.git synced 2025-07-28 15:22:05 +03:00
Code Activity

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
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; word-wrap: break-word;
white-space: pre-wrap; white-space: pre-wrap;
} }
.mx_ViewSource_details {
margin-top: 0.8em;
}

47
src/components/structures/ViewSource.js
View File

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