From 1950656bd52c7b88f30a2d60cc815374c0421ba1 Mon Sep 17 00:00:00 2001 From: Bram Kragten Date: Sat, 21 Mar 2020 16:51:44 +0100 Subject: [PATCH] Add ability to edit panel view cards (#5257) * Add ability to edit panel view cards * Localize and fix some styling --- src/panels/lovelace/cards/hui-iframe-card.ts | 6 +++ src/panels/lovelace/cards/hui-map-card.ts | 6 +++ src/panels/lovelace/hui-root.ts | 2 + src/panels/lovelace/types.ts | 1 + src/panels/lovelace/views/hui-panel-view.ts | 49 ++++++++++++++++++-- src/panels/lovelace/views/hui-view.ts | 1 + src/translations/en.json | 8 +--- 7 files changed, 63 insertions(+), 10 deletions(-) diff --git a/src/panels/lovelace/cards/hui-iframe-card.ts b/src/panels/lovelace/cards/hui-iframe-card.ts index 65882e0774..bd8d0b2d27 100644 --- a/src/panels/lovelace/cards/hui-iframe-card.ts +++ b/src/panels/lovelace/cards/hui-iframe-card.ts @@ -32,6 +32,8 @@ export class HuiIframeCard extends LitElement implements LovelaceCard { } @property({ type: Boolean, reflect: true }) public isPanel = false; + @property({ type: Boolean, reflect: true }) + public editMode = false; @property() protected _config?: IframeCardConfig; public getCardSize(): number { @@ -88,6 +90,10 @@ export class HuiIframeCard extends LitElement implements LovelaceCard { height: 100%; } + :host([ispanel][editMode]) ha-card { + height: calc(100% - 51px); + } + ha-card { overflow: hidden; } diff --git a/src/panels/lovelace/cards/hui-map-card.ts b/src/panels/lovelace/cards/hui-map-card.ts index d59be48059..6c751696d7 100644 --- a/src/panels/lovelace/cards/hui-map-card.ts +++ b/src/panels/lovelace/cards/hui-map-card.ts @@ -63,6 +63,8 @@ class HuiMapCard extends LitElement implements LovelaceCard { @property({ type: Boolean, reflect: true }) public isPanel = false; + @property({ type: Boolean, reflect: true }) + public editMode = false; @property() private _config?: MapCardConfig; @@ -460,6 +462,10 @@ class HuiMapCard extends LitElement implements LovelaceCard { height: 100%; } + :host([ispanel][editMode]) ha-card { + height: calc(100% - 51px); + } + ha-card { overflow: hidden; } diff --git a/src/panels/lovelace/hui-root.ts b/src/panels/lovelace/hui-root.ts index 0e26475ca4..484dec9afe 100644 --- a/src/panels/lovelace/hui-root.ts +++ b/src/panels/lovelace/hui-root.ts @@ -701,6 +701,8 @@ class HUIRoot extends LitElement { if (viewConfig.panel && viewConfig.cards && viewConfig.cards.length > 0) { view = document.createElement("hui-panel-view"); view.config = viewConfig; + view.lovelace = this.lovelace; + view.index = viewIndex; } else { view = document.createElement("hui-view"); view.lovelace = this.lovelace; diff --git a/src/panels/lovelace/types.ts b/src/panels/lovelace/types.ts index bede948a08..3a6d042fcf 100644 --- a/src/panels/lovelace/types.ts +++ b/src/panels/lovelace/types.ts @@ -33,6 +33,7 @@ export interface LovelaceBadge extends HTMLElement { export interface LovelaceCard extends HTMLElement { hass?: HomeAssistant; isPanel?: boolean; + editMode?: boolean; getCardSize(): number; setConfig(config: LovelaceCardConfig): void; } diff --git a/src/panels/lovelace/views/hui-panel-view.ts b/src/panels/lovelace/views/hui-panel-view.ts index fbceb6ef51..2eeb64a27c 100644 --- a/src/panels/lovelace/views/hui-panel-view.ts +++ b/src/panels/lovelace/views/hui-panel-view.ts @@ -8,14 +8,18 @@ import { import { applyThemesOnElement } from "../../../common/dom/apply_themes_on_element"; import { HomeAssistant } from "../../../types"; -import { LovelaceCard } from "../types"; +import { LovelaceCard, Lovelace } from "../types"; import { createCardElement } from "../create-element/create-card-element"; import { LovelaceViewConfig } from "../../../data/lovelace"; +let editCodeLoaded = false; + @customElement("hui-panel-view") export class HUIPanelView extends UpdatingElement { @property() public hass?: HomeAssistant; + @property() public lovelace?: Lovelace; @property() public config?: LovelaceViewConfig; + @property({ type: Number }) public index!: number; protected firstUpdated(changedProperties: PropertyValues): void { super.firstUpdated(changedProperties); @@ -26,11 +30,25 @@ export class HUIPanelView extends UpdatingElement { super.update(changedProperties); const hass = this.hass!; + const lovelace = this.lovelace!; const hassChanged = changedProperties.has("hass"); const oldHass = changedProperties.get("hass") as this["hass"] | undefined; const configChanged = changedProperties.has("config"); - if (configChanged) { + if (lovelace.editMode && !editCodeLoaded) { + editCodeLoaded = true; + import(/* webpackChunkName: "hui-view-editable" */ "./hui-view-editable"); + } + + let editModeChanged = false; + + if (changedProperties.has("lovelace")) { + const oldLovelace = changedProperties.get("lovelace") as Lovelace; + editModeChanged = + !oldLovelace || lovelace.editMode !== oldLovelace.editMode; + } + + if (editModeChanged || configChanged) { this._createCard(); } else if (hassChanged) { (this.lastChild! as LovelaceCard).hass = this.hass; @@ -48,14 +66,37 @@ export class HUIPanelView extends UpdatingElement { } private _createCard(): void { - if (this.lastChild) { + while (this.lastChild) { this.removeChild(this.lastChild); } const card: LovelaceCard = createCardElement(this.config!.cards![0]); card.hass = this.hass; card.isPanel = true; - this.appendChild(card); + + if (!this.lovelace!.editMode) { + this.appendChild(card); + return; + } + + const wrapper = document.createElement("hui-card-options"); + wrapper.hass = this.hass; + wrapper.lovelace = this.lovelace; + wrapper.path = [this.index, 0]; + card.editMode = true; + wrapper.appendChild(card); + this.appendChild(wrapper); + if (this.config!.cards!.length > 1) { + const warning = document.createElement("hui-warning"); + warning.setAttribute( + "style", + "position: absolute; top: 0; width: 100%; box-sizing: border-box;" + ); + warning.innerText = this.hass!.localize( + "ui.panel.lovelace.editor.view.panel_mode.warning_multiple_cards" + ); + this.appendChild(warning); + } } } diff --git a/src/panels/lovelace/views/hui-view.ts b/src/panels/lovelace/views/hui-view.ts index 33c14dfbd0..e0d7c087de 100644 --- a/src/panels/lovelace/views/hui-view.ts +++ b/src/panels/lovelace/views/hui-view.ts @@ -298,6 +298,7 @@ export class HUIView extends LitElement { wrapper.hass = this.hass; wrapper.lovelace = this.lovelace; wrapper.path = [this.index!, cardIndex]; + element.editMode = true; wrapper.appendChild(element); elementsToAppend.push(wrapper); }); diff --git a/src/translations/en.json b/src/translations/en.json index c36b5d606a..b1b057d4dd 100755 --- a/src/translations/en.json +++ b/src/translations/en.json @@ -2137,7 +2137,8 @@ "view": { "panel_mode": { "title": "Panel Mode?", - "description": "This renders the first card at full width; other cards in this view will not be rendered." + "description": "This renders the first card at full width; other cards in this view will not be rendered.", + "warning_multiple_cards": "This view contains more than one card, but a panel view can only show 1 card." } } }, @@ -2393,11 +2394,6 @@ "tabs": { "info": { "title": "Info", - "remove": "Remove", - "set": "Set", - "default_ui": "{action} {name} as default page on this device", - "lovelace_ui": "Go to the Lovelace UI", - "states_ui": "Go to the states UI", "home_assistant_logo": "Home Assistant logo", "path_configuration": "Path to configuration.yaml: {path}", "developed_by": "Developed by a bunch of awesome people.",