diff --git a/hassio/src/addon-store/hassio-addon-store.ts b/hassio/src/addon-store/hassio-addon-store.ts index b4b68d2691..c02d8c1b12 100644 --- a/hassio/src/addon-store/hassio-addon-store.ts +++ b/hassio/src/addon-store/hassio-addon-store.ts @@ -25,6 +25,7 @@ import { HomeAssistant, Route } from "../../../src/types"; import { showRepositoriesDialog } from "../dialogs/repositories/show-dialog-repositories"; import { supervisorTabs } from "../hassio-tabs"; import "./hassio-addon-repository"; +import { ActionDetail } from "@material/mwc-list/mwc-list-foundation"; const sortRepos = (a: HassioAddonRepository, b: HassioAddonRepository) => { if (a.slug === "local") { @@ -97,14 +98,18 @@ class HassioAddonStore extends LitElement { .tabs=${supervisorTabs} > Add-on store - + - + Repositories - + Reload @@ -143,6 +148,17 @@ class HassioAddonStore extends LitElement { this._loadData(); } + private _handleAction(ev: CustomEvent) { + switch (ev.detail.index) { + case 0: + this._manageRepositories(); + break; + case 1: + this.refreshData(); + break; + } + } + private apiCalled(ev) { if (ev.detail.success) { this._loadData(); diff --git a/src/common/mwc/handle-request-selected-event.ts b/src/common/mwc/handle-request-selected-event.ts new file mode 100644 index 0000000000..3081ac5af0 --- /dev/null +++ b/src/common/mwc/handle-request-selected-event.ts @@ -0,0 +1,14 @@ +import { + RequestSelectedDetail, + ListItem, +} from "@material/mwc-list/mwc-list-item"; + +export const shouldHandleRequestSelectedEvent = ( + ev: CustomEvent +): boolean => { + if (!ev.detail.selected && ev.detail.source !== "property") { + return false; + } + (ev.target as ListItem).selected = false; + return true; +}; diff --git a/src/components/ha-button-menu.ts b/src/components/ha-button-menu.ts index 2abf8d9625..e325925d57 100644 --- a/src/components/ha-button-menu.ts +++ b/src/components/ha-button-menu.ts @@ -18,14 +18,30 @@ import "./ha-icon-button"; export class HaButtonMenu extends LitElement { @property() public corner: Corner = "TOP_START"; + @property({ type: Boolean }) public multi = false; + + @property({ type: Boolean }) public activatable = false; + @query("mwc-menu") private _menu?: Menu; + public get items() { + return this._menu?.items; + } + + public get selected() { + return this._menu?.selected; + } + protected render(): TemplateResult { return html`
- + `; diff --git a/src/components/ha-date-range-picker.ts b/src/components/ha-date-range-picker.ts index d1e5244d02..965c3c0cd6 100644 --- a/src/components/ha-date-range-picker.ts +++ b/src/components/ha-date-range-picker.ts @@ -18,6 +18,7 @@ import "@polymer/paper-input/paper-input"; import "@material/mwc-list/mwc-list"; import "./date-range-picker"; import { computeRTLDirection } from "../common/util/compute_rtl"; +import { ActionDetail } from "@material/mwc-list/mwc-list-foundation"; export interface DateRangePickerRanges { [key: string]: [Date, Date]; @@ -85,15 +86,9 @@ export class HaDateRangePicker extends LitElement { class="date-range-ranges" .dir=${this._rtlDirection} > - - ${Object.entries(this.ranges).map( - ([name, dates]) => html` + + ${Object.keys(this.ranges).map( + (name) => html` ${name} ` )} @@ -124,12 +119,10 @@ export class HaDateRangePicker extends LitElement { ); } - private _setDateRange(ev: Event) { - const target = ev.target as any; - const startDate = target.startDate; - const endDate = target.endDate; + private _setDateRange(ev: CustomEvent) { + const dateRange = Object.values(this.ranges!)[ev.detail.index]; const dateRangePicker = this._dateRangePicker; - dateRangePicker.clickRange([startDate, endDate]); + dateRangePicker.clickRange(dateRange); dateRangePicker.clickedApply(); } diff --git a/src/panels/config/automation/action/ha-automation-action-row.ts b/src/panels/config/automation/action/ha-automation-action-row.ts index 7c238b3f79..12b819078a 100644 --- a/src/panels/config/automation/action/ha-automation-action-row.ts +++ b/src/panels/config/automation/action/ha-automation-action-row.ts @@ -29,8 +29,9 @@ import "./types/ha-automation-action-event"; import "./types/ha-automation-action-scene"; import "./types/ha-automation-action-service"; import "./types/ha-automation-action-wait_template"; -import type { RequestSelectedDetail } from "@material/mwc-list/mwc-list-item"; import { handleStructError } from "../../../lovelace/common/structs/handle-errors"; +import { ActionDetail } from "@material/mwc-list/mwc-list-foundation"; +import { haStyle } from "../../../../resources/styles"; const OPTIONS = [ "condition", @@ -134,17 +135,14 @@ export default class HaAutomationActionRow extends LitElement { ` : ""} - + - + ${yamlMode ? this.hass.localize( "ui.panel.config.automation.editor.edit_ui" @@ -158,7 +156,7 @@ export default class HaAutomationActionRow extends LitElement { "ui.panel.config.automation.editor.actions.duplicate" )} - + ${this.hass.localize( "ui.panel.config.automation.editor.actions.delete" )} @@ -177,21 +175,20 @@ export default class HaAutomationActionRow extends LitElement { : ""} ${yamlMode ? html` -
- ${selected === -1 - ? html` - ${this.hass.localize( - "ui.panel.config.automation.editor.actions.unsupported_action", - "action", - type - )} - ` - : ""} - -
+ ${selected === -1 + ? html` + ${this.hass.localize( + "ui.panel.config.automation.editor.actions.unsupported_action", + "action", + type + )} + ` + : ""} +

Edit in YAML

+ ` : html` ) { + switch (ev.detail.index) { + case 0: + this._switchYamlMode(); + break; + case 1: + break; + case 2: + this._onDelete(); + break; + } + } + private _onDelete() { showConfirmationDialog(this, { text: this.hass.localize( @@ -288,40 +298,34 @@ export default class HaAutomationActionRow extends LitElement { fireEvent(this, "value-changed", { value: ev.detail.value }); } - private _switchYamlMode(ev: CustomEvent) { - if (ev.detail.source !== "interaction") { - return; - } + private _switchYamlMode() { this._yamlMode = !this._yamlMode; } - static get styles(): CSSResult { - return css` - .card-menu { - position: absolute; - top: 0; - right: 0; - z-index: 3; - --mdc-theme-text-primary-on-background: var(--primary-text-color); - } - .rtl .card-menu { - right: auto; - left: 0; - } - ha-button-menu { - margin: 8px; - } - mwc-list-item[disabled] { - --mdc-theme-text-primary-on-background: var(--disabled-text-color); - } - .warning { - color: var(--warning-color); - margin-bottom: 8px; - } - .warning ul { - margin: 4px 0; - } - `; + static get styles(): CSSResult[] { + return [ + haStyle, + css` + .card-menu { + float: right; + z-index: 3; + --mdc-theme-text-primary-on-background: var(--primary-text-color); + } + .rtl .card-menu { + float: left; + } + mwc-list-item[disabled] { + --mdc-theme-text-primary-on-background: var(--disabled-text-color); + } + .warning { + color: var(--warning-color); + margin-bottom: 8px; + } + .warning ul { + margin: 4px 0; + } + `, + ]; } } diff --git a/src/panels/config/automation/condition/ha-automation-condition-editor.ts b/src/panels/config/automation/condition/ha-automation-condition-editor.ts index ecc54fdfd1..9f3f0d91f1 100644 --- a/src/panels/config/automation/condition/ha-automation-condition-editor.ts +++ b/src/panels/config/automation/condition/ha-automation-condition-editor.ts @@ -2,7 +2,13 @@ import "@polymer/paper-dropdown-menu/paper-dropdown-menu-light"; import "@polymer/paper-item/paper-item"; import "@polymer/paper-listbox/paper-listbox"; import type { PaperListboxElement } from "@polymer/paper-listbox/paper-listbox"; -import { customElement, html, LitElement, property } from "lit-element"; +import { + customElement, + html, + LitElement, + property, + CSSResult, +} from "lit-element"; import { dynamicElement } from "../../../../common/dom/dynamic-element-directive"; import { fireEvent } from "../../../../common/dom/fire_event"; import "../../../../components/ha-card"; @@ -19,6 +25,7 @@ import "./types/ha-automation-condition-sun"; import "./types/ha-automation-condition-template"; import "./types/ha-automation-condition-time"; import "./types/ha-automation-condition-zone"; +import { haStyle } from "../../../../resources/styles"; const OPTIONS = [ "device", @@ -47,21 +54,20 @@ export default class HaAutomationConditionEditor extends LitElement { return html` ${yamlMode ? html` -
- ${selected === -1 - ? html` - ${this.hass.localize( - "ui.panel.config.automation.editor.conditions.unsupported_condition", - "condition", - this.condition.condition - )} - ` - : ""} - -
+ ${selected === -1 + ? html` + ${this.hass.localize( + "ui.panel.config.automation.editor.conditions.unsupported_condition", + "condition", + this.condition.condition + )} + ` + : ""} +

Edit in YAML

+ ` : html`
- + - + ${this._yamlMode ? this.hass.localize( "ui.panel.config.automation.editor.edit_ui" @@ -86,7 +86,7 @@ export default class HaAutomationConditionRow extends LitElement { "ui.panel.config.automation.editor.actions.duplicate" )} - + ${this.hass.localize( "ui.panel.config.automation.editor.actions.delete" )} @@ -103,6 +103,19 @@ export default class HaAutomationConditionRow extends LitElement { `; } + private _handleAction(ev: CustomEvent) { + switch (ev.detail.index) { + case 0: + this._switchYamlMode(); + break; + case 1: + break; + case 2: + this._onDelete(); + break; + } + } + private _onDelete() { showConfirmationDialog(this, { text: this.hass.localize( @@ -116,28 +129,19 @@ export default class HaAutomationConditionRow extends LitElement { }); } - private _switchYamlMode(ev: CustomEvent) { - if (ev.detail.source !== "interaction") { - return; - } + private _switchYamlMode() { this._yamlMode = !this._yamlMode; } static get styles(): CSSResult { return css` .card-menu { - position: absolute; - top: 0; - right: 0; + float: right; z-index: 3; --mdc-theme-text-primary-on-background: var(--primary-text-color); } .rtl .card-menu { - right: auto; - left: 0; - } - ha-button-menu { - margin: 8px; + float: left; } mwc-list-item[disabled] { --mdc-theme-text-primary-on-background: var(--disabled-text-color); diff --git a/src/panels/config/automation/trigger/ha-automation-trigger-row.ts b/src/panels/config/automation/trigger/ha-automation-trigger-row.ts index 6a9f06a3c4..c88c644683 100644 --- a/src/panels/config/automation/trigger/ha-automation-trigger-row.ts +++ b/src/panels/config/automation/trigger/ha-automation-trigger-row.ts @@ -34,7 +34,8 @@ import "./types/ha-automation-trigger-time"; import "./types/ha-automation-trigger-time_pattern"; import "./types/ha-automation-trigger-webhook"; import "./types/ha-automation-trigger-zone"; -import type { RequestSelectedDetail } from "@material/mwc-list/mwc-list-item"; +import { ActionDetail } from "@material/mwc-list/mwc-list-foundation"; +import { haStyle } from "../../../../resources/styles"; const OPTIONS = [ "device", @@ -94,17 +95,14 @@ export default class HaAutomationTriggerRow extends LitElement {
- + - + ${yamlMode ? this.hass.localize( "ui.panel.config.automation.editor.edit_ui" @@ -118,7 +116,7 @@ export default class HaAutomationTriggerRow extends LitElement { "ui.panel.config.automation.editor.actions.duplicate" )} - + ${this.hass.localize( "ui.panel.config.automation.editor.actions.delete" )} @@ -127,21 +125,20 @@ export default class HaAutomationTriggerRow extends LitElement {
${yamlMode ? html` -
- ${selected === -1 - ? html` - ${this.hass.localize( - "ui.panel.config.automation.editor.triggers.unsupported_platform", - "platform", - this.trigger.platform - )} - ` - : ""} - -
+ ${selected === -1 + ? html` + ${this.hass.localize( + "ui.panel.config.automation.editor.triggers.unsupported_platform", + "platform", + this.trigger.platform + )} + ` + : ""} +

Edit in YAML

+ ` : html` ) { + switch (ev.detail.index) { + case 0: + this._switchYamlMode(); + break; + case 1: + break; + case 2: + this._onDelete(); + break; + } + } + private _onDelete() { showConfirmationDialog(this, { text: this.hass.localize( @@ -219,33 +229,27 @@ export default class HaAutomationTriggerRow extends LitElement { fireEvent(this, "value-changed", { value: ev.detail.value }); } - private _switchYamlMode(ev: CustomEvent) { - if (ev.detail.source !== "interaction") { - return; - } + private _switchYamlMode() { this._yamlMode = !this._yamlMode; } - static get styles(): CSSResult { - return css` - .card-menu { - position: absolute; - top: 0; - right: 0; - z-index: 3; - --mdc-theme-text-primary-on-background: var(--primary-text-color); - } - .rtl .card-menu { - right: auto; - left: 0; - } - ha-button-menu { - margin: 8px; - } - mwc-list-item[disabled] { - --mdc-theme-text-primary-on-background: var(--disabled-text-color); - } - `; + static get styles(): CSSResult[] { + return [ + haStyle, + css` + .card-menu { + float: right; + z-index: 3; + --mdc-theme-text-primary-on-background: var(--primary-text-color); + } + .rtl .card-menu { + float: left; + } + mwc-list-item[disabled] { + --mdc-theme-text-primary-on-background: var(--disabled-text-color); + } + `, + ]; } } diff --git a/src/panels/config/entities/ha-config-entities.ts b/src/panels/config/entities/ha-config-entities.ts index 953da27bd1..9d3ad306d6 100644 --- a/src/panels/config/entities/ha-config-entities.ts +++ b/src/panels/config/entities/ha-config-entities.ts @@ -57,6 +57,7 @@ import { showEntityEditorDialog, } from "./show-dialog-entity-editor"; import { mdiFilterVariant } from "@mdi/js"; +import type { RequestSelectedDetail } from "@material/mwc-list/mwc-list-item"; export interface StateEntity extends EntityRegistryEntry { readonly?: boolean; @@ -449,7 +450,7 @@ export class HaConfigEntities extends SubscribeMixin(LitElement) { >
` : ""} - + ) { + if (ev.detail.source !== "property") { + return; + } + this._showDisabled = ev.detail.selected; } - private _showRestoredChanged() { - this._showUnavailable = !this._showUnavailable; + private _showRestoredChanged(ev: CustomEvent) { + if (ev.detail.source !== "property") { + return; + } + this._showUnavailable = ev.detail.selected; } - private _showReadOnlyChanged() { - this._showReadOnly = !this._showReadOnly; + private _showReadOnlyChanged(ev: CustomEvent) { + if (ev.detail.source !== "property") { + return; + } + this._showReadOnly = ev.detail.selected; } private _handleSearchChange(ev: CustomEvent) { diff --git a/src/panels/config/integrations/ha-config-integrations.ts b/src/panels/config/integrations/ha-config-integrations.ts index be6f2bbac1..74d48f42e6 100644 --- a/src/panels/config/integrations/ha-config-integrations.ts +++ b/src/panels/config/integrations/ha-config-integrations.ts @@ -276,7 +276,11 @@ class HaConfigIntegrations extends SubscribeMixin(LitElement) {
` : ""} - + - + ${this.hass.localize( this._showIgnored ? "ui.panel.config.integrations.ignore.hide_ignored" diff --git a/src/panels/config/integrations/ha-integration-card.ts b/src/panels/config/integrations/ha-integration-card.ts index e2d5ea4215..ecb06696b3 100644 --- a/src/panels/config/integrations/ha-integration-card.ts +++ b/src/panels/config/integrations/ha-integration-card.ts @@ -28,6 +28,7 @@ import { haStyle } from "../../../resources/styles"; import "../../../components/ha-icon-next"; import { fireEvent } from "../../../common/dom/fire_event"; import { mdiDotsVertical, mdiOpenInNew } from "@mdi/js"; +import { ActionDetail } from "@material/mwc-list/mwc-list-foundation"; export interface ConfigEntryUpdatedEvent { entry: ConfigEntry; @@ -223,7 +224,7 @@ export class HaIntegrationCard extends LitElement { ` : ""}
- + - + ${this.hass.localize( "ui.panel.config.integrations.config_entry.system_options" )} @@ -240,7 +241,6 @@ export class HaIntegrationCard extends LitElement { ? "" : html` `} - + ${this.hass.localize( "ui.panel.config.integrations.config_entry.delete" )} @@ -308,32 +305,27 @@ export class HaIntegrationCard extends LitElement { showOptionsFlowDialog(this, ev.target.closest("ha-card").configEntry); } - private _showSystemOptions(ev) { - showConfigEntrySystemOptionsDialog(this, { - entry: ev.target.closest("ha-card").configEntry, - }); - } - - private async _editEntryName(ev) { - const configEntry = ev.target.closest("ha-card").configEntry; - const newName = await showPromptDialog(this, { - title: this.hass.localize("ui.panel.config.integrations.rename_dialog"), - defaultValue: configEntry.title, - inputLabel: this.hass.localize( - "ui.panel.config.integrations.rename_input_label" - ), - }); - if (newName === null) { - return; + private _handleAction(ev: CustomEvent) { + const configEntry = ((ev.target as HTMLElement).closest("ha-card") as any) + .configEntry; + switch (ev.detail.index) { + case 0: + this._showSystemOptions(configEntry); + break; + case 1: + this._removeIntegration(configEntry); + break; } - const newEntry = await updateConfigEntry(this.hass, configEntry.entry_id, { - title: newName, - }); - fireEvent(this, "entry-updated", { entry: newEntry }); } - private async _removeIntegration(ev) { - const entryId = ev.target.closest("ha-card").configEntry.entry_id; + private _showSystemOptions(configEntry: ConfigEntry) { + showConfigEntrySystemOptionsDialog(this, { + entry: configEntry, + }); + } + + private async _removeIntegration(configEntry: ConfigEntry) { + const entryId = configEntry.entry_id; const confirmed = await showConfirmationDialog(this, { text: this.hass.localize( @@ -357,6 +349,24 @@ export class HaIntegrationCard extends LitElement { }); } + private async _editEntryName(ev) { + const configEntry = ev.target.closest("ha-card").configEntry; + const newName = await showPromptDialog(this, { + title: this.hass.localize("ui.panel.config.integrations.rename_dialog"), + defaultValue: configEntry.title, + inputLabel: this.hass.localize( + "ui.panel.config.integrations.rename_input_label" + ), + }); + if (newName === null) { + return; + } + const newEntry = await updateConfigEntry(this.hass, configEntry.entry_id, { + title: newName, + }); + fireEvent(this, "entry-updated", { entry: newEntry }); + } + static get styles(): CSSResult[] { return [ haStyle, @@ -389,9 +399,6 @@ export class HaIntegrationCard extends LitElement { align-items: center; padding-right: 5px; } - .card-actions .documentation { - color: var(--primary-text-color); - } .group-header { display: flex; align-items: center; diff --git a/src/panels/lovelace/components/hui-card-options.ts b/src/panels/lovelace/components/hui-card-options.ts index cf33b6971f..8191ea54c2 100644 --- a/src/panels/lovelace/components/hui-card-options.ts +++ b/src/panels/lovelace/components/hui-card-options.ts @@ -20,6 +20,7 @@ import { confDeleteCard } from "../editor/delete-card"; import { Lovelace, LovelaceCard } from "../types"; import { computeCardSize } from "../common/compute-card-size"; import { mdiDotsVertical, mdiArrowDown, mdiArrowUp } from "@mdi/js"; +import { ActionDetail } from "@material/mwc-list/mwc-list-foundation"; @customElement("hui-card-options") export class HuiCardOptions extends LitElement { @@ -65,7 +66,7 @@ export class HuiCardOptions extends LitElement { ?disabled=${this.path![1] === 0} > - + - + ${this.hass!.localize( "ui.panel.lovelace.editor.edit_card.move" )} - ${this.hass!.localize( "ui.panel.lovelace.editor.edit_card.duplicate" )} - + ${this.hass!.localize( "ui.panel.lovelace.editor.edit_card.delete" )}) { + switch (ev.detail.index) { + case 0: + this._moveCard(); + break; + case 1: + this._duplicateCard(); + break; + case 2: + this._deleteCard(); + break; + } + } + private _duplicateCard(): void { const path = this.path!; const cardConfig = this.lovelace!.config.views[path[0]].cards![path[1]]; diff --git a/src/panels/lovelace/hui-root.ts b/src/panels/lovelace/hui-root.ts index a473d394c0..71ad3488e1 100644 --- a/src/panels/lovelace/hui-root.ts +++ b/src/panels/lovelace/hui-root.ts @@ -58,6 +58,8 @@ import type { Lovelace } from "./types"; import "./views/hui-panel-view"; import type { HUIPanelView } from "./views/hui-panel-view"; import { HUIView } from "./views/hui-view"; +import type { RequestSelectedDetail } from "@material/mwc-list/mwc-list-item"; +import { shouldHandleRequestSelectedEvent } from "../../common/mwc/handle-request-selected-event"; class HUIRoot extends LitElement { @property({ attribute: false }) public hass!: HomeAssistant; @@ -133,14 +135,19 @@ class HUIRoot extends LitElement { - - - + + + + `} - + ${this.hass!.localize( "ui.panel.lovelace.editor.menu.raw_editor" )} @@ -251,7 +256,7 @@ class HUIRoot extends LitElement { aria-label=${this.hass!.localize( "ui.panel.lovelace.menu.configure_ui" )} - @request-selected=${this._editModeEnable} + @request-selected=${this._handleEnableEditMode} > ${this.hass!.localize( "ui.panel.lovelace.menu.configure_ui" @@ -259,14 +264,19 @@ class HUIRoot extends LitElement { ` : ""} - - ${this.hass!.localize("ui.panel.lovelace.menu.help")} - + + ${this.hass!.localize("ui.panel.lovelace.menu.help")} + + `} @@ -476,11 +486,17 @@ class HUIRoot extends LitElement { return this.shadowRoot!.getElementById("view") as HTMLDivElement; } - private _handleRefresh(): void { + private _handleRefresh(ev: CustomEvent): void { + if (!shouldHandleRequestSelectedEvent(ev)) { + return; + } fireEvent(this, "config-refresh"); } - private _handleReloadResources(): void { + private _handleReloadResources(ev: CustomEvent): void { + if (!shouldHandleRequestSelectedEvent(ev)) { + return; + } this.hass.callService("lovelace", "reload_resources"); showConfirmationDialog(this, { title: this.hass!.localize( @@ -493,7 +509,17 @@ class HUIRoot extends LitElement { }); } - private _handleUnusedEntities(): void { + private _handleRawEditor(ev: CustomEvent): void { + if (!shouldHandleRequestSelectedEvent(ev)) { + return; + } + this.lovelace!.enableFullEditMode(); + } + + private _handleUnusedEntities(ev: CustomEvent): void { + if (!shouldHandleRequestSelectedEvent(ev)) { + return; + } navigate(this, `${this.route?.prefix}/hass-unused-entities`); } @@ -501,17 +527,20 @@ class HUIRoot extends LitElement { showVoiceCommandDialog(this); } - private _handleHelp(): void { - window.open("https://www.home-assistant.io/lovelace/", "_blank"); - } - - private _editModeEnable(): void { + private _handleEnableEditMode(ev: CustomEvent): void { + if (!shouldHandleRequestSelectedEvent(ev)) { + return; + } if (this._yamlMode) { showAlertDialog(this, { text: "The edit UI is not available when in YAML mode.", }); return; } + this._enableEditMode(); + } + + private _enableEditMode(): void { this.lovelace!.setEditMode(true); } @@ -616,7 +645,7 @@ class HUIRoot extends LitElement { const viewConfig = this.config.views[viewIndex]; if (!viewConfig) { - this._editModeEnable(); + this._enableEditMode(); return; } diff --git a/src/panels/shopping-list/ha-panel-shopping-list.js b/src/panels/shopping-list/ha-panel-shopping-list.js index 94644a6e6a..2ee804a311 100644 --- a/src/panels/shopping-list/ha-panel-shopping-list.js +++ b/src/panels/shopping-list/ha-panel-shopping-list.js @@ -83,14 +83,14 @@ class HaPanelShoppingList extends LocalizeMixin(PolymerElement) { icon="hass:microphone" on-click="_showVoiceCommandDialog" > - + - + [[localize('ui.panel.shopping-list.clear_completed')]]