mirror of
https://github.com/home-assistant/frontend.git
synced 2025-07-18 23:06:40 +00:00
Fix sidebar view edit mode (#9615)
This commit is contained in:
parent
f459abdf85
commit
a6312f4279
@ -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;
|
||||
}
|
||||
|
Loading…
x
Reference in New Issue
Block a user