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

Enable drag and drop on mobile for automations (#26805)

Browse Source
This commit is contained in:
Bram Kragten
2025-09-01 14:09:13 +02:00
parent eb5d1c79c8
commit d2cea159af
5 changed files with 14 additions and 85 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -6,7 +6,6 @@ import { customElement, property, queryAll, state } from "lit/decorators";
import { repeat } from "lit/directives/repeat";
import { storage } from "../../../../common/decorators/storage";
import { fireEvent } from "../../../../common/dom/fire_event";
import { listenMediaQuery } from "../../../../common/dom/media_query";
import { nextRender } from "../../../../common/util/render-status";
import "../../../../components/ha-button";
import "../../../../components/ha-sortable";
@@ -46,8 +45,6 @@ export default class HaAutomationAction extends LitElement {
@property({ type: Boolean, attribute: "sidebar" }) public optionsInSidebar =
false;
@state() private _showReorder = false;
@state() private _rowSortSelected?: number;
@state()
@@ -68,27 +65,12 @@ export default class HaAutomationAction extends LitElement {
private _actionKeys = new WeakMap<Action, string>();
private _unsubMql?: () => void;
public connectedCallback() {
super.connectedCallback();
this._unsubMql = listenMediaQuery("(min-width: 600px)", (matches) => {
this._showReorder = matches;
});
}
public disconnectedCallback() {
super.disconnectedCallback();
this._unsubMql?.();
this._unsubMql = undefined;
}
protected render() {
return html`
<ha-sortable
handle-selector=".handle"
draggable-selector="ha-automation-action-row"
.disabled=${!this._showReorder || this.disabled}
.disabled=${this.disabled}
group="actions"
invert-swap
@item-moved=${this._actionMoved}
@@ -120,7 +102,7 @@ export default class HaAutomationAction extends LitElement {
.sortSelected=${this._rowSortSelected === idx}
@stop-sort-selection=${this._stopSortSelection}
>
${this._showReorder && !this.disabled
${!this.disabled
? html`
<div
tabindex="0"

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

@@ -6,7 +6,6 @@ import { customElement, property, queryAll, state } from "lit/decorators";
import { repeat } from "lit/directives/repeat";
import { storage } from "../../../../common/decorators/storage";
import { fireEvent } from "../../../../common/dom/fire_event";
import { listenMediaQuery } from "../../../../common/dom/media_query";
import { nextRender } from "../../../../common/util/render-status";
import "../../../../components/ha-button";
import "../../../../components/ha-button-menu";
@@ -44,8 +43,6 @@ export default class HaAutomationCondition extends LitElement {
@property({ type: Boolean, attribute: "sidebar" }) public optionsInSidebar =
false;
@state() private _showReorder = false;
@state() private _rowSortSelected?: number;
@state()
@@ -66,21 +63,6 @@ export default class HaAutomationCondition extends LitElement {
private _conditionKeys = new WeakMap<Condition, string>();
private _unsubMql?: () => void;
public connectedCallback() {
super.connectedCallback();
this._unsubMql = listenMediaQuery("(min-width: 600px)", (matches) => {
this._showReorder = matches;
});
}
public disconnectedCallback() {
super.disconnectedCallback();
this._unsubMql?.();
this._unsubMql = undefined;
}
protected updated(changedProperties: PropertyValues) {
if (!changedProperties.has("conditions")) {
return;
@@ -165,7 +147,7 @@ export default class HaAutomationCondition extends LitElement {
<ha-sortable
handle-selector=".handle"
draggable-selector="ha-automation-condition-row"
.disabled=${!this._showReorder || this.disabled}
.disabled=${this.disabled}
group="conditions"
invert-swap
@item-moved=${this._conditionMoved}
@@ -198,7 +180,7 @@ export default class HaAutomationCondition extends LitElement {
.sortSelected=${this._rowSortSelected === idx}
@stop-sort-selection=${this._stopSortSelection}
>
${this._showReorder && !this.disabled
${!this.disabled
? html`
<div
tabindex="0"

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

@@ -6,7 +6,6 @@ import { customElement, property, queryAll, state } from "lit/decorators";
import { repeat } from "lit/directives/repeat";
import { storage } from "../../../../common/decorators/storage";
import { fireEvent } from "../../../../common/dom/fire_event";
import { listenMediaQuery } from "../../../../common/dom/media_query";
import { nextRender } from "../../../../common/util/render-status";
import "../../../../components/ha-button";
import "../../../../components/ha-sortable";
@@ -35,8 +34,6 @@ export default class HaAutomationOption extends LitElement {
@property({ type: Boolean, attribute: "show-default" })
public showDefaultActions = false;
@state() private _showReorder = false;
@state() private _rowSortSelected?: number;
@state()
@@ -57,27 +54,12 @@ export default class HaAutomationOption extends LitElement {
private _optionsKeys = new WeakMap<Option, string>();
private _unsubMql?: () => void;
public connectedCallback() {
super.connectedCallback();
this._unsubMql = listenMediaQuery("(min-width: 600px)", (matches) => {
this._showReorder = matches;
});
}
public disconnectedCallback() {
super.disconnectedCallback();
this._unsubMql?.();
this._unsubMql = undefined;
}
protected render() {
return html`
<ha-sortable
handle-selector=".handle"
draggable-selector="ha-automation-option-row"
.disabled=${!this._showReorder || this.disabled}
.disabled=${this.disabled}
group="options"
invert-swap
@item-moved=${this._optionMoved}
@@ -107,7 +89,7 @@ export default class HaAutomationOption extends LitElement {
.sortSelected=${this._rowSortSelected === idx}
@stop-sort-selection=${this._stopSortSelection}
>
${this._showReorder && !this.disabled
${!this.disabled
? html`
<div
tabindex="0"

11
src/panels/config/automation/paste-replace-dialog/dialog-paste-replace.ts
View File

@@ -1,11 +1,12 @@
import { customElement, property, state } from "lit/decorators";
import { css, type CSSResultGroup, html, LitElement, nothing } from "lit";
import type { HassDialog } from "../../../../dialogs/make-dialog-manager";
import type { HomeAssistant } from "../../../../types";
import { customElement, property, state } from "lit/decorators";
import { fireEvent } from "../../../../common/dom/fire_event";
import { haStyle, haStyleDialog } from "../../../../resources/styles";
import "../../../../components/ha-button";
import { createCloseHeading } from "../../../../components/ha-dialog";
import "../trigger/ha-automation-trigger-row";
import "../../../../components/ha-yaml-editor";
import type { HassDialog } from "../../../../dialogs/make-dialog-manager";
import { haStyle, haStyleDialog } from "../../../../resources/styles";
import type { HomeAssistant } from "../../../../types";
import type { PasteReplaceDialogParams } from "./show-dialog-paste-replace";
@customElement("ha-dialog-paste-replace")

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

@@ -6,7 +6,6 @@ import { customElement, property, state } from "lit/decorators";
import { repeat } from "lit/directives/repeat";
import { storage } from "../../../../common/decorators/storage";
import { fireEvent } from "../../../../common/dom/fire_event";
import { listenMediaQuery } from "../../../../common/dom/media_query";
import { nextRender } from "../../../../common/util/render-status";
import "../../../../components/ha-button";
import "../../../../components/ha-button-menu";
@@ -45,8 +44,6 @@ export default class HaAutomationTrigger extends LitElement {
@property({ type: Boolean }) public root = false;
@state() private _showReorder = false;
@state() private _rowSortSelected?: number;
@state()
@@ -64,27 +61,12 @@ export default class HaAutomationTrigger extends LitElement {
private _triggerKeys = new WeakMap<Trigger, string>();
private _unsubMql?: () => void;
public connectedCallback() {
super.connectedCallback();
this._unsubMql = listenMediaQuery("(min-width: 600px)", (matches) => {
this._showReorder = matches;
});
}
public disconnectedCallback() {
super.disconnectedCallback();
this._unsubMql?.();
this._unsubMql = undefined;
}
protected render() {
return html`
<ha-sortable
handle-selector=".handle"
draggable-selector="ha-automation-trigger-row"
.disabled=${!this._showReorder || this.disabled}
.disabled=${this.disabled}
group="triggers"
invert-swap
@item-moved=${this._triggerMoved}
@@ -115,7 +97,7 @@ export default class HaAutomationTrigger extends LitElement {
.sortSelected=${this._rowSortSelected === idx}
@stop-sort-selection=${this._stopSortSelection}
>
${this._showReorder && !this.disabled
${!this.disabled
? html`
<div
tabindex="0"