Add icons to integration action overflow menu (#13457)

This commit is contained in:
Franck Nijhof 2022-08-23 21:37:37 +02:00 committed by GitHub
parent fc1481d365
commit 8bcbeb299b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 114 additions and 49 deletions

View File

@ -1,7 +1,13 @@
import { css, html, LitElement, TemplateResult } from "lit"; import { css, html, LitElement, TemplateResult } from "lit";
import { customElement, property } from "lit/decorators"; import { customElement, property } from "lit/decorators";
import { classMap } from "lit/directives/class-map"; import { classMap } from "lit/directives/class-map";
import { mdiDotsVertical, mdiOpenInNew } from "@mdi/js"; import {
mdiBookshelf,
mdiCog,
mdiDotsVertical,
mdiEyeOff,
mdiOpenInNew,
} from "@mdi/js";
import { fireEvent } from "../../../common/dom/fire_event"; import { fireEvent } from "../../../common/dom/fire_event";
import { import {
ATTENTION_SOURCES, ATTENTION_SOURCES,
@ -71,13 +77,12 @@ export class HaConfigFlowCard extends LitElement {
? "_self" ? "_self"
: "_blank"} : "_blank"}
> >
<mwc-list-item hasMeta> <mwc-list-item graphic="icon" hasMeta>
${this.hass.localize( ${this.hass.localize(
"ui.panel.config.integrations.config_entry.open_configuration_url" "ui.panel.config.integrations.config_entry.open_configuration_url"
)}<ha-svg-icon )}
slot="meta" <ha-svg-icon slot="graphic" .path=${mdiCog}></ha-svg-icon>
.path=${mdiOpenInNew} <ha-svg-icon slot="meta" .path=${mdiOpenInNew}></ha-svg-icon>
></ha-svg-icon>
</mwc-list-item> </mwc-list-item>
</a>` </a>`
: ""} : ""}
@ -92,23 +97,26 @@ export class HaConfigFlowCard extends LitElement {
rel="noreferrer" rel="noreferrer"
target="_blank" target="_blank"
> >
<mwc-list-item hasMeta> <mwc-list-item graphic="icon" hasMeta>
${this.hass.localize( ${this.hass.localize(
"ui.panel.config.integrations.config_entry.documentation" "ui.panel.config.integrations.config_entry.documentation"
)}<ha-svg-icon )}
slot="meta" <ha-svg-icon
.path=${mdiOpenInNew} slot="graphic"
.path=${mdiBookshelf}
></ha-svg-icon> ></ha-svg-icon>
<ha-svg-icon slot="meta" .path=${mdiOpenInNew}></ha-svg-icon>
</mwc-list-item> </mwc-list-item>
</a>` </a>`
: ""} : ""}
${DISCOVERY_SOURCES.includes(this.flow.context.source) && ${DISCOVERY_SOURCES.includes(this.flow.context.source) &&
this.flow.context.unique_id this.flow.context.unique_id
? html` ? html`
<mwc-list-item @click=${this._ignoreFlow}> <mwc-list-item graphic="icon" @click=${this._ignoreFlow}>
${this.hass.localize( ${this.hass.localize(
"ui.panel.config.integrations.ignore.ignore" "ui.panel.config.integrations.ignore.ignore"
)} )}
<ha-svg-icon slot="graphic" .path=${mdiEyeOff}></ha-svg-icon>
</mwc-list-item> </mwc-list-item>
` `
: ""} : ""}
@ -170,6 +178,10 @@ export class HaConfigFlowCard extends LitElement {
text-decoration: none; text-decoration: none;
color: var(--primary-color); color: var(--primary-color);
} }
ha-svg-icon[slot="meta"] {
width: 18px;
height: 18px;
}
`; `;
} }

View File

@ -3,9 +3,18 @@ import "@material/mwc-list/mwc-list-item";
import type { RequestSelectedDetail } from "@material/mwc-list/mwc-list-item"; import type { RequestSelectedDetail } from "@material/mwc-list/mwc-list-item";
import { import {
mdiAlertCircle, mdiAlertCircle,
mdiBookshelf,
mdiBug,
mdiChevronLeft, mdiChevronLeft,
mdiCog,
mdiDelete,
mdiDotsVertical, mdiDotsVertical,
mdiDownload,
mdiOpenInNew, mdiOpenInNew,
mdiReload,
mdiRenameBox,
mdiToggleSwitch,
mdiToggleSwitchOff,
} from "@mdi/js"; } from "@mdi/js";
import "@polymer/paper-item/paper-item"; import "@polymer/paper-item/paper-item";
import "@polymer/paper-listbox"; import "@polymer/paper-listbox";
@ -320,16 +329,47 @@ export class HaIntegrationCard extends LitElement {
.label=${this.hass.localize("ui.common.menu")} .label=${this.hass.localize("ui.common.menu")}
.path=${mdiDotsVertical} .path=${mdiDotsVertical}
></ha-icon-button> ></ha-icon-button>
<mwc-list-item @request-selected=${this._handleRename}> ${!item.disabled_by &&
RECOVERABLE_STATES.includes(item.state) &&
item.supports_unload &&
item.source !== "system"
? html`<mwc-list-item
@request-selected=${this._handleReload}
graphic="icon"
>
${this.hass.localize(
"ui.panel.config.integrations.config_entry.reload"
)}
<ha-svg-icon slot="graphic" .path=${mdiReload}></ha-svg-icon>
</mwc-list-item>`
: ""}
<mwc-list-item @request-selected=${this._handleRename} graphic="icon">
${this.hass.localize( ${this.hass.localize(
"ui.panel.config.integrations.config_entry.rename" "ui.panel.config.integrations.config_entry.rename"
)} )}
<ha-svg-icon slot="graphic" .path=${mdiRenameBox}></ha-svg-icon>
</mwc-list-item> </mwc-list-item>
<mwc-list-item @request-selected=${this._handleSystemOptions}> ${this.supportsDiagnostics && item.state === "loaded"
${this.hass.localize( ? html`<a
"ui.panel.config.integrations.config_entry.system_options" href=${getConfigEntryDiagnosticsDownloadUrl(item.entry_id)}
)} target="_blank"
</mwc-list-item> @click=${this._signUrl}
>
<mwc-list-item graphic="icon">
${this.hass.localize(
"ui.panel.config.integrations.config_entry.download_diagnostics"
)}
<ha-svg-icon
slot="graphic"
.path=${mdiDownload}
></ha-svg-icon>
</mwc-list-item>
</a>`
: ""}
<li divider role="separator"></li>
${this.manifest ${this.manifest
? html` <a ? html` <a
href=${this.manifest.is_built_in href=${this.manifest.is_built_in
@ -341,13 +381,15 @@ export class HaIntegrationCard extends LitElement {
rel="noreferrer" rel="noreferrer"
target="_blank" target="_blank"
> >
<mwc-list-item hasMeta> <mwc-list-item graphic="icon" hasMeta>
${this.hass.localize( ${this.hass.localize(
"ui.panel.config.integrations.config_entry.documentation" "ui.panel.config.integrations.config_entry.documentation"
)}<ha-svg-icon )}
slot="meta" <ha-svg-icon
.path=${mdiOpenInNew} slot="graphic"
.path=${mdiBookshelf}
></ha-svg-icon> ></ha-svg-icon>
<ha-svg-icon slot="meta" .path=${mdiOpenInNew}></ha-svg-icon>
</mwc-list-item> </mwc-list-item>
</a>` </a>`
: ""} : ""}
@ -358,59 +400,66 @@ export class HaIntegrationCard extends LitElement {
rel="noreferrer" rel="noreferrer"
target="_blank" target="_blank"
> >
<mwc-list-item hasMeta> <mwc-list-item graphic="icon" hasMeta>
${this.hass.localize( ${this.hass.localize(
"ui.panel.config.integrations.config_entry.known_issues" "ui.panel.config.integrations.config_entry.known_issues"
)}<ha-svg-icon
slot="meta"
.path=${mdiOpenInNew}
></ha-svg-icon>
</mwc-list-item>
</a>`
: ""}
${!item.disabled_by &&
RECOVERABLE_STATES.includes(item.state) &&
item.supports_unload &&
item.source !== "system"
? html`<mwc-list-item @request-selected=${this._handleReload}>
${this.hass.localize(
"ui.panel.config.integrations.config_entry.reload"
)}
</mwc-list-item>`
: ""}
${this.supportsDiagnostics && item.state === "loaded"
? html`<a
href=${getConfigEntryDiagnosticsDownloadUrl(item.entry_id)}
target="_blank"
@click=${this._signUrl}
>
<mwc-list-item>
${this.hass.localize(
"ui.panel.config.integrations.config_entry.download_diagnostics"
)} )}
<ha-svg-icon slot="graphic" .path=${mdiBug}></ha-svg-icon>
<ha-svg-icon slot="meta" .path=${mdiOpenInNew}></ha-svg-icon>
</mwc-list-item> </mwc-list-item>
</a>` </a>`
: ""} : ""}
<li divider role="separator"></li>
<mwc-list-item
@request-selected=${this._handleSystemOptions}
graphic="icon"
>
${this.hass.localize(
"ui.panel.config.integrations.config_entry.system_options"
)}
<ha-svg-icon slot="graphic" .path=${mdiCog}></ha-svg-icon>
</mwc-list-item>
${item.disabled_by === "user" ${item.disabled_by === "user"
? html`<mwc-list-item @request-selected=${this._handleEnable}> ? html`<mwc-list-item
@request-selected=${this._handleEnable}
graphic="icon"
>
${this.hass.localize("ui.common.enable")} ${this.hass.localize("ui.common.enable")}
<ha-svg-icon
slot="graphic"
.path=${mdiToggleSwitch}
></ha-svg-icon>
</mwc-list-item>` </mwc-list-item>`
: item.source !== "system" : item.source !== "system"
? html`<mwc-list-item ? html`<mwc-list-item
class="warning" class="warning"
@request-selected=${this._handleDisable} @request-selected=${this._handleDisable}
graphic="icon"
> >
${this.hass.localize("ui.common.disable")} ${this.hass.localize("ui.common.disable")}
<ha-svg-icon
slot="graphic"
class="warning"
.path=${mdiToggleSwitchOff}
></ha-svg-icon>
</mwc-list-item>` </mwc-list-item>`
: ""} : ""}
${item.source !== "system" ${item.source !== "system"
? html`<mwc-list-item ? html`<mwc-list-item
class="warning" class="warning"
@request-selected=${this._handleDelete} @request-selected=${this._handleDelete}
graphic="icon"
> >
${this.hass.localize( ${this.hass.localize(
"ui.panel.config.integrations.config_entry.delete" "ui.panel.config.integrations.config_entry.delete"
)} )}
<ha-svg-icon
slot="graphic"
class="warning"
.path=${mdiDelete}
></ha-svg-icon>
</mwc-list-item>` </mwc-list-item>`
: ""} : ""}
</ha-button-menu> </ha-button-menu>
@ -807,6 +856,10 @@ export class HaIntegrationCard extends LitElement {
mwc-list-item ha-svg-icon { mwc-list-item ha-svg-icon {
color: var(--secondary-text-color); color: var(--secondary-text-color);
} }
ha-svg-icon[slot="meta"] {
width: 18px;
height: 18px;
}
`, `,
]; ];
} }