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