diff --git a/src/data/lovelace_custom_cards.ts b/src/data/lovelace_custom_cards.ts index 2e021e7a6f..d669b50880 100644 --- a/src/data/lovelace_custom_cards.ts +++ b/src/data/lovelace_custom_cards.ts @@ -3,6 +3,7 @@ export interface CustomCardEntry { name?: string; description?: string; preview?: boolean; + documentationURL?: string; } export interface CustomCardsWindow { diff --git a/src/panels/lovelace/editor/card-editor/hui-card-picker.ts b/src/panels/lovelace/editor/card-editor/hui-card-picker.ts index 3d4be3394e..926191c3d7 100644 --- a/src/panels/lovelace/editor/card-editor/hui-card-picker.ts +++ b/src/panels/lovelace/editor/card-editor/hui-card-picker.ts @@ -30,52 +30,14 @@ import { import { createCardElement } from "../../create-element/create-card-element"; import { LovelaceCard } from "../../types"; import { getCardStubConfig } from "../get-card-stub-config"; -import { CardPickTarget } from "../types"; - -interface Card { - type: string; - name?: string; - description?: string; - noElement?: boolean; - isCustom?: boolean; -} +import { CardPickTarget, Card } from "../types"; +import { coreCards } from "../lovelace-cards"; interface CardElement { card: Card; element: TemplateResult; } -const previewCards: string[] = [ - "alarm-panel", - "button", - "entities", - "entity", - "gauge", - "glance", - "history-graph", - "light", - "map", - "markdown", - "media-control", - "picture", - "picture-elements", - "picture-entity", - "picture-glance", - "plant-status", - "sensor", - "thermostat", - "weather-forecast", -]; - -const nonPreviewCards: string[] = [ - "conditional", - "entity-filter", - "horizontal-stack", - "iframe", - "vertical-stack", - "shopping-list", -]; - @customElement("hui-card-picker") export class HuiCardPicker extends LitElement { @property() public hass?: HomeAssistant; @@ -136,11 +98,7 @@ export class HuiCardPicker extends LitElement { )}
-
+
${this.hass!.localize( `ui.panel.lovelace.editor.card.generic.manual_description` @@ -192,33 +150,22 @@ export class HuiCardPicker extends LitElement { } private _loadCards() { - let cards: Card[] = previewCards - .map((type: string) => ({ - type, - name: this.hass!.localize(`ui.panel.lovelace.editor.card.${type}.name`), - description: this.hass!.localize( - `ui.panel.lovelace.editor.card.${type}.description` - ), - })) - .concat( - nonPreviewCards.map((type: string) => ({ - type, - name: this.hass!.localize( - `ui.panel.lovelace.editor.card.${type}.name` - ), - description: this.hass!.localize( - `ui.panel.lovelace.editor.card.${type}.description` - ), - noElement: true, - })) - ); + let cards: Card[] = coreCards.map((card: Card) => ({ + name: this.hass!.localize( + `ui.panel.lovelace.editor.card.${card.type}.name` + ), + description: this.hass!.localize( + `ui.panel.lovelace.editor.card.${card.type}.description` + ), + ...card, + })); if (customCards.length > 0) { cards = cards.concat( customCards.map((ccard: CustomCardEntry) => ({ type: ccard.type, name: ccard.name, description: ccard.description, - noElement: true, + showElement: ccard.preview, isCustom: true, })) ); @@ -341,7 +288,7 @@ export class HuiCardPicker extends LitElement { private async _renderCardElement(card: Card): Promise { let { type } = card; - const { noElement, isCustom, name, description } = card; + const { showElement, isCustom, name, description } = card; const customCard = isCustom ? getCustomCardEntry(type) : undefined; if (isCustom) { type = `${CUSTOM_TYPE_PREFIX}${type}`; @@ -358,7 +305,7 @@ export class HuiCardPicker extends LitElement { this._usedEntities! ); - if (!noElement || customCard?.preview) { + if (showElement) { element = this._createCardElement(cardConfig); } } diff --git a/src/panels/lovelace/editor/card-editor/hui-dialog-edit-card.ts b/src/panels/lovelace/editor/card-editor/hui-dialog-edit-card.ts index 1a7434bcd3..0c832dc73d 100755 --- a/src/panels/lovelace/editor/card-editor/hui-dialog-edit-card.ts +++ b/src/panels/lovelace/editor/card-editor/hui-dialog-edit-card.ts @@ -1,3 +1,4 @@ +import "@polymer/paper-dialog-scrollable/paper-dialog-scrollable"; import deepFreeze from "deep-freeze"; import { css, @@ -8,6 +9,7 @@ import { property, query, TemplateResult, + PropertyValues, } from "lit-element"; import type { HASSDomEvent } from "../../../../common/dom/fire_event"; import "../../../../components/dialog/ha-paper-dialog"; @@ -25,7 +27,7 @@ import type { ConfigChangedEvent, HuiCardEditor } from "./hui-card-editor"; import "./hui-card-picker"; import "./hui-card-preview"; import type { EditCardDialogParams } from "./show-edit-card-dialog"; -import "@polymer/paper-dialog-scrollable/paper-dialog-scrollable"; +import { getCardDocumentationURL } from "../get-card-documentation-url"; declare global { // for fire event @@ -58,6 +60,8 @@ export class HuiDialogEditCard extends LitElement { @property() private _GUImode = true; + @property() private _documentationURL?: string; + public async showDialog(params: EditCardDialogParams): Promise { this._params = params; this._GUImode = true; @@ -71,6 +75,22 @@ export class HuiDialogEditCard extends LitElement { } } + protected updated(changedProps: PropertyValues): void { + if ( + !this._cardConfig || + this._documentationURL !== undefined || + !changedProps.has("_cardConfig") + ) { + return; + } + + const oldConfig = changedProps.get("_cardConfig") as LovelaceCardConfig; + + if (oldConfig?.type !== this._cardConfig!.type) { + this._documentationURL = getCardDocumentationURL(this._cardConfig!.type); + } + } + protected render(): TemplateResult { if (!this._params) { return html``; @@ -97,9 +117,26 @@ export class HuiDialogEditCard extends LitElement { return html` -

- ${heading} -

+
+

+ ${heading} +

+ ${this._documentationURL !== undefined + ? html` + + + + ` + : ""} +
${this._cardConfig === undefined ? html` @@ -275,6 +312,15 @@ export class HuiDialogEditCard extends LitElement { .gui-mode-button { margin-right: auto; } + .header { + display: flex; + align-items: center; + justify-content: space-between; + } + .help-icon { + text-decoration: none; + color: inherit; + } `, ]; } @@ -318,6 +364,7 @@ export class HuiDialogEditCard extends LitElement { this._params = undefined; this._cardConfig = undefined; this._error = undefined; + this._documentationURL = undefined; } private get _canSave(): boolean { diff --git a/src/panels/lovelace/editor/get-card-documentation-url.ts b/src/panels/lovelace/editor/get-card-documentation-url.ts new file mode 100644 index 0000000000..4d1e989a1d --- /dev/null +++ b/src/panels/lovelace/editor/get-card-documentation-url.ts @@ -0,0 +1,14 @@ +import { + getCustomCardEntry, + CUSTOM_TYPE_PREFIX, +} from "../../../data/lovelace_custom_cards"; + +const coreDocumentationURLBase = "https://www.home-assistant.io/lovelace/"; + +export const getCardDocumentationURL = (type: string): string | undefined => { + if (type.startsWith(CUSTOM_TYPE_PREFIX)) { + return getCustomCardEntry(type)?.documentationURL; + } + + return `${coreDocumentationURLBase}${type}`; +}; diff --git a/src/panels/lovelace/editor/lovelace-cards.ts b/src/panels/lovelace/editor/lovelace-cards.ts new file mode 100644 index 0000000000..210f3f834d --- /dev/null +++ b/src/panels/lovelace/editor/lovelace-cards.ts @@ -0,0 +1,98 @@ +import { Card } from "./types"; + +export const coreCards: Card[] = [ + { + type: "alarm-panel", + showElement: true, + }, + { + type: "button", + showElement: true, + }, + { + type: "entities", + showElement: true, + }, + { + type: "entity", + showElement: true, + }, + { + type: "gauge", + showElement: true, + }, + { + type: "glance", + showElement: true, + }, + { + type: "history-graph", + showElement: true, + }, + { + type: "light", + showElement: true, + }, + { + type: "map", + showElement: true, + }, + { + type: "markdown", + showElement: true, + }, + { + type: "media-control", + showElement: true, + }, + { + type: "picture", + showElement: true, + }, + { + type: "picture-elements", + showElement: true, + }, + { + type: "picture-entity", + showElement: true, + }, + { + type: "picture-glance", + showElement: true, + }, + { + type: "plant-status", + showElement: true, + }, + { + type: "sensor", + showElement: true, + }, + { + type: "thermostat", + showElement: true, + }, + { + type: "weather-forecast", + showElement: true, + }, + { + type: "conditional", + }, + { + type: "entity-filter", + }, + { + type: "horizontal-stack", + }, + { + type: "iframe", + }, + { + type: "vertical-stack", + }, + { + type: "shopping-list", + }, +]; diff --git a/src/panels/lovelace/editor/types.ts b/src/panels/lovelace/editor/types.ts index b9a79c53f1..31a3186d96 100644 --- a/src/panels/lovelace/editor/types.ts +++ b/src/panels/lovelace/editor/types.ts @@ -54,6 +54,14 @@ export interface EditorTarget extends EventTarget { config: ActionConfig; } +export interface Card { + type: string; + name?: string; + description?: string; + showElement?: boolean; + isCustom?: boolean; +} + export interface CardPickTarget extends EventTarget { config: LovelaceCardConfig; }