mirror of
https://github.com/home-assistant/frontend.git
synced 2025-07-10 10:56:34 +00:00
Sidebar view: Allow to move card position from UI (#9669)
This commit is contained in:
parent
e07ac52356
commit
6fd85e043b
@ -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}
|
||||||
>
|
>
|
||||||
|
@ -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;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
Loading…
x
Reference in New Issue
Block a user