From f93c7e1b6e770f31d72356557dc059b9e8df811f Mon Sep 17 00:00:00 2001 From: Paul Bottein Date: Thu, 17 Oct 2024 18:16:30 +0200 Subject: [PATCH] Improve card and badge edit mode (#22413) --- src/panels/lovelace/badges/hui-view-badges.ts | 5 +++ .../components/hui-badge-edit-mode.ts | 45 ++++++++++++------- .../lovelace/components/hui-card-edit-mode.ts | 43 +++++++++++------- .../lovelace/components/hui-card-options.ts | 4 +- .../lovelace/sections/hui-grid-section.ts | 8 +++- .../lovelace/views/hui-sections-view.ts | 5 +++ 6 files changed, 74 insertions(+), 36 deletions(-) diff --git a/src/panels/lovelace/badges/hui-view-badges.ts b/src/panels/lovelace/badges/hui-view-badges.ts index 9fa2dee8be..ee3d23e2ff 100644 --- a/src/panels/lovelace/badges/hui-view-badges.ts +++ b/src/panels/lovelace/badges/hui-view-badges.ts @@ -11,6 +11,7 @@ import { customElement, property, state } from "lit/decorators"; import { classMap } from "lit/directives/class-map"; import { repeat } from "lit/directives/repeat"; import { fireEvent } from "../../../common/dom/fire_event"; +import "../../../components/ha-ripple"; import "../../../components/ha-sortable"; import type { HaSortableOptions } from "../../../components/ha-sortable"; import "../../../components/ha-svg-icon"; @@ -157,6 +158,7 @@ export class HuiViewBadges extends LitElement { "ui.panel.lovelace.editor.section.add_badge" )} > + ` @@ -208,6 +210,9 @@ export class HuiViewBadges extends LitElement { --mdc-icon-size: 18px; cursor: pointer; color: var(--primary-text-color); + --ha-ripple-color: var(--primary-color); + --ha-ripple-hover-opacity: 0.04; + --ha-ripple-pressed-opacity: 0.12; } .add:focus { border-style: solid; diff --git a/src/panels/lovelace/components/hui-badge-edit-mode.ts b/src/panels/lovelace/components/hui-badge-edit-mode.ts index bf57aae9b6..2614344085 100644 --- a/src/panels/lovelace/components/hui-badge-edit-mode.ts +++ b/src/panels/lovelace/components/hui-badge-edit-mode.ts @@ -2,10 +2,10 @@ import { ActionDetail } from "@material/mwc-list/mwc-list-foundation"; import { mdiContentCopy, mdiContentCut, - mdiContentDuplicate, mdiDelete, mdiDotsVertical, mdiPencil, + mdiPlusCircleMultipleOutline, } from "@mdi/js"; import deepClone from "deep-clone-simple"; import { CSSResultGroup, LitElement, TemplateResult, css, html } from "lit"; @@ -17,6 +17,7 @@ import "../../../components/ha-button-menu"; import "../../../components/ha-icon-button"; import "../../../components/ha-list-item"; import "../../../components/ha-svg-icon"; +import { ensureBadgeConfig } from "../../../data/lovelace/config/badge"; import { LovelaceCardConfig } from "../../../data/lovelace/config/card"; import { haStyle } from "../../../resources/styles"; import { HomeAssistant } from "../../../types"; @@ -28,7 +29,6 @@ import { parseLovelaceCardPath, } from "../editor/lovelace-path"; import { Lovelace } from "../types"; -import { ensureBadgeConfig } from "../../../data/lovelace/config/badge"; @customElement("hui-badge-edit-mode") export class HuiBadgeEditMode extends LitElement { @@ -111,8 +111,8 @@ export class HuiBadgeEditMode extends LitElement {
@@ -129,10 +129,14 @@ export class HuiBadgeEditMode extends LitElement { > + + + ${this.hass.localize("ui.panel.lovelace.editor.edit_card.edit")} + ${this.hass.localize( "ui.panel.lovelace.editor.edit_card.duplicate" @@ -168,18 +172,33 @@ export class HuiBadgeEditMode extends LitElement { this._menuOpened = false; } + private _handleOverlayClick(ev): void { + if (ev.defaultPrevented) { + return; + } + if (ev.type === "keydown" && ev.key !== "Enter" && ev.key !== " ") { + return; + } + ev.preventDefault(); + ev.stopPropagation(); + this._editBadge(); + } + private _handleAction(ev: CustomEvent) { switch (ev.detail.index) { case 0: - this._duplicateBadge(); + this._editBadge(); break; case 1: - this._copyBadge(); + this._duplicateBadge(); break; case 2: - this._cutBadge(); + this._copyBadge(); break; case 3: + this._cutBadge(); + break; + case 4: this._deleteBadge(); break; } @@ -208,15 +227,7 @@ export class HuiBadgeEditMode extends LitElement { }); } - private _editBadge(ev): void { - if (ev.defaultPrevented) { - return; - } - if (ev.type === "keydown" && ev.key !== "Enter" && ev.key !== " ") { - return; - } - ev.preventDefault(); - ev.stopPropagation(); + private _editBadge(): void { fireEvent(this, "ll-edit-badge", { path: this.path! }); } diff --git a/src/panels/lovelace/components/hui-card-edit-mode.ts b/src/panels/lovelace/components/hui-card-edit-mode.ts index 3c55b20e43..605cae0a55 100644 --- a/src/panels/lovelace/components/hui-card-edit-mode.ts +++ b/src/panels/lovelace/components/hui-card-edit-mode.ts @@ -3,10 +3,10 @@ import { ActionDetail } from "@material/mwc-list/mwc-list-foundation"; import { mdiContentCopy, mdiContentCut, - mdiContentDuplicate, mdiDelete, mdiDotsVertical, mdiPencil, + mdiPlusCircleMultipleOutline, } from "@mdi/js"; import deepClone from "deep-clone-simple"; import { CSSResultGroup, LitElement, TemplateResult, css, html } from "lit"; @@ -111,8 +111,8 @@ export class HuiCardEditMode extends LitElement {
@@ -129,10 +129,14 @@ export class HuiCardEditMode extends LitElement { > + + + ${this.hass.localize("ui.panel.lovelace.editor.edit_card.edit")} + ${this.hass.localize( "ui.panel.lovelace.editor.edit_card.duplicate" @@ -168,18 +172,33 @@ export class HuiCardEditMode extends LitElement { this._menuOpened = false; } + private _handleOverlayClick(ev): void { + if (ev.defaultPrevented) { + return; + } + if (ev.type === "keydown" && ev.key !== "Enter" && ev.key !== " ") { + return; + } + ev.preventDefault(); + ev.stopPropagation(); + this._editCard(); + } + private _handleAction(ev: CustomEvent) { switch (ev.detail.index) { case 0: - this._duplicateCard(); + this._editCard(); break; case 1: - this._copyCard(); + this._duplicateCard(); break; case 2: - this._cutCard(); + this._copyCard(); break; case 3: + this._cutCard(); + break; + case 4: this._deleteCard(true); break; } @@ -197,15 +216,7 @@ export class HuiCardEditMode extends LitElement { }); } - private _editCard(ev): void { - if (ev.defaultPrevented) { - return; - } - if (ev.type === "keydown" && ev.key !== "Enter" && ev.key !== " ") { - return; - } - ev.preventDefault(); - ev.stopPropagation(); + private _editCard(): void { fireEvent(this, "ll-edit-card", { path: this.path! }); } diff --git a/src/panels/lovelace/components/hui-card-options.ts b/src/panels/lovelace/components/hui-card-options.ts index 261c957758..3df4eb6d24 100644 --- a/src/panels/lovelace/components/hui-card-options.ts +++ b/src/panels/lovelace/components/hui-card-options.ts @@ -3,12 +3,12 @@ import { ActionDetail } from "@material/mwc-list/mwc-list-foundation"; import { mdiContentCopy, mdiContentCut, - mdiContentDuplicate, mdiDelete, mdiDotsVertical, mdiFileMoveOutline, mdiMinus, mdiPlus, + mdiPlusCircleMultipleOutline, } from "@mdi/js"; import deepClone from "deep-clone-simple"; import { @@ -158,7 +158,7 @@ export class HuiCardOptions extends LitElement { ${this.hass!.localize( "ui.panel.lovelace.editor.edit_card.duplicate" diff --git a/src/panels/lovelace/sections/hui-grid-section.ts b/src/panels/lovelace/sections/hui-grid-section.ts index 73894cc3bb..4c477891a6 100644 --- a/src/panels/lovelace/sections/hui-grid-section.ts +++ b/src/panels/lovelace/sections/hui-grid-section.ts @@ -4,6 +4,7 @@ import { property, state } from "lit/decorators"; import { classMap } from "lit/directives/class-map"; import { repeat } from "lit/directives/repeat"; import { styleMap } from "lit/directives/style-map"; +import "../../../components/ha-ripple"; import { fireEvent } from "../../../common/dom/fire_event"; import type { HaSortableOptions } from "../../../components/ha-sortable"; import { LovelaceSectionElement } from "../../../data/lovelace"; @@ -12,10 +13,10 @@ import type { LovelaceSectionConfig } from "../../../data/lovelace/config/sectio import { haStyle } from "../../../resources/styles"; import type { HomeAssistant } from "../../../types"; import { HuiCard } from "../cards/hui-card"; +import { computeCardGridSize } from "../common/compute-card-grid-size"; import "../components/hui-card-edit-mode"; import { moveCard } from "../editor/config-util"; import type { Lovelace } from "../types"; -import { computeCardGridSize } from "../common/compute-card-grid-size"; const CARD_SORTABLE_OPTIONS: HaSortableOptions = { delay: 100, @@ -128,6 +129,7 @@ export class GridSection extends LitElement implements LovelaceSectionElement { "ui.panel.lovelace.editor.section.add_card" )} > + ` @@ -229,6 +231,7 @@ export class GridSection extends LitElement implements LovelaceSectionElement { } .add { + position: relative; outline: none; grid-row: span var(--row-size, 1); grid-column: span var(--column-size, 2); @@ -238,6 +241,9 @@ export class GridSection extends LitElement implements LovelaceSectionElement { border: 2px dashed var(--primary-color); height: var(--row-height); order: 1; + --ha-ripple-color: var(--primary-color); + --ha-ripple-hover-opacity: 0.04; + --ha-ripple-pressed-opacity: 0.12; } .add:focus { border-style: solid; diff --git a/src/panels/lovelace/views/hui-sections-view.ts b/src/panels/lovelace/views/hui-sections-view.ts index b04d433e0e..a4b3c0d18d 100644 --- a/src/panels/lovelace/views/hui-sections-view.ts +++ b/src/panels/lovelace/views/hui-sections-view.ts @@ -16,6 +16,7 @@ import { clamp } from "../../../common/number/clamp"; import "../../../components/ha-icon-button"; import "../../../components/ha-sortable"; import "../../../components/ha-svg-icon"; +import "../../../components/ha-ripple"; import type { LovelaceViewElement } from "../../../data/lovelace"; import type { LovelaceViewConfig } from "../../../data/lovelace/config/view"; import { showConfirmationDialog } from "../../../dialogs/generic/show-dialog-box"; @@ -234,6 +235,7 @@ export class SectionsView extends LitElement implements LovelaceViewElement { "ui.panel.lovelace.editor.section.create_section" )} > + ` @@ -382,6 +384,9 @@ export class SectionsView extends LitElement implements LovelaceViewElement { height: calc(var(--row-height) + 2 * (var(--row-gap) + 2px)); padding: 8px; box-sizing: border-box; + --ha-ripple-color: var(--primary-color); + --ha-ripple-hover-opacity: 0.04; + --ha-ripple-pressed-opacity: 0.12; } .create-section:focus {