mirror of
https://github.com/home-assistant/frontend.git
synced 2025-07-25 02:06:42 +00:00
Add icons to integration action overflow menu (#13457)
This commit is contained in:
parent
fc1481d365
commit
8bcbeb299b
@ -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;
|
||||||
|
}
|
||||||
`;
|
`;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -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;
|
||||||
|
}
|
||||||
`,
|
`,
|
||||||
];
|
];
|
||||||
}
|
}
|
||||||
|
Loading…
x
Reference in New Issue
Block a user