mirror of
https://github.com/home-assistant/frontend.git
synced 2025-07-25 18:26:35 +00:00
Update styling on Template dev-tools (#21661)
* Update styling on Template dev-tools * Remove unnecessary divs
This commit is contained in:
Charles Garwood
GitHub
parent
3f0f3affb6
commit
336b5fb547
@ -88,13 +88,8 @@ class HaPanelDevTemplate extends LitElement {
|
|||||||
: "dict"
|
: "dict"
|
||||||
: type;
|
: type;
|
||||||
return html`
|
return html`
|
||||||
<div
|
<div class="content">
|
||||||
class="content ${classMap({
|
<div class="description">
|
||||||
layout: !this.narrow,
|
|
||||||
horizontal: !this.narrow,
|
|
||||||
})}"
|
|
||||||
>
|
|
||||||
<div class="edit-pane">
|
|
||||||
<p>
|
<p>
|
||||||
${this.hass.localize(
|
${this.hass.localize(
|
||||||
"ui.panel.developer-tools.tabs.templates.description"
|
"ui.panel.developer-tools.tabs.templates.description"
|
||||||
@ -126,123 +121,143 @@ class HaPanelDevTemplate extends LitElement {
|
|||||||
>
|
>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</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>
|
||||||
|
</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>
|
||||||
|
|
||||||
<div class="render-pane">
|
<ha-card
|
||||||
${this._rendering
|
class="render-pane"
|
||||||
? html`<ha-circular-progress
|
header=${this.hass.localize(
|
||||||
class="render-spinner"
|
"ui.panel.developer-tools.tabs.templates.result"
|
||||||
indeterminate
|
)}
|
||||||
size="small"
|
>
|
||||||
></ha-circular-progress>`
|
<div class="card-content">
|
||||||
: ""}
|
${this._rendering
|
||||||
${this._error
|
? html`<ha-circular-progress
|
||||||
? html`<ha-alert
|
class="render-spinner"
|
||||||
alert-type=${this._errorLevel?.toLowerCase() || "error"}
|
indeterminate
|
||||||
>${this._error}</ha-alert
|
size="small"
|
||||||
>`
|
></ha-circular-progress>`
|
||||||
: nothing}
|
: ""}
|
||||||
${this._templateResult
|
${this._error
|
||||||
? html`${this.hass.localize(
|
? html`<ha-alert
|
||||||
"ui.panel.developer-tools.tabs.templates.result_type"
|
alert-type=${this._errorLevel?.toLowerCase() || "error"}
|
||||||
)}:
|
>${this._error}</ha-alert
|
||||||
${resultType}
|
>`
|
||||||
<!-- prettier-ignore -->
|
: nothing}
|
||||||
<pre class="rendered ${classMap({
|
${this._templateResult
|
||||||
[resultType]: resultType,
|
? html`${this.hass.localize(
|
||||||
})}"
|
"ui.panel.developer-tools.tabs.templates.result_type"
|
||||||
>${type === "object"
|
)}:
|
||||||
? JSON.stringify(this._templateResult.result, null, 2)
|
${resultType}
|
||||||
: this._templateResult.result}</pre>
|
<!-- prettier-ignore -->
|
||||||
${this._templateResult.listeners.time
|
<pre class="rendered ${classMap({
|
||||||
? html`
|
[resultType]: resultType,
|
||||||
<p>
|
})}"
|
||||||
${this.hass.localize(
|
>${type === "object"
|
||||||
"ui.panel.developer-tools.tabs.templates.time"
|
? JSON.stringify(this._templateResult.result, null, 2)
|
||||||
)}
|
: this._templateResult.result}</pre>
|
||||||
</p>
|
${this._templateResult.listeners.time
|
||||||
`
|
|
||||||
: ""}
|
|
||||||
${!this._templateResult.listeners
|
|
||||||
? nothing
|
|
||||||
: this._templateResult.listeners.all
|
|
||||||
? html`
|
? html`
|
||||||
<p class="all_listeners">
|
<p>
|
||||||
${this.hass.localize(
|
${this.hass.localize(
|
||||||
"ui.panel.developer-tools.tabs.templates.all_listeners"
|
"ui.panel.developer-tools.tabs.templates.time"
|
||||||
)}
|
)}
|
||||||
</p>
|
</p>
|
||||||
`
|
`
|
||||||
: this._templateResult.listeners.domains.length ||
|
: ""}
|
||||||
this._templateResult.listeners.entities.length
|
${!this._templateResult.listeners
|
||||||
|
? nothing
|
||||||
|
: this._templateResult.listeners.all
|
||||||
? html`
|
? html`
|
||||||
<p>
|
<p class="all_listeners">
|
||||||
${this.hass.localize(
|
${this.hass.localize(
|
||||||
"ui.panel.developer-tools.tabs.templates.listeners"
|
"ui.panel.developer-tools.tabs.templates.all_listeners"
|
||||||
)}
|
)}
|
||||||
</p>
|
</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
|
: this._templateResult.listeners.domains.length ||
|
||||||
? html`<span class="all_listeners">
|
this._templateResult.listeners.entities.length
|
||||||
${this.hass.localize(
|
? html`
|
||||||
"ui.panel.developer-tools.tabs.templates.no_listeners"
|
<p>
|
||||||
)}
|
${this.hass.localize(
|
||||||
</span>`
|
"ui.panel.developer-tools.tabs.templates.listeners"
|
||||||
: nothing}`
|
)}
|
||||||
: nothing}
|
</p>
|
||||||
</div>
|
<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"
|
||||||
|
)}
|
||||||
|
</span>`
|
||||||
|
: nothing}`
|
||||||
|
: nothing}
|
||||||
|
</div>
|
||||||
|
</ha-card>
|
||||||
</div>
|
</div>
|
||||||
`;
|
`;
|
||||||
}
|
}
|
||||||
@ -258,6 +273,7 @@ class HaPanelDevTemplate extends LitElement {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.content {
|
.content {
|
||||||
|
gap: 16px;
|
||||||
padding: 16px;
|
padding: 16px;
|
||||||
padding: max(16px, env(safe-area-inset-top))
|
padding: max(16px, env(safe-area-inset-top))
|
||||||
max(16px, env(safe-area-inset-right))
|
max(16px, env(safe-area-inset-right))
|
||||||
@ -265,10 +281,11 @@ class HaPanelDevTemplate extends LitElement {
|
|||||||
max(16px, env(safe-area-inset-left));
|
max(16px, env(safe-area-inset-left));
|
||||||
}
|
}
|
||||||
|
|
||||||
|
ha-card {
|
||||||
|
margin-bottom: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
.edit-pane {
|
.edit-pane {
|
||||||
margin-right: 16px;
|
|
||||||
margin-inline-start: initial;
|
|
||||||
margin-inline-end: 16px;
|
|
||||||
direction: var(--direction);
|
direction: var(--direction);
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -280,12 +297,6 @@ class HaPanelDevTemplate extends LitElement {
|
|||||||
max-width: 50%;
|
max-width: 50%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.render-pane {
|
|
||||||
position: relative;
|
|
||||||
max-width: 50%;
|
|
||||||
flex: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.render-spinner {
|
.render-spinner {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 8px;
|
top: 8px;
|
||||||
|
|||||||
@ -6850,6 +6850,7 @@
|
|||||||
"title": "Template",
|
"title": "Template",
|
||||||
"description": "Templates are rendered using the Jinja2 template engine with some Home Assistant specific extensions.",
|
"description": "Templates are rendered using the Jinja2 template engine with some Home Assistant specific extensions.",
|
||||||
"editor": "Template editor",
|
"editor": "Template editor",
|
||||||
|
"result": "Result",
|
||||||
"reset": "Reset to demo template",
|
"reset": "Reset to demo template",
|
||||||
"confirm_reset": "Do you want to reset your current template back to the 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?",
|
"confirm_clear": "Do you want to clear your current template?",
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user