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

Improve view source dialog style (#8883)

Browse source
This commit is contained in:
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
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. limitations under the License.
*/ */
.mx_ViewSource_separator { .mx_ViewSource {
clear: both; pre {
border-bottom: 1px solid #e5e5e5; font-size: $font-12px;
padding-top: 0.7em; padding: 0.5em 1em;
padding-bottom: 0.7em; word-wrap: break-word;
} white-space: pre-wrap;
overflow-wrap: anywhere;
}
.mx_ViewSource_heading { .mx_ViewSource_header {
font-size: $font-17px; border-bottom: 1px solid $quinary-content;
font-weight: 400; padding-bottom: $spacing-12;
color: $primary-content; margin-bottom: $spacing-12;
margin-top: 0.7em;
}
.mx_ViewSource pre { .mx_CopyableText {
text-align: left; word-break: break-all;
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 { .mx_ViewSource_heading {
margin-top: 0.8em; font-size: $font-17px;
} font-weight: 400;
color: $primary-content;
margin-top: $spacing-12;
}
.mx_ViewSource_container { .mx_ViewSource_details {
max-width: calc(100% - 24px); margin-top: $spacing-12;
} }
.mx_ViewSource_container .mx_CopyableText_border { .mx_CopyableText_border {
width: 100%; 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") } { _t("Decrypted event source") }
</span> </span>
</summary> </summary>
<div className="mx_ViewSource_container"> <CopyableText getTextToCopy={copyDecryptedFunc}>
<CopyableText getTextToCopy={copyDecryptedFunc}> <SyntaxHighlight language="json">
<SyntaxHighlight language="json"> { stringify(decryptedEventSource) }
{ stringify(decryptedEventSource) } </SyntaxHighlight>
</SyntaxHighlight> </CopyableText>
</CopyableText>
</div>
</details> </details>
<details className="mx_ViewSource_details"> <details className="mx_ViewSource_details">
<summary> <summary>
@ -93,13 +91,11 @@ export default class ViewSource extends React.Component<IProps, IState> {
{ _t("Original event source") } { _t("Original event source") }
</span> </span>
</summary> </summary>
<div className="mx_ViewSource_container"> <CopyableText getTextToCopy={copyOriginalFunc}>
<CopyableText getTextToCopy={copyOriginalFunc}> <SyntaxHighlight language="json">
<SyntaxHighlight language="json"> { stringify(originalEventSource) }
{ stringify(originalEventSource) } </SyntaxHighlight>
</SyntaxHighlight> </CopyableText>
</CopyableText>
</div>
</details> </details>
</> </>
); );
@ -109,13 +105,11 @@ export default class ViewSource extends React.Component<IProps, IState> {
<div className="mx_ViewSource_heading"> <div className="mx_ViewSource_heading">
{ _t("Original event source") } { _t("Original event source") }
</div> </div>
<div className="mx_ViewSource_container"> <CopyableText getTextToCopy={copyOriginalFunc}>
<CopyableText getTextToCopy={copyOriginalFunc}> <SyntaxHighlight language="json">
<SyntaxHighlight language="json"> { stringify(originalEventSource) }
{ stringify(originalEventSource) } </SyntaxHighlight>
</SyntaxHighlight> </CopyableText>
</CopyableText>
</div>
</> </>
); );
} }
@ -166,20 +160,15 @@ export default class ViewSource extends React.Component<IProps, IState> {
const canEdit = mxEvent.isState() ? this.canSendStateEvent(mxEvent) : canEditContent(this.props.mxEvent); const canEdit = mxEvent.isState() ? this.canSendStateEvent(mxEvent) : canEditContent(this.props.mxEvent);
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> <div className="mx_ViewSource_header">
<div> <CopyableText getTextToCopy={() => roomId} border={false}>
<CopyableText getTextToCopy={() => roomId} border={false}> { _t("Room ID: %(roomId)s", { roomId }) }
{ _t("Room ID: %(roomId)s", { roomId }) } </CopyableText>
</CopyableText> <CopyableText getTextToCopy={() => eventId} border={false}>
</div> { _t("Event ID: %(eventId)s", { eventId }) }
<div> </CopyableText>
<CopyableText getTextToCopy={() => eventId} border={false}>
{ _t("Event ID: %(eventId)s", { eventId }) }
</CopyableText>
</div>
<div className="mx_ViewSource_separator" />
{ isEditing ? this.editSourceContent() : this.viewSourceContent() }
</div> </div>
{ isEditing ? this.editSourceContent() : this.viewSourceContent() }
{ !isEditing && canEdit && ( { !isEditing && canEdit && (
<div className="mx_Dialog_buttons"> <div className="mx_Dialog_buttons">
<button onClick={() => this.onEdit()}>{ _t("Edit") }</button> <button onClick={() => this.onEdit()}>{ _t("Edit") }</button>