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

Combine Edit in yaml and Edit in visual editor (1/2) (#23142)

Browse Source 
* yaml / visual part 1

* clean up

* clean up
This commit is contained in:
Simon Lamon 2024-12-11 08:48:10 +01:00 committed by GitHub
parent bf624f5ca7
commit 0ce98a86e6
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
7 changed files with 148 additions and 283 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,11 +1,9 @@
import { consume } from "@lit-labs/context"; import { consume } from "@lit-labs/context";
import type { ActionDetail } from "@material/mwc-list/mwc-list-foundation"; import type { ActionDetail } from "@material/mwc-list/mwc-list-foundation";
import "@material/mwc-list/mwc-list-item";
import { import {
mdiAlertCircleCheck, mdiAlertCircleCheck,
mdiArrowDown, mdiArrowDown,
mdiArrowUp, mdiArrowUp,
mdiCheck,
mdiContentCopy, mdiContentCopy,
mdiContentCut, mdiContentCut,
mdiContentDuplicate, mdiContentDuplicate,
@ -13,6 +11,7 @@ import {
mdiDotsVertical, mdiDotsVertical,
mdiPlay, mdiPlay,
mdiPlayCircleOutline, mdiPlayCircleOutline,
mdiPlaylistEdit,
mdiRenameBox, mdiRenameBox,
mdiStopCircleOutline, mdiStopCircleOutline,
} from "@mdi/js"; } from "@mdi/js";
@ -253,23 +252,23 @@ export default class HaAutomationActionRow extends LitElement {
.label=${this.hass.localize("ui.common.menu")} .label=${this.hass.localize("ui.common.menu")}
.path=${mdiDotsVertical} .path=${mdiDotsVertical}
></ha-icon-button> ></ha-icon-button>
<mwc-list-item graphic="icon"> <ha-list-item graphic="icon">
${this.hass.localize( ${this.hass.localize(
"ui.panel.config.automation.editor.actions.run" "ui.panel.config.automation.editor.actions.run"
)} )}
<ha-svg-icon slot="graphic" .path=${mdiPlay}></ha-svg-icon> <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( ${this.hass.localize(
"ui.panel.config.automation.editor.actions.rename" "ui.panel.config.automation.editor.actions.rename"
)} )}
<ha-svg-icon slot="graphic" .path=${mdiRenameBox}></ha-svg-icon> <ha-svg-icon slot="graphic" .path=${mdiRenameBox}></ha-svg-icon>
</mwc-list-item> </ha-list-item>
<li divider role="separator"></li> <li divider role="separator"></li>
<mwc-list-item graphic="icon" .disabled=${this.disabled}> <ha-list-item graphic="icon" .disabled=${this.disabled}>
${this.hass.localize( ${this.hass.localize(
"ui.panel.config.automation.editor.actions.duplicate" "ui.panel.config.automation.editor.actions.duplicate"
)} )}
@ -277,31 +276,31 @@ export default class HaAutomationActionRow extends LitElement {
slot="graphic" slot="graphic"
.path=${mdiContentDuplicate} .path=${mdiContentDuplicate}
></ha-svg-icon> ></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( ${this.hass.localize(
"ui.panel.config.automation.editor.triggers.copy" "ui.panel.config.automation.editor.triggers.copy"
)} )}
<ha-svg-icon slot="graphic" .path=${mdiContentCopy}></ha-svg-icon> <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( ${this.hass.localize(
"ui.panel.config.automation.editor.triggers.cut" "ui.panel.config.automation.editor.triggers.cut"
)} )}
<ha-svg-icon slot="graphic" .path=${mdiContentCut}></ha-svg-icon> <ha-svg-icon slot="graphic" .path=${mdiContentCut}></ha-svg-icon>
</mwc-list-item> </ha-list-item>
<mwc-list-item <ha-list-item
graphic="icon" graphic="icon"
.disabled=${this.disabled || this.first} .disabled=${this.disabled || this.first}
> >
${this.hass.localize("ui.panel.config.automation.editor.move_up")} ${this.hass.localize("ui.panel.config.automation.editor.move_up")}
<ha-svg-icon slot="graphic" .path=${mdiArrowUp}></ha-svg-icon <ha-svg-icon slot="graphic" .path=${mdiArrowUp}></ha-svg-icon
></mwc-list-item> ></ha-list-item>
<mwc-list-item <ha-list-item
graphic="icon" graphic="icon"
.disabled=${this.disabled || this.last} .disabled=${this.disabled || this.last}
> >
@ -309,37 +308,21 @@ export default class HaAutomationActionRow extends LitElement {
"ui.panel.config.automation.editor.move_down" "ui.panel.config.automation.editor.move_down"
)} )}
<ha-svg-icon slot="graphic" .path=${mdiArrowDown}></ha-svg-icon <ha-svg-icon slot="graphic" .path=${mdiArrowDown}></ha-svg-icon
></mwc-list-item> ></ha-list-item>
<li divider role="separator"></li> <ha-list-item graphic="icon" .disabled=${!this._uiModeAvailable}>
<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">
${this.hass.localize( ${this.hass.localize(
"ui.panel.config.automation.editor.edit_yaml" `ui.panel.config.automation.editor.edit_${!yamlMode ? "yaml" : "ui"}`
)} )}
${yamlMode <ha-svg-icon
? html`<ha-svg-icon slot="graphic"
class="selected_menu_item" .path=${mdiPlaylistEdit}
slot="graphic" ></ha-svg-icon>
.path=${mdiCheck} </ha-list-item>
></ha-svg-icon>`
: ``}
</mwc-list-item>
<li divider role="separator"></li> <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.action.enabled === false
? this.hass.localize( ? this.hass.localize(
"ui.panel.config.automation.editor.actions.enable" "ui.panel.config.automation.editor.actions.enable"
@ -353,8 +336,8 @@ export default class HaAutomationActionRow extends LitElement {
? mdiPlayCircleOutline ? mdiPlayCircleOutline
: mdiStopCircleOutline} : mdiStopCircleOutline}
></ha-svg-icon> ></ha-svg-icon>
</mwc-list-item> </ha-list-item>
<mwc-list-item <ha-list-item
class="warning" class="warning"
graphic="icon" graphic="icon"
.disabled=${this.disabled} .disabled=${this.disabled}
@ -367,7 +350,7 @@ export default class HaAutomationActionRow extends LitElement {
slot="graphic" slot="graphic"
.path=${mdiDelete} .path=${mdiDelete}
></ha-svg-icon> ></ha-svg-icon>
</mwc-list-item> </ha-list-item>
</ha-button-menu> </ha-button-menu>
<div <div
@ -466,17 +449,17 @@ export default class HaAutomationActionRow extends LitElement {
fireEvent(this, "move-down"); fireEvent(this, "move-down");
break; break;
case 7: case 7:
this._switchUiMode(); if (this._yamlMode) {
this._switchUiMode();
} else {
this._switchYamlMode();
}
this.expand(); this.expand();
break; break;
case 8: case 8:
this._switchYamlMode();
this.expand();
break;
case 9:
this._onDisable(); this._onDisable();
break; break;
case 10: case 9:
this._onDelete(); this._onDelete();
break; break;
} }
@ -676,9 +659,6 @@ export default class HaAutomationActionRow extends LitElement {
.warning ul { .warning ul {
margin: 4px 0; margin: 4px 0;
} }
.selected_menu_item {
color: var(--primary-color);
}
li[role="separator"] { li[role="separator"] {
border-bottom-color: var(--divider-color); border-bottom-color: var(--divider-color);
} }

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

@ -1,10 +1,8 @@
import { consume } from "@lit-labs/context"; import { consume } from "@lit-labs/context";
import type { ActionDetail } from "@material/mwc-list/mwc-list-foundation"; import type { ActionDetail } from "@material/mwc-list/mwc-list-foundation";
import "@material/mwc-list/mwc-list-item";
import { import {
mdiArrowDown, mdiArrowDown,
mdiArrowUp, mdiArrowUp,
mdiCheck,
mdiContentCopy, mdiContentCopy,
mdiContentCut, mdiContentCut,
mdiContentDuplicate, mdiContentDuplicate,
@ -12,6 +10,7 @@ import {
mdiDotsVertical, mdiDotsVertical,
mdiFlask, mdiFlask,
mdiPlayCircleOutline, mdiPlayCircleOutline,
mdiPlaylistEdit,
mdiRenameBox, mdiRenameBox,
mdiStopCircleOutline, mdiStopCircleOutline,
} from "@mdi/js"; } from "@mdi/js";
@ -29,6 +28,7 @@ import "../../../../components/ha-button-menu";
import "../../../../components/ha-card"; import "../../../../components/ha-card";
import "../../../../components/ha-expansion-panel"; import "../../../../components/ha-expansion-panel";
import "../../../../components/ha-icon-button"; import "../../../../components/ha-icon-button";
import "../../../../components/ha-list-item";
import type { import type {
AutomationClipboard, AutomationClipboard,
Condition, Condition,
@ -155,22 +155,22 @@ export default class HaAutomationConditionRow extends LitElement {
> >
</ha-icon-button> </ha-icon-button>
<mwc-list-item graphic="icon"> <ha-list-item graphic="icon">
${this.hass.localize( ${this.hass.localize(
"ui.panel.config.automation.editor.conditions.test" "ui.panel.config.automation.editor.conditions.test"
)} )}
<ha-svg-icon slot="graphic" .path=${mdiFlask}></ha-svg-icon> <ha-svg-icon slot="graphic" .path=${mdiFlask}></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( ${this.hass.localize(
"ui.panel.config.automation.editor.conditions.rename" "ui.panel.config.automation.editor.conditions.rename"
)} )}
<ha-svg-icon slot="graphic" .path=${mdiRenameBox}></ha-svg-icon> <ha-svg-icon slot="graphic" .path=${mdiRenameBox}></ha-svg-icon>
</mwc-list-item> </ha-list-item>
<li divider role="separator"></li> <li divider role="separator"></li>
<mwc-list-item graphic="icon" .disabled=${this.disabled}> <ha-list-item graphic="icon" .disabled=${this.disabled}>
${this.hass.localize( ${this.hass.localize(
"ui.panel.config.automation.editor.actions.duplicate" "ui.panel.config.automation.editor.actions.duplicate"
)} )}
@ -178,31 +178,31 @@ export default class HaAutomationConditionRow extends LitElement {
slot="graphic" slot="graphic"
.path=${mdiContentDuplicate} .path=${mdiContentDuplicate}
></ha-svg-icon> ></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( ${this.hass.localize(
"ui.panel.config.automation.editor.triggers.copy" "ui.panel.config.automation.editor.triggers.copy"
)} )}
<ha-svg-icon slot="graphic" .path=${mdiContentCopy}></ha-svg-icon> <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( ${this.hass.localize(
"ui.panel.config.automation.editor.triggers.cut" "ui.panel.config.automation.editor.triggers.cut"
)} )}
<ha-svg-icon slot="graphic" .path=${mdiContentCut}></ha-svg-icon> <ha-svg-icon slot="graphic" .path=${mdiContentCut}></ha-svg-icon>
</mwc-list-item> </ha-list-item>
<mwc-list-item <ha-list-item
graphic="icon" graphic="icon"
.disabled=${this.disabled || this.first} .disabled=${this.disabled || this.first}
> >
${this.hass.localize("ui.panel.config.automation.editor.move_up")} ${this.hass.localize("ui.panel.config.automation.editor.move_up")}
<ha-svg-icon slot="graphic" .path=${mdiArrowUp}></ha-svg-icon <ha-svg-icon slot="graphic" .path=${mdiArrowUp}></ha-svg-icon
></mwc-list-item> ></ha-list-item>
<mwc-list-item <ha-list-item
graphic="icon" graphic="icon"
.disabled=${this.disabled || this.last} .disabled=${this.disabled || this.last}
> >
@ -210,37 +210,21 @@ export default class HaAutomationConditionRow extends LitElement {
"ui.panel.config.automation.editor.move_down" "ui.panel.config.automation.editor.move_down"
)} )}
<ha-svg-icon slot="graphic" .path=${mdiArrowDown}></ha-svg-icon <ha-svg-icon slot="graphic" .path=${mdiArrowDown}></ha-svg-icon
></mwc-list-item> ></ha-list-item>
<li divider role="separator"></li> <ha-list-item graphic="icon" .disabled=${this._warnings}>
<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">
${this.hass.localize( ${this.hass.localize(
"ui.panel.config.automation.editor.edit_yaml" `ui.panel.config.automation.editor.edit_${!this._yamlMode ? "yaml" : "ui"}`
)} )}
${this._yamlMode <ha-svg-icon
? html`<ha-svg-icon slot="graphic"
class="selected_menu_item" .path=${mdiPlaylistEdit}
slot="graphic" ></ha-svg-icon>
.path=${mdiCheck} </ha-list-item>
></ha-svg-icon>`
: ``}
</mwc-list-item>
<li divider role="separator"></li> <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.condition.enabled === false
? this.hass.localize( ? this.hass.localize(
"ui.panel.config.automation.editor.actions.enable" "ui.panel.config.automation.editor.actions.enable"
@ -254,8 +238,8 @@ export default class HaAutomationConditionRow extends LitElement {
? mdiPlayCircleOutline ? mdiPlayCircleOutline
: mdiStopCircleOutline} : mdiStopCircleOutline}
></ha-svg-icon> ></ha-svg-icon>
</mwc-list-item> </ha-list-item>
<mwc-list-item <ha-list-item
class="warning" class="warning"
graphic="icon" graphic="icon"
.disabled=${this.disabled} .disabled=${this.disabled}
@ -268,7 +252,7 @@ export default class HaAutomationConditionRow extends LitElement {
slot="graphic" slot="graphic"
.path=${mdiDelete} .path=${mdiDelete}
></ha-svg-icon> ></ha-svg-icon>
</mwc-list-item> </ha-list-item>
</ha-button-menu> </ha-button-menu>
<div <div
@ -366,17 +350,17 @@ export default class HaAutomationConditionRow extends LitElement {
fireEvent(this, "move-down"); fireEvent(this, "move-down");
break; break;
case 7: case 7:
this._switchUiMode(); if (this._yamlMode) {
this._switchUiMode();
} else {
this._switchYamlMode();
}
this.expand(); this.expand();
break; break;
case 8: case 8:
this._switchYamlMode();
this.expand();
break;
case 9:
this._onDisable(); this._onDisable();
break; break;
case 10: case 9:
this._onDelete(); this._onDelete();
break; break;
} }
@ -555,10 +539,10 @@ export default class HaAutomationConditionRow extends LitElement {
border-top-right-radius: var(--ha-card-border-radius); border-top-right-radius: var(--ha-card-border-radius);
border-top-left-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); --mdc-theme-text-primary-on-background: var(--disabled-text-color);
} }
mwc-list-item.hidden { ha-list-item.hidden {
display: none; display: none;
} }
.testing { .testing {
@ -587,9 +571,6 @@ export default class HaAutomationConditionRow extends LitElement {
.testing.pass { .testing.pass {
background-color: var(--success-color); background-color: var(--success-color);
} }
.selected_menu_item {
color: var(--primary-color);
}
li[role="separator"] { li[role="separator"] {
border-bottom-color: var(--divider-color); border-bottom-color: var(--divider-color);
} }

36
src/panels/config/automation/ha-automation-editor.ts
View File

@ -1,6 +1,5 @@
import "@material/mwc-button"; import "@material/mwc-button";
import { import {
mdiCheck,
mdiContentDuplicate, mdiContentDuplicate,
mdiContentSave, mdiContentSave,
mdiDebugStepOver, mdiDebugStepOver,
@ -10,6 +9,7 @@ import {
mdiInformationOutline, mdiInformationOutline,
mdiPlay, mdiPlay,
mdiPlayCircleOutline, mdiPlayCircleOutline,
mdiPlaylistEdit,
mdiRenameBox, mdiRenameBox,
mdiRobotConfused, mdiRobotConfused,
mdiStopCircleOutline, mdiStopCircleOutline,
@ -259,27 +259,16 @@ export class HaAutomationEditor extends KeyboardShortcutMixin(LitElement) {
` `
: nothing} : nothing}
<li divider role="separator"></li> <ha-list-item
graphic="icon"
<ha-list-item graphic="icon" @click=${this._switchUiMode}> @click=${this._mode === "gui"
${this.hass.localize("ui.panel.config.automation.editor.edit_ui")} ? this._switchYamlMode
${this._mode === "gui" : this._switchUiMode}
? html`<ha-svg-icon >
class="selected_menu_item" ${this.hass.localize(
slot="graphic" `ui.panel.config.automation.editor.edit_${this._mode === "gui" ? "yaml" : "ui"}`
.path=${mdiCheck} )}
></ha-svg-icon>` <ha-svg-icon slot="graphic" .path=${mdiPlaylistEdit}></ha-svg-icon>
: ``}
</ha-list-item>
<ha-list-item graphic="icon" @click=${this._switchYamlMode}>
${this.hass.localize("ui.panel.config.automation.editor.edit_yaml")}
${this._mode === "yaml"
? html`<ha-svg-icon
class="selected_menu_item"
slot="graphic"
.path=${mdiCheck}
></ha-svg-icon>`
: ``}
</ha-list-item> </ha-list-item>
<li divider role="separator"></li> <li divider role="separator"></li>
@ -903,9 +892,6 @@ export class HaAutomationEditor extends KeyboardShortcutMixin(LitElement) {
ha-fab.dirty { ha-fab.dirty {
bottom: 0; bottom: 0;
} }
.selected_menu_item {
color: var(--primary-color);
}
li[role="separator"] { li[role="separator"] {
border-bottom-color: var(--divider-color); border-bottom-color: var(--divider-color);
} }

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

@ -1,10 +1,8 @@
import { consume } from "@lit-labs/context"; import { consume } from "@lit-labs/context";
import type { ActionDetail } from "@material/mwc-list/mwc-list-foundation"; import type { ActionDetail } from "@material/mwc-list/mwc-list-foundation";
import "@material/mwc-list/mwc-list-item";
import { import {
mdiArrowDown, mdiArrowDown,
mdiArrowUp, mdiArrowUp,
mdiCheck,
mdiContentCopy, mdiContentCopy,
mdiContentCut, mdiContentCut,
mdiContentDuplicate, mdiContentDuplicate,
@ -12,6 +10,7 @@ import {
mdiDotsVertical, mdiDotsVertical,
mdiIdentifier, mdiIdentifier,
mdiPlayCircleOutline, mdiPlayCircleOutline,
mdiPlaylistEdit,
mdiRenameBox, mdiRenameBox,
mdiStopCircleOutline, mdiStopCircleOutline,
} from "@mdi/js"; } from "@mdi/js";
@ -34,6 +33,7 @@ import "../../../../components/ha-card";
import "../../../../components/ha-expansion-panel"; import "../../../../components/ha-expansion-panel";
import "../../../../components/ha-icon-button"; import "../../../../components/ha-icon-button";
import "../../../../components/ha-textfield"; import "../../../../components/ha-textfield";
import "../../../../components/ha-list-item";
import type { HaYamlEditor } from "../../../../components/ha-yaml-editor"; import type { HaYamlEditor } from "../../../../components/ha-yaml-editor";
import type { AutomationClipboard, Trigger } from "../../../../data/automation"; import type { AutomationClipboard, Trigger } from "../../../../data/automation";
import { import {
@ -182,7 +182,7 @@ export default class HaAutomationTriggerRow extends LitElement {
.path=${mdiDotsVertical} .path=${mdiDotsVertical}
></ha-icon-button> ></ha-icon-button>
<mwc-list-item <ha-list-item
graphic="icon" graphic="icon"
.disabled=${this.disabled || type === "list"} .disabled=${this.disabled || type === "list"}
> >
@ -190,9 +190,9 @@ export default class HaAutomationTriggerRow extends LitElement {
"ui.panel.config.automation.editor.triggers.rename" "ui.panel.config.automation.editor.triggers.rename"
)} )}
<ha-svg-icon slot="graphic" .path=${mdiRenameBox}></ha-svg-icon> <ha-svg-icon slot="graphic" .path=${mdiRenameBox}></ha-svg-icon>
</mwc-list-item> </ha-list-item>
<mwc-list-item <ha-list-item
graphic="icon" graphic="icon"
.disabled=${this.disabled || type === "list"} .disabled=${this.disabled || type === "list"}
> >
@ -200,11 +200,11 @@ export default class HaAutomationTriggerRow extends LitElement {
"ui.panel.config.automation.editor.triggers.edit_id" "ui.panel.config.automation.editor.triggers.edit_id"
)} )}
<ha-svg-icon slot="graphic" .path=${mdiIdentifier}></ha-svg-icon> <ha-svg-icon slot="graphic" .path=${mdiIdentifier}></ha-svg-icon>
</mwc-list-item> </ha-list-item>
<li divider role="separator"></li> <li divider role="separator"></li>
<mwc-list-item graphic="icon" .disabled=${this.disabled}> <ha-list-item graphic="icon" .disabled=${this.disabled}>
${this.hass.localize( ${this.hass.localize(
"ui.panel.config.automation.editor.triggers.duplicate" "ui.panel.config.automation.editor.triggers.duplicate"
)} )}
@ -212,31 +212,31 @@ export default class HaAutomationTriggerRow extends LitElement {
slot="graphic" slot="graphic"
.path=${mdiContentDuplicate} .path=${mdiContentDuplicate}
></ha-svg-icon> ></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( ${this.hass.localize(
"ui.panel.config.automation.editor.triggers.copy" "ui.panel.config.automation.editor.triggers.copy"
)} )}
<ha-svg-icon slot="graphic" .path=${mdiContentCopy}></ha-svg-icon> <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( ${this.hass.localize(
"ui.panel.config.automation.editor.triggers.cut" "ui.panel.config.automation.editor.triggers.cut"
)} )}
<ha-svg-icon slot="graphic" .path=${mdiContentCut}></ha-svg-icon> <ha-svg-icon slot="graphic" .path=${mdiContentCut}></ha-svg-icon>
</mwc-list-item> </ha-list-item>
<mwc-list-item <ha-list-item
graphic="icon" graphic="icon"
.disabled=${this.disabled || this.first} .disabled=${this.disabled || this.first}
> >
${this.hass.localize("ui.panel.config.automation.editor.move_up")} ${this.hass.localize("ui.panel.config.automation.editor.move_up")}
<ha-svg-icon slot="graphic" .path=${mdiArrowUp}></ha-svg-icon <ha-svg-icon slot="graphic" .path=${mdiArrowUp}></ha-svg-icon
></mwc-list-item> ></ha-list-item>
<mwc-list-item <ha-list-item
graphic="icon" graphic="icon"
.disabled=${this.disabled || this.last} .disabled=${this.disabled || this.last}
> >
@ -244,37 +244,21 @@ export default class HaAutomationTriggerRow extends LitElement {
"ui.panel.config.automation.editor.move_down" "ui.panel.config.automation.editor.move_down"
)} )}
<ha-svg-icon slot="graphic" .path=${mdiArrowDown}></ha-svg-icon <ha-svg-icon slot="graphic" .path=${mdiArrowDown}></ha-svg-icon
></mwc-list-item> ></ha-list-item>
<li divider role="separator"></li> <ha-list-item graphic="icon" .disabled=${!supported}>
<mwc-list-item .disabled=${!supported} 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=${!supported} graphic="icon">
${this.hass.localize( ${this.hass.localize(
"ui.panel.config.automation.editor.edit_yaml" `ui.panel.config.automation.editor.edit_${!yamlMode ? "yaml" : "ui"}`
)} )}
${yamlMode <ha-svg-icon
? html`<ha-svg-icon slot="graphic"
class="selected_menu_item" .path=${mdiPlaylistEdit}
slot="graphic" ></ha-svg-icon>
.path=${mdiCheck} </ha-list-item>
></ha-svg-icon>`
: ``}
</mwc-list-item>
<li divider role="separator"></li> <li divider role="separator"></li>
<mwc-list-item <ha-list-item
graphic="icon" graphic="icon"
.disabled=${this.disabled || type === "list"} .disabled=${this.disabled || type === "list"}
> >
@ -292,8 +276,8 @@ export default class HaAutomationTriggerRow extends LitElement {
? mdiPlayCircleOutline ? mdiPlayCircleOutline
: mdiStopCircleOutline} : mdiStopCircleOutline}
></ha-svg-icon> ></ha-svg-icon>
</mwc-list-item> </ha-list-item>
<mwc-list-item <ha-list-item
class="warning" class="warning"
graphic="icon" graphic="icon"
.disabled=${this.disabled} .disabled=${this.disabled}
@ -306,7 +290,7 @@ export default class HaAutomationTriggerRow extends LitElement {
slot="graphic" slot="graphic"
.path=${mdiDelete} .path=${mdiDelete}
></ha-svg-icon> ></ha-svg-icon>
</mwc-list-item> </ha-list-item>
</ha-button-menu> </ha-button-menu>
<div <div
@ -506,17 +490,17 @@ export default class HaAutomationTriggerRow extends LitElement {
fireEvent(this, "move-down"); fireEvent(this, "move-down");
break; break;
case 7: case 7:
this._switchUiMode(); if (this._yamlMode) {
this._switchUiMode();
} else {
this._switchYamlMode();
}
this.expand(); this.expand();
break; break;
case 8: case 8:
this._switchYamlMode();
this.expand();
break;
case 9:
this._onDisable(); this._onDisable();
break; break;
case 10: case 9:
this._onDelete(); this._onDelete();
break; break;
} }
@ -730,19 +714,16 @@ export default class HaAutomationTriggerRow extends LitElement {
background-color: var(--accent-color); background-color: var(--accent-color);
color: var(--text-accent-color, var(--text-primary-color)); color: var(--text-accent-color, var(--text-primary-color));
} }
mwc-list-item[disabled] { ha-list-item[disabled] {
--mdc-theme-text-primary-on-background: var(--disabled-text-color); --mdc-theme-text-primary-on-background: var(--disabled-text-color);
} }
mwc-list-item.hidden { ha-list-item.hidden {
display: none; display: none;
} }
ha-textfield { ha-textfield {
display: block; display: block;
margin-bottom: 24px; margin-bottom: 24px;
} }
.selected_menu_item {
color: var(--primary-color);
}
li[role="separator"] { li[role="separator"] {
border-bottom-color: var(--divider-color); border-bottom-color: var(--divider-color);
} }

54
src/panels/config/scene/ha-scene-editor.ts
View File

@ -1,7 +1,6 @@
import type { ActionDetail } from "@material/mwc-list/mwc-list-foundation"; import type { ActionDetail } from "@material/mwc-list/mwc-list-foundation";
import "@material/mwc-list/mwc-list"; import "@material/mwc-list/mwc-list";
import { import {
mdiCheck,
mdiCog, mdiCog,
mdiContentDuplicate, mdiContentDuplicate,
mdiContentSave, mdiContentSave,
@ -11,6 +10,7 @@ import {
mdiInformationOutline, mdiInformationOutline,
mdiMotionPlayOutline, mdiMotionPlayOutline,
mdiPlay, mdiPlay,
mdiPlaylistEdit,
mdiTag, mdiTag,
} from "@mdi/js"; } from "@mdi/js";
import type { HassEvent } from "home-assistant-js-websocket"; import type { HassEvent } from "home-assistant-js-websocket";
@ -263,16 +263,11 @@ export class HaSceneEditor extends SubscribeMixin(
.disabled=${!this.sceneId || this._mode === "live"} .disabled=${!this.sceneId || this._mode === "live"}
> >
${this.hass.localize("ui.panel.config.scene.picker.apply")} ${this.hass.localize("ui.panel.config.scene.picker.apply")}
<ha-svg-icon <ha-svg-icon slot="graphic" .path=${mdiPlay}></ha-svg-icon>
class="selected_menu_item"
slot="graphic"
.path=${mdiPlay}
></ha-svg-icon>
</ha-list-item> </ha-list-item>
<ha-list-item graphic="icon" .disabled=${!this.sceneId}> <ha-list-item graphic="icon" .disabled=${!this.sceneId}>
${this.hass.localize("ui.panel.config.scene.picker.show_info")} ${this.hass.localize("ui.panel.config.scene.picker.show_info")}
<ha-svg-icon <ha-svg-icon
class="selected_menu_item"
slot="graphic" slot="graphic"
.path=${mdiInformationOutline} .path=${mdiInformationOutline}
></ha-svg-icon> ></ha-svg-icon>
@ -281,45 +276,21 @@ export class HaSceneEditor extends SubscribeMixin(
${this.hass.localize( ${this.hass.localize(
"ui.panel.config.automation.picker.show_settings" "ui.panel.config.automation.picker.show_settings"
)} )}
<ha-svg-icon <ha-svg-icon slot="graphic" .path=${mdiCog}></ha-svg-icon>
class="selected_menu_item"
slot="graphic"
.path=${mdiCog}
></ha-svg-icon>
</ha-list-item> </ha-list-item>
<ha-list-item graphic="icon" .disabled=${!this.sceneId}> <ha-list-item graphic="icon" .disabled=${!this.sceneId}>
${this.hass.localize( ${this.hass.localize(
`ui.panel.config.scene.picker.${this._getCategory(this._entityRegistryEntries, this._scene?.entity_id) ? "edit_category" : "assign_category"}` `ui.panel.config.scene.picker.${this._getCategory(this._entityRegistryEntries, this._scene?.entity_id) ? "edit_category" : "assign_category"}`
)} )}
<ha-svg-icon <ha-svg-icon slot="graphic" .path=${mdiTag}></ha-svg-icon>
class="selected_menu_item"
slot="graphic"
.path=${mdiTag}
></ha-svg-icon>
</ha-list-item> </ha-list-item>
<li divider role="separator"></li>
<ha-list-item graphic="icon"> <ha-list-item graphic="icon">
${this.hass.localize("ui.panel.config.automation.editor.edit_ui")} ${this.hass.localize(
${this._mode !== "yaml" `ui.panel.config.automation.editor.edit_${this._mode !== "yaml" ? "yaml" : "ui"}`
? html`<ha-svg-icon )}
class="selected_menu_item" <ha-svg-icon slot="graphic" .path=${mdiPlaylistEdit}></ha-svg-icon>
slot="graphic"
.path=${mdiCheck}
></ha-svg-icon>`
: nothing}
</ha-list-item>
<ha-list-item graphic="icon">
${this.hass.localize("ui.panel.config.automation.editor.edit_yaml")}
${this._mode === "yaml"
? html`<ha-svg-icon
class="selected_menu_item"
slot="graphic"
.path=${mdiCheck}
></ha-svg-icon>`
: nothing}
</ha-list-item> </ha-list-item>
<li divider role="separator"></li> <li divider role="separator"></li>
@ -717,17 +688,14 @@ export class HaSceneEditor extends SubscribeMixin(
if (this._mode === "yaml") { if (this._mode === "yaml") {
this._initEntities(this._config!); this._initEntities(this._config!);
this._exitYamlMode(); this._exitYamlMode();
} } else {
break;
case 5:
if (this._mode !== "yaml") {
this._enterYamlMode(); this._enterYamlMode();
} }
break; break;
case 6: case 5:
this._duplicate(); this._duplicate();
break; break;
case 7: case 6:
this._deleteTapped(); this._deleteTapped();
break; break;
} }

36
src/panels/config/script/ha-script-editor.ts
View File

@ -1,6 +1,5 @@
import "@material/mwc-button"; import "@material/mwc-button";
import { import {
mdiCheck,
mdiContentDuplicate, mdiContentDuplicate,
mdiContentSave, mdiContentSave,
mdiDebugStepOver, mdiDebugStepOver,
@ -10,6 +9,7 @@ import {
mdiFormTextbox, mdiFormTextbox,
mdiInformationOutline, mdiInformationOutline,
mdiPlay, mdiPlay,
mdiPlaylistEdit,
mdiRenameBox, mdiRenameBox,
mdiRobotConfused, mdiRobotConfused,
mdiTransitConnection, mdiTransitConnection,
@ -245,27 +245,16 @@ export class HaScriptEditor extends KeyboardShortcutMixin(LitElement) {
` `
: nothing} : nothing}
<li divider role="separator"></li> <ha-list-item
graphic="icon"
<ha-list-item graphic="icon" @click=${this._switchUiMode}> @click=${this._mode === "gui"
${this.hass.localize("ui.panel.config.automation.editor.edit_ui")} ? this._switchYamlMode
${this._mode === "gui" : this._switchUiMode}
? html`<ha-svg-icon >
class="selected_menu_item" ${this.hass.localize(
slot="graphic" `ui.panel.config.automation.editor.edit_${this._mode === "gui" ? "yaml" : "ui"}`
.path=${mdiCheck} )}
></ha-svg-icon> ` <ha-svg-icon slot="graphic" .path=${mdiPlaylistEdit}></ha-svg-icon>
: ``}
</ha-list-item>
<ha-list-item graphic="icon" @click=${this._switchYamlMode}>
${this.hass.localize("ui.panel.config.automation.editor.edit_yaml")}
${this._mode === "yaml"
? html`<ha-svg-icon
class="selected_menu_item"
slot="graphic"
.path=${mdiCheck}
></ha-svg-icon>`
: ``}
</ha-list-item> </ha-list-item>
<li divider role="separator"></li> <li divider role="separator"></li>
@ -874,9 +863,6 @@ export class HaScriptEditor extends KeyboardShortcutMixin(LitElement) {
ha-fab.dirty { ha-fab.dirty {
bottom: 0; bottom: 0;
} }
.selected_menu_item {
color: var(--primary-color);
}
li[role="separator"] { li[role="separator"] {
border-bottom-color: var(--divider-color); border-bottom-color: var(--divider-color);
} }

43
src/panels/config/script/ha-script-field-row.ts
View File

@ -1,6 +1,5 @@
import type { ActionDetail } from "@material/mwc-list/mwc-list-foundation"; import type { ActionDetail } from "@material/mwc-list/mwc-list-foundation";
import "@material/mwc-list/mwc-list-item"; import { mdiDelete, mdiDotsVertical, mdiPlaylistEdit } from "@mdi/js";
import { mdiCheck, mdiDelete, mdiDotsVertical } 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";
@ -13,6 +12,7 @@ import "../../../components/ha-button-menu";
import "../../../components/ha-card"; import "../../../components/ha-card";
import "../../../components/ha-form/ha-form"; import "../../../components/ha-form/ha-form";
import "../../../components/ha-expansion-panel"; import "../../../components/ha-expansion-panel";
import "../../../components/ha-list-item";
import type { SchemaUnion } from "../../../components/ha-form/types"; import type { SchemaUnion } from "../../../components/ha-form/types";
import "../../../components/ha-icon-button"; import "../../../components/ha-icon-button";
import "../../../components/ha-yaml-editor"; import "../../../components/ha-yaml-editor";
@ -98,31 +98,17 @@ export default class HaScriptFieldRow extends LitElement {
.path=${mdiDotsVertical} .path=${mdiDotsVertical}
></ha-icon-button> ></ha-icon-button>
<mwc-list-item graphic="icon"> <ha-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">
${this.hass.localize( ${this.hass.localize(
"ui.panel.config.automation.editor.edit_yaml" `ui.panel.config.automation.editor.edit_${!this._yamlMode ? "yaml" : "ui"}`
)} )}
${this._yamlMode <ha-svg-icon
? html`<ha-svg-icon slot="graphic"
class="selected_menu_item" .path=${mdiPlaylistEdit}
slot="graphic" ></ha-svg-icon>
.path=${mdiCheck} </ha-list-item>
></ha-svg-icon>`
: ``}
</mwc-list-item>
<mwc-list-item <ha-list-item
class="warning" class="warning"
graphic="icon" graphic="icon"
.disabled=${this.disabled} .disabled=${this.disabled}
@ -135,7 +121,7 @@ export default class HaScriptFieldRow extends LitElement {
slot="graphic" slot="graphic"
.path=${mdiDelete} .path=${mdiDelete}
></ha-svg-icon> ></ha-svg-icon>
</mwc-list-item> </ha-list-item>
</ha-button-menu> </ha-button-menu>
<div <div
class=${classMap({ class=${classMap({
@ -174,12 +160,9 @@ export default class HaScriptFieldRow extends LitElement {
private async _handleAction(ev: CustomEvent<ActionDetail>) { private async _handleAction(ev: CustomEvent<ActionDetail>) {
switch (ev.detail.index) { switch (ev.detail.index) {
case 0: case 0:
this._yamlMode = false; this._yamlMode = !this._yamlMode;
break; break;
case 1: case 1:
this._yamlMode = true;
break;
case 2:
this._onDelete(); this._onDelete();
break; break;
} }
@ -348,7 +331,7 @@ export default class HaScriptFieldRow extends LitElement {
border-top-left-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); --mdc-theme-text-primary-on-background: var(--disabled-text-color);
} }
.warning ul { .warning ul {