Fix background on panel (#3713)

* Fix background on panel

* Make themes work on panel

* fix for tabs-hidden

* and still not gone...
This commit is contained in:
Bram Kragten 2019-09-16 23:03:16 +02:00 committed by Paulus Schoutsen
parent 3b51e55f2d
commit bf343647d4

View File

@ -42,8 +42,9 @@ import { HUIView } from "./hui-view";
import { createCardElement } from "./common/create-card-element"; import { createCardElement } from "./common/create-card-element";
import { showEditViewDialog } from "./editor/view-editor/show-edit-view-dialog"; import { showEditViewDialog } from "./editor/view-editor/show-edit-view-dialog";
import { showEditLovelaceDialog } from "./editor/lovelace-editor/show-edit-lovelace-dialog"; import { showEditLovelaceDialog } from "./editor/lovelace-editor/show-edit-lovelace-dialog";
import { Lovelace } from "./types"; import { Lovelace, LovelaceCard } from "./types";
import { afterNextRender } from "../../common/util/render-status"; import { afterNextRender } from "../../common/util/render-status";
import applyThemesOnElement from "../../common/dom/apply_themes_on_element";
import { haStyle } from "../../resources/styles"; import { haStyle } from "../../resources/styles";
import { computeRTLDirection } from "../../common/util/compute_rtl"; import { computeRTLDirection } from "../../common/util/compute_rtl";
import { loadLovelaceResources } from "./common/load-resources"; import { loadLovelaceResources } from "./common/load-resources";
@ -361,10 +362,22 @@ class HUIRoot extends LitElement {
position: relative; position: relative;
display: flex; display: flex;
} }
#view > * {
flex: 1;
width: 100%;
}
#view.tabs-hidden { #view.tabs-hidden {
min-height: calc(100vh - 64px); min-height: calc(100vh - 64px);
} }
#view > * { #panel {
background: var(--lovelace-background);
min-height: calc(100vh - 112px);
display: flex;
}
#panel.tabs-hidden {
min-height: calc(100vh - 64px);
}
#panel > * {
flex: 1; flex: 1;
width: 100%; width: 100%;
} }
@ -613,8 +626,15 @@ class HUIRoot extends LitElement {
view = this._viewCache![viewIndex]; view = this._viewCache![viewIndex];
} else { } else {
if (viewConfig.panel && viewConfig.cards && viewConfig.cards.length > 0) { if (viewConfig.panel && viewConfig.cards && viewConfig.cards.length > 0) {
view = createCardElement(viewConfig.cards[0]); view = document.createElement("div");
view.isPanel = true; 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);
} else { } else {
view = document.createElement("hui-view"); view = document.createElement("hui-view");
view.lovelace = this.lovelace; view.lovelace = this.lovelace;