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
Merged

Improve view source dialog style #8883

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
8071c29
Let room ID and event ID wrapped with break-all value on the view sou…
luixxiul Jun 23, 2022
1946c01
Include mx_ViewSource_separator
luixxiul Jun 23, 2022
c5eaa05
Include pre
luixxiul Jun 23, 2022
3b3972a
Include mx_CopyableText_border
luixxiul Jun 23, 2022
d4e0f29
Include everything in mx_ViewSource
luixxiul Jun 23, 2022
1fbb9e8
yarn run lint:style --fix
luixxiul Jun 23, 2022
22fc5b7
yarn run lint:js-fix
luixxiul Jun 23, 2022
253d2e1
Move border styles from mx_ViewSource_separator to mx_ViewSource_header
luixxiul Jun 23, 2022
bdbd59d
Use a variable for header border color
luixxiul Jun 23, 2022
c404c2e
Use a shorthand
luixxiul Jun 23, 2022
4cec3cc
Apply spacing variables
luixxiul Jun 23, 2022
4acca73
Remove a redundant declaration
luixxiul Jun 23, 2022
ad5f190
Apply border-box to remove mx_ViewSource_container
luixxiul Jun 23, 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
67 changes: 34 additions & 33 deletions res/css/structures/_ViewSource.scss
View file
Open in desktop
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
View file
Open in desktop
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