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

Commit 3ccde7a

Browse files
luixxiulluixxiul
authored
Improve view source dialog style (#8883)
1 parent 3ecf7e1 commit 3ccde7a

File tree

2 files changed

+57
-67
lines changed

2 files changed

+57
-67
lines changed

‎res/css/structures/_ViewSource.scss

Lines changed: 34 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -14,37 +14,38 @@ See the License for the specific language governing permissions and
1414
limitations under the License.
1515
*/
1616

17-
.mx_ViewSource_separator {
18-
clear: both;
19-
border-bottom: 1px solid #e5e5e5;
20-
padding-top: 0.7em;
21-
padding-bottom: 0.7em;
22-
}
23-
24-
.mx_ViewSource_heading {
25-
font-size: $font-17px;
26-
font-weight: 400;
27-
color: $primary-content;
28-
margin-top: 0.7em;
29-
}
30-
31-
.mx_ViewSource pre {
32-
text-align: left;
33-
font-size: $font-12px;
34-
padding: 0.5em 1em 0.5em 1em;
35-
word-wrap: break-word;
36-
white-space: pre-wrap;
37-
overflow-wrap: anywhere;
38-
}
39-
40-
.mx_ViewSource_details {
41-
margin-top: 0.8em;
42-
}
43-
44-
.mx_ViewSource_container {
45-
max-width: calc(100% - 24px);
46-
}
47-
48-
.mx_ViewSource_container .mx_CopyableText_border {
49-
width: 100%;
17+
.mx_ViewSource {
18+
pre {
19+
font-size: $font-12px;
20+
padding: 0.5em 1em;
21+
word-wrap: break-word;
22+
white-space: pre-wrap;
23+
overflow-wrap: anywhere;
24+
}
25+
26+
.mx_ViewSource_header {
27+
border-bottom: 1px solid $quinary-content;
28+
padding-bottom: $spacing-12;
29+
margin-bottom: $spacing-12;
30+
31+
.mx_CopyableText {
32+
word-break: break-all;
33+
}
34+
}
35+
36+
.mx_ViewSource_heading {
37+
font-size: $font-17px;
38+
font-weight: 400;
39+
color: $primary-content;
40+
margin-top: $spacing-12;
41+
}
42+
43+
.mx_ViewSource_details {
44+
margin-top: $spacing-12;
45+
}
46+
47+
.mx_CopyableText_border {
48+
box-sizing: border-box;
49+
width: 100%;
50+
}
5051
}

‎src/components/structures/ViewSource.tsx

Lines changed: 23 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -79,27 +79,23 @@ export default class ViewSource extends React.Component<IProps, IState> {
7979
{ _t("Decrypted event source") }
8080
</span>
8181
</summary>
82-
<div className="mx_ViewSource_container">
83-
<CopyableText getTextToCopy={copyDecryptedFunc}>
84-
<SyntaxHighlight language="json">
85-
{ stringify(decryptedEventSource) }
86-
</SyntaxHighlight>
87-
</CopyableText>
88-
</div>
82+
<CopyableText getTextToCopy={copyDecryptedFunc}>
83+
<SyntaxHighlight language="json">
84+
{ stringify(decryptedEventSource) }
85+
</SyntaxHighlight>
86+
</CopyableText>
8987
</details>
9088
<details className="mx_ViewSource_details">
9189
<summary>
9290
<span className="mx_ViewSource_heading">
9391
{ _t("Original event source") }
9492
</span>
9593
</summary>
96-
<div className="mx_ViewSource_container">
97-
<CopyableText getTextToCopy={copyOriginalFunc}>
98-
<SyntaxHighlight language="json">
99-
{ stringify(originalEventSource) }
100-
</SyntaxHighlight>
101-
</CopyableText>
102-
</div>
94+
<CopyableText getTextToCopy={copyOriginalFunc}>
95+
<SyntaxHighlight language="json">
96+
{ stringify(originalEventSource) }
97+
</SyntaxHighlight>
98+
</CopyableText>
10399
</details>
104100
</>
105101
);
@@ -109,13 +105,11 @@ export default class ViewSource extends React.Component<IProps, IState> {
109105
<div className="mx_ViewSource_heading">
110106
{ _t("Original event source") }
111107
</div>
112-
<div className="mx_ViewSource_container">
113-
<CopyableText getTextToCopy={copyOriginalFunc}>
114-
<SyntaxHighlight language="json">
115-
{ stringify(originalEventSource) }
116-
</SyntaxHighlight>
117-
</CopyableText>
118-
</div>
108+
<CopyableText getTextToCopy={copyOriginalFunc}>
109+
<SyntaxHighlight language="json">
110+
{ stringify(originalEventSource) }
111+
</SyntaxHighlight>
112+
</CopyableText>
119113
</>
120114
);
121115
}
@@ -166,20 +160,15 @@ export default class ViewSource extends React.Component<IProps, IState> {
166160
const canEdit = mxEvent.isState() ? this.canSendStateEvent(mxEvent) : canEditContent(this.props.mxEvent);
167161
return (
168162
<BaseDialog className="mx_ViewSource" onFinished={this.props.onFinished} title={_t("View Source")}>
169-
<div>
170-
<div>
171-
<CopyableText getTextToCopy={() => roomId} border={false}>
172-
{ _t("Room ID: %(roomId)s", { roomId }) }
173-
</CopyableText>
174-
</div>
175-
<div>
176-
<CopyableText getTextToCopy={() => eventId} border={false}>
177-
{ _t("Event ID: %(eventId)s", { eventId }) }
178-
</CopyableText>
179-
</div>
180-
<div className="mx_ViewSource_separator" />
181-
{ isEditing ? this.editSourceContent() : this.viewSourceContent() }
163+
<div className="mx_ViewSource_header">
164+
<CopyableText getTextToCopy={() => roomId} border={false}>
165+
{ _t("Room ID: %(roomId)s", { roomId }) }
166+
</CopyableText>
167+
<CopyableText getTextToCopy={() => eventId} border={false}>
168+
{ _t("Event ID: %(eventId)s", { eventId }) }
169+
</CopyableText>
182170
</div>
171+
{ isEditing ? this.editSourceContent() : this.viewSourceContent() }
183172
{ !isEditing && canEdit && (
184173
<div className="mx_Dialog_buttons">
185174
<button onClick={() => this.onEdit()}>{ _t("Edit") }</button>

0 commit comments

Comments
 (0)