Skip to content
This repository has been archived by the owner on Sep 11, 2024. It is now read-only.

Add copy button to View Source screen #8278

Merged
merged 7 commits into from
Apr 11, 2022
Merged

Add copy button to View Source screen #8278

Show file tree
Hide file tree
Changes from 5 commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
1dccd03
Add copy button for event JSON
olivialivia Apr 9, 2022
5ccb288
Add css for overflow
olivialivia Apr 10, 2022
af25ce7
Fix linting
olivialivia Apr 10, 2022
6a957c2
Add margin
olivialivia Apr 11, 2022
fc37407
Add css
olivialivia Apr 11, 2022
2d4948f
Calculate width instead of using margin
olivialivia Apr 11, 2022
d323fc7
Merge branch 'develop' into develop
t3chguy Apr 11, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions res/css/structures/_ViewSource.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,8 +34,13 @@ limitations under the License.
padding: 0.5em 1em 0.5em 1em;
word-wrap: break-word;
white-space: pre-wrap;
overflow-wrap: anywhere;
}

.mx_ViewSource_details {
margin-top: 0.8em;
}

.mx_ViewSource_container {
margin-right: 1.125em;
}
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Instead of this can we just use something like

image

1.125em isn't actually right and makes it asymetrical

image

40 changes: 32 additions & 8 deletions src/components/structures/ViewSource.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,7 @@ import BaseDialog from "../views/dialogs/BaseDialog";
import { DevtoolsContext } from "../views/dialogs/devtools/BaseTool";
import { StateEventEditor } from "../views/dialogs/devtools/RoomState";
import { stringify, TimelineEventEditor } from "../views/dialogs/devtools/Event";
import CopyableText from "../views/elements/CopyableText";

interface IProps extends IDialogProps {
mxEvent: MatrixEvent; // the MatrixEvent associated with the context menu
Expand Down Expand Up @@ -63,29 +64,52 @@ export default class ViewSource extends React.Component<IProps, IState> {
// @ts-ignore
const decryptedEventSource = mxEvent.clearEvent; // FIXME: clearEvent is private
const originalEventSource = mxEvent.event;

const copyOriginalFunc = (): string => {
return stringify(originalEventSource);
};
if (isEncrypted) {
const copyDecryptedFunc = (): string => {
return stringify(decryptedEventSource);
};
return (
<>
<details open className="mx_ViewSource_details">
<summary>
<span className="mx_ViewSource_heading">{ _t("Decrypted event source") }</span>
<span className="mx_ViewSource_heading">
{ _t("Decrypted event source") }
</span>
</summary>
<SyntaxHighlight language="json">{ stringify(decryptedEventSource) }</SyntaxHighlight>
<CopyableText getTextToCopy={copyDecryptedFunc}>
<SyntaxHighlight language="json">
{ stringify(decryptedEventSource) }
</SyntaxHighlight>
</CopyableText>
</details>
<details className="mx_ViewSource_details">
<summary>
<span className="mx_ViewSource_heading">{ _t("Original event source") }</span>
<span className="mx_ViewSource_heading">
{ _t("Original event source") }
</span>
</summary>
<SyntaxHighlight language="json">{ stringify(originalEventSource) }</SyntaxHighlight>
<CopyableText getTextToCopy={copyOriginalFunc}>
<SyntaxHighlight language="json">
{ stringify(originalEventSource) }
</SyntaxHighlight>
</CopyableText>
</details>
</>
);
} else {
return (
<>
<div className="mx_ViewSource_heading">{ _t("Original event source") }</div>
<SyntaxHighlight language="json">{ stringify(originalEventSource) }</SyntaxHighlight>
<div className="mx_ViewSource_heading">
{ _t("Original event source") }
</div>
<CopyableText getTextToCopy={copyOriginalFunc}>
<SyntaxHighlight language="json">
{ stringify(originalEventSource) }
</SyntaxHighlight>
</CopyableText>
</>
);
}
Expand Down Expand Up @@ -136,7 +160,7 @@ export default class ViewSource extends React.Component<IProps, IState> {
const canEdit = mxEvent.isState() ? this.canSendStateEvent(mxEvent) : canEditContent(this.props.mxEvent);
return (
<BaseDialog className="mx_ViewSource" onFinished={this.props.onFinished} title={_t("View Source")}>
<div>
<div className="mx_ViewSource_container">
<div>{ _t("Room ID: %(roomId)s", { roomId }) }</div>
<div>{ _t("Event ID: %(eventId)s", { eventId }) }</div>
<div className="mx_ViewSource_separator" />
Expand Down