From ea0bcaeb05ca67116162a865626b6545befcd649 Mon Sep 17 00:00:00 2001 From: ildar170975 <71872483+ildar170975@users.noreply.github.com> Date: Tue, 10 Dec 2024 14:18:58 +0300 Subject: [PATCH 01/12] Update developer-tools-template.ts --- .../template/developer-tools-template.ts | 51 ++++++++++++++----- 1 file changed, 37 insertions(+), 14 deletions(-) diff --git a/src/panels/developer-tools/template/developer-tools-template.ts b/src/panels/developer-tools/template/developer-tools-template.ts index f16f77bd1f4b..529602998fee 100644 --- a/src/panels/developer-tools/template/developer-tools-template.ts +++ b/src/panels/developer-tools/template/developer-tools-template.ts @@ -181,17 +181,21 @@ class HaPanelDevTemplate extends LitElement { >` : nothing} ${this._templateResult - ? html`${this.hass.localize( - "ui.panel.developer-tools.tabs.templates.result_type" - )}: - ${resultType} - - 
${type === "object"
-                    ? JSON.stringify(this._templateResult.result, null, 2)
-                    : this._templateResult.result}
+ ? html`
+                    ${type === "object"
+                      ? JSON.stringify(this._templateResult.result, null, 2)
+                      : this._templateResult.result}
+

+ ${this.hass.localize( + "ui.panel.developer-tools.tabs.templates.result_type" + )}: + ${resultType} +

${this._templateResult.listeners.time ? html`

@@ -281,6 +285,10 @@ class HaPanelDevTemplate extends LitElement { max(16px, env(safe-area-inset-left)); } + .content.horizontal { + --code-mirror-max-height: calc(100vh - 389px); + } + ha-card { margin-bottom: 16px; } @@ -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 { @@ -316,7 +325,21 @@ 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 { @@ -324,7 +347,7 @@ class HaPanelDevTemplate extends LitElement { } @media all and (max-width: 870px) { - .render-pane { + .content ha-card { max-width: 100%; } } From 1de9f93ee4f7e459ed2613c9b9da00c481dee556 Mon Sep 17 00:00:00 2001 From: ildar170975 <71872483+ildar170975@users.noreply.github.com> Date: Wed, 11 Dec 2024 09:26:07 +0300 Subject: [PATCH 02/12] whitespace in pre Co-authored-by: Petar Petrov --- .../developer-tools/template/developer-tools-template.ts | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/panels/developer-tools/template/developer-tools-template.ts b/src/panels/developer-tools/template/developer-tools-template.ts index 529602998fee..182ce071fc3d 100644 --- a/src/panels/developer-tools/template/developer-tools-template.ts +++ b/src/panels/developer-tools/template/developer-tools-template.ts @@ -185,8 +185,7 @@ class HaPanelDevTemplate extends LitElement { class="rendered ${classMap({ [resultType]: resultType, })}" - > - ${type === "object" + >${type === "object" ? JSON.stringify(this._templateResult.result, null, 2) : this._templateResult.result} From e50e91a094949b790f708476b9ad5da015a11e4a Mon Sep 17 00:00:00 2001 From: ildar170975 <71872483+ildar170975@users.noreply.github.com> Date: Wed, 11 Dec 2024 09:38:43 +0300 Subject: [PATCH 03/12] prettier --- .../developer-tools/template/developer-tools-template.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/panels/developer-tools/template/developer-tools-template.ts b/src/panels/developer-tools/template/developer-tools-template.ts index 182ce071fc3d..b0bb4657e234 100644 --- a/src/panels/developer-tools/template/developer-tools-template.ts +++ b/src/panels/developer-tools/template/developer-tools-template.ts @@ -186,8 +186,8 @@ class HaPanelDevTemplate extends LitElement { [resultType]: resultType, })}" >${type === "object" - ? JSON.stringify(this._templateResult.result, null, 2) - : this._templateResult.result}

${this.hass.localize( From 4f061dcb188b3dd6a558e58212d8fa465ba0ad67 Mon Sep 17 00:00:00 2001 From: ildar170975 <71872483+ildar170975@users.noreply.github.com> Date: Wed, 11 Dec 2024 11:29:35 +0300 Subject: [PATCH 04/12] Update developer-tools-template.ts --- .../template/developer-tools-template.ts | 11 +++++++---- 1 file changed, 7 insertions(+), 4 deletions(-) diff --git a/src/panels/developer-tools/template/developer-tools-template.ts b/src/panels/developer-tools/template/developer-tools-template.ts index b0bb4657e234..ef3db553a069 100644 --- a/src/panels/developer-tools/template/developer-tools-template.ts +++ b/src/panels/developer-tools/template/developer-tools-template.ts @@ -327,8 +327,6 @@ class HaPanelDevTemplate extends LitElement { margin-top: 0; margin-bottom: 0; direction: ltr; - overflow: auto; - max-height: calc(var(--code-mirror-max-height) - 16px); } p, @@ -337,8 +335,13 @@ class HaPanelDevTemplate extends LitElement { } .content.horizontal .render-pane .card-content { - display: flex; - flex-direction: column; + overflow: auto; + max-height: calc(var(--code-mirror-max-height) + 35px); + } + + .content.horizontal .render-pane { + overflow: hidden; + padding-bottom: var(--ha-card-border-radius, 12px); } .all_listeners { From 1d85157afc6dca98a45e76e5919875d71953af73 Mon Sep 17 00:00:00 2001 From: ildar170975 <71872483+ildar170975@users.noreply.github.com> Date: Wed, 11 Dec 2024 12:11:05 +0300 Subject: [PATCH 05/12] Update developer-tools-template.ts --- .../template/developer-tools-template.ts | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) diff --git a/src/panels/developer-tools/template/developer-tools-template.ts b/src/panels/developer-tools/template/developer-tools-template.ts index ef3db553a069..227ee302ee3b 100644 --- a/src/panels/developer-tools/template/developer-tools-template.ts +++ b/src/panels/developer-tools/template/developer-tools-template.ts @@ -285,7 +285,13 @@ class HaPanelDevTemplate extends LitElement { } .content.horizontal { - --code-mirror-max-height: calc(100vh - 389px); + --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 { @@ -336,7 +342,7 @@ class HaPanelDevTemplate extends LitElement { .content.horizontal .render-pane .card-content { overflow: auto; - max-height: calc(var(--code-mirror-max-height) + 35px); + max-height: calc(var(--code-mirror-max-height) + 47px - var(--ha-card-border-radius, 12px)); } .content.horizontal .render-pane { From e5a4c5033a3c4ee2d84a0b02b87e5dcb71126bc8 Mon Sep 17 00:00:00 2001 From: ildar170975 <71872483+ildar170975@users.noreply.github.com> Date: Wed, 11 Dec 2024 12:15:25 +0300 Subject: [PATCH 06/12] prettier --- .../template/developer-tools-template.ts | 12 +++++++----- 1 file changed, 7 insertions(+), 5 deletions(-) diff --git a/src/panels/developer-tools/template/developer-tools-template.ts b/src/panels/developer-tools/template/developer-tools-template.ts index 227ee302ee3b..fc9ec8dd56d0 100644 --- a/src/panels/developer-tools/template/developer-tools-template.ts +++ b/src/panels/developer-tools/template/developer-tools-template.ts @@ -287,10 +287,10 @@ class HaPanelDevTemplate extends LitElement { .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 + 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 ); } @@ -342,7 +342,9 @@ class HaPanelDevTemplate extends LitElement { .content.horizontal .render-pane .card-content { overflow: auto; - max-height: calc(var(--code-mirror-max-height) + 47px - var(--ha-card-border-radius, 12px)); + max-height: calc( + var(--code-mirror-max-height) + 47px - + var(--ha-card-border-radius, 12px)); } .content.horizontal .render-pane { From 7bbd2159dfab7cb230cb9acd6161b43fd02c8f23 Mon Sep 17 00:00:00 2001 From: ildar170975 <71872483+ildar170975@users.noreply.github.com> Date: Wed, 11 Dec 2024 12:20:47 +0300 Subject: [PATCH 07/12] prettier!!!! --- .../developer-tools/template/developer-tools-template.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/panels/developer-tools/template/developer-tools-template.ts b/src/panels/developer-tools/template/developer-tools-template.ts index fc9ec8dd56d0..b44d863434e6 100644 --- a/src/panels/developer-tools/template/developer-tools-template.ts +++ b/src/panels/developer-tools/template/developer-tools-template.ts @@ -186,8 +186,8 @@ class HaPanelDevTemplate extends LitElement { [resultType]: resultType, })}" >${type === "object" - ? JSON.stringify(this._templateResult.result, null, 2) - : this._templateResult.result}

${this.hass.localize( From 8a3ea51353842b32efc68710a59d27d0b8660369 Mon Sep 17 00:00:00 2001 From: ildar170975 <71872483+ildar170975@users.noreply.github.com> Date: Wed, 11 Dec 2024 12:28:48 +0300 Subject: [PATCH 08/12] prettier again --- .../developer-tools/template/developer-tools-template.ts | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/panels/developer-tools/template/developer-tools-template.ts b/src/panels/developer-tools/template/developer-tools-template.ts index b44d863434e6..0d2ba884fd3a 100644 --- a/src/panels/developer-tools/template/developer-tools-template.ts +++ b/src/panels/developer-tools/template/developer-tools-template.ts @@ -343,8 +343,9 @@ class HaPanelDevTemplate extends LitElement { .content.horizontal .render-pane .card-content { overflow: auto; max-height: calc( - var(--code-mirror-max-height) + 47px - - var(--ha-card-border-radius, 12px)); + var(--code-mirror-max-height) + + 47px - var(--ha-card-border-radius, 12px) + ); } .content.horizontal .render-pane { From a39ba5bbed971fa078a45164a3213bb54b3e12da Mon Sep 17 00:00:00 2001 From: ildar170975 <71872483+ildar170975@users.noreply.github.com> Date: Wed, 11 Dec 2024 12:48:35 +0300 Subject: [PATCH 09/12] prettier fight --- .../developer-tools/template/developer-tools-template.ts | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/panels/developer-tools/template/developer-tools-template.ts b/src/panels/developer-tools/template/developer-tools-template.ts index 0d2ba884fd3a..38c86f8598ee 100644 --- a/src/panels/developer-tools/template/developer-tools-template.ts +++ b/src/panels/developer-tools/template/developer-tools-template.ts @@ -287,10 +287,10 @@ class HaPanelDevTemplate extends LitElement { .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 + (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 ); } From 9c14c73509a97a5fbf5c5eca3078bc721c454132 Mon Sep 17 00:00:00 2001 From: ildar170975 <71872483+ildar170975@users.noreply.github.com> Date: Wed, 11 Dec 2024 13:03:18 +0300 Subject: [PATCH 10/12] prettier Co-authored-by: Wendelin <12148533+wendevlin@users.noreply.github.com> --- .../developer-tools/template/developer-tools-template.ts | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/panels/developer-tools/template/developer-tools-template.ts b/src/panels/developer-tools/template/developer-tools-template.ts index 38c86f8598ee..4ae9e4f46686 100644 --- a/src/panels/developer-tools/template/developer-tools-template.ts +++ b/src/panels/developer-tools/template/developer-tools-template.ts @@ -185,7 +185,8 @@ class HaPanelDevTemplate extends LitElement { class="rendered ${classMap({ [resultType]: resultType, })}" - >${type === "object" + > +${type === "object" ? JSON.stringify(this._templateResult.result, null, 2) : this._templateResult.result} From 979b3a2c6810ae746d5300559420cfb2475b287d Mon Sep 17 00:00:00 2001 From: ildar170975 <71872483+ildar170975@users.noreply.github.com> Date: Wed, 11 Dec 2024 13:10:30 +0300 Subject: [PATCH 11/12] prettier --- .../developer-tools/template/developer-tools-template.ts | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/panels/developer-tools/template/developer-tools-template.ts b/src/panels/developer-tools/template/developer-tools-template.ts index 4ae9e4f46686..df0ace90dd64 100644 --- a/src/panels/developer-tools/template/developer-tools-template.ts +++ b/src/panels/developer-tools/template/developer-tools-template.ts @@ -288,9 +288,9 @@ ${type === "object" .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(--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 ); } From 45aa9066143ea2803d71482c7ca976e923717468 Mon Sep 17 00:00:00 2001 From: ildar170975 <71872483+ildar170975@users.noreply.github.com> Date: Wed, 11 Dec 2024 13:14:40 +0300 Subject: [PATCH 12/12] prettier --- src/panels/developer-tools/template/developer-tools-template.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/panels/developer-tools/template/developer-tools-template.ts b/src/panels/developer-tools/template/developer-tools-template.ts index df0ace90dd64..9486e5e84a97 100644 --- a/src/panels/developer-tools/template/developer-tools-template.ts +++ b/src/panels/developer-tools/template/developer-tools-template.ts @@ -291,7 +291,7 @@ ${type === "object" (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 + (var(--ha-card-border-width, 1px) * 2) - 179px ); }