Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Update developer-tools-template.ts: add independent scrollbars for left & right panels for large screens #23242

Merged
merged 12 commits into from
Dec 11, 2024
Merged

Update developer-tools-template.ts: add independent scrollbars for left & right panels for large screens #23242

Changes from 1 commit
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
ea0bcae
Update developer-tools-template.ts
ildar170975 Dec 10, 2024
1de9f93
whitespace in pre
ildar170975 Dec 11, 2024
e50e91a
prettier
ildar170975 Dec 11, 2024
4f061dc
Update developer-tools-template.ts
ildar170975 Dec 11, 2024
1d85157
Update developer-tools-template.ts
ildar170975 Dec 11, 2024
e5a4c50
prettier
ildar170975 Dec 11, 2024
7bbd215
prettier!!!!
ildar170975 Dec 11, 2024
8a3ea51
prettier again
ildar170975 Dec 11, 2024
a39ba5b
prettier fight
ildar170975 Dec 11, 2024
9c14c73
prettier
ildar170975 Dec 11, 2024
979b3a2
prettier
ildar170975 Dec 11, 2024
45aa906
prettier
ildar170975 Dec 11, 2024
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
51 changes: 37 additions & 14 deletions src/panels/developer-tools/template/developer-tools-template.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -181,17 +181,21 @@ class HaPanelDevTemplate extends LitElement {
>`
: nothing}
${this._templateResult
? html`${this.hass.localize(
"ui.panel.developer-tools.tabs.templates.result_type"
)}:
${resultType}
<!-- prettier-ignore -->
<pre class="rendered ${classMap({
[resultType]: resultType,
})}"
>${type === "object"
? JSON.stringify(this._templateResult.result, null, 2)
: this._templateResult.result}</pre>
? html`<pre
class="rendered ${classMap({
[resultType]: resultType,
})}"
>
${type === "object"
? JSON.stringify(this._templateResult.result, null, 2)
: this._templateResult.result}</pre
>
ildar170975 marked this conversation as resolved.
Show resolved Hide resolved
<p>
${this.hass.localize(
"ui.panel.developer-tools.tabs.templates.result_type"
)}:
${resultType}
</p>
${this._templateResult.listeners.time
? html`
<p>
Expand Down Expand Up @@ -281,6 +285,10 @@ class HaPanelDevTemplate extends LitElement {
max(16px, env(safe-area-inset-left));
}

.content.horizontal {
--code-mirror-max-height: calc(100vh - 389px);
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Where does the 389px come from? Seems arbitrary

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

389px comes from

    --code-mirror-max-height: calc(100vh
                                - var(--header-height)
                                - var(--paper-font-body1_-_line-height) * 3 - 1em * 2
                                - max(16px,env(safe-area-inset-top)) * 2 - max(16px,env(safe-area-inset-bottom)) * 2
                                - var(--ha-card-border-width,1px) * 2
                                - 179px
                              );

where 179px =
height of paper-tabs 48
header of edit-pane 76
margin-top of card-content in edit-pane -8
height of card-actions 47
padding-bottom of card-content in edit-pane 16

i.e. 389px is composed from css variables & hard-coded values.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It would be better to write the formula as best you can here instead of just 389px. There will still inevitably be hardcoded values but at least it would be somewhat dynamic and would still work if the --header-height is changed for example

}

ha-card {
margin-bottom: 16px;
}
Expand All @@ -293,8 +301,9 @@ class HaPanelDevTemplate extends LitElement {
color: var(--primary-color);
}

.horizontal .edit-pane {
max-width: 50%;
.content.horizontal > * {
width: 50%;
margin-bottom: 0px;
}

.render-spinner {
Expand All @@ -316,15 +325,29 @@ class HaPanelDevTemplate extends LitElement {
white-space: pre-wrap;
background-color: var(--secondary-background-color);
padding: 8px;
margin-top: 0;
margin-bottom: 0;
direction: ltr;
overflow: auto;
max-height: calc(var(--code-mirror-max-height) - 16px);
}

p,
ul {
margin-block-end: 0;
}

.content.horizontal .render-pane .card-content {
display: flex;
flex-direction: column;
}

.all_listeners {
color: var(--warning-color);
}

@media all and (max-width: 870px) {
.render-pane {
.content ha-card {
max-width: 100%;
}
}
Expand Down
Loading