Skip to content

Commit

Permalink
Update styling on Template dev-tools (#21661)
Browse files Browse the repository at this point in the history 
* Update styling on Template dev-tools

* Remove unnecessary divs
  • Loading branch information
@cgarwood
cgarwood authored Aug 15, 2024
1 parent 3f0f3af commit 336b5fb
Show file tree
Hide file tree
Showing 2 changed files with 133 additions and 121 deletions.
253 changes: 132 additions & 121 deletions src/panels/developer-tools/template/developer-tools-template.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -88,13 +88,8 @@ class HaPanelDevTemplate extends LitElement {
: "dict"
: type;
return html`
<div
class="content ${classMap({
layout: !this.narrow,
horizontal: !this.narrow,
})}"
>
<div class="edit-pane">
<div class="content">
<div class="description">
<p>
${this.hass.localize(
"ui.panel.developer-tools.tabs.templates.description"
Expand Down Expand Up @@ -126,123 +121,143 @@ class HaPanelDevTemplate extends LitElement {
>
</li>
</ul>
<p>
${this.hass.localize(
"ui.panel.developer-tools.tabs.templates.editor"
)}
</p>
<ha-code-editor
mode="jinja2"
.hass=${this.hass}
.value=${this._template}
.error=${this._error}
autofocus
autocomplete-entities
autocomplete-icons
@value-changed=${this._templateChanged}
dir="ltr"
></ha-code-editor>
<mwc-button @click=${this._restoreDemo}>
${this.hass.localize(
"ui.panel.developer-tools.tabs.templates.reset"
)}
</mwc-button>
<mwc-button @click=${this._clear}>
${this.hass.localize("ui.common.clear")}
</mwc-button>
</div>
<div class="render-pane">
${this._rendering
? html`<ha-circular-progress
class="render-spinner"
indeterminate
size="small"
></ha-circular-progress>`
: ""}
${this._error
? html`<ha-alert
alert-type=${this._errorLevel?.toLowerCase() || "error"}
>${this._error}</ha-alert
>`
: 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>
${this._templateResult.listeners.time
? html`
<p>
${this.hass.localize(
"ui.panel.developer-tools.tabs.templates.time"
)}
</p>
`
: ""}
${!this._templateResult.listeners
? nothing
: this._templateResult.listeners.all
</div>
<div
class="content ${classMap({
layout: !this.narrow,
horizontal: !this.narrow,
})}"
>
<ha-card
class="edit-pane"
header=${this.hass.localize(
"ui.panel.developer-tools.tabs.templates.editor"
)}
>
<div class="card-content">
<ha-code-editor
mode="jinja2"
.hass=${this.hass}
.value=${this._template}
.error=${this._error}
autofocus
autocomplete-entities
autocomplete-icons
@value-changed=${this._templateChanged}
dir="ltr"
></ha-code-editor>
</div>
<div class="card-actions">
<mwc-button @click=${this._restoreDemo}>
${this.hass.localize(
"ui.panel.developer-tools.tabs.templates.reset"
)}
</mwc-button>
<mwc-button @click=${this._clear}>
${this.hass.localize("ui.common.clear")}
</mwc-button>
</div>
</ha-card>
<ha-card
class="render-pane"
header=${this.hass.localize(
"ui.panel.developer-tools.tabs.templates.result"
)}
>
<div class="card-content">
${this._rendering
? html`<ha-circular-progress
class="render-spinner"
indeterminate
size="small"
></ha-circular-progress>`
: ""}
${this._error
? html`<ha-alert
alert-type=${this._errorLevel?.toLowerCase() || "error"}
>${this._error}</ha-alert
>`
: 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>
${this._templateResult.listeners.time
? html`
<p class="all_listeners">
<p>
${this.hass.localize(
"ui.panel.developer-tools.tabs.templates.all_listeners"
"ui.panel.developer-tools.tabs.templates.time"
)}
</p>
`
: this._templateResult.listeners.domains.length ||
this._templateResult.listeners.entities.length
: ""}
${!this._templateResult.listeners
? nothing
: this._templateResult.listeners.all
? html`
<p>
<p class="all_listeners">
${this.hass.localize(
"ui.panel.developer-tools.tabs.templates.listeners"
"ui.panel.developer-tools.tabs.templates.all_listeners"
)}
</p>
<ul>
${this._templateResult.listeners.domains
.sort()
.map(
(domain) => html`
<li>
<b
>${this.hass.localize(
"ui.panel.developer-tools.tabs.templates.domain"
)}</b
>: ${domain}
</li>
`
`
: this._templateResult.listeners.domains.length ||
this._templateResult.listeners.entities.length
? html`
<p>
${this.hass.localize(
"ui.panel.developer-tools.tabs.templates.listeners"
)}
${this._templateResult.listeners.entities
.sort()
.map(
(entity_id) => html`
<li>
<b
>${this.hass.localize(
"ui.panel.developer-tools.tabs.templates.entity"
)}</b
>: ${entity_id}
</li>
`
</p>
<ul>
${this._templateResult.listeners.domains
.sort()
.map(
(domain) => html`
<li>
<b
>${this.hass.localize(
"ui.panel.developer-tools.tabs.templates.domain"
)}</b
>: ${domain}
</li>
`
)}
${this._templateResult.listeners.entities
.sort()
.map(
(entity_id) => html`
<li>
<b
>${this.hass.localize(
"ui.panel.developer-tools.tabs.templates.entity"
)}</b
>: ${entity_id}
</li>
`
)}
</ul>
`
: !this._templateResult.listeners.time
? html`<span class="all_listeners">
${this.hass.localize(
"ui.panel.developer-tools.tabs.templates.no_listeners"
)}
</ul>
`
: !this._templateResult.listeners.time
? html`<span class="all_listeners">
${this.hass.localize(
"ui.panel.developer-tools.tabs.templates.no_listeners"
)}
</span>`
: nothing}`
: nothing}
</div>
</span>`
: nothing}`
: nothing}
</div>
</ha-card>
</div>
`;
}
Expand All @@ -258,17 +273,19 @@ class HaPanelDevTemplate extends LitElement {
}
.content {
gap: 16px;
padding: 16px;
padding: max(16px, env(safe-area-inset-top))
max(16px, env(safe-area-inset-right))
max(16px, env(safe-area-inset-bottom))
max(16px, env(safe-area-inset-left));
}
ha-card {
margin-bottom: 16px;
}
.edit-pane {
margin-right: 16px;
margin-inline-start: initial;
margin-inline-end: 16px;
direction: var(--direction);
}
Expand All @@ -280,12 +297,6 @@ class HaPanelDevTemplate extends LitElement {
max-width: 50%;
}
.render-pane {
position: relative;
max-width: 50%;
flex: 1;
}
.render-spinner {
position: absolute;
top: 8px;
Expand Down
1 change: 1 addition & 0 deletions src/translations/en.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6850,6 +6850,7 @@
"title": "Template",
"description": "Templates are rendered using the Jinja2 template engine with some Home Assistant specific extensions.",
"editor": "Template editor",
"result": "Result",
"reset": "Reset to demo template",
"confirm_reset": "Do you want to reset your current template back to the demo template?",
"confirm_clear": "Do you want to clear your current template?",
Expand Down

0 comments on commit 336b5fb

Please sign in to comment.