jeans/frontend
jeans/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2025-04-26 06:17:20 +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
>
<div>
<slot name="buttons"></slot>
<mwc-icon-button
title="Move card down"
class="move-arrow"
@click=${this._cardDown}
?disabled=${this.lovelace!.config.views[this.path![0]].cards!
.disabled=${this.lovelace!.config.views[this.path![0]].cards!
.length ===
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 {
css,
CSSResultGroup,
@ -18,6 +18,7 @@ import type {
import type { HomeAssistant } from "../../../types";
import { HuiErrorCard } from "../cards/hui-error-card";
import { HuiCardOptions } from "../components/hui-card-options";
import { replaceCard } from "../editor/config-util";
import type { Lovelace, LovelaceCard } from "../types";
export class SideBarView extends LitElement implements LovelaceViewElement {
@ -155,6 +156,28 @@ export class SideBarView extends LitElement implements LovelaceViewElement {
element.lovelace = this.lovelace;
element.path = [this.index!, idx];
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);
}
if (cardConfig?.view_layout?.position !== "sidebar") {
@ -188,6 +211,7 @@ export class SideBarView extends LitElement implements LovelaceViewElement {
#sidebar {
flex-grow: 1;
flex-shrink: 0;
max-width: 380px;
}