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

* yaml / visual part 2

* clean up

* ci

src/panels/lovelace/editor/card-editor/hui-card-layout-editor.ts

@@ -1,7 +1,7 @@
 import type { ActionDetail } from "@material/mwc-list";
-import { mdiCheck, mdiDotsVertical } from "@mdi/js";
+import { mdiDotsVertical, mdiPlaylistEdit } from "@mdi/js";
 import type { PropertyValues } from "lit";
-import { css, html, LitElement, nothing } from "lit";
+import { css, html, LitElement } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { styleMap } from "lit/directives/style-map";
 import memoizeOne from "memoize-one";
@@ -111,31 +111,10 @@ export class HuiCardLayoutEditor extends LitElement {
           </ha-icon-button>
 
           <ha-list-item graphic="icon" .disabled=${!this._uiAvailable}>
-            ${this.hass.localize("ui.panel.lovelace.editor.edit_card.edit_ui")}
-            ${!this._yamlMode
-              ? html`
-                  <ha-svg-icon
-                    class="selected_menu_item"
-                    slot="graphic"
-                    .path=${mdiCheck}
-                  ></ha-svg-icon>
-                `
-              : nothing}
-          </ha-list-item>
-
-          <ha-list-item graphic="icon">
             ${this.hass.localize(
-              "ui.panel.lovelace.editor.edit_card.edit_yaml"
+              `ui.panel.lovelace.editor.edit_view.edit_${!this._yamlMode ? "yaml" : "ui"}`
             )}
-            ${this._yamlMode
+            <ha-svg-icon slot="graphic" .path=${mdiPlaylistEdit}></ha-svg-icon>
-              ? html`
-                  <ha-svg-icon
-                    class="selected_menu_item"
-                    slot="graphic"
-                    .path=${mdiCheck}
-                  ></ha-svg-icon>
-                `
-              : nothing}
           </ha-list-item>
         </ha-button-menu>
       </div>
@@ -266,10 +245,7 @@ export class HuiCardLayoutEditor extends LitElement {
   private async _handleAction(ev: CustomEvent<ActionDetail>) {
     switch (ev.detail.index) {
       case 0:
-        this._yamlMode = false;
+        this._yamlMode = !this._yamlMode;
-        break;
-      case 1:
-        this._yamlMode = true;
         break;
     }
   }
@@ -357,9 +333,6 @@ export class HuiCardLayoutEditor extends LitElement {
         --mdc-theme-text-primary-on-background: var(--primary-text-color);
         margin-top: -8px;
       }
-      .selected_menu_item {
-        color: var(--primary-color);
-      }
       .disabled {
         opacity: 0.5;
         pointer-events: none;

src/panels/lovelace/editor/conditions/ha-card-condition-editor.ts

@@ -1,5 +1,5 @@
 import type { ActionDetail } from "@material/mwc-list";
-import { mdiCheck, mdiDelete, mdiDotsVertical, mdiFlask } from "@mdi/js";
+import { mdiDelete, mdiDotsVertical, mdiFlask, mdiPlaylistEdit } from "@mdi/js";
 import type { PropertyValues } from "lit";
 import { LitElement, css, html, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
@@ -132,32 +132,12 @@ export class HaCardConditionEditor extends LitElement {
 
             <ha-list-item graphic="icon" .disabled=${!this._uiAvailable}>
               ${this.hass.localize(
-                "ui.panel.lovelace.editor.edit_card.edit_ui"
+                `ui.panel.lovelace.editor.edit_view.edit_${!this._yamlMode ? "yaml" : "ui"}`
               )}
-              ${!this._yamlMode
+              <ha-svg-icon
-                ? html`
+                slot="graphic"
-                    <ha-svg-icon
+                .path=${mdiPlaylistEdit}
-                      class="selected_menu_item"
+              ></ha-svg-icon>
-                      slot="graphic"
-                      .path=${mdiCheck}
-                    ></ha-svg-icon>
-                  `
-                : ``}
-            </ha-list-item>
-
-            <ha-list-item graphic="icon">
-              ${this.hass.localize(
-                "ui.panel.lovelace.editor.edit_card.edit_yaml"
-              )}
-              ${this._yamlMode
-                ? html`
-                    <ha-svg-icon
-                      class="selected_menu_item"
-                      slot="graphic"
-                      .path=${mdiCheck}
-                    ></ha-svg-icon>
-                  `
-                : ``}
             </ha-list-item>
 
             <li divider role="separator"></li>
@@ -239,12 +219,9 @@ export class HaCardConditionEditor extends LitElement {
         await this._testCondition();
         break;
       case 1:
-        this._yamlMode = false;
+        this._yamlMode = !this._yamlMode;
         break;
       case 2:
-        this._yamlMode = true;
-        break;
-      case 3:
         this._delete();
         break;
     }
@@ -325,9 +302,6 @@ export class HaCardConditionEditor extends LitElement {
       .content {
         padding: 12px;
       }
-      .selected_menu_item {
-        color: var(--primary-color);
-      }
       .disabled {
         opacity: 0.5;
         pointer-events: none;

src/panels/lovelace/editor/section-editor/hui-dialog-edit-section.ts

@@ -1,5 +1,5 @@
 import type { ActionDetail } from "@material/mwc-list";
-import { mdiCheck, mdiClose, mdiDotsVertical } from "@mdi/js";
+import { mdiClose, mdiDotsVertical, mdiPlaylistEdit } from "@mdi/js";
 import type { CSSResultGroup, PropertyValues, TemplateResult } from "lit";
 import { LitElement, css, html, nothing } from "lit";
 import { customElement, property, query, state } from "lit/decorators";
@@ -157,29 +157,13 @@ export class HuiDialogEditSection
               .path=${mdiDotsVertical}
             ></ha-icon-button>
             <ha-list-item graphic="icon">
-              ${this.hass!.localize(
+              ${this.hass.localize(
-                "ui.panel.lovelace.editor.edit_section.edit_ui"
+                `ui.panel.lovelace.editor.edit_view.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-svg-icon>`
-                : ``}
-            </ha-list-item>
-
-            <ha-list-item graphic="icon">
-              ${this.hass!.localize(
-                "ui.panel.lovelace.editor.edit_section.edit_yaml"
-              )}
-              ${this._yamlMode
-                ? html`<ha-svg-icon
-                    class="selected_menu_item"
-                    slot="graphic"
-                    .path=${mdiCheck}
-                  ></ha-svg-icon>`
-                : ``}
             </ha-list-item>
           </ha-button-menu>
           ${!this._yamlMode
@@ -232,10 +216,7 @@ export class HuiDialogEditSection
     ev.preventDefault();
     switch (ev.detail.index) {
       case 0:
-        this._yamlMode = false;
+        this._yamlMode = !this._yamlMode;
-        break;
-      case 1:
-        this._yamlMode = true;
         break;
     }
   }
@@ -297,9 +278,6 @@ export class HuiDialogEditSection
           text-transform: uppercase;
           padding: 0 20px;
         }
-        .selected_menu_item {
-          color: var(--primary-color);
-        }
         @media all and (min-width: 600px) {
           ha-dialog {
             --mdc-dialog-min-width: 600px;

src/panels/lovelace/editor/view-editor/hui-dialog-edit-view.ts

@@ -2,7 +2,7 @@ import "@material/mwc-button";
 import type { ActionDetail } from "@material/mwc-list";
 import "@material/mwc-tab-bar/mwc-tab-bar";
 import "@material/mwc-tab/mwc-tab";
-import { mdiCheck, mdiClose, mdiDotsVertical } from "@mdi/js";
+import { mdiClose, mdiDotsVertical, mdiPlaylistEdit } from "@mdi/js";
 import type { CSSResultGroup, PropertyValues } from "lit";
 import { LitElement, css, html, nothing } from "lit";
 import { customElement, property, query, state } from "lit/decorators";
@@ -203,31 +203,15 @@ export class HuiDialogEditView 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.lovelace.editor.edit_view.edit_ui"
+                `ui.panel.lovelace.editor.edit_view.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 graphic="icon">
-              ${this.hass!.localize(
-                "ui.panel.lovelace.editor.edit_view.edit_yaml"
-              )}
-              ${this._yamlMode
-                ? html`<ha-svg-icon
-                    class="selected_menu_item"
-                    slot="graphic"
-                    .path=${mdiCheck}
-                  ></ha-svg-icon>`
-                : ``}
-            </mwc-list-item>
           </ha-button-menu>
           ${convertToSection
             ? html`
@@ -314,10 +298,7 @@ export class HuiDialogEditView extends LitElement {
     ev.preventDefault();
     switch (ev.detail.index) {
       case 0:
-        this._yamlMode = false;
+        this._yamlMode = !this._yamlMode;
-        break;
-      case 1:
-        this._yamlMode = true;
         break;
     }
   }
@@ -551,9 +532,6 @@ export class HuiDialogEditView extends LitElement {
           margin-inline-end: auto;
           margin-inline-start: initial;
         }
-        .selected_menu_item {
-          color: var(--primary-color);
-        }
         .hidden {
           display: none;
         }