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

Fix sidebar view edit mode (#9615)

Browse Source
This commit is contained in:
Bram Kragten 2021-07-27 00:11:34 +02:00 committed by GitHub
parent f459abdf85
commit a6312f4279
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 36 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

71
src/panels/lovelace/views/hui-sidebar-view.ts
View File

@ -17,10 +17,9 @@ import type {
} from "../../../data/lovelace";
import type { HomeAssistant } from "../../../types";
import { HuiErrorCard } from "../cards/hui-error-card";
import { HuiCardOptions } from "../components/hui-card-options";
import type { Lovelace, LovelaceCard } from "../types";
let editCodeLoaded = false;
export class SideBarView extends LitElement implements LovelaceViewElement {
@property({ attribute: false }) public hass!: HomeAssistant;
@ -43,8 +42,7 @@ export class SideBarView extends LitElement implements LovelaceViewElement {
public willUpdate(changedProperties: PropertyValues): void {
super.willUpdate(changedProperties);
if (this.lovelace?.editMode && !editCodeLoaded) {
editCodeLoaded = true;
if (this.lovelace?.editMode) {
import("./default-view-editable");
}
@ -71,7 +69,8 @@ export class SideBarView extends LitElement implements LovelaceViewElement {
protected render(): TemplateResult {
return html`
${this.lovelace?.editMode && this.cards.length === 0
<div class="container"></div>
${this.lovelace?.editMode
? html`
<ha-fab
.label=${this.hass!.localize(
@ -103,43 +102,41 @@ export class SideBarView extends LitElement implements LovelaceViewElement {
if (this.hasUpdated) {
const oldMain = this.renderRoot.querySelector("#main");
const oldSidebar = this.renderRoot.querySelector("#sidebar");
const container = this.renderRoot.querySelector(".container")!;
if (oldMain) {
this.renderRoot.removeChild(oldMain);
container.removeChild(oldMain);
}
if (oldSidebar) {
this.renderRoot.removeChild(oldSidebar);
container.removeChild(oldSidebar);
}
this.renderRoot.appendChild(mainDiv);
this.renderRoot.appendChild(sidebarDiv);
container.appendChild(mainDiv);
container.appendChild(sidebarDiv);
} else {
this.updateComplete.then(() => {
this.renderRoot.appendChild(mainDiv);
this.renderRoot.appendChild(sidebarDiv);
const container = this.renderRoot.querySelector(".container")!;
container.appendChild(mainDiv);
container.appendChild(sidebarDiv);
});
}
this.cards.forEach((card: LovelaceCard, idx) => {
const cardConfig = this._config?.cards?.[idx];
let element: LovelaceCard | HuiCardOptions;
if (this.isStrategy || !this.lovelace?.editMode) {
card.editMode = false;
if (cardConfig?.view_layout?.position !== "sidebar") {
mainDiv.appendChild(card);
} else {
sidebarDiv.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);
if (cardConfig?.view_layout?.position !== "sidebar") {
mainDiv.appendChild(card);
element = card;
} else {
sidebarDiv.appendChild(card);
element = document.createElement("hui-card-options");
element.hass = this.hass;
element.lovelace = this.lovelace;
element.path = [this.index!, idx];
card.editMode = true;
element.appendChild(card);
}
if (cardConfig?.view_layout?.position !== "sidebar") {
mainDiv.appendChild(element);
} else {
sidebarDiv.appendChild(element);
}
});
}
@ -147,13 +144,17 @@ export class SideBarView extends LitElement implements LovelaceViewElement {
static get styles(): CSSResultGroup {
return css`
:host {
display: flex;
display: block;
padding-top: 4px;
margin-left: 4px;
margin-right: 4px;
height: 100%;
box-sizing: border-box;
}
.container {
display: flex;
justify-content: center;
margin-left: 4px;
margin-right: 4px;
}
#main {
@ -166,18 +167,18 @@ export class SideBarView extends LitElement implements LovelaceViewElement {
max-width: 380px;
}
:host > div {
.container > div {
min-width: 0;
box-sizing: border-box;
}
:host > div > * {
.container > div > * {
display: block;
margin: var(--masonry-view-card-margin, 4px 4px 8px);
}
@media (max-width: 760px) {
:host {
.container {
flex-direction: column;
}
#sidebar {
@ -186,7 +187,7 @@ export class SideBarView extends LitElement implements LovelaceViewElement {
}
@media (max-width: 500px) {
:host > div > * {
.container > div > * {
margin-left: 0;
margin-right: 0;
}