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

Use handle icon for drag and drop in energy devices settings (#23933)

Browse Source 
* Use handle icon for drag and drop in energy devices settings

* Remove import
This commit is contained in:
Paul Bottein 2025-01-29 12:04:09 +01:00 committed by GitHub
parent 5feffd08ff
commit dd64d88afe
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 28 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

65
src/panels/config/energy/components/ha-energy-device-settings.ts
View File

@ -1,5 +1,5 @@
import "@material/mwc-button/mwc-button"; import "@material/mwc-button/mwc-button";
import { mdiDelete, mdiDevices, mdiPencil } from "@mdi/js"; import { mdiDelete, mdiDevices, mdiDrag, mdiPencil } from "@mdi/js";
import type { CSSResultGroup, TemplateResult } from "lit"; import type { CSSResultGroup, TemplateResult } from "lit";
import { css, html, LitElement } from "lit"; import { css, html, LitElement } from "lit";
import { repeat } from "lit/directives/repeat"; import { repeat } from "lit/directives/repeat";
@ -7,7 +7,6 @@ import { customElement, property } from "lit/decorators";
import { fireEvent } from "../../../../common/dom/fire_event"; import { fireEvent } from "../../../../common/dom/fire_event";
import "../../../../components/ha-card"; import "../../../../components/ha-card";
import "../../../../components/ha-icon-button"; import "../../../../components/ha-icon-button";
import "../../../../components/ha-state-icon";
import "../../../../components/ha-sortable"; import "../../../../components/ha-sortable";
import "../../../../components/ha-svg-icon"; import "../../../../components/ha-svg-icon";
import type { import type {
@ -82,45 +81,37 @@ export class EnergyDeviceSettings extends LitElement {
"ui.panel.config.energy.device_consumption.devices" "ui.panel.config.energy.device_consumption.devices"
)} )}
</h3> </h3>
<ha-sortable <ha-sortable handle-selector=".handle" @item-moved=${this._itemMoved}>
handle-selector=".row"
@item-moved=${this._itemMoved}
filter="ha-icon-button"
>
<div class="devices"> <div class="devices">
${repeat( ${repeat(
this.preferences.device_consumption, this.preferences.device_consumption,
(device) => device.stat_consumption, (device) => device.stat_consumption,
(device) => { (device) => html`
const entityState = this.hass.states[device.stat_consumption]; <div class="row" .device=${device}>
return html` <div class="handle">
<div class="row" .device=${device}> <ha-svg-icon .path=${mdiDrag}></ha-svg-icon>
<ha-state-icon
.hass=${this.hass}
.stateObj=${entityState}
></ha-state-icon>
<span class="content"
>${device.name ||
getStatisticLabel(
this.hass,
device.stat_consumption,
this.statsMetadata?.[device.stat_consumption]
)}</span
>
<ha-icon-button
.label=${this.hass.localize("ui.common.edit")}
@click=${this._editDevice}
.path=${mdiPencil}
></ha-icon-button>
<ha-icon-button
.label=${this.hass.localize("ui.common.delete")}
@click=${this._deleteDevice}
.device=${device}
.path=${mdiDelete}
></ha-icon-button>
</div> </div>
`; <span class="content"
} >${device.name ||
getStatisticLabel(
this.hass,
device.stat_consumption,
this.statsMetadata?.[device.stat_consumption]
)}</span
>
<ha-icon-button
.label=${this.hass.localize("ui.common.edit")}
@click=${this._editDevice}
.path=${mdiPencil}
></ha-icon-button>
<ha-icon-button
.label=${this.hass.localize("ui.common.delete")}
@click=${this._deleteDevice}
.device=${device}
.path=${mdiDelete}
></ha-icon-button>
</div>
`
)} )}
</div> </div>
</ha-sortable> </ha-sortable>
@ -218,7 +209,7 @@ export class EnergyDeviceSettings extends LitElement {
haStyle, haStyle,
energyCardStyles, energyCardStyles,
css` css`
.row { .handle {
cursor: move; /* fallback if grab cursor is unsupported */ cursor: move; /* fallback if grab cursor is unsupported */
cursor: grab; cursor: grab;
} }