OpenCloud
/
element-web
mirror of https://github.com/vector-im/element-web
1
0
Fork 0
Code Issues Releases Wiki Activity

Improve view source dialog style (#8883)

pull/28217/head
Suguru Hirahara 2022-06-25 12:50:58 +00:00 committed by GitHub
parent 3ecf7e1065
commit 3ccde7afa1
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 52 additions and 62 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

57
res/css/structures/_ViewSource.scss
View File

@ -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 {
pre {
font-size: $font-12px;
padding: 0.5em 1em;
word-wrap: break-word;
white-space: pre-wrap;
overflow-wrap: anywhere;
}
.mx_ViewSource_heading {
font-size: $font-17px;
font-weight: 400;
color: $primary-content;
margin-top: 0.7em;
}
.mx_ViewSource_header {
border-bottom: 1px solid $quinary-content;
padding-bottom: $spacing-12;
margin-bottom: $spacing-12;
.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_CopyableText {
word-break: break-all;
}
}
.mx_ViewSource_details {
margin-top: 0.8em;
}
.mx_ViewSource_heading {
font-size: $font-17px;
font-weight: 400;
color: $primary-content;
margin-top: $spacing-12;
}
.mx_ViewSource_container {
max-width: calc(100% - 24px);
}
.mx_ViewSource_details {
margin-top: $spacing-12;
}
.mx_ViewSource_container .mx_CopyableText_border {
width: 100%;
.mx_CopyableText_border {
box-sizing: border-box;
width: 100%;
}
}

57
src/components/structures/ViewSource.tsx
View File

@ -79,13 +79,11 @@ 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>
@ -93,13 +91,11 @@ export default class ViewSource extends React.Component<IProps, IState> {
{ _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>
</>
);
@ -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>
</>
);
}
@ -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>