Add description to sections demo (#19991)
* Add description to sections demo * Update wording
This commit is contained in:
parent
8ca5b7528b
commit
a5bcf87c08
|
@ -0,0 +1,16 @@
|
|||
import { html } from "lit";
|
||||
import { DemoConfig } from "../types";
|
||||
|
||||
export const demoLovelaceDescription: DemoConfig["description"] = (
|
||||
localize
|
||||
) => html`
|
||||
<p>
|
||||
${localize("ui.panel.page-demo.config.sections.description", {
|
||||
blog_post: html`<a
|
||||
href="https://www.home-assistant.io/blog/2024/03/04/dashboard-chapter-1/"
|
||||
target="_blank"
|
||||
>${localize("ui.panel.page-demo.config.sections.description_blog_post")}
|
||||
</a>`,
|
||||
})}
|
||||
</p>
|
||||
`;
|
|
@ -1,4 +1,5 @@
|
|||
import { DemoConfig } from "../types";
|
||||
import { demoLovelaceDescription } from "./description";
|
||||
import { demoEntitiesSections } from "./entities";
|
||||
import { demoLovelaceSections } from "./lovelace";
|
||||
|
||||
|
@ -6,6 +7,7 @@ export const demoSections: DemoConfig = {
|
|||
authorName: "Home Assistant",
|
||||
authorUrl: "https://github.com/home-assistant/frontend/",
|
||||
name: "Home Demo",
|
||||
description: demoLovelaceDescription,
|
||||
lovelace: demoLovelaceSections,
|
||||
entities: demoEntitiesSections,
|
||||
theme: () => ({}),
|
||||
|
|
|
@ -1,3 +1,4 @@
|
|||
import { TemplateResult } from "lit";
|
||||
import { LocalizeFunc } from "../../../src/common/translations/localize";
|
||||
import { LovelaceConfig } from "../../../src/data/lovelace/config/types";
|
||||
import { Entity } from "../../../src/fake_data/entity";
|
||||
|
@ -7,6 +8,9 @@ export interface DemoConfig {
|
|||
name: string;
|
||||
authorName: string;
|
||||
authorUrl: string;
|
||||
description?:
|
||||
| string
|
||||
| ((localize: LocalizeFunc) => string | TemplateResult<1>);
|
||||
lovelace: (localize: LocalizeFunc) => LovelaceConfig;
|
||||
entities: (localize: LocalizeFunc) => Entity[];
|
||||
theme: () => Record<string, string> | null;
|
||||
|
|
|
@ -39,32 +39,51 @@ export class HADemoCard extends LitElement implements LovelaceCard {
|
|||
<div class="picker">
|
||||
<div class="label">
|
||||
${this._switching
|
||||
? html`<ha-circular-progress
|
||||
indeterminate
|
||||
></ha-circular-progress>`
|
||||
? html`
|
||||
<ha-circular-progress indeterminate></ha-circular-progress>
|
||||
`
|
||||
: until(
|
||||
selectedDemoConfig.then(
|
||||
(conf) => html`
|
||||
${conf.name}
|
||||
<small>
|
||||
<a target="_blank" href=${conf.authorUrl}>
|
||||
${this.hass.localize(
|
||||
"ui.panel.page-demo.cards.demo.demo_by",
|
||||
{ name: conf.authorName }
|
||||
)}
|
||||
</a>
|
||||
${this.hass.localize(
|
||||
"ui.panel.page-demo.cards.demo.demo_by",
|
||||
{
|
||||
name: html`
|
||||
<a target="_blank" href=${conf.authorUrl}>
|
||||
${conf.authorName}
|
||||
</a>
|
||||
`,
|
||||
}
|
||||
)}
|
||||
</small>
|
||||
`
|
||||
),
|
||||
""
|
||||
)}
|
||||
</div>
|
||||
|
||||
<mwc-button @click=${this._nextConfig} .disabled=${this._switching}>
|
||||
${this.hass.localize("ui.panel.page-demo.cards.demo.next_demo")}
|
||||
</mwc-button>
|
||||
</div>
|
||||
<div class="content small-hidden">
|
||||
${this.hass.localize("ui.panel.page-demo.cards.demo.introduction")}
|
||||
<div class="content">
|
||||
<p class="small-hidden">
|
||||
${this.hass.localize("ui.panel.page-demo.cards.demo.introduction")}
|
||||
</p>
|
||||
${until(
|
||||
selectedDemoConfig.then((conf) => {
|
||||
if (typeof conf.description === "function") {
|
||||
return conf.description(this.hass.localize);
|
||||
}
|
||||
if (conf.description) {
|
||||
return html`<p>${conf.description}</p>`;
|
||||
}
|
||||
return nothing;
|
||||
}),
|
||||
nothing
|
||||
)}
|
||||
</div>
|
||||
<div class="actions small-hidden">
|
||||
<a href="https://www.home-assistant.io" target="_blank">
|
||||
|
@ -108,6 +127,7 @@ export class HADemoCard extends LitElement implements LovelaceCard {
|
|||
css`
|
||||
a {
|
||||
color: var(--primary-color);
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.actions a {
|
||||
|
@ -115,7 +135,11 @@ export class HADemoCard extends LitElement implements LovelaceCard {
|
|||
}
|
||||
|
||||
.content {
|
||||
padding: 16px;
|
||||
padding: 0 16px;
|
||||
}
|
||||
|
||||
.content p {
|
||||
margin: 16px 0;
|
||||
}
|
||||
|
||||
.picker {
|
||||
|
@ -138,9 +162,8 @@ export class HADemoCard extends LitElement implements LovelaceCard {
|
|||
}
|
||||
|
||||
.actions {
|
||||
padding-left: 8px;
|
||||
padding: 0px 8px 4px 8px;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 500px) {
|
||||
.small-hidden {
|
||||
display: none;
|
||||
|
|
|
@ -6218,6 +6218,10 @@
|
|||
"watching": "watching",
|
||||
"minutes_abbr": "min"
|
||||
}
|
||||
},
|
||||
"sections": {
|
||||
"description": "This dashboard is using the sections view released in Home Assistant 2024.3. Learn more about it in this {blog_post}.",
|
||||
"description_blog_post": "blog post"
|
||||
}
|
||||
}
|
||||
},
|
||||
|
|
Loading…
Reference in New Issue