Handle edit mode for panel mode cards better (#8687)

This commit is contained in:
Bram Kragten 2021-03-26 15:46:15 +01:00 committed by GitHub
parent 47a3f649d2
commit 43e73d69de
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 17 additions and 16 deletions

View File

@ -31,9 +31,6 @@ 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 {
@ -94,10 +91,6 @@ export class HuiIframeCard extends LitElement implements LovelaceCard {
height: 100%;
}
:host([ispanel][editMode]) ha-card {
height: calc(100% - 51px);
}
ha-card {
overflow: hidden;
}

View File

@ -72,9 +72,6 @@ class HuiMapCard extends LitElement implements LovelaceCard {
@property({ type: Boolean, reflect: true })
public isPanel = false;
@property({ type: Boolean, reflect: true })
public editMode = false;
@property()
private _history?: HassEntity[][];
@ -658,10 +655,6 @@ class HuiMapCard extends LitElement implements LovelaceCard {
static get styles(): CSSResult {
return css`
:host([ispanel][editMode]) ha-card {
height: calc(100% - 51px);
}
ha-card {
overflow: hidden;
width: 100%;

View File

@ -10,6 +10,7 @@ import {
html,
LitElement,
property,
PropertyValues,
queryAssignedNodes,
TemplateResult,
} from "lit-element";
@ -39,9 +40,19 @@ export class HuiCardOptions extends LitElement {
return this._assignedNodes ? computeCardSize(this._assignedNodes[0]) : 1;
}
protected updated(changedProps: PropertyValues) {
if (!changedProps.has("path") || !this.path) {
return;
}
this.classList.toggle(
"panel",
this.lovelace!.config.views[this.path![0]].panel
);
}
protected render(): TemplateResult {
return html`
<slot></slot>
<div class="card"><slot></slot></div>
<ha-card>
<div class="card-actions">
<mwc-button @click=${this._editCard}
@ -108,10 +119,14 @@ export class HuiCardOptions extends LitElement {
outline: 2px solid var(--primary-color);
}
::slotted(*) {
:host:not(.panel) ::slotted(*) {
display: block;
}
:host(.panel) .card {
height: calc(100% - 59px);
}
ha-card {
border-top-right-radius: 0;
border-top-left-radius: 0;