jeans/frontend
jeans/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2025-07-23 17:26:42 +00:00
Code Issues Packages Projects Releases Wiki Activity

Make panel-view it's own component (#3747)

Browse Source 
* Make panel-view it's own component

* Convert to updatingelement
This commit is contained in:
Bram Kragten 2019-09-18 13:54:21 +02:00 committed by GitHub
parent 54beaad7e5
commit 29dff42de4
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 76 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

64
src/panels/lovelace/hui-panel-view.ts Normal file
View File

@ -0,0 +1,64 @@
import {
property,
PropertyValues,
customElement,
UpdatingElement,
} from "lit-element";
import applyThemesOnElement from "../../common/dom/apply_themes_on_element";
import { HomeAssistant } from "../../types";
import { LovelaceCard } from "./types";
import { createCardElement } from "./common/create-card-element";
import { LovelaceViewConfig } from "../../data/lovelace";
@customElement("hui-panel-view")
export class HUIPanelView extends UpdatingElement {
@property() public hass?: HomeAssistant;
@property() public config?: LovelaceViewConfig;
protected firstUpdated(changedProperties: PropertyValues): void {
super.firstUpdated(changedProperties);
this.style.setProperty("background", "var(--lovelace-background)");
}
protected updated(changedProperties: PropertyValues): void {
super.updated(changedProperties);
const hass = this.hass!;
const hassChanged = changedProperties.has("hass");
const oldHass = changedProperties.get("hass") as this["hass"] | undefined;
if (changedProperties.has("config")) {
this._createCard();
} else if (hassChanged) {
(this.lastChild! as LovelaceCard).hass = this.hass;
}
if (
hassChanged &&
oldHass &&
(hass.themes !== oldHass.themes ||
hass.selectedTheme !== oldHass.selectedTheme)
) {
applyThemesOnElement(this, hass.themes, this.config!.theme);
}
}
private _createCard(): void {
if (this.lastChild) {
this.removeChild(this.lastChild);
}
const card: LovelaceCard = createCardElement(this.config!.cards![0]);
card.hass = this.hass;
card.isPanel = true;
this.append(card);
}
}
declare global {
interface HTMLElementTagNameMap {
"hui-panel-view": HUIPanelView;
}
}

38
src/panels/lovelace/hui-root.ts
View File

@ -39,12 +39,13 @@ import "./hui-view";
// Not a duplicate import, this one is for type
// tslint:disable-next-line
import { HUIView } from "./hui-view";
import { createCardElement } from "./common/create-card-element";
import "./hui-panel-view";
// tslint:disable-next-line
import { HUIPanelView } from "./hui-panel-view";
import { showEditViewDialog } from "./editor/view-editor/show-edit-view-dialog";
import { showEditLovelaceDialog } from "./editor/lovelace-editor/show-edit-lovelace-dialog";
import { Lovelace, LovelaceCard } from "./types";
import { Lovelace } from "./types";
import { afterNextRender } from "../../common/util/render-status";
import applyThemesOnElement from "../../common/dom/apply_themes_on_element";
import { haStyle } from "../../resources/styles";
import { computeRTLDirection } from "../../common/util/compute_rtl";
import { loadLovelaceResources } from "./common/load-resources";
@ -369,18 +370,6 @@ class HUIRoot extends LitElement {
#view.tabs-hidden {
min-height: calc(100vh - 64px);
}
#panel {
background: var(--lovelace-background);
min-height: calc(100vh - 112px);
display: flex;
}
#panel.tabs-hidden {
min-height: calc(100vh - 64px);
}
#panel > * {
flex: 1;
width: 100%;
}
paper-item {
cursor: pointer;
}
@ -392,9 +381,13 @@ class HUIRoot extends LitElement {
super.updated(changedProperties);
const view = this._viewRoot;
const huiView = view.lastChild as HUIView;
const huiView = view.lastChild as HUIView | HUIPanelView;
if (changedProperties.has("columns") && huiView) {
if (
changedProperties.has("columns") &&
huiView &&
huiView instanceof HUIView
) {
huiView.columns = this.columns;
}
@ -627,15 +620,8 @@ class HUIRoot extends LitElement {
view = this._viewCache![viewIndex];
} else {
if (viewConfig.panel && viewConfig.cards && viewConfig.cards.length > 0) {
view = document.createElement("div");
view.id = "panel";
if (viewConfig.theme) {
applyThemesOnElement(view, this.hass!.themes, viewConfig.theme);
}
const card = createCardElement(viewConfig.cards[0]);
card.hass = this.hass;
(card as LovelaceCard).isPanel = true;
view.append(card);
view = document.createElement("hui-panel-view");
view.config = viewConfig;
} else {
view = document.createElement("hui-view");
view.lovelace = this.lovelace;