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

Sidebar view: Allow to move card position from UI (#9669)

Browse Source
This commit is contained in:
Bram Kragten 2021-08-01 18:17:34 +02:00 committed by GitHub
parent e07ac52356
commit 6fd85e043b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 27 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/panels/lovelace/components/hui-card-options.ts
View File

@ -59,11 +59,12 @@ export class HuiCardOptions extends LitElement {
)}</mwc-button )}</mwc-button
> >
<div> <div>
<slot name="buttons"></slot>
<mwc-icon-button <mwc-icon-button
title="Move card down" title="Move card down"
class="move-arrow" class="move-arrow"
@click=${this._cardDown} @click=${this._cardDown}
?disabled=${this.lovelace!.config.views[this.path![0]].cards! .disabled=${this.lovelace!.config.views[this.path![0]].cards!
.length === .length ===
this.path![1] + 1} this.path![1] + 1}
> >

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

@ -1,4 +1,4 @@
import { mdiPlus } from "@mdi/js"; import { mdiArrowLeft, mdiArrowRight, mdiPlus } from "@mdi/js";
import { import {
css, css,
CSSResultGroup, CSSResultGroup,
@ -18,6 +18,7 @@ import type {
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 { HuiCardOptions } from "../components/hui-card-options";
import { replaceCard } from "../editor/config-util";
import type { Lovelace, LovelaceCard } from "../types"; import type { Lovelace, LovelaceCard } from "../types";
export class SideBarView extends LitElement implements LovelaceViewElement { export class SideBarView extends LitElement implements LovelaceViewElement {
@ -155,6 +156,28 @@ export class SideBarView extends LitElement implements LovelaceViewElement {
element.lovelace = this.lovelace; element.lovelace = this.lovelace;
element.path = [this.index!, idx]; element.path = [this.index!, idx];
card.editMode = true; card.editMode = true;
const movePositionButton = document.createElement("mwc-icon-button");
movePositionButton.slot = "buttons";
const moveIcon = document.createElement("ha-svg-icon");
moveIcon.path =
cardConfig?.view_layout?.position !== "sidebar"
? mdiArrowRight
: mdiArrowLeft;
movePositionButton.appendChild(moveIcon);
movePositionButton.addEventListener("click", () => {
this.lovelace!.saveConfig(
replaceCard(this.lovelace!.config, [this.index!, idx], {
...cardConfig!,
view_layout: {
position:
cardConfig?.view_layout?.position !== "sidebar"
? "sidebar"
: "main",
},
})
);
});
element.appendChild(movePositionButton);
element.appendChild(card); element.appendChild(card);
} }
if (cardConfig?.view_layout?.position !== "sidebar") { if (cardConfig?.view_layout?.position !== "sidebar") {
@ -188,6 +211,7 @@ export class SideBarView extends LitElement implements LovelaceViewElement {
#sidebar { #sidebar {
flex-grow: 1; flex-grow: 1;
flex-shrink: 0;
max-width: 380px; max-width: 380px;
} }