Make menu's work with keyboard (#6421)

This commit is contained in:
Bram Kragten 2020-07-17 20:31:44 +02:00 committed by GitHub
parent cddbf460f8
commit 92915eddc2
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
13 changed files with 38 additions and 27 deletions

View File

@ -101,10 +101,10 @@ class HassioAddonStore extends LitElement {
<mwc-icon-button slot="trigger" alt="menu"> <mwc-icon-button slot="trigger" alt="menu">
<ha-svg-icon path=${mdiDotsVertical}></ha-svg-icon> <ha-svg-icon path=${mdiDotsVertical}></ha-svg-icon>
</mwc-icon-button> </mwc-icon-button>
<mwc-list-item @tap=${this._manageRepositories}> <mwc-list-item @request-selected=${this._manageRepositories}>
Repositories Repositories
</mwc-list-item> </mwc-list-item>
<mwc-list-item @tap=${this.refreshData}> <mwc-list-item @request-selected=${this.refreshData}>
Reload Reload
</mwc-list-item> </mwc-list-item>
</ha-button-menu> </ha-button-menu>

View File

@ -10,7 +10,6 @@ import {
} from "lit-element"; } from "lit-element";
import "@material/mwc-button"; import "@material/mwc-button";
import "@material/mwc-menu"; import "@material/mwc-menu";
import "@material/mwc-list/mwc-list-item";
import type { Menu, Corner } from "@material/mwc-menu"; import type { Menu, Corner } from "@material/mwc-menu";
import "./ha-icon-button"; import "./ha-icon-button";

View File

@ -77,7 +77,7 @@ export class HaDateRangePicker extends LitElement {
</div> </div>
${this.ranges ${this.ranges
? html`<div slot="ranges" class="date-range-ranges"> ? html`<div slot="ranges" class="date-range-ranges">
<mwc-list @click=${this._setDateRange}> <mwc-list @request-selected=${this._setDateRange}>
${Object.entries(this.ranges).map( ${Object.entries(this.ranges).map(
([name, dates]) => html`<mwc-list-item ([name, dates]) => html`<mwc-list-item
.activated=${this.startDate.getTime() === .activated=${this.startDate.getTime() ===

View File

@ -136,7 +136,7 @@ export default class HaAutomationActionRow extends LitElement {
><ha-svg-icon path=${mdiDotsVertical}></ha-svg-icon> ><ha-svg-icon path=${mdiDotsVertical}></ha-svg-icon>
</mwc-icon-button> </mwc-icon-button>
<mwc-list-item <mwc-list-item
@tap=${this._switchYamlMode} @request-selected=${this._switchYamlMode}
.disabled=${selected === -1} .disabled=${selected === -1}
> >
${yamlMode ${yamlMode
@ -152,7 +152,7 @@ export default class HaAutomationActionRow extends LitElement {
"ui.panel.config.automation.editor.actions.duplicate" "ui.panel.config.automation.editor.actions.duplicate"
)} )}
</mwc-list-item> </mwc-list-item>
<mwc-list-item @tap=${this._onDelete}> <mwc-list-item @request-selected=${this._onDelete}>
${this.hass.localize( ${this.hass.localize(
"ui.panel.config.automation.editor.actions.delete" "ui.panel.config.automation.editor.actions.delete"
)} )}

View File

@ -71,7 +71,7 @@ export default class HaAutomationConditionRow extends LitElement {
slot="trigger" slot="trigger"
><ha-svg-icon path=${mdiDotsVertical}></ha-svg-icon ><ha-svg-icon path=${mdiDotsVertical}></ha-svg-icon
></mwc-icon-button> ></mwc-icon-button>
<mwc-list-item @tap=${this._switchYamlMode}> <mwc-list-item @request-selected=${this._switchYamlMode}>
${this._yamlMode ${this._yamlMode
? this.hass.localize( ? this.hass.localize(
"ui.panel.config.automation.editor.edit_ui" "ui.panel.config.automation.editor.edit_ui"
@ -85,7 +85,7 @@ export default class HaAutomationConditionRow extends LitElement {
"ui.panel.config.automation.editor.actions.duplicate" "ui.panel.config.automation.editor.actions.duplicate"
)} )}
</mwc-list-item> </mwc-list-item>
<mwc-list-item @tap=${this._onDelete}> <mwc-list-item @request-selected=${this._onDelete}>
${this.hass.localize( ${this.hass.localize(
"ui.panel.config.automation.editor.actions.delete" "ui.panel.config.automation.editor.actions.delete"
)} )}

View File

@ -101,7 +101,7 @@ export default class HaAutomationTriggerRow extends LitElement {
><ha-svg-icon path=${mdiDotsVertical}></ha-svg-icon ><ha-svg-icon path=${mdiDotsVertical}></ha-svg-icon
></mwc-icon-button> ></mwc-icon-button>
<mwc-list-item <mwc-list-item
@tap=${this._switchYamlMode} @request-selected=${this._switchYamlMode}
.disabled=${selected === -1} .disabled=${selected === -1}
> >
${yamlMode ${yamlMode
@ -117,7 +117,7 @@ export default class HaAutomationTriggerRow extends LitElement {
"ui.panel.config.automation.editor.actions.duplicate" "ui.panel.config.automation.editor.actions.duplicate"
)} )}
</mwc-list-item> </mwc-list-item>
<mwc-list-item @tap=${this._onDelete}> <mwc-list-item @request-selected=${this._onDelete}>
${this.hass.localize( ${this.hass.localize(
"ui.panel.config.automation.editor.actions.delete" "ui.panel.config.automation.editor.actions.delete"
)} )}

View File

@ -462,7 +462,7 @@ export class HaConfigEntities extends SubscribeMixin(LitElement) {
<ha-svg-icon path=${mdiFilterVariant}></ha-svg-icon> <ha-svg-icon path=${mdiFilterVariant}></ha-svg-icon>
</mwc-icon-button> </mwc-icon-button>
<mwc-list-item <mwc-list-item
@click="${this._showDisabledChanged}" @request-selected="${this._showDisabledChanged}"
graphic="control" graphic="control"
> >
<ha-checkbox <ha-checkbox
@ -474,7 +474,7 @@ export class HaConfigEntities extends SubscribeMixin(LitElement) {
)} )}
</mwc-list-item> </mwc-list-item>
<mwc-list-item <mwc-list-item
@click="${this._showRestoredChanged}" @request-selected="${this._showRestoredChanged}"
graphic="control" graphic="control"
> >
<ha-checkbox <ha-checkbox
@ -486,7 +486,7 @@ export class HaConfigEntities extends SubscribeMixin(LitElement) {
)} )}
</mwc-list-item> </mwc-list-item>
<mwc-list-item <mwc-list-item
@click="${this._showReadOnlyChanged}" @request-selected="${this._showReadOnlyChanged}"
graphic="control" graphic="control"
> >
<ha-checkbox <ha-checkbox

View File

@ -284,7 +284,7 @@ class HaConfigIntegrations extends SubscribeMixin(LitElement) {
> >
<ha-svg-icon path=${mdiDotsVertical}></ha-svg-icon> <ha-svg-icon path=${mdiDotsVertical}></ha-svg-icon>
</mwc-icon-button> </mwc-icon-button>
<mwc-list-item @click=${this._toggleShowIgnored}> <mwc-list-item @request-selected=${this._toggleShowIgnored}>
${this.hass.localize( ${this.hass.localize(
this._showIgnored this._showIgnored
? "ui.panel.config.integrations.ignore.hide_ignored" ? "ui.panel.config.integrations.ignore.hide_ignored"

View File

@ -231,7 +231,7 @@ export class HaIntegrationCard extends LitElement {
> >
<ha-svg-icon path=${mdiDotsVertical}></ha-svg-icon> <ha-svg-icon path=${mdiDotsVertical}></ha-svg-icon>
</mwc-icon-button> </mwc-icon-button>
<mwc-list-item @click=${this._showSystemOptions}> <mwc-list-item @request-selected=${this._showSystemOptions}>
${this.hass.localize( ${this.hass.localize(
"ui.panel.config.integrations.config_entry.system_options" "ui.panel.config.integrations.config_entry.system_options"
)} )}
@ -255,7 +255,10 @@ export class HaIntegrationCard extends LitElement {
</mwc-list-item> </mwc-list-item>
</a> </a>
`} `}
<mwc-list-item class="warning" @click=${this._removeIntegration}> <mwc-list-item
class="warning"
@request-selected=${this._removeIntegration}
>
${this.hass.localize( ${this.hass.localize(
"ui.panel.config.integrations.config_entry.delete" "ui.panel.config.integrations.config_entry.delete"
)} )}

View File

@ -78,17 +78,20 @@ export class HuiCardOptions extends LitElement {
<ha-svg-icon path=${mdiDotsVertical}></ha-svg-icon> <ha-svg-icon path=${mdiDotsVertical}></ha-svg-icon>
</mwc-icon-button> </mwc-icon-button>
<mwc-list-item @tap=${this._moveCard}> <mwc-list-item @request-selected=${this._moveCard}>
${this.hass!.localize( ${this.hass!.localize(
"ui.panel.lovelace.editor.edit_card.move" "ui.panel.lovelace.editor.edit_card.move"
)}</mwc-list-item )}</mwc-list-item
> >
<mwc-list-item @tap=${this._duplicateCard} <mwc-list-item @request-selected=${this._duplicateCard}
>${this.hass!.localize( >${this.hass!.localize(
"ui.panel.lovelace.editor.edit_card.duplicate" "ui.panel.lovelace.editor.edit_card.duplicate"
)}</mwc-list-item )}</mwc-list-item
> >
<mwc-list-item class="delete-item" @tap=${this._deleteCard}> <mwc-list-item
class="delete-item"
@request-selected=${this._deleteCard}
>
${this.hass!.localize( ${this.hass!.localize(
"ui.panel.lovelace.editor.edit_card.delete" "ui.panel.lovelace.editor.edit_card.delete"
)}</mwc-list-item )}</mwc-list-item

View File

@ -302,6 +302,10 @@ export class HuiCardEditor extends LitElement {
.yaml-editor { .yaml-editor {
padding: 8px 0px; padding: 8px 0px;
} }
.error,
.warning {
word-break: break-word;
}
.error { .error {
color: var(--error-color); color: var(--error-color);
} }

View File

@ -160,14 +160,16 @@ class HUIRoot extends LitElement {
aria-label=${this.hass!.localize( aria-label=${this.hass!.localize(
"ui.panel.lovelace.unused_entities.title" "ui.panel.lovelace.unused_entities.title"
)} )}
@tap="${this._handleUnusedEntities}" @request-selected="${this._handleUnusedEntities}"
> >
${this.hass!.localize( ${this.hass!.localize(
"ui.panel.lovelace.unused_entities.title" "ui.panel.lovelace.unused_entities.title"
)} )}
</mwc-list-item> </mwc-list-item>
`} `}
<mwc-list-item @tap="${this.lovelace!.enableFullEditMode}"> <mwc-list-item
@request-selected="${this.lovelace!.enableFullEditMode}"
>
${this.hass!.localize( ${this.hass!.localize(
"ui.panel.lovelace.editor.menu.raw_editor" "ui.panel.lovelace.editor.menu.raw_editor"
)} )}
@ -210,7 +212,7 @@ class HUIRoot extends LitElement {
aria-label=${this.hass!.localize( aria-label=${this.hass!.localize(
"ui.panel.lovelace.menu.refresh" "ui.panel.lovelace.menu.refresh"
)} )}
@tap="${this._handleRefresh}" @request-selected="${this._handleRefresh}"
> >
${this.hass!.localize( ${this.hass!.localize(
"ui.panel.lovelace.menu.refresh" "ui.panel.lovelace.menu.refresh"
@ -220,7 +222,7 @@ class HUIRoot extends LitElement {
aria-label=${this.hass!.localize( aria-label=${this.hass!.localize(
"ui.panel.lovelace.unused_entities.title" "ui.panel.lovelace.unused_entities.title"
)} )}
@tap="${this._handleUnusedEntities}" @request-selected="${this._handleUnusedEntities}"
> >
${this.hass!.localize( ${this.hass!.localize(
"ui.panel.lovelace.unused_entities.title" "ui.panel.lovelace.unused_entities.title"
@ -235,7 +237,7 @@ class HUIRoot extends LitElement {
aria-label=${this.hass!.localize( aria-label=${this.hass!.localize(
"ui.panel.lovelace.menu.reload_resources" "ui.panel.lovelace.menu.reload_resources"
)} )}
@tap="${this._handleReloadResources}" @request-selected=${this._handleReloadResources}
> >
${this.hass!.localize( ${this.hass!.localize(
"ui.panel.lovelace.menu.reload_resources" "ui.panel.lovelace.menu.reload_resources"
@ -249,7 +251,7 @@ class HUIRoot extends LitElement {
aria-label=${this.hass!.localize( aria-label=${this.hass!.localize(
"ui.panel.lovelace.menu.configure_ui" "ui.panel.lovelace.menu.configure_ui"
)} )}
@tap="${this._editModeEnable}" @request-selected=${this._editModeEnable}
> >
${this.hass!.localize( ${this.hass!.localize(
"ui.panel.lovelace.menu.configure_ui" "ui.panel.lovelace.menu.configure_ui"
@ -261,7 +263,7 @@ class HUIRoot extends LitElement {
aria-label=${this.hass!.localize( aria-label=${this.hass!.localize(
"ui.panel.lovelace.menu.help" "ui.panel.lovelace.menu.help"
)} )}
@tap="${this._handleHelp}" @request-selected=${this._handleHelp}
> >
${this.hass!.localize("ui.panel.lovelace.menu.help")} ${this.hass!.localize("ui.panel.lovelace.menu.help")}
</mwc-list-item> </mwc-list-item>

View File

@ -90,7 +90,7 @@ class HaPanelShoppingList extends LocalizeMixin(PolymerElement) {
slot="trigger" slot="trigger"
> >
</ha-icon-button> </ha-icon-button>
<mwc-list-item on-click="_clearCompleted"> <mwc-list-item on-request-selected="_clearCompleted">
[[localize('ui.panel.shopping-list.clear_completed')]] [[localize('ui.panel.shopping-list.clear_completed')]]
</mwc-list-item> </mwc-list-item>
</ha-button-menu> </ha-button-menu>