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

Add icon to edit card overflow menu (#17293)

Browse Source
This commit is contained in:
Paul Bottein 2023-07-13 16:34:42 +02:00 committed by GitHub
parent efc8ed5c94
commit 56e82eab03
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 104 additions and 75 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

85
src/panels/lovelace/components/hui-card-options.ts
View File

@ -1,7 +1,15 @@
import "@material/mwc-button"; import "@material/mwc-button";
import { ActionDetail } from "@material/mwc-list/mwc-list-foundation"; import { ActionDetail } from "@material/mwc-list/mwc-list-foundation";
import "@material/mwc-list/mwc-list-item"; import {
import { mdiArrowDown, mdiArrowUp, mdiDotsVertical } from "@mdi/js"; mdiArrowDown,
mdiArrowUp,
mdiContentCopy,
mdiContentCut,
mdiContentDuplicate,
mdiDelete,
mdiDotsVertical,
mdiFileMoveOutline,
} from "@mdi/js";
import deepClone from "deep-clone-simple"; import deepClone from "deep-clone-simple";
import { import {
CSSResultGroup, CSSResultGroup,
@ -17,11 +25,13 @@ import { storage } from "../../../common/decorators/storage";
import { fireEvent } from "../../../common/dom/fire_event"; import { fireEvent } from "../../../common/dom/fire_event";
import "../../../components/ha-button-menu"; import "../../../components/ha-button-menu";
import "../../../components/ha-icon-button"; import "../../../components/ha-icon-button";
import "../../../components/ha-list-item";
import { LovelaceCardConfig, saveConfig } from "../../../data/lovelace"; import { LovelaceCardConfig, saveConfig } from "../../../data/lovelace";
import { import {
showAlertDialog, showAlertDialog,
showPromptDialog, showPromptDialog,
} from "../../../dialogs/generic/show-dialog-box"; } from "../../../dialogs/generic/show-dialog-box";
import { haStyle } from "../../../resources/styles";
import { HomeAssistant } from "../../../types"; import { HomeAssistant } from "../../../types";
import { showSaveSuccessToast } from "../../../util/toast-saved-success"; import { showSaveSuccessToast } from "../../../util/toast-saved-success";
import { computeCardSize } from "../common/compute-card-size"; import { computeCardSize } from "../common/compute-card-size";
@ -122,31 +132,51 @@ export class HuiCardOptions extends LitElement {
)} )}
.path=${mdiDotsVertical} .path=${mdiDotsVertical}
></ha-icon-button> ></ha-icon-button>
<mwc-list-item> <ha-list-item graphic="icon">
<ha-svg-icon
slot="graphic"
.path=${mdiFileMoveOutline}
></ha-svg-icon>
${this.hass!.localize( ${this.hass!.localize(
"ui.panel.lovelace.editor.edit_card.move" "ui.panel.lovelace.editor.edit_card.move"
)}</mwc-list-item )}
> </ha-list-item>
<mwc-list-item <ha-list-item graphic="icon">
>${this.hass!.localize( <ha-svg-icon
slot="graphic"
.path=${mdiContentDuplicate}
></ha-svg-icon>
${this.hass!.localize(
"ui.panel.lovelace.editor.edit_card.duplicate" "ui.panel.lovelace.editor.edit_card.duplicate"
)}</mwc-list-item )}
> </ha-list-item>
<mwc-list-item <ha-list-item graphic="icon">
>${this.hass!.localize( <ha-svg-icon
slot="graphic"
.path=${mdiContentCopy}
></ha-svg-icon>
${this.hass!.localize(
"ui.panel.lovelace.editor.edit_card.copy" "ui.panel.lovelace.editor.edit_card.copy"
)}</mwc-list-item )}
> </ha-list-item>
<mwc-list-item <ha-list-item graphic="icon">
>${this.hass!.localize( <ha-svg-icon
"ui.panel.lovelace.editor.edit_card.cut" slot="graphic"
)}</mwc-list-item .path=${mdiContentCut}
> ></ha-svg-icon>
<mwc-list-item class="delete-item"> ${this.hass!.localize("ui.panel.lovelace.editor.edit_card.cut")}
</ha-list-item>
<li divider role="separator"></li>
<ha-list-item class="warning" graphic="icon">
<ha-svg-icon
class="warning"
slot="graphic"
.path=${mdiDelete}
></ha-svg-icon>
${this.hass!.localize( ${this.hass!.localize(
"ui.panel.lovelace.editor.edit_card.delete" "ui.panel.lovelace.editor.edit_card.delete"
)}</mwc-list-item )}
> </ha-list-item>
</ha-button-menu> </ha-button-menu>
</div> </div>
</div> </div>
@ -155,7 +185,9 @@ export class HuiCardOptions extends LitElement {
} }
static get styles(): CSSResultGroup { static get styles(): CSSResultGroup {
return css` return [
haStyle,
css`
:host(:hover) { :host(:hover) {
outline: 2px solid var(--primary-color); outline: 2px solid var(--primary-color);
} }
@ -205,15 +237,12 @@ export class HuiCardOptions extends LitElement {
color: var(--disabled-text-color); color: var(--disabled-text-color);
} }
mwc-list-item { ha-list-item {
cursor: pointer; cursor: pointer;
white-space: nowrap; white-space: nowrap;
} }
`,
mwc-list-item.delete-item { ];
color: var(--error-color);
}
`;
} }
private _handleAction(ev: CustomEvent<ActionDetail>) { private _handleAction(ev: CustomEvent<ActionDetail>) {

8
src/translations/en.json
View File

@ -4548,10 +4548,10 @@
"add": "Add Card", "add": "Add Card",
"edit": "Edit", "edit": "Edit",
"clear": "Clear", "clear": "Clear",
"delete": "Delete card", "delete": "Delete",
"copy": "Copy card", "copy": "Copy",
"cut": "Cut card", "cut": "Cut",
"duplicate": "Duplicate card", "duplicate": "Duplicate",
"move": "Move to view", "move": "Move to view",
"move_up": "Move card up", "move_up": "Move card up",
"move_down": "Move card down", "move_down": "Move card down",