imterah/element-portable
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat: improve "view source"

Browse source 
display encrypted and decrypted event source on the same dialog
keep only one "View Source" action on event context menu
This commit is contained in:
Panagiotis 2021-03-03 22:38:30 +02:00
parent 77cf4cf7a4
commit ae08f74336
7 changed files with 44 additions and 23 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -19,7 +19,7 @@ limitations under the License.
import React from 'react';
import PropTypes from 'prop-types';
import SyntaxHighlight from '../views/elements/SyntaxHighlight';
import {_t} from "../../languageHandler";
import {_t, _td} from "../../languageHandler";
import * as sdk from "../../index";
@ -29,20 +29,36 @@ export default class ViewSource extends React.Component {
onFinished: PropTypes.func.isRequired,
roomId: PropTypes.string.isRequired,
eventId: PropTypes.string.isRequired,
isEncrypted: PropTypes.bool.isRequired,
decryptedContent: PropTypes.object,
};
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>
<SyntaxHighlight className="json">
{ JSON.stringify(this.props.decryptedContent, null, 2) }
</SyntaxHighlight>
</>;
const OriginalSection = <>
<div className="mx_ViewSource_separator" />
<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_ViewSource_label_left">Room ID: { this.props.roomId }</div>
<div className="mx_ViewSource_label_right">Event ID: { this.props.eventId }</div>
<div className="mx_ViewSource_label_bottom" />
<div className="mx_Dialog_content">
<SyntaxHighlight className="json">
{ JSON.stringify(this.props.content, null, 2) }
</SyntaxHighlight>
<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>
</BaseDialog>
);