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 4378962553..da2cd4a1d4 100644 --- a/src/panels/lovelace/editor/card-editor/hui-card-picker.ts +++ b/src/panels/lovelace/editor/card-editor/hui-card-picker.ts @@ -43,6 +43,8 @@ export class HuiCardPicker extends LitElement { @property({ attribute: false }) public suggestedCards?: string[]; + @property({ type: Boolean, attribute: false }) public isSectionsView = false; + @storage({ key: "dashboardCardClipboard", state: true, @@ -263,16 +265,20 @@ export class HuiCardPicker extends LitElement { } private _loadCards() { - 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` - ), - isSuggested: this.suggestedCards?.includes(card.type) || false, - ...card, - })); + let cards: Card[] = coreCards + .filter((card: Card) => + this.isSectionsView ? true : !card.sectionsViewOnly + ) + .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` + ), + isSuggested: this.suggestedCards?.includes(card.type) || false, + ...card, + })); cards = cards.sort((a, b) => { if (a.isSuggested && !b.isSuggested) { diff --git a/src/panels/lovelace/editor/card-editor/hui-dialog-create-card.ts b/src/panels/lovelace/editor/card-editor/hui-dialog-create-card.ts index 403bc7c31e..30a51d3e06 100644 --- a/src/panels/lovelace/editor/card-editor/hui-dialog-create-card.ts +++ b/src/panels/lovelace/editor/card-editor/hui-dialog-create-card.ts @@ -146,6 +146,10 @@ export class HuiCreateDialogCard .lovelace=${this._params.lovelaceConfig} .hass=${this.hass} @config-changed=${this._handleCardPicked} + .isSectionsView=${this._isSectionsView( + this._params.lovelaceConfig, + this._params.path + )} > ` : html` @@ -232,6 +236,15 @@ export class HuiCreateDialogCard ]; } + private _isSectionsView = memoize((lovelaceConfig, containerPath) => { + const { viewIndex } = parseLovelaceContainerPath(containerPath); + // sections is default when undefined + return ( + !lovelaceConfig.views[viewIndex].type || + lovelaceConfig.views[viewIndex].type === "sections" + ); + }); + private _handleCardPicked(ev) { const config = ev.detail.config; if (this._params!.entities && this._params!.entities.length) { diff --git a/src/panels/lovelace/editor/lovelace-cards.ts b/src/panels/lovelace/editor/lovelace-cards.ts index 737d290c74..a3197c921e 100644 --- a/src/panels/lovelace/editor/lovelace-cards.ts +++ b/src/panels/lovelace/editor/lovelace-cards.ts @@ -131,6 +131,6 @@ export const coreCards: Card[] = [ }, { type: "spacing", - showElement: false, + sectionsViewOnly: true }, ]; diff --git a/src/panels/lovelace/editor/types.ts b/src/panels/lovelace/editor/types.ts index 7731cb730a..f8937481b9 100644 --- a/src/panels/lovelace/editor/types.ts +++ b/src/panels/lovelace/editor/types.ts @@ -66,6 +66,7 @@ export interface Card { showElement?: boolean; isCustom?: boolean; isSuggested?: boolean; + sectionsViewOnly?: boolean; } export interface Badge {