Skip to content

Commit

Permalink
Combine Edit in yaml and Edit in visual editor (1/2) (#23142)
Browse files Browse the repository at this point in the history 
* yaml / visual part 1

* clean up

* clean up
  • Loading branch information
@silamon
silamon authored Dec 11, 2024
1 parent bf624f5 commit 0ce98a8
Show file tree
Hide file tree
Showing 7 changed files with 149 additions and 284 deletions.
84 changes: 32 additions & 52 deletions src/panels/config/automation/action/ha-automation-action-row.ts
View file
Original file line number Diff line number Diff line change
@@ -1,18 +1,17 @@
import { consume } from "@lit-labs/context";
import type { ActionDetail } from "@material/mwc-list/mwc-list-foundation";
import "@material/mwc-list/mwc-list-item";
import {
mdiAlertCircleCheck,
mdiArrowDown,
mdiArrowUp,
mdiCheck,
mdiContentCopy,
mdiContentCut,
mdiContentDuplicate,
mdiDelete,
mdiDotsVertical,
mdiPlay,
mdiPlayCircleOutline,
mdiPlaylistEdit,
mdiRenameBox,
mdiStopCircleOutline,
} from "@mdi/js";
Expand Down Expand Up @@ -253,93 +252,77 @@ export default class HaAutomationActionRow extends LitElement {
.label=${this.hass.localize("ui.common.menu")}
.path=${mdiDotsVertical}
></ha-icon-button>
<mwc-list-item graphic="icon">
<ha-list-item graphic="icon">
${this.hass.localize(
"ui.panel.config.automation.editor.actions.run"
)}
<ha-svg-icon slot="graphic" .path=${mdiPlay}></ha-svg-icon>
</mwc-list-item>
</ha-list-item>
<mwc-list-item graphic="icon" .disabled=${this.disabled}>
<ha-list-item graphic="icon" .disabled=${this.disabled}>
${this.hass.localize(
"ui.panel.config.automation.editor.actions.rename"
)}
<ha-svg-icon slot="graphic" .path=${mdiRenameBox}></ha-svg-icon>
</mwc-list-item>
</ha-list-item>
<li divider role="separator"></li>
<mwc-list-item graphic="icon" .disabled=${this.disabled}>
<ha-list-item graphic="icon" .disabled=${this.disabled}>
${this.hass.localize(
"ui.panel.config.automation.editor.actions.duplicate"
)}
<ha-svg-icon
slot="graphic"
.path=${mdiContentDuplicate}
></ha-svg-icon>
</mwc-list-item>
</ha-list-item>
<mwc-list-item graphic="icon" .disabled=${this.disabled}>
<ha-list-item graphic="icon" .disabled=${this.disabled}>
${this.hass.localize(
"ui.panel.config.automation.editor.triggers.copy"
)}
<ha-svg-icon slot="graphic" .path=${mdiContentCopy}></ha-svg-icon>
</mwc-list-item>
</ha-list-item>
<mwc-list-item graphic="icon" .disabled=${this.disabled}>
<ha-list-item graphic="icon" .disabled=${this.disabled}>
${this.hass.localize(
"ui.panel.config.automation.editor.triggers.cut"
)}
<ha-svg-icon slot="graphic" .path=${mdiContentCut}></ha-svg-icon>
</mwc-list-item>
</ha-list-item>
<mwc-list-item
<ha-list-item
graphic="icon"
.disabled=${this.disabled || this.first}
>
${this.hass.localize("ui.panel.config.automation.editor.move_up")}
<ha-svg-icon slot="graphic" .path=${mdiArrowUp}></ha-svg-icon
></mwc-list-item>
></ha-list-item>
<mwc-list-item
<ha-list-item
graphic="icon"
.disabled=${this.disabled || this.last}
>
${this.hass.localize(
"ui.panel.config.automation.editor.move_down"
)}
<ha-svg-icon slot="graphic" .path=${mdiArrowDown}></ha-svg-icon
></mwc-list-item>
></ha-list-item>
<li divider role="separator"></li>
<mwc-list-item .disabled=${!this._uiModeAvailable} graphic="icon">
${this.hass.localize("ui.panel.config.automation.editor.edit_ui")}
${!yamlMode
? html`<ha-svg-icon
class="selected_menu_item"
slot="graphic"
.path=${mdiCheck}
></ha-svg-icon>`
: ``}
</mwc-list-item>
<mwc-list-item .disabled=${!this._uiModeAvailable} graphic="icon">
<ha-list-item graphic="icon" .disabled=${!this._uiModeAvailable}>
${this.hass.localize(
"ui.panel.config.automation.editor.edit_yaml"
`ui.panel.config.automation.editor.edit_${!yamlMode ? "yaml" : "ui"}`
)}
${yamlMode
? html`<ha-svg-icon
class="selected_menu_item"
slot="graphic"
.path=${mdiCheck}
></ha-svg-icon>`
: ``}
</mwc-list-item>
<ha-svg-icon
slot="graphic"
.path=${mdiPlaylistEdit}
></ha-svg-icon>
</ha-list-item>
<li divider role="separator"></li>
<mwc-list-item graphic="icon" .disabled=${this.disabled}>
<ha-list-item graphic="icon" .disabled=${this.disabled}>
${this.action.enabled === false
? this.hass.localize(
"ui.panel.config.automation.editor.actions.enable"
Expand All @@ -353,8 +336,8 @@ export default class HaAutomationActionRow extends LitElement {
? mdiPlayCircleOutline
: mdiStopCircleOutline}
></ha-svg-icon>
</mwc-list-item>
<mwc-list-item
</ha-list-item>
<ha-list-item
class="warning"
graphic="icon"
.disabled=${this.disabled}
Expand All @@ -367,7 +350,7 @@ export default class HaAutomationActionRow extends LitElement {
slot="graphic"
.path=${mdiDelete}
></ha-svg-icon>
</mwc-list-item>
</ha-list-item>
</ha-button-menu>
<div
Expand Down Expand Up @@ -466,17 +449,17 @@ export default class HaAutomationActionRow extends LitElement {
fireEvent(this, "move-down");
break;
case 7:
this._switchUiMode();
if (this._yamlMode) {
this._switchUiMode();
} else {
this._switchYamlMode();
}
this.expand();
break;
case 8:
this._switchYamlMode();
this.expand();
break;
case 9:
this._onDisable();
break;
case 10:
case 9:
this._onDelete();
break;
}
Expand Down Expand Up @@ -676,9 +659,6 @@ export default class HaAutomationActionRow extends LitElement {
.warning ul {
margin: 4px 0;
}
.selected_menu_item {
color: var(--primary-color);
}
li[role="separator"] {
border-bottom-color: var(--divider-color);
}
Expand Down
89 changes: 35 additions & 54 deletions src/panels/config/automation/condition/ha-automation-condition-row.ts
View file
Original file line number Diff line number Diff line change
@@ -1,17 +1,16 @@
import { consume } from "@lit-labs/context";
import type { ActionDetail } from "@material/mwc-list/mwc-list-foundation";
import "@material/mwc-list/mwc-list-item";
import {
mdiArrowDown,
mdiArrowUp,
mdiCheck,
mdiContentCopy,
mdiContentCut,
mdiContentDuplicate,
mdiDelete,
mdiDotsVertical,
mdiFlask,
mdiPlayCircleOutline,
mdiPlaylistEdit,
mdiRenameBox,
mdiStopCircleOutline,
} from "@mdi/js";
Expand All @@ -29,6 +28,7 @@ import "../../../../components/ha-button-menu";
import "../../../../components/ha-card";
import "../../../../components/ha-expansion-panel";
import "../../../../components/ha-icon-button";
import "../../../../components/ha-list-item";
import type {
AutomationClipboard,
Condition,
Expand Down Expand Up @@ -155,92 +155,76 @@ export default class HaAutomationConditionRow extends LitElement {
>
</ha-icon-button>
<mwc-list-item graphic="icon">
<ha-list-item graphic="icon">
${this.hass.localize(
"ui.panel.config.automation.editor.conditions.test"
)}
<ha-svg-icon slot="graphic" .path=${mdiFlask}></ha-svg-icon>
</mwc-list-item>
<mwc-list-item graphic="icon" .disabled=${this.disabled}>
</ha-list-item>
<ha-list-item graphic="icon" .disabled=${this.disabled}>
${this.hass.localize(
"ui.panel.config.automation.editor.conditions.rename"
)}
<ha-svg-icon slot="graphic" .path=${mdiRenameBox}></ha-svg-icon>
</mwc-list-item>
</ha-list-item>
<li divider role="separator"></li>
<mwc-list-item graphic="icon" .disabled=${this.disabled}>
<ha-list-item graphic="icon" .disabled=${this.disabled}>
${this.hass.localize(
"ui.panel.config.automation.editor.actions.duplicate"
)}
<ha-svg-icon
slot="graphic"
.path=${mdiContentDuplicate}
></ha-svg-icon>
</mwc-list-item>
</ha-list-item>
<mwc-list-item graphic="icon" .disabled=${this.disabled}>
<ha-list-item graphic="icon" .disabled=${this.disabled}>
${this.hass.localize(
"ui.panel.config.automation.editor.triggers.copy"
)}
<ha-svg-icon slot="graphic" .path=${mdiContentCopy}></ha-svg-icon>
</mwc-list-item>
</ha-list-item>
<mwc-list-item graphic="icon" .disabled=${this.disabled}>
<ha-list-item graphic="icon" .disabled=${this.disabled}>
${this.hass.localize(
"ui.panel.config.automation.editor.triggers.cut"
)}
<ha-svg-icon slot="graphic" .path=${mdiContentCut}></ha-svg-icon>
</mwc-list-item>
</ha-list-item>
<mwc-list-item
<ha-list-item
graphic="icon"
.disabled=${this.disabled || this.first}
>
${this.hass.localize("ui.panel.config.automation.editor.move_up")}
<ha-svg-icon slot="graphic" .path=${mdiArrowUp}></ha-svg-icon
></mwc-list-item>
></ha-list-item>
<mwc-list-item
<ha-list-item
graphic="icon"
.disabled=${this.disabled || this.last}
>
${this.hass.localize(
"ui.panel.config.automation.editor.move_down"
)}
<ha-svg-icon slot="graphic" .path=${mdiArrowDown}></ha-svg-icon
></mwc-list-item>
></ha-list-item>
<li divider role="separator"></li>
<mwc-list-item graphic="icon">
${this.hass.localize("ui.panel.config.automation.editor.edit_ui")}
${!this._yamlMode
? html`<ha-svg-icon
class="selected_menu_item"
slot="graphic"
.path=${mdiCheck}
></ha-svg-icon>`
: ``}
</mwc-list-item>
<mwc-list-item graphic="icon">
<ha-list-item graphic="icon" .disabled=${this._warnings}>
${this.hass.localize(
"ui.panel.config.automation.editor.edit_yaml"
`ui.panel.config.automation.editor.edit_${!this._yamlMode ? "yaml" : "ui"}`
)}
${this._yamlMode
? html`<ha-svg-icon
class="selected_menu_item"
slot="graphic"
.path=${mdiCheck}
></ha-svg-icon>`
: ``}
</mwc-list-item>
<ha-svg-icon
slot="graphic"
.path=${mdiPlaylistEdit}
></ha-svg-icon>
</ha-list-item>
<li divider role="separator"></li>
<mwc-list-item graphic="icon" .disabled=${this.disabled}>
<ha-list-item graphic="icon" .disabled=${this.disabled}>
${this.condition.enabled === false
? this.hass.localize(
"ui.panel.config.automation.editor.actions.enable"
Expand All @@ -254,8 +238,8 @@ export default class HaAutomationConditionRow extends LitElement {
? mdiPlayCircleOutline
: mdiStopCircleOutline}
></ha-svg-icon>
</mwc-list-item>
<mwc-list-item
</ha-list-item>
<ha-list-item
class="warning"
graphic="icon"
.disabled=${this.disabled}
Expand All @@ -268,7 +252,7 @@ export default class HaAutomationConditionRow extends LitElement {
slot="graphic"
.path=${mdiDelete}
></ha-svg-icon>
</mwc-list-item>
</ha-list-item>
</ha-button-menu>
<div
Expand Down Expand Up @@ -366,17 +350,17 @@ export default class HaAutomationConditionRow extends LitElement {
fireEvent(this, "move-down");
break;
case 7:
this._switchUiMode();
if (this._yamlMode) {
this._switchUiMode();
} else {
this._switchYamlMode();
}
this.expand();
break;
case 8:
this._switchYamlMode();
this.expand();
break;
case 9:
this._onDisable();
break;
case 10:
case 9:
this._onDelete();
break;
}
Expand Down Expand Up @@ -555,10 +539,10 @@ export default class HaAutomationConditionRow extends LitElement {
border-top-right-radius: var(--ha-card-border-radius);
border-top-left-radius: var(--ha-card-border-radius);
}
mwc-list-item[disabled] {
ha-list-item[disabled] {
--mdc-theme-text-primary-on-background: var(--disabled-text-color);
}
mwc-list-item.hidden {
ha-list-item.hidden {
display: none;
}
.testing {
Expand Down Expand Up @@ -587,9 +571,6 @@ export default class HaAutomationConditionRow extends LitElement {
.testing.pass {
background-color: var(--success-color);
}
.selected_menu_item {
color: var(--primary-color);
}
li[role="separator"] {
border-bottom-color: var(--divider-color);
}
Expand Down
Loading

0 comments on commit 0ce98a8

Please sign in to comment.