mirror of
https://github.com/home-assistant/frontend.git
synced 2025-07-21 00:06:35 +00:00
Add overflow menu for scene picker (#13621)
This commit is contained in:
Paul Bottein
GitHub
parent
e6862daa38
commit
df72e5099e
@ -1,7 +1,8 @@
|
||||
import {
|
||||
mdiContentDuplicate,
|
||||
mdiDelete,
|
||||
mdiHelpCircle,
|
||||
mdiInformationOutline,
|
||||
mdiPencil,
|
||||
mdiPencilOff,
|
||||
mdiPlay,
|
||||
mdiPlus,
|
||||
@ -9,7 +10,6 @@ import {
|
||||
import "@polymer/paper-tooltip/paper-tooltip";
|
||||
import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
|
||||
import { customElement, property, state } from "lit/decorators";
|
||||
import { ifDefined } from "lit/directives/if-defined";
|
||||
import memoizeOne from "memoize-one";
|
||||
import { fireEvent, HASSDomEvent } from "../../../common/dom/fire_event";
|
||||
import { computeStateName } from "../../../common/entity/compute_state_name";
|
||||
@ -23,9 +23,19 @@ import "../../../components/ha-fab";
|
||||
import "../../../components/ha-icon-button";
|
||||
import "../../../components/ha-state-icon";
|
||||
import "../../../components/ha-svg-icon";
|
||||
import "../../../components/ha-icon-overflow-menu";
|
||||
import { forwardHaptic } from "../../../data/haptics";
|
||||
import { activateScene, SceneEntity } from "../../../data/scene";
|
||||
import { showAlertDialog } from "../../../dialogs/generic/show-dialog-box";
|
||||
import {
|
||||
activateScene,
|
||||
deleteScene,
|
||||
getSceneConfig,
|
||||
SceneEntity,
|
||||
showSceneEditor,
|
||||
} from "../../../data/scene";
|
||||
import {
|
||||
showAlertDialog,
|
||||
showConfirmationDialog,
|
||||
} from "../../../dialogs/generic/show-dialog-box";
|
||||
import "../../../layouts/hass-tabs-subpage-data-table";
|
||||
import { haStyle } from "../../../resources/styles";
|
||||
import { HomeAssistant, Route } from "../../../types";
|
||||
@ -67,26 +77,8 @@ class HaSceneDashboard extends LitElement {
|
||||
}
|
||||
);
|
||||
|
||||
private _columns = memoizeOne(
|
||||
(_language): DataTableColumnContainer => ({
|
||||
activate: {
|
||||
title: "",
|
||||
label: this.hass.localize(
|
||||
"ui.panel.config.scene.picker.headers.activate"
|
||||
),
|
||||
type: "icon-button",
|
||||
template: (_toggle, scene) =>
|
||||
html`
|
||||
<ha-icon-button
|
||||
.scene=${scene}
|
||||
.label=${this.hass.localize(
|
||||
"ui.panel.config.scene.picker.activate_scene"
|
||||
)}
|
||||
.path=${mdiPlay}
|
||||
@click=${this._activateScene}
|
||||
></ha-icon-button>
|
||||
`,
|
||||
},
|
||||
private _columns = memoizeOne((_language): DataTableColumnContainer => {
|
||||
const columns: DataTableColumnContainer = {
|
||||
icon: {
|
||||
title: "",
|
||||
label: this.hass.localize("ui.panel.config.scene.picker.headers.state"),
|
||||
@ -101,56 +93,73 @@ class HaSceneDashboard extends LitElement {
|
||||
direction: "asc",
|
||||
grows: true,
|
||||
},
|
||||
info: {
|
||||
only_editable: {
|
||||
title: "",
|
||||
label: this.hass.localize(
|
||||
"ui.panel.config.scene.picker.headers.show_info"
|
||||
),
|
||||
type: "icon-button",
|
||||
template: (_info, scene) => html`
|
||||
<ha-icon-button
|
||||
.scene=${scene}
|
||||
@click=${this._showInfo}
|
||||
.label=${this.hass.localize(
|
||||
"ui.panel.config.scene.picker.show_info_scene"
|
||||
)}
|
||||
.path=${mdiInformationOutline}
|
||||
></ha-icon-button>
|
||||
`,
|
||||
},
|
||||
edit: {
|
||||
title: "",
|
||||
label: this.hass.localize("ui.panel.config.scene.picker.headers.edit"),
|
||||
type: "icon-button",
|
||||
template: (_info, scene: any) => html`
|
||||
<a
|
||||
href=${ifDefined(
|
||||
scene.attributes.id
|
||||
? `/config/scene/edit/${scene.attributes.id}`
|
||||
: undefined
|
||||
)}
|
||||
>
|
||||
<ha-icon-button
|
||||
.disabled=${!scene.attributes.id}
|
||||
.label=${this.hass.localize(
|
||||
"ui.panel.config.scene.picker.edit_scene"
|
||||
)}
|
||||
.path=${scene.attributes.id ? mdiPencil : mdiPencilOff}
|
||||
></ha-icon-button>
|
||||
</a>
|
||||
${!scene.attributes.id
|
||||
template: (_info, scene: any) =>
|
||||
!scene.attributes.id
|
||||
? html`
|
||||
<paper-tooltip animation-delay="0" position="left">
|
||||
${this.hass.localize(
|
||||
"ui.panel.config.scene.picker.only_editable"
|
||||
)}
|
||||
</paper-tooltip>
|
||||
<ha-svg-icon
|
||||
.path=${mdiPencilOff}
|
||||
style="color: var(--secondary-text-color)"
|
||||
></ha-svg-icon>
|
||||
`
|
||||
: ""}
|
||||
`,
|
||||
: "",
|
||||
},
|
||||
})
|
||||
);
|
||||
};
|
||||
|
||||
columns.actions = {
|
||||
title: "",
|
||||
type: "overflow-menu",
|
||||
template: (_: string, scene: any) =>
|
||||
html`
|
||||
<ha-icon-overflow-menu
|
||||
.hass=${this.hass}
|
||||
narrow
|
||||
.items=${[
|
||||
{
|
||||
path: mdiInformationOutline,
|
||||
label: this.hass.localize(
|
||||
"ui.panel.config.scene.picker.show_info"
|
||||
),
|
||||
action: () => this._showInfo(scene),
|
||||
},
|
||||
{
|
||||
path: mdiPlay,
|
||||
label: this.hass.localize(
|
||||
"ui.panel.config.scene.picker.activate"
|
||||
),
|
||||
action: () => this._activateScene(scene),
|
||||
},
|
||||
{
|
||||
path: mdiContentDuplicate,
|
||||
label: this.hass.localize(
|
||||
"ui.panel.config.scene.picker.duplicate"
|
||||
),
|
||||
action: () => this._duplicate(scene),
|
||||
disabled: !scene.attributes.id,
|
||||
},
|
||||
{
|
||||
label: this.hass.localize(
|
||||
"ui.panel.config.scene.picker.delete"
|
||||
),
|
||||
path: mdiDelete,
|
||||
action: () => this._deleteConfirm(scene),
|
||||
warning: scene.attributes.id,
|
||||
disabled: !scene.attributes.id,
|
||||
},
|
||||
]}
|
||||
>
|
||||
</ha-icon-overflow-menu>
|
||||
`,
|
||||
};
|
||||
|
||||
return columns;
|
||||
});
|
||||
|
||||
protected render(): TemplateResult {
|
||||
return html`
|
||||
@ -226,15 +235,11 @@ class HaSceneDashboard extends LitElement {
|
||||
this._filterValue = undefined;
|
||||
}
|
||||
|
||||
private _showInfo(ev) {
|
||||
ev.stopPropagation();
|
||||
const entityId = ev.currentTarget.scene.entity_id;
|
||||
fireEvent(this, "hass-more-info", { entityId });
|
||||
private _showInfo(scene: SceneEntity) {
|
||||
fireEvent(this, "hass-more-info", { entityId: scene.entity_id });
|
||||
}
|
||||
|
||||
private _activateScene = async (ev) => {
|
||||
ev.stopPropagation();
|
||||
const scene = ev.currentTarget.scene as SceneEntity;
|
||||
private _activateScene = async (scene: SceneEntity) => {
|
||||
await activateScene(this.hass, scene.entity_id);
|
||||
showToast(this, {
|
||||
message: this.hass.localize(
|
||||
@ -246,6 +251,34 @@ class HaSceneDashboard extends LitElement {
|
||||
forwardHaptic("light");
|
||||
};
|
||||
|
||||
private _deleteConfirm(scene: SceneEntity): void {
|
||||
showConfirmationDialog(this, {
|
||||
text: this.hass!.localize("ui.panel.config.scene.picker.delete_confirm"),
|
||||
confirmText: this.hass!.localize("ui.common.delete"),
|
||||
dismissText: this.hass!.localize("ui.common.cancel"),
|
||||
confirm: () => this._delete(scene),
|
||||
});
|
||||
}
|
||||
|
||||
private async _delete(scene: SceneEntity): Promise<void> {
|
||||
if (scene.attributes.id) {
|
||||
await deleteScene(this.hass, scene.attributes.id);
|
||||
}
|
||||
}
|
||||
|
||||
private async _duplicate(scene) {
|
||||
if (scene.attributes.id) {
|
||||
const config = await getSceneConfig(this.hass, scene.attributes.id);
|
||||
showSceneEditor({
|
||||
...config,
|
||||
id: undefined,
|
||||
name: `${config?.name} (${this.hass.localize(
|
||||
"ui.panel.config.scene.picker.duplicate"
|
||||
)})`,
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
private _showHelp() {
|
||||
showAlertDialog(this, {
|
||||
title: this.hass.localize("ui.panel.config.scene.picker.header"),
|
||||
|
||||
@ -2324,8 +2324,10 @@
|
||||
"add_scene": "Add scene",
|
||||
"only_editable": "Only scenes defined in scenes.yaml are editable.",
|
||||
"edit_scene": "Edit scene",
|
||||
"show_info_scene": "Show info about scene",
|
||||
"show_info": "[%key:ui::panel::config::automation::editor::show_info%]",
|
||||
"activate": "Activate",
|
||||
"delete_scene": "Delete scene",
|
||||
"delete": "[%key:ui::common::delete%]",
|
||||
"delete_confirm": "Are you sure you want to delete this scene?",
|
||||
"duplicate_scene": "Duplicate scene",
|
||||
"duplicate": "[%key:ui::common::duplicate%]",
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user