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

Update drag icon (#27514)

Browse Source
This commit is contained in:
Paul Bottein
2025-10-16 11:33:25 +02:00
committed by GitHub
parent 46d0eb4f44
commit d4c98cae3a
20 changed files with 91 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/data-table/dialog-data-table-settings.ts
View File

@@ -1,4 +1,4 @@
import { mdiDrag, mdiEye, mdiEyeOff } from "@mdi/js"; import { mdiDragHorizontalVariant, mdiEye, mdiEyeOff } from "@mdi/js";
import type { CSSResultGroup } from "lit"; import type { CSSResultGroup } from "lit";
import { LitElement, css, html, nothing } from "lit"; import { LitElement, css, html, nothing } from "lit";
import { customElement, property, state } from "lit/decorators"; import { customElement, property, state } from "lit/decorators";
@@ -129,7 +129,7 @@ export class DialogDataTableSettings extends LitElement {
${canMove && isVisible ${canMove && isVisible
? html`<ha-svg-icon ? html`<ha-svg-icon
class="handle" class="handle"
.path=${mdiDrag} .path=${mdiDragHorizontalVariant}
slot="graphic" slot="graphic"
></ha-svg-icon>` ></ha-svg-icon>`
: nothing} : nothing}

6
src/components/entity/ha-entities-picker.ts
View File

@@ -1,13 +1,13 @@
import { mdiDrag } from "@mdi/js"; import { mdiDragHorizontalVariant } from "@mdi/js";
import { css, html, LitElement, nothing } from "lit"; import { css, html, LitElement, nothing } from "lit";
import { customElement, property } from "lit/decorators"; import { customElement, property } from "lit/decorators";
import memoizeOne from "memoize-one"; import memoizeOne from "memoize-one";
import { fireEvent } from "../../common/dom/fire_event"; import { fireEvent } from "../../common/dom/fire_event";
import { isValidEntityId } from "../../common/entity/valid_entity_id"; import { isValidEntityId } from "../../common/entity/valid_entity_id";
import type { HaEntityPickerEntityFilterFunc } from "../../data/entity";
import type { HomeAssistant, ValueChangedEvent } from "../../types"; import type { HomeAssistant, ValueChangedEvent } from "../../types";
import "../ha-sortable"; import "../ha-sortable";
import "./ha-entity-picker"; import "./ha-entity-picker";
import type { HaEntityPickerEntityFilterFunc } from "../../data/entity";
@customElement("ha-entities-picker") @customElement("ha-entities-picker")
class HaEntitiesPicker extends LitElement { class HaEntitiesPicker extends LitElement {
@@ -118,7 +118,7 @@ class HaEntitiesPicker extends LitElement {
? html` ? html`
<ha-svg-icon <ha-svg-icon
class="entity-handle" class="entity-handle"
.path=${mdiDrag} .path=${mdiDragHorizontalVariant}
></ha-svg-icon> ></ha-svg-icon>
` `
: nothing} : nothing}

7
src/components/entity/ha-entity-name-picker.ts
View File

@@ -1,5 +1,5 @@
import "@material/mwc-menu/mwc-menu-surface"; import "@material/mwc-menu/mwc-menu-surface";
import { mdiDrag, mdiPlus } from "@mdi/js"; import { mdiDragHorizontalVariant, mdiPlus } from "@mdi/js";
import type { ComboBoxLitRenderer } from "@vaadin/combo-box/lit"; import type { ComboBoxLitRenderer } from "@vaadin/combo-box/lit";
import type { IFuseOptions } from "fuse.js"; import type { IFuseOptions } from "fuse.js";
import Fuse from "fuse.js"; import Fuse from "fuse.js";
@@ -201,7 +201,10 @@ export class HaEntityNamePicker extends LitElement {
.disabled=${this.disabled} .disabled=${this.disabled}
class=${!isValid ? "invalid" : ""} class=${!isValid ? "invalid" : ""}
> >
<ha-svg-icon slot="icon" .path=${mdiDrag}></ha-svg-icon> <ha-svg-icon
slot="icon"
.path=${mdiDragHorizontalVariant}
></ha-svg-icon>
<span>${label}</span> <span>${label}</span>
</ha-input-chip> </ha-input-chip>
`; `;

7
src/components/entity/ha-entity-state-content-picker.ts
View File

@@ -1,4 +1,4 @@
import { mdiDrag } from "@mdi/js"; import { mdiDragHorizontalVariant } from "@mdi/js";
import type { HassEntity } from "home-assistant-js-websocket"; import type { HassEntity } from "home-assistant-js-websocket";
import type { PropertyValues } from "lit"; import type { PropertyValues } from "lit";
import { LitElement, css, html, nothing } from "lit"; import { LitElement, css, html, nothing } from "lit";
@@ -195,7 +195,10 @@ class HaEntityStatePicker extends LitElement {
.label=${label} .label=${label}
selected selected
> >
<ha-svg-icon slot="icon" .path=${mdiDrag}></ha-svg-icon> <ha-svg-icon
slot="icon"
.path=${mdiDragHorizontalVariant}
></ha-svg-icon>
${label} ${label}
</ha-input-chip> </ha-input-chip>
`; `;

4
src/components/ha-areas-floors-display-editor.ts
View File

@@ -1,4 +1,4 @@
import { mdiDrag, mdiTextureBox } from "@mdi/js"; import { mdiDragHorizontalVariant, mdiTextureBox } from "@mdi/js";
import type { TemplateResult } from "lit"; import type { TemplateResult } from "lit";
import { LitElement, css, html, nothing } from "lit"; import { LitElement, css, html, nothing } from "lit";
import { customElement, property } from "lit/decorators"; import { customElement, property } from "lit/decorators";
@@ -105,7 +105,7 @@ export class HaAreasFloorsDisplayEditor extends LitElement {
<ha-svg-icon <ha-svg-icon
class="handle" class="handle"
slot="icons" slot="icons"
.path=${mdiDrag} .path=${mdiDragHorizontalVariant}
></ha-svg-icon> ></ha-svg-icon>
`} `}
<ha-items-display-editor <ha-items-display-editor

4
src/components/ha-items-display-editor.ts
View File

@@ -1,5 +1,5 @@
import { ResizeController } from "@lit-labs/observers/resize-controller"; import { ResizeController } from "@lit-labs/observers/resize-controller";
import { mdiDrag, mdiEye, mdiEyeOff } from "@mdi/js"; import { mdiDragHorizontalVariant, mdiEye, mdiEyeOff } from "@mdi/js";
import type { TemplateResult } from "lit"; import type { TemplateResult } from "lit";
import { LitElement, css, html, nothing } from "lit"; import { LitElement, css, html, nothing } from "lit";
import { customElement, property, state } from "lit/decorators"; import { customElement, property, state } from "lit/decorators";
@@ -178,7 +178,7 @@ export class HaItemDisplayEditor extends LitElement {
? this._dragHandleKeydown ? this._dragHandleKeydown
: undefined} : undefined}
class="handle" class="handle"
.path=${mdiDrag} .path=${mdiDragHorizontalVariant}
slot="end" slot="end"
></ha-svg-icon> ></ha-svg-icon>
` `

9
src/components/ha-selector/ha-selector-object.ts
View File

@@ -1,4 +1,9 @@
import { mdiClose, mdiDelete, mdiDrag, mdiPencil } from "@mdi/js"; import {
mdiClose,
mdiDelete,
mdiDragHorizontalVariant,
mdiPencil,
} from "@mdi/js";
import { css, html, LitElement, nothing, type PropertyValues } from "lit"; import { css, html, LitElement, nothing, type PropertyValues } from "lit";
import { customElement, property, query } from "lit/decorators"; import { customElement, property, query } from "lit/decorators";
import memoizeOne from "memoize-one"; import memoizeOne from "memoize-one";
@@ -92,7 +97,7 @@ export class HaObjectSelector extends LitElement {
? html` ? html`
<ha-svg-icon <ha-svg-icon
class="handle" class="handle"
.path=${mdiDrag} .path=${mdiDragHorizontalVariant}
slot="start" slot="start"
></ha-svg-icon> ></ha-svg-icon>
` `

4
src/components/ha-selector/ha-selector-select.ts
View File

@@ -1,4 +1,4 @@
import { mdiDrag } from "@mdi/js"; import { mdiDragHorizontalVariant } from "@mdi/js";
import { LitElement, css, html, nothing } from "lit"; import { LitElement, css, html, nothing } from "lit";
import { customElement, property, query } from "lit/decorators"; import { customElement, property, query } from "lit/decorators";
import { repeat } from "lit/directives/repeat"; import { repeat } from "lit/directives/repeat";
@@ -197,7 +197,7 @@ export class HaSelectSelector extends LitElement {
? html` ? html`
<ha-svg-icon <ha-svg-icon
slot="icon" slot="icon"
.path=${mdiDrag} .path=${mdiDragHorizontalVariant}
></ha-svg-icon> ></ha-svg-icon>
` `
: nothing} : nothing}

6
src/panels/config/automation/action/ha-automation-action.ts
View File

@@ -1,4 +1,4 @@
import { mdiDrag, mdiPlus } from "@mdi/js"; import { mdiDragHorizontalVariant, mdiPlus } from "@mdi/js";
import deepClone from "deep-clone-simple"; import deepClone from "deep-clone-simple";
import type { PropertyValues } from "lit"; import type { PropertyValues } from "lit";
import { LitElement, html, nothing } from "lit"; import { LitElement, html, nothing } from "lit";
@@ -115,7 +115,9 @@ export default class HaAutomationAction extends LitElement {
@click=${stopPropagation} @click=${stopPropagation}
.index=${idx} .index=${idx}
> >
<ha-svg-icon .path=${mdiDrag}></ha-svg-icon> <ha-svg-icon
.path=${mdiDragHorizontalVariant}
></ha-svg-icon>
</div> </div>
` `
: nothing} : nothing}

6
src/panels/config/automation/condition/ha-automation-condition.ts
View File

@@ -1,4 +1,4 @@
import { mdiDrag, mdiPlus } from "@mdi/js"; import { mdiDragHorizontalVariant, mdiPlus } from "@mdi/js";
import deepClone from "deep-clone-simple"; import deepClone from "deep-clone-simple";
import type { PropertyValues } from "lit"; import type { PropertyValues } from "lit";
import { html, LitElement, nothing } from "lit"; import { html, LitElement, nothing } from "lit";
@@ -193,7 +193,9 @@ export default class HaAutomationCondition extends LitElement {
@click=${stopPropagation} @click=${stopPropagation}
.index=${idx} .index=${idx}
> >
<ha-svg-icon .path=${mdiDrag}></ha-svg-icon> <ha-svg-icon
.path=${mdiDragHorizontalVariant}
></ha-svg-icon>
</div> </div>
` `
: nothing} : nothing}

6
src/panels/config/automation/option/ha-automation-option.ts
View File

@@ -1,4 +1,4 @@
import { mdiDrag, mdiPlus } from "@mdi/js"; import { mdiDragHorizontalVariant, mdiPlus } from "@mdi/js";
import deepClone from "deep-clone-simple"; import deepClone from "deep-clone-simple";
import type { PropertyValues } from "lit"; import type { PropertyValues } from "lit";
import { LitElement, css, html, nothing } from "lit"; import { LitElement, css, html, nothing } from "lit";
@@ -100,7 +100,9 @@ export default class HaAutomationOption extends LitElement {
@click=${stopPropagation} @click=${stopPropagation}
.index=${idx} .index=${idx}
> >
<ha-svg-icon .path=${mdiDrag}></ha-svg-icon> <ha-svg-icon
.path=${mdiDragHorizontalVariant}
></ha-svg-icon>
</div> </div>
` `
: nothing} : nothing}

6
src/panels/config/automation/trigger/ha-automation-trigger.ts
View File

@@ -1,4 +1,4 @@
import { mdiDrag, mdiPlus } from "@mdi/js"; import { mdiDragHorizontalVariant, mdiPlus } from "@mdi/js";
import deepClone from "deep-clone-simple"; import deepClone from "deep-clone-simple";
import type { PropertyValues } from "lit"; import type { PropertyValues } from "lit";
import { html, LitElement, nothing } from "lit"; import { html, LitElement, nothing } from "lit";
@@ -110,7 +110,9 @@ export default class HaAutomationTrigger extends LitElement {
@click=${stopPropagation} @click=${stopPropagation}
.index=${idx} .index=${idx}
> >
<ha-svg-icon .path=${mdiDrag}></ha-svg-icon> <ha-svg-icon
.path=${mdiDragHorizontalVariant}
></ha-svg-icon>
</div> </div>
` `
: nothing} : nothing}

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

@@ -1,4 +1,10 @@
import { mdiDelete, mdiDevices, mdiDrag, mdiPencil, mdiPlus } from "@mdi/js"; import {
mdiDelete,
mdiDevices,
mdiDragHorizontalVariant,
mdiPencil,
mdiPlus,
} 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";
@@ -89,7 +95,9 @@ export class EnergyDeviceSettings extends LitElement {
(device) => html` (device) => html`
<div class="row" .device=${device}> <div class="row" .device=${device}>
<div class="handle"> <div class="handle">
<ha-svg-icon .path=${mdiDrag}></ha-svg-icon> <ha-svg-icon
.path=${mdiDragHorizontalVariant}
></ha-svg-icon>
</div> </div>
<span class="content" <span class="content"
>${device.name || >${device.name ||

6
src/panels/config/helpers/forms/ha-input_select-form.ts
View File

@@ -1,4 +1,4 @@
import { mdiDelete, mdiDrag } from "@mdi/js"; import { mdiDelete, mdiDragHorizontalVariant } from "@mdi/js";
import type { CSSResultGroup } from "lit"; import type { CSSResultGroup } from "lit";
import { LitElement, css, html, nothing } from "lit"; import { LitElement, css, html, nothing } from "lit";
import { customElement, property, query, state } from "lit/decorators"; import { customElement, property, query, state } from "lit/decorators";
@@ -111,7 +111,9 @@ class HaInputSelectForm extends LitElement {
<ha-list-item class="option" hasMeta> <ha-list-item class="option" hasMeta>
<div class="optioncontent"> <div class="optioncontent">
<div class="handle"> <div class="handle">
<ha-svg-icon .path=${mdiDrag}></ha-svg-icon> <ha-svg-icon
.path=${mdiDragHorizontalVariant}
></ha-svg-icon>
</div> </div>
${option} ${option}
</div> </div>

4
src/panels/lovelace/cards/hui-todo-list-card.ts
View File

@@ -5,7 +5,7 @@ import {
mdiDelete, mdiDelete,
mdiDeleteSweep, mdiDeleteSweep,
mdiDotsVertical, mdiDotsVertical,
mdiDrag, mdiDragHorizontalVariant,
mdiPlus, mdiPlus,
mdiSort, mdiSort,
} from "@mdi/js"; } from "@mdi/js";
@@ -522,7 +522,7 @@ export class HuiTodoListCard extends LitElement implements LovelaceCard {
"ui.panel.lovelace.cards.todo-list.drag_and_drop" "ui.panel.lovelace.cards.todo-list.drag_and_drop"
)} )}
class="reorderButton handle" class="reorderButton handle"
.path=${mdiDrag} .path=${mdiDragHorizontalVariant}
slot="meta" slot="meta"
> >
</ha-svg-icon> </ha-svg-icon>

12
src/panels/lovelace/components/hui-entity-editor.ts
View File

@@ -1,4 +1,4 @@
import { mdiClose, mdiDrag, mdiPencil } from "@mdi/js"; import { mdiClose, mdiDragHorizontalVariant, mdiPencil } from "@mdi/js";
import { css, html, LitElement, nothing } from "lit"; import { css, html, LitElement, nothing } from "lit";
import { customElement, property } from "lit/decorators"; import { customElement, property } from "lit/decorators";
import { repeat } from "lit/directives/repeat"; import { repeat } from "lit/directives/repeat";
@@ -66,7 +66,11 @@ export class HuiEntityEditor extends LitElement {
return html` return html`
<ha-md-list-item class="item"> <ha-md-list-item class="item">
<ha-svg-icon class="handle" .path=${mdiDrag} slot="start"></ha-svg-icon> <ha-svg-icon
class="handle"
.path=${mdiDragHorizontalVariant}
slot="start"
></ha-svg-icon>
<div slot="headline" class="label">${primary}</div> <div slot="headline" class="label">${primary}</div>
${secondary ${secondary
@@ -152,7 +156,9 @@ export class HuiEntityEditor extends LitElement {
(entityConf, index) => html` (entityConf, index) => html`
<div class="entity" data-entity-id=${entityConf.entity}> <div class="entity" data-entity-id=${entityConf.entity}>
<div class="handle"> <div class="handle">
<ha-svg-icon .path=${mdiDrag}></ha-svg-icon> <ha-svg-icon
.path=${mdiDragHorizontalVariant}
></ha-svg-icon>
</div> </div>
<ha-entity-picker <ha-entity-picker
.hass=${this.hass} .hass=${this.hass}

4
src/panels/lovelace/components/hui-section-edit-mode.ts
View File

@@ -1,4 +1,4 @@
import { mdiDelete, mdiDrag, mdiPencil } from "@mdi/js"; import { mdiDelete, mdiDragHorizontalVariant, mdiPencil } from "@mdi/js";
import type { CSSResultGroup, TemplateResult } from "lit"; import type { CSSResultGroup, TemplateResult } from "lit";
import { LitElement, css, html } from "lit"; import { LitElement, css, html } from "lit";
import { customElement, property } from "lit/decorators"; import { customElement, property } from "lit/decorators";
@@ -31,7 +31,7 @@ export class HuiSectionEditMode extends LitElement {
<ha-svg-icon <ha-svg-icon
aria-hidden="true" aria-hidden="true"
class="handle" class="handle"
.path=${mdiDrag} .path=${mdiDragHorizontalVariant}
></ha-svg-icon> ></ha-svg-icon>
<ha-icon-button <ha-icon-button
.label=${this.hass.localize("ui.common.edit")} .label=${this.hass.localize("ui.common.edit")}

11
src/panels/lovelace/editor/config-elements/hui-card-features-editor.ts
View File

@@ -1,4 +1,9 @@
import { mdiDelete, mdiDrag, mdiPencil, mdiPlus } from "@mdi/js"; import {
mdiDelete,
mdiDragHorizontalVariant,
mdiPencil,
mdiPlus,
} from "@mdi/js";
import { LitElement, css, html, nothing } from "lit"; import { LitElement, css, html, nothing } from "lit";
import { customElement, property } from "lit/decorators"; import { customElement, property } from "lit/decorators";
import { repeat } from "lit/directives/repeat"; import { repeat } from "lit/directives/repeat";
@@ -345,7 +350,9 @@ export class HuiCardFeaturesEditor extends LitElement {
return html` return html`
<div class="feature"> <div class="feature">
<div class="handle"> <div class="handle">
<ha-svg-icon .path=${mdiDrag}></ha-svg-icon> <ha-svg-icon
.path=${mdiDragHorizontalVariant}
></ha-svg-icon>
</div> </div>
<div class="feature-content"> <div class="feature-content">
<div> <div>

11
src/panels/lovelace/editor/config-elements/hui-heading-badges-editor.ts
View File

@@ -1,5 +1,10 @@
import "@material/mwc-menu/mwc-menu-surface"; import "@material/mwc-menu/mwc-menu-surface";
import { mdiDelete, mdiDrag, mdiPencil, mdiPlus } from "@mdi/js"; import {
mdiDelete,
mdiDragHorizontalVariant,
mdiPencil,
mdiPlus,
} from "@mdi/js";
import type { ComboBoxLightOpenedChangedEvent } from "@vaadin/combo-box/vaadin-combo-box-light"; import type { ComboBoxLightOpenedChangedEvent } from "@vaadin/combo-box/vaadin-combo-box-light";
import { LitElement, css, html, nothing } from "lit"; import { LitElement, css, html, nothing } from "lit";
import { customElement, property, query, state } from "lit/decorators"; import { customElement, property, query, state } from "lit/decorators";
@@ -86,7 +91,9 @@ export class HuiHeadingBadgesEditor extends LitElement {
return html` return html`
<div class="badge"> <div class="badge">
<div class="handle"> <div class="handle">
<ha-svg-icon .path=${mdiDrag}></ha-svg-icon> <ha-svg-icon
.path=${mdiDragHorizontalVariant}
></ha-svg-icon>
</div> </div>
<div class="badge-content"> <div class="badge-content">
<span>${label}</span> <span>${label}</span>

4
src/panels/lovelace/editor/hui-entities-card-row-editor.ts
View File

@@ -1,4 +1,4 @@
import { mdiClose, mdiDrag, mdiPencil } from "@mdi/js"; import { mdiClose, mdiDragHorizontalVariant, mdiPencil } from "@mdi/js";
import { LitElement, css, html, nothing } from "lit"; import { LitElement, css, html, nothing } from "lit";
import { customElement, property } from "lit/decorators"; import { customElement, property } from "lit/decorators";
import { repeat } from "lit/directives/repeat"; import { repeat } from "lit/directives/repeat";
@@ -59,7 +59,7 @@ export class HuiEntitiesCardRowEditor extends LitElement {
(entityConf, index) => html` (entityConf, index) => html`
<div class="entity"> <div class="entity">
<div class="handle"> <div class="handle">
<ha-svg-icon .path=${mdiDrag}></ha-svg-icon> <ha-svg-icon .path=${mdiDragHorizontalVariant}></ha-svg-icon>
</div> </div>
${entityConf.type ${entityConf.type
? html` ? html`