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

Improve view source dialog style #8883

Merged
merged 13 commits into from
Jun 25, 2022
67 changes: 34 additions & 33 deletions res/css/structures/_ViewSource.scss
Original file line number Diff line number Diff line change
Expand Up @@ -14,37 +14,38 @@ See the License for the specific language governing permissions and
limitations under the License.
*/

.mx_ViewSource_separator {
clear: both;
border-bottom: 1px solid #e5e5e5;
padding-top: 0.7em;
padding-bottom: 0.7em;
}

.mx_ViewSource_heading {
font-size: $font-17px;
font-weight: 400;
color: $primary-content;
margin-top: 0.7em;
}

.mx_ViewSource pre {
text-align: left;
font-size: $font-12px;
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 {
max-width: calc(100% - 24px);
}

.mx_ViewSource_container .mx_CopyableText_border {
width: 100%;
.mx_ViewSource {
pre {
font-size: $font-12px;
padding: 0.5em 1em;
word-wrap: break-word;
white-space: pre-wrap;
overflow-wrap: anywhere;
}

.mx_ViewSource_header {
border-bottom: 1px solid $quinary-content;
padding-bottom: $spacing-12;
margin-bottom: $spacing-12;

.mx_CopyableText {
word-break: break-all;
}
}

.mx_ViewSource_heading {
font-size: $font-17px;
font-weight: 400;
color: $primary-content;
margin-top: $spacing-12;
}

.mx_ViewSource_details {
margin-top: $spacing-12;
}

.mx_CopyableText_border {
box-sizing: border-box;
width: 100%;
}
}
57 changes: 23 additions & 34 deletions src/components/structures/ViewSource.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -79,27 +79,23 @@ export default class ViewSource extends React.Component<IProps, IState> {
{ _t("Decrypted event source") }
</span>
</summary>
<div className="mx_ViewSource_container">
<CopyableText getTextToCopy={copyDecryptedFunc}>
<SyntaxHighlight language="json">
{ stringify(decryptedEventSource) }
</SyntaxHighlight>
</CopyableText>
</div>
<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>
</summary>
<div className="mx_ViewSource_container">
<CopyableText getTextToCopy={copyOriginalFunc}>
<SyntaxHighlight language="json">
{ stringify(originalEventSource) }
</SyntaxHighlight>
</CopyableText>
</div>
<CopyableText getTextToCopy={copyOriginalFunc}>
<SyntaxHighlight language="json">
{ stringify(originalEventSource) }
</SyntaxHighlight>
</CopyableText>
</details>
</>
);
Expand All @@ -109,13 +105,11 @@ export default class ViewSource extends React.Component<IProps, IState> {
<div className="mx_ViewSource_heading">
{ _t("Original event source") }
</div>
<div className="mx_ViewSource_container">
<CopyableText getTextToCopy={copyOriginalFunc}>
<SyntaxHighlight language="json">
{ stringify(originalEventSource) }
</SyntaxHighlight>
</CopyableText>
</div>
<CopyableText getTextToCopy={copyOriginalFunc}>
<SyntaxHighlight language="json">
{ stringify(originalEventSource) }
</SyntaxHighlight>
</CopyableText>
</>
);
}
Expand Down Expand Up @@ -166,20 +160,15 @@ 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>
<CopyableText getTextToCopy={() => roomId} border={false}>
{ _t("Room ID: %(roomId)s", { roomId }) }
</CopyableText>
</div>
<div>
<CopyableText getTextToCopy={() => eventId} border={false}>
{ _t("Event ID: %(eventId)s", { eventId }) }
</CopyableText>
</div>
<div className="mx_ViewSource_separator" />
{ isEditing ? this.editSourceContent() : this.viewSourceContent() }
<div className="mx_ViewSource_header">
<CopyableText getTextToCopy={() => roomId} border={false}>
{ _t("Room ID: %(roomId)s", { roomId }) }
</CopyableText>
<CopyableText getTextToCopy={() => eventId} border={false}>
{ _t("Event ID: %(eventId)s", { eventId }) }
</CopyableText>
</div>
{ isEditing ? this.editSourceContent() : this.viewSourceContent() }
{ !isEditing && canEdit && (
<div className="mx_Dialog_buttons">
<button onClick={() => this.onEdit()}>{ _t("Edit") }</button>
Expand Down