jeans/frontend
jeans/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2025-07-24 09:46:36 +00:00
Code Issues Packages Projects Releases Wiki Activity

Improve automation drag and drop interaction (#19624)

Browse Source
This commit is contained in:
Paul Bottein 2024-02-02 11:31:01 +01:00 committed by GitHub
parent 6f831699be
commit c291448ffa
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
5 changed files with 90 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
src/components/ha-sortable.ts
View File

@ -39,6 +39,12 @@ export class HaSortable extends LitElement {
@property({ type: String, attribute: "group" })
public group?: string;
@property({ type: Number, attribute: "swap-threshold" })
public swapThreshold?: number;
@property({ type: Boolean, attribute: "invert-swap" })
public invertSwap?: boolean;
protected updated(changedProperties: PropertyValues<this>) {
if (changedProperties.has("disabled")) {
if (this.disabled) {
@ -81,7 +87,7 @@ export class HaSortable extends LitElement {
}
.sortable-ghost {
border: 2px solid var(--primary-color);
box-shadow: 0 0 0 2px var(--primary-color);
background: rgba(var(--rgb-primary-color), 0.25);
border-radius: 4px;
opacity: 0.4;
@ -108,7 +114,7 @@ export class HaSortable extends LitElement {
const options: SortableInstance.Options = {
animation: 150,
swapThreshold: 0.75,
swapThreshold: 1,
onChoose: this._handleChoose,
onEnd: this._handleEnd,
};
@ -116,6 +122,13 @@ export class HaSortable extends LitElement {
if (this.draggableSelector) {
options.draggable = this.draggableSelector;
}
if (this.swapThreshold !== undefined) {
options.swapThreshold = this.swapThreshold;
}
if (this.invertSwap !== undefined) {
options.invertSwap = this.invertSwap;
}
if (this.handleSelector) {
options.handle = this.handleSelector;
}

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

@ -81,6 +81,7 @@ export default class HaAutomationAction extends LitElement {
@item-moved=${this._actionMoved}
group="actions"
.path=${this.path}
invert-swap
>
<div class="actions">
${repeat(
@ -266,22 +267,32 @@ export default class HaAutomationAction extends LitElement {
static get styles(): CSSResultGroup {
return css`
.actions {
padding: 16px;
margin: -16px -16px 0px -16px;
display: flex;
flex-direction: column;
gap: 16px;
}
.actions:not(:has(ha-automation-action-row)) {
margin: -16px;
}
.sortable-ghost {
background: none;
border-radius: var(--ha-card-border-radius, 12px);
}
.sortable-drag {
background: none;
}
ha-automation-action-row {
display: block;
margin-bottom: 16px;
scroll-margin-top: 48px;
}
ha-svg-icon {
height: 20px;
}
ha-alert {
display: block;
margin-bottom: 16px;
border-radius: var(--ha-card-border-radius, 12px);
overflow: hidden;
}
.handle {
padding: 12px 4px;
padding: 12px;
cursor: move; /* fallback if grab cursor is unsupported */
cursor: grab;
}

21
src/panels/config/automation/action/types/ha-automation-action-choose.ts
View File

@ -125,6 +125,7 @@ export class HaChooseAction extends LitElement implements ActionElement {
.disabled=${!this._showReorder || this.disabled}
group="choose-options"
.path=${[...(this.path ?? []), "choose"]}
invert-swap
>
<div class="options">
${repeat(
@ -502,8 +503,22 @@ export class HaChooseAction extends LitElement implements ActionElement {
return [
haStyle,
css`
.option {
margin: 0 0 16px 0;
.options {
padding: 16px;
margin: -16px -16px 0px -16px;
display: flex;
flex-direction: column;
gap: 16px;
}
.options:not(:has(.option)) {
margin: -16px;
}
.sortable-ghost {
background: none;
border-radius: var(--ha-card-border-radius, 12px);
}
.sortable-drag {
background: none;
}
.add-card mwc-button {
display: block;
@ -539,7 +554,7 @@ export class HaChooseAction extends LitElement implements ActionElement {
padding: 0 16px 16px 16px;
}
.handle {
padding: 12px 4px;
padding: 12px;
cursor: move; /* fallback if grab cursor is unsupported */
cursor: grab;
}

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

@ -121,6 +121,7 @@ export default class HaAutomationCondition extends LitElement {
@item-moved=${this._conditionMoved}
group="conditions"
.path=${this.path}
invert-swap
>
<div class="conditions">
${repeat(
@ -291,22 +292,32 @@ export default class HaAutomationCondition extends LitElement {
static get styles(): CSSResultGroup {
return css`
.conditions {
padding: 16px;
margin: -16px -16px 0px -16px;
display: flex;
flex-direction: column;
gap: 16px;
}
.conditions:not(:has(ha-automation-condition-row)) {
margin: -16px;
}
.sortable-ghost {
background: none;
border-radius: var(--ha-card-border-radius, 12px);
}
.sortable-drag {
background: none;
}
ha-automation-condition-row {
display: block;
margin-bottom: 16px;
scroll-margin-top: 48px;
}
ha-svg-icon {
height: 20px;
}
ha-alert {
display: block;
margin-bottom: 16px;
border-radius: var(--ha-card-border-radius, 12px);
overflow: hidden;
}
.handle {
padding: 12px 4px;
padding: 12px;
cursor: move; /* fallback if grab cursor is unsupported */
cursor: grab;
}

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

@ -78,6 +78,7 @@ export default class HaAutomationTrigger extends LitElement {
@item-moved=${this._triggerMoved}
group="triggers"
.path=${this.path}
invert-swap
>
<div class="triggers">
${repeat(
@ -240,22 +241,32 @@ export default class HaAutomationTrigger extends LitElement {
static get styles(): CSSResultGroup {
return css`
.triggers {
padding: 16px;
margin: -16px -16px 0px -16px;
display: flex;
flex-direction: column;
gap: 16px;
}
.triggers:not(:has(ha-automation-trigger-row)) {
margin: -16px;
}
.sortable-ghost {
background: none;
border-radius: var(--ha-card-border-radius, 12px);
}
.sortable-drag {
background: none;
}
ha-automation-trigger-row {
display: block;
margin-bottom: 16px;
scroll-margin-top: 48px;
}
ha-svg-icon {
height: 20px;
}
ha-alert {
display: block;
margin-bottom: 16px;
border-radius: var(--ha-card-border-radius, 16px);
overflow: hidden;
}
.handle {
padding: 12px 4px;
padding: 12px;
cursor: move; /* fallback if grab cursor is unsupported */
cursor: grab;
}