From f688780677af5eb2cb741d823dd16d33c81aca78 Mon Sep 17 00:00:00 2001 From: Simon Lamon <32477463+silamon@users.noreply.github.com> Date: Wed, 11 Dec 2024 08:49:15 +0100 Subject: [PATCH] Combine Edit in yaml and Edit in visual editor (2/2) (#23143) * yaml / visual part 2 * clean up * ci --- .../card-editor/hui-card-layout-editor.ts | 37 +++-------------- .../conditions/ha-card-condition-editor.ts | 40 ++++--------------- .../section-editor/hui-dialog-edit-section.ts | 38 ++++-------------- .../view-editor/hui-dialog-edit-view.ts | 40 +++++-------------- 4 files changed, 29 insertions(+), 126 deletions(-) diff --git a/src/panels/lovelace/editor/card-editor/hui-card-layout-editor.ts b/src/panels/lovelace/editor/card-editor/hui-card-layout-editor.ts index a79e6eeccd1c..9a0e1a179947 100644 --- a/src/panels/lovelace/editor/card-editor/hui-card-layout-editor.ts +++ b/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 { - ${this.hass.localize("ui.panel.lovelace.editor.edit_card.edit_ui")} - ${!this._yamlMode - ? html` - - ` - : nothing} - - - ${this.hass.localize( - "ui.panel.lovelace.editor.edit_card.edit_yaml" + `ui.panel.lovelace.editor.edit_view.edit_${!this._yamlMode ? "yaml" : "ui"}` )} - ${this._yamlMode - ? html` - - ` - : nothing} + @@ -266,10 +245,7 @@ export class HuiCardLayoutEditor extends LitElement { private async _handleAction(ev: CustomEvent) { switch (ev.detail.index) { case 0: - this._yamlMode = false; - break; - case 1: - this._yamlMode = true; + this._yamlMode = !this._yamlMode; 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; diff --git a/src/panels/lovelace/editor/conditions/ha-card-condition-editor.ts b/src/panels/lovelace/editor/conditions/ha-card-condition-editor.ts index a4308db46583..93016b367f7f 100644 --- a/src/panels/lovelace/editor/conditions/ha-card-condition-editor.ts +++ b/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 { ${this.hass.localize( - "ui.panel.lovelace.editor.edit_card.edit_ui" + `ui.panel.lovelace.editor.edit_view.edit_${!this._yamlMode ? "yaml" : "ui"}` )} - ${!this._yamlMode - ? html` - - ` - : ``} - - - - ${this.hass.localize( - "ui.panel.lovelace.editor.edit_card.edit_yaml" - )} - ${this._yamlMode - ? html` - - ` - : ``} +
  • @@ -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; diff --git a/src/panels/lovelace/editor/section-editor/hui-dialog-edit-section.ts b/src/panels/lovelace/editor/section-editor/hui-dialog-edit-section.ts index 0d7a1edced22..c456a3bad177 100644 --- a/src/panels/lovelace/editor/section-editor/hui-dialog-edit-section.ts +++ b/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} > - ${this.hass!.localize( - "ui.panel.lovelace.editor.edit_section.edit_ui" + ${this.hass.localize( + `ui.panel.lovelace.editor.edit_view.edit_${!this._yamlMode ? "yaml" : "ui"}` )} - ${!this._yamlMode - ? html`` - : ``} - - - - ${this.hass!.localize( - "ui.panel.lovelace.editor.edit_section.edit_yaml" - )} - ${this._yamlMode - ? html`` - : ``} + ${!this._yamlMode @@ -232,10 +216,7 @@ export class HuiDialogEditSection ev.preventDefault(); switch (ev.detail.index) { case 0: - this._yamlMode = false; - break; - case 1: - this._yamlMode = true; + this._yamlMode = !this._yamlMode; 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; diff --git a/src/panels/lovelace/editor/view-editor/hui-dialog-edit-view.ts b/src/panels/lovelace/editor/view-editor/hui-dialog-edit-view.ts index 68f7c4f93bf3..7d89b320ee5f 100644 --- a/src/panels/lovelace/editor/view-editor/hui-dialog-edit-view.ts +++ b/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} > - + ${this.hass!.localize( - "ui.panel.lovelace.editor.edit_view.edit_ui" + `ui.panel.lovelace.editor.edit_view.edit_${!this._yamlMode ? "yaml" : "ui"}` )} - ${!this._yamlMode - ? html`` - : ``} - - - - ${this.hass!.localize( - "ui.panel.lovelace.editor.edit_view.edit_yaml" - )} - ${this._yamlMode - ? html`` - : ``} - + + ${convertToSection ? html` @@ -314,10 +298,7 @@ export class HuiDialogEditView extends LitElement { ev.preventDefault(); switch (ev.detail.index) { case 0: - this._yamlMode = false; - break; - case 1: - this._yamlMode = true; + this._yamlMode = !this._yamlMode; 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; }