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 all commits
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
63 changes: 49 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
>
<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,16 @@ class HaPanelDevTemplate extends LitElement {
max(16px, env(safe-area-inset-left));
}

.content.horizontal {
--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
);
}

ha-card {
margin-bottom: 16px;
}
Expand All @@ -293,8 +307,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 +331,35 @@ class HaPanelDevTemplate extends LitElement {
white-space: pre-wrap;
background-color: var(--secondary-background-color);
padding: 8px;
margin-top: 0;
margin-bottom: 0;
direction: ltr;
}

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

.content.horizontal .render-pane .card-content {
overflow: auto;
max-height: calc(
var(--code-mirror-max-height) +
47px - var(--ha-card-border-radius, 12px)
);
}

.content.horizontal .render-pane {
overflow: hidden;
padding-bottom: var(--ha-card-border-radius, 12px);
}

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

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