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

Increase drop zone for automation editor (#19687)

Browse Source
This commit is contained in:
Paul Bottein 2024-02-05 12:35:34 +01:00 committed by GitHub
parent cb690e9d4e
commit 65a8518d99
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 90 additions and 78 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -77,6 +77,7 @@ export default class HaAutomationAction extends LitElement {
return html`
<ha-sortable
handle-selector=".handle"
draggable-selector="ha-automation-action-row"
.disabled=${!this._showReorder || this.disabled}
@item-moved=${this._actionMoved}
group="actions"
@ -112,30 +113,29 @@ export default class HaAutomationAction extends LitElement {
</ha-automation-action-row>
`
)}
<div class="buttons">
<ha-button
outlined
.disabled=${this.disabled}
.label=${this.hass.localize(
"ui.panel.config.automation.editor.actions.add"
)}
@click=${this._addActionDialog}
>
<ha-svg-icon .path=${mdiPlus} slot="icon"></ha-svg-icon>
</ha-button>
<ha-button
.disabled=${this.disabled}
.label=${this.hass.localize(
"ui.panel.config.automation.editor.actions.add_building_block"
)}
@click=${this._addActionBuildingBlockDialog}
>
<ha-svg-icon .path=${mdiPlus} slot="icon"></ha-svg-icon>
</ha-button>
</div>
</div>
</ha-sortable>
<div class="buttons">
<ha-button
outlined
.disabled=${this.disabled}
.label=${this.hass.localize(
"ui.panel.config.automation.editor.actions.add"
)}
@click=${this._addActionDialog}
>
<ha-svg-icon .path=${mdiPlus} slot="icon"></ha-svg-icon>
</ha-button>
<ha-button
.disabled=${this.disabled}
.label=${this.hass.localize(
"ui.panel.config.automation.editor.actions.add_building_block"
)}
@click=${this._addActionBuildingBlockDialog}
>
<ha-svg-icon .path=${mdiPlus} slot="icon"></ha-svg-icon>
</ha-button>
</div>
`;
}
@ -269,14 +269,11 @@ export default class HaAutomationAction extends LitElement {
return css`
.actions {
padding: 16px;
margin: -16px -16px 0px -16px;
margin: -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);
@ -304,6 +301,7 @@ export default class HaAutomationAction extends LitElement {
display: flex;
flex-wrap: wrap;
gap: 8px;
order: 1;
}
`;
}

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

@ -122,6 +122,7 @@ export class HaChooseAction extends LitElement implements ActionElement {
return html`
<ha-sortable
handle-selector=".handle"
draggable-selector=".option"
.disabled=${!this._showReorder || this.disabled}
group="choose-options"
.path=${[...(this.path ?? []), "choose"]}
@ -277,18 +278,21 @@ export class HaChooseAction extends LitElement implements ActionElement {
</div>
`
)}
<div class="buttons">
<ha-button
outlined
.label=${this.hass.localize(
"ui.panel.config.automation.editor.actions.type.choose.add_option"
)}
.disabled=${this.disabled}
@click=${this._addOption}
>
<ha-svg-icon .path=${mdiPlus} slot="icon"></ha-svg-icon>
</ha-button>
</div>
</div>
</ha-sortable>
<ha-button
outlined
.label=${this.hass.localize(
"ui.panel.config.automation.editor.actions.type.choose.add_option"
)}
.disabled=${this.disabled}
@click=${this._addOption}
>
<ha-svg-icon .path=${mdiPlus} slot="icon"></ha-svg-icon>
</ha-button>
${this._showDefault || action.default
? html`
<h2>
@ -505,14 +509,11 @@ export class HaChooseAction extends LitElement implements ActionElement {
css`
.options {
padding: 16px;
margin: -16px -16px 0px -16px;
margin: -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);
@ -562,6 +563,12 @@ export class HaChooseAction extends LitElement implements ActionElement {
pointer-events: none;
height: 24px;
}
.buttons {
display: flex;
flex-wrap: wrap;
gap: 8px;
order: 1;
}
`,
];
}

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

@ -117,6 +117,7 @@ export default class HaAutomationCondition extends LitElement {
return html`
<ha-sortable
handle-selector=".handle"
draggable-selector="ha-automation-condition-row"
.disabled=${!this._showReorder || this.disabled}
@item-moved=${this._conditionMoved}
group="conditions"
@ -152,29 +153,29 @@ export default class HaAutomationCondition extends LitElement {
</ha-automation-condition-row>
`
)}
<div class="buttons">
<ha-button
outlined
.disabled=${this.disabled}
.label=${this.hass.localize(
"ui.panel.config.automation.editor.conditions.add"
)}
@click=${this._addConditionDialog}
>
<ha-svg-icon .path=${mdiPlus} slot="icon"></ha-svg-icon>
</ha-button>
<ha-button
.disabled=${this.disabled}
.label=${this.hass.localize(
"ui.panel.config.automation.editor.conditions.add_building_block"
)}
@click=${this._addConditionBuildingBlockDialog}
>
<ha-svg-icon .path=${mdiPlus} slot="icon"></ha-svg-icon>
</ha-button>
</div>
</div>
</ha-sortable>
<div class="buttons">
<ha-button
outlined
.disabled=${this.disabled}
.label=${this.hass.localize(
"ui.panel.config.automation.editor.conditions.add"
)}
@click=${this._addConditionDialog}
>
<ha-svg-icon .path=${mdiPlus} slot="icon"></ha-svg-icon>
</ha-button>
<ha-button
.disabled=${this.disabled}
.label=${this.hass.localize(
"ui.panel.config.automation.editor.conditions.add_building_block"
)}
@click=${this._addConditionBuildingBlockDialog}
>
<ha-svg-icon .path=${mdiPlus} slot="icon"></ha-svg-icon>
</ha-button>
</div>
`;
}
@ -294,14 +295,11 @@ export default class HaAutomationCondition extends LitElement {
return css`
.conditions {
padding: 16px;
margin: -16px -16px 0px -16px;
margin: -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);
@ -313,6 +311,9 @@ export default class HaAutomationCondition extends LitElement {
display: block;
scroll-margin-top: 48px;
}
.buttons {
order: 1;
}
ha-svg-icon {
height: 20px;
}

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

@ -74,6 +74,7 @@ export default class HaAutomationTrigger extends LitElement {
return html`
<ha-sortable
handle-selector=".handle"
draggable-selector="ha-automation-trigger-row"
.disabled=${!this._showReorder || this.disabled}
@item-moved=${this._triggerMoved}
group="triggers"
@ -108,18 +109,20 @@ export default class HaAutomationTrigger extends LitElement {
</ha-automation-trigger-row>
`
)}
<div class="buttons">
<ha-button
outlined
.label=${this.hass.localize(
"ui.panel.config.automation.editor.triggers.add"
)}
.disabled=${this.disabled}
@click=${this._addTriggerDialog}
>
<ha-svg-icon .path=${mdiPlus} slot="icon"></ha-svg-icon>
</ha-button>
</div>
</div>
</ha-sortable>
<ha-button
outlined
.label=${this.hass.localize(
"ui.panel.config.automation.editor.triggers.add"
)}
.disabled=${this.disabled}
@click=${this._addTriggerDialog}
>
<ha-svg-icon .path=${mdiPlus} slot="icon"></ha-svg-icon>
</ha-button>
`;
}
@ -243,14 +246,11 @@ export default class HaAutomationTrigger extends LitElement {
return css`
.triggers {
padding: 16px;
margin: -16px -16px 0px -16px;
margin: -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);
@ -274,6 +274,12 @@ export default class HaAutomationTrigger extends LitElement {
pointer-events: none;
height: 24px;
}
.buttons {
display: flex;
flex-wrap: wrap;
gap: 8px;
order: 1;
}
`;
}
}