mirror of
https://github.com/home-assistant/frontend.git
synced 2025-07-16 05:46:35 +00:00
Consolidate all icon button logic into <ha-icon-button> + ensure tooltip (#9230)
This commit is contained in:
Philip Allgaier
GitHub
parent
bddb505b7f
commit
0c940be5fb
@ -65,10 +65,11 @@ class HaGallery extends PolymerElement {
|
||||
<app-header slot="header" fixed>
|
||||
<app-toolbar>
|
||||
<ha-icon-button
|
||||
icon="hass:arrow-left"
|
||||
on-click="_backTapped"
|
||||
class$="[[_computeHeaderButtonClass(_demo)]]"
|
||||
></ha-icon-button>
|
||||
>
|
||||
<ha-icon icon="hass:arrow-left"></ha-icon>
|
||||
</ha-icon-button>
|
||||
<div main-title>
|
||||
[[_withDefault(_demo, "Home Assistant Gallery")]]
|
||||
</div>
|
||||
|
||||
@ -1,4 +1,3 @@
|
||||
import "@material/mwc-icon-button/mwc-icon-button";
|
||||
import { ActionDetail } from "@material/mwc-list/mwc-list-foundation";
|
||||
import "@material/mwc-list/mwc-list-item";
|
||||
import { mdiDotsVertical } from "@mdi/js";
|
||||
@ -18,7 +17,7 @@ import { navigate } from "../../../src/common/navigate";
|
||||
import "../../../src/common/search/search-input";
|
||||
import { extractSearchParam } from "../../../src/common/url/search-params";
|
||||
import "../../../src/components/ha-button-menu";
|
||||
import "../../../src/components/ha-svg-icon";
|
||||
import "../../../src/components/ha-icon-button";
|
||||
import {
|
||||
HassioAddonInfo,
|
||||
HassioAddonRepository,
|
||||
@ -92,9 +91,11 @@ class HassioAddonStore extends LitElement {
|
||||
slot="toolbar-icon"
|
||||
@action=${this._handleAction}
|
||||
>
|
||||
<mwc-icon-button slot="trigger" alt="menu">
|
||||
<ha-svg-icon .path=${mdiDotsVertical}></ha-svg-icon>
|
||||
</mwc-icon-button>
|
||||
<ha-icon-button
|
||||
.label=${this.supervisor.localize("common.menu")}
|
||||
.path=${mdiDotsVertical}
|
||||
slot="trigger"
|
||||
></ha-icon-button>
|
||||
<mwc-list-item>
|
||||
${this.supervisor.localize("store.repositories")}
|
||||
</mwc-list-item>
|
||||
@ -113,6 +114,7 @@ class HassioAddonStore extends LitElement {
|
||||
: html`
|
||||
<div class="search">
|
||||
<search-input
|
||||
.hass=${this.hass}
|
||||
no-label-float
|
||||
no-underline
|
||||
.filter=${this._filter}
|
||||
|
||||
@ -15,12 +15,13 @@ import { customElement, property, query, state } from "lit/decorators";
|
||||
import memoizeOne from "memoize-one";
|
||||
import { fireEvent } from "../../../../src/common/dom/fire_event";
|
||||
import "../../../../src/components/buttons/ha-progress-button";
|
||||
import "../../../../src/components/ha-alert";
|
||||
import "../../../../src/components/ha-button-menu";
|
||||
import "../../../../src/components/ha-card";
|
||||
import "../../../../src/components/ha-alert";
|
||||
import "../../../../src/components/ha-form/ha-form";
|
||||
import type { HaFormSchema } from "../../../../src/components/ha-form/types";
|
||||
import "../../../../src/components/ha-formfield";
|
||||
import "../../../../src/components/ha-icon-button";
|
||||
import "../../../../src/components/ha-switch";
|
||||
import "../../../../src/components/ha-yaml-editor";
|
||||
import type { HaYamlEditor } from "../../../../src/components/ha-yaml-editor";
|
||||
@ -100,9 +101,11 @@ class HassioAddonConfig extends LitElement {
|
||||
</h2>
|
||||
<div class="card-menu">
|
||||
<ha-button-menu corner="BOTTOM_START" @action=${this._handleAction}>
|
||||
<mwc-icon-button slot="trigger">
|
||||
<ha-svg-icon .path=${mdiDotsVertical}></ha-svg-icon>
|
||||
</mwc-icon-button>
|
||||
<ha-icon-button
|
||||
.label=${this.hass.localize("common.menu")}
|
||||
.path=${mdiDotsVertical}
|
||||
slot="trigger"
|
||||
></ha-icon-button>
|
||||
<mwc-list-item .disabled=${!this._canShowSchema}>
|
||||
${this._yamlMode
|
||||
? this.supervisor.localize(
|
||||
|
||||
@ -365,9 +365,9 @@ class HassioAddonInfo extends LitElement {
|
||||
<ha-label-badge
|
||||
@click=${this._showMoreInfo}
|
||||
id="docker_api"
|
||||
.label=".${this.supervisor.localize(
|
||||
.label=${this.supervisor.localize(
|
||||
"addon.dashboard.capability.label.docker"
|
||||
)}"
|
||||
)}
|
||||
description=""
|
||||
>
|
||||
<ha-svg-icon .path=${mdiDocker}></ha-svg-icon>
|
||||
|
||||
@ -23,7 +23,8 @@ import {
|
||||
} from "../../../src/components/data-table/ha-data-table";
|
||||
import "../../../src/components/ha-button-menu";
|
||||
import "../../../src/components/ha-fab";
|
||||
import { extractApiErrorMessage } from "../../../src/data/hassio/common";
|
||||
import "../../../src/components/ha-icon-button";
|
||||
import "../../../src/components/ha-svg-icon";
|
||||
import {
|
||||
fetchHassioBackups,
|
||||
friendlyFolderName,
|
||||
@ -31,6 +32,7 @@ import {
|
||||
reloadHassioBackups,
|
||||
removeBackup,
|
||||
} from "../../../src/data/hassio/backup";
|
||||
import { extractApiErrorMessage } from "../../../src/data/hassio/common";
|
||||
import { Supervisor } from "../../../src/data/supervisor/supervisor";
|
||||
import {
|
||||
showAlertDialog,
|
||||
@ -40,9 +42,9 @@ import "../../../src/layouts/hass-tabs-subpage-data-table";
|
||||
import type { HaTabsSubpageDataTable } from "../../../src/layouts/hass-tabs-subpage-data-table";
|
||||
import { haStyle } from "../../../src/resources/styles";
|
||||
import { HomeAssistant, Route } from "../../../src/types";
|
||||
import { showHassioCreateBackupDialog } from "../dialogs/backup/show-dialog-hassio-create-backup";
|
||||
import { showHassioBackupDialog } from "../dialogs/backup/show-dialog-hassio-backup";
|
||||
import { showBackupUploadDialog } from "../dialogs/backup/show-dialog-backup-upload";
|
||||
import { showHassioBackupDialog } from "../dialogs/backup/show-dialog-hassio-backup";
|
||||
import { showHassioCreateBackupDialog } from "../dialogs/backup/show-dialog-hassio-create-backup";
|
||||
import { supervisorTabs } from "../hassio-tabs";
|
||||
import { hassioStyle } from "../resources/hassio-style";
|
||||
|
||||
@ -179,9 +181,11 @@ export class HassioBackups extends LitElement {
|
||||
slot="toolbar-icon"
|
||||
@action=${this._handleAction}
|
||||
>
|
||||
<mwc-icon-button slot="trigger" alt="menu">
|
||||
<ha-svg-icon .path=${mdiDotsVertical}></ha-svg-icon>
|
||||
</mwc-icon-button>
|
||||
<ha-icon-button
|
||||
.label=${this.hass.localize("common.menu")}
|
||||
.path=${mdiDotsVertical}
|
||||
slot="trigger"
|
||||
></ha-icon-button>
|
||||
<mwc-list-item>
|
||||
${this.supervisor?.localize("common.reload")}
|
||||
</mwc-list-item>
|
||||
@ -216,13 +220,15 @@ export class HassioBackups extends LitElement {
|
||||
</mwc-button>
|
||||
`
|
||||
: html`
|
||||
<mwc-icon-button
|
||||
<ha-icon-button
|
||||
.label=${this.supervisor.localize(
|
||||
"snapshot.delete_selected"
|
||||
)}
|
||||
.path=${mdiDelete}
|
||||
id="delete-btn"
|
||||
class="warning"
|
||||
@click=${this._deleteSelected}
|
||||
>
|
||||
<ha-svg-icon .path=${mdiDelete}></ha-svg-icon>
|
||||
</mwc-icon-button>
|
||||
></ha-icon-button>
|
||||
<paper-tooltip animation-delay="0" for="delete-btn">
|
||||
${this.supervisor.localize("backup.delete_selected")}
|
||||
</paper-tooltip>
|
||||
@ -368,7 +374,7 @@ export class HassioBackups extends LitElement {
|
||||
margin-right: -12px;
|
||||
}
|
||||
.header-btns > mwc-button,
|
||||
.header-btns > mwc-icon-button {
|
||||
.header-btns > ha-icon-button {
|
||||
margin: 8px;
|
||||
}
|
||||
`,
|
||||
|
||||
@ -1,4 +1,3 @@
|
||||
import "@material/mwc-icon-button/mwc-icon-button";
|
||||
import { mdiFolderUpload } from "@mdi/js";
|
||||
import "@polymer/paper-input/paper-input-container";
|
||||
import { html, LitElement, TemplateResult } from "lit";
|
||||
@ -6,9 +5,8 @@ import { customElement, state } from "lit/decorators";
|
||||
import { fireEvent } from "../../../src/common/dom/fire_event";
|
||||
import "../../../src/components/ha-circular-progress";
|
||||
import "../../../src/components/ha-file-upload";
|
||||
import "../../../src/components/ha-svg-icon";
|
||||
import { extractApiErrorMessage } from "../../../src/data/hassio/common";
|
||||
import { HassioBackup, uploadBackup } from "../../../src/data/hassio/backup";
|
||||
import { extractApiErrorMessage } from "../../../src/data/hassio/common";
|
||||
import { showAlertDialog } from "../../../src/dialogs/generic/show-dialog-box";
|
||||
import { HomeAssistant } from "../../../src/types";
|
||||
|
||||
@ -31,6 +29,7 @@ export class HassioUploadBackup extends LitElement {
|
||||
public render(): TemplateResult {
|
||||
return html`
|
||||
<ha-file-upload
|
||||
.hass=${this.hass}
|
||||
.uploading=${this._uploading}
|
||||
.icon=${mdiFolderUpload}
|
||||
accept="application/x-tar"
|
||||
|
||||
@ -3,6 +3,7 @@ import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
|
||||
import { customElement, property, state } from "lit/decorators";
|
||||
import { fireEvent } from "../../../../src/common/dom/fire_event";
|
||||
import "../../../../src/components/ha-header-bar";
|
||||
import "../../../../src/components/ha-icon-button";
|
||||
import { HassDialog } from "../../../../src/dialogs/make-dialog-manager";
|
||||
import { haStyleDialog } from "../../../../src/resources/styles";
|
||||
import type { HomeAssistant } from "../../../../src/types";
|
||||
@ -52,9 +53,12 @@ export class DialogHassioBackupUpload
|
||||
<div slot="heading">
|
||||
<ha-header-bar>
|
||||
<span slot="title"> Upload backup </span>
|
||||
<mwc-icon-button slot="actionItems" dialogAction="cancel">
|
||||
<ha-svg-icon .path=${mdiClose}></ha-svg-icon>
|
||||
</mwc-icon-button>
|
||||
<ha-icon-button
|
||||
.label=${this.hass.localize("common.close")}
|
||||
.path=${mdiClose}
|
||||
slot="actionItems"
|
||||
dialogAction="cancel"
|
||||
></ha-icon-button>
|
||||
</ha-header-bar>
|
||||
</div>
|
||||
<hassio-upload-backup
|
||||
|
||||
@ -9,7 +9,7 @@ import "../../../../src/components/buttons/ha-progress-button";
|
||||
import "../../../../src/components/ha-alert";
|
||||
import "../../../../src/components/ha-button-menu";
|
||||
import "../../../../src/components/ha-header-bar";
|
||||
import "../../../../src/components/ha-svg-icon";
|
||||
import "../../../../src/components/ha-icon-button";
|
||||
import { getSignedPath } from "../../../../src/data/auth";
|
||||
import { extractApiErrorMessage } from "../../../../src/data/hassio/common";
|
||||
import {
|
||||
@ -76,9 +76,12 @@ class HassioBackupDialog
|
||||
<div slot="heading">
|
||||
<ha-header-bar>
|
||||
<span slot="title">${this._backup.name}</span>
|
||||
<mwc-icon-button slot="actionItems" dialogAction="cancel">
|
||||
<ha-svg-icon .path=${mdiClose}></ha-svg-icon>
|
||||
</mwc-icon-button>
|
||||
<ha-icon-button
|
||||
.label=${this.hass.localize("common.close")}
|
||||
.path=${mdiClose}
|
||||
slot="actionItems"
|
||||
dialogAction="cancel"
|
||||
></ha-icon-button>
|
||||
</ha-header-bar>
|
||||
</div>
|
||||
${this._restoringBackup
|
||||
@ -110,9 +113,11 @@ class HassioBackupDialog
|
||||
@action=${this._handleMenuAction}
|
||||
@closed=${stopPropagation}
|
||||
>
|
||||
<mwc-icon-button slot="trigger" alt="menu">
|
||||
<ha-svg-icon .path=${mdiDotsVertical}></ha-svg-icon>
|
||||
</mwc-icon-button>
|
||||
<ha-icon-button
|
||||
.label=${this.hass.localize("common.menu")}
|
||||
.path=${mdiDotsVertical}
|
||||
slot="trigger"
|
||||
></ha-icon-button>
|
||||
<mwc-list-item>Download Backup</mwc-list-item>
|
||||
<mwc-list-item class="error">Delete Backup</mwc-list-item>
|
||||
</ha-button-menu>`
|
||||
@ -126,9 +131,6 @@ class HassioBackupDialog
|
||||
haStyle,
|
||||
haStyleDialog,
|
||||
css`
|
||||
ha-svg-icon {
|
||||
color: var(--primary-text-color);
|
||||
}
|
||||
ha-circular-progress {
|
||||
display: block;
|
||||
text-align: center;
|
||||
|
||||
@ -7,6 +7,7 @@ import "../../../../src/common/search/search-input";
|
||||
import { stringCompare } from "../../../../src/common/string/compare";
|
||||
import "../../../../src/components/ha-dialog";
|
||||
import "../../../../src/components/ha-expansion-panel";
|
||||
import "../../../../src/components/ha-icon-button";
|
||||
import { HassioHardwareInfo } from "../../../../src/data/hassio/hardware";
|
||||
import { dump } from "../../../../src/resources/js-yaml-dump";
|
||||
import { haStyle, haStyleDialog } from "../../../../src/resources/styles";
|
||||
@ -70,10 +71,13 @@ class HassioHardwareDialog extends LitElement {
|
||||
<h2>
|
||||
${this._dialogParams.supervisor.localize("dialog.hardware.title")}
|
||||
</h2>
|
||||
<mwc-icon-button dialogAction="close">
|
||||
<ha-svg-icon .path=${mdiClose}></ha-svg-icon>
|
||||
</mwc-icon-button>
|
||||
<ha-icon-button
|
||||
.label=${this.hass.localize("common.close")}
|
||||
.path=${mdiClose}
|
||||
dialogAction="close"
|
||||
></ha-icon-button>
|
||||
<search-input
|
||||
.hass=${this.hass}
|
||||
autofocus
|
||||
no-label-float
|
||||
.filter=${this._filter}
|
||||
@ -141,7 +145,7 @@ class HassioHardwareDialog extends LitElement {
|
||||
haStyle,
|
||||
haStyleDialog,
|
||||
css`
|
||||
mwc-icon-button {
|
||||
ha-icon-button {
|
||||
position: absolute;
|
||||
right: 16px;
|
||||
top: 10px;
|
||||
|
||||
@ -1,5 +1,4 @@
|
||||
import "@material/mwc-button/mwc-button";
|
||||
import "@material/mwc-icon-button";
|
||||
import "@material/mwc-list/mwc-list";
|
||||
import "@material/mwc-list/mwc-list-item";
|
||||
import "@material/mwc-tab";
|
||||
@ -16,9 +15,9 @@ import "../../../../src/components/ha-dialog";
|
||||
import "../../../../src/components/ha-expansion-panel";
|
||||
import "../../../../src/components/ha-formfield";
|
||||
import "../../../../src/components/ha-header-bar";
|
||||
import "../../../../src/components/ha-icon-button";
|
||||
import "../../../../src/components/ha-radio";
|
||||
import "../../../../src/components/ha-related-items";
|
||||
import "../../../../src/components/ha-svg-icon";
|
||||
import { extractApiErrorMessage } from "../../../../src/data/hassio/common";
|
||||
import {
|
||||
AccessPoints,
|
||||
@ -104,9 +103,12 @@ export class DialogHassioNetwork
|
||||
<span slot="title">
|
||||
${this.supervisor.localize("dialog.network.title")}
|
||||
</span>
|
||||
<mwc-icon-button slot="actionItems" dialogAction="cancel">
|
||||
<ha-svg-icon .path=${mdiClose}></ha-svg-icon>
|
||||
</mwc-icon-button>
|
||||
<ha-icon-button
|
||||
.label=${this.hass.localize("common.close")}
|
||||
.path=${mdiClose}
|
||||
slot="actionItems"
|
||||
dialogAction="cancel"
|
||||
></ha-icon-button>
|
||||
</ha-header-bar>
|
||||
${this._interfaces.length > 1
|
||||
? html`<mwc-tab-bar
|
||||
|
||||
@ -1,5 +1,4 @@
|
||||
import "@material/mwc-button/mwc-button";
|
||||
import "@material/mwc-icon-button/mwc-icon-button";
|
||||
import "@material/mwc-list/mwc-list-item";
|
||||
import { mdiDelete } from "@mdi/js";
|
||||
import { PaperInputElement } from "@polymer/paper-input/paper-input";
|
||||
@ -7,7 +6,7 @@ import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
|
||||
import { customElement, property, state } from "lit/decorators";
|
||||
import "../../../../src/components/ha-circular-progress";
|
||||
import { createCloseHeading } from "../../../../src/components/ha-dialog";
|
||||
import "../../../../src/components/ha-svg-icon";
|
||||
import "../../../../src/components/ha-icon-button";
|
||||
import { extractApiErrorMessage } from "../../../../src/data/hassio/common";
|
||||
import {
|
||||
addHassioDockerRegistry,
|
||||
@ -110,16 +109,15 @@ class HassioRegistriesDialog extends LitElement {
|
||||
)}:
|
||||
${entry.username}</span
|
||||
>
|
||||
<mwc-icon-button
|
||||
<ha-icon-button
|
||||
.entry=${entry}
|
||||
.title=${this.supervisor.localize(
|
||||
.label=${this.supervisor.localize(
|
||||
"dialog.registries.remove"
|
||||
)}
|
||||
.path=${mdiDelete}
|
||||
slot="meta"
|
||||
@click=${this._removeRegistry}
|
||||
>
|
||||
<ha-svg-icon .path=${mdiDelete}></ha-svg-icon>
|
||||
</mwc-icon-button>
|
||||
></ha-icon-button>
|
||||
</mwc-list-item>
|
||||
`
|
||||
)
|
||||
@ -234,7 +232,7 @@ class HassioRegistriesDialog extends LitElement {
|
||||
mwc-button {
|
||||
margin-left: 8px;
|
||||
}
|
||||
mwc-icon-button {
|
||||
ha-icon-button {
|
||||
color: var(--error-color);
|
||||
margin: -10px;
|
||||
}
|
||||
|
||||
@ -1,5 +1,4 @@
|
||||
import "@material/mwc-button/mwc-button";
|
||||
import "@material/mwc-icon-button/mwc-icon-button";
|
||||
import { mdiDelete } from "@mdi/js";
|
||||
import "@polymer/paper-input/paper-input";
|
||||
import type { PaperInputElement } from "@polymer/paper-input/paper-input";
|
||||
@ -13,7 +12,7 @@ import { caseInsensitiveStringCompare } from "../../../../src/common/string/comp
|
||||
import "../../../../src/components/ha-alert";
|
||||
import "../../../../src/components/ha-circular-progress";
|
||||
import { createCloseHeading } from "../../../../src/components/ha-dialog";
|
||||
import "../../../../src/components/ha-svg-icon";
|
||||
import "../../../../src/components/ha-icon-button";
|
||||
import {
|
||||
fetchHassioAddonsInfo,
|
||||
HassioAddonRepository,
|
||||
@ -90,15 +89,14 @@ class HassioRepositoriesDialog extends LitElement {
|
||||
<div secondary>${repo.maintainer}</div>
|
||||
<div secondary>${repo.url}</div>
|
||||
</paper-item-body>
|
||||
<mwc-icon-button
|
||||
<ha-icon-button
|
||||
.slug=${repo.slug}
|
||||
.title=${this._dialogParams!.supervisor.localize(
|
||||
.label=${this._dialogParams!.supervisor.localize(
|
||||
"dialog.repositories.remove"
|
||||
)}
|
||||
.path=${mdiDelete}
|
||||
@click=${this._removeRepository}
|
||||
>
|
||||
<ha-svg-icon .path=${mdiDelete}></ha-svg-icon>
|
||||
</mwc-icon-button>
|
||||
></ha-icon-button>
|
||||
</paper-item>
|
||||
`
|
||||
)
|
||||
|
||||
@ -6,7 +6,6 @@ import "../../../../src/components/ha-alert";
|
||||
import "../../../../src/components/ha-circular-progress";
|
||||
import "../../../../src/components/ha-dialog";
|
||||
import "../../../../src/components/ha-settings-row";
|
||||
import "../../../../src/components/ha-svg-icon";
|
||||
import "../../../../src/components/ha-switch";
|
||||
import {
|
||||
extractApiErrorMessage,
|
||||
|
||||
@ -12,6 +12,7 @@ import { fireEvent } from "../../../src/common/dom/fire_event";
|
||||
import { navigate } from "../../../src/common/navigate";
|
||||
import { extractSearchParam } from "../../../src/common/url/search-params";
|
||||
import { nextRender } from "../../../src/common/util/render-status";
|
||||
import "../../../src/components/ha-icon-button";
|
||||
import {
|
||||
fetchHassioAddonInfo,
|
||||
HassioAddonDetails,
|
||||
@ -72,12 +73,11 @@ class HassioIngressView extends LitElement {
|
||||
|
||||
return html`${this.narrow || this.hass.dockedSidebar === "always_hidden"
|
||||
? html`<div class="header">
|
||||
<mwc-icon-button
|
||||
aria-label=${this.hass.localize("ui.sidebar.sidebar_toggle")}
|
||||
<ha-icon-button
|
||||
.label=${this.hass.localize("ui.sidebar.sidebar_toggle")}
|
||||
.path=${mdiMenu}
|
||||
@click=${this._toggleMenu}
|
||||
>
|
||||
<ha-svg-icon .path=${mdiMenu}></ha-svg-icon>
|
||||
</mwc-icon-button>
|
||||
></ha-icon-button>
|
||||
<div class="main-title">${this._addon.name}</div>
|
||||
</div>
|
||||
${iframe}`
|
||||
@ -241,7 +241,7 @@ class HassioIngressView extends LitElement {
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
mwc-icon-button {
|
||||
ha-icon-button {
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
|
||||
@ -9,6 +9,7 @@ import { fireEvent } from "../../../src/common/dom/fire_event";
|
||||
import "../../../src/components/buttons/ha-progress-button";
|
||||
import "../../../src/components/ha-button-menu";
|
||||
import "../../../src/components/ha-card";
|
||||
import "../../../src/components/ha-icon-button";
|
||||
import "../../../src/components/ha-settings-row";
|
||||
import {
|
||||
extractApiErrorMessage,
|
||||
@ -181,9 +182,11 @@ class HassioHostInfo extends LitElement {
|
||||
: ""}
|
||||
|
||||
<ha-button-menu corner="BOTTOM_START">
|
||||
<mwc-icon-button slot="trigger">
|
||||
<ha-svg-icon .path=${mdiDotsVertical}></ha-svg-icon>
|
||||
</mwc-icon-button>
|
||||
<ha-icon-button
|
||||
.label=${this.hass.localize("common.menu")}
|
||||
.path=${mdiDotsVertical}
|
||||
slot="trigger"
|
||||
></ha-icon-button>
|
||||
<mwc-list-item
|
||||
.action=${"hardware"}
|
||||
@click=${this._handleMenuAction}
|
||||
|
||||
@ -1,4 +1,3 @@
|
||||
import "@material/mwc-icon-button/mwc-icon-button";
|
||||
import { mdiClose, mdiMagnify } from "@mdi/js";
|
||||
import "@polymer/paper-input/paper-input";
|
||||
import type { PaperInputElement } from "@polymer/paper-input/paper-input";
|
||||
@ -11,11 +10,15 @@ import {
|
||||
TemplateResult,
|
||||
} from "lit";
|
||||
import { customElement, property, query } from "lit/decorators";
|
||||
import "../../components/ha-icon-button";
|
||||
import "../../components/ha-svg-icon";
|
||||
import { HomeAssistant } from "../../types";
|
||||
import { fireEvent } from "../dom/fire_event";
|
||||
|
||||
@customElement("search-input")
|
||||
class SearchInput extends LitElement {
|
||||
@property({ attribute: false }) public hass!: HomeAssistant;
|
||||
|
||||
@property() public filter?: string;
|
||||
|
||||
@property({ type: Boolean, attribute: "no-label-float" })
|
||||
@ -50,13 +53,12 @@ class SearchInput extends LitElement {
|
||||
</slot>
|
||||
${this.filter &&
|
||||
html`
|
||||
<mwc-icon-button
|
||||
<ha-icon-button
|
||||
slot="suffix"
|
||||
@click=${this._clearSearch}
|
||||
title="Clear"
|
||||
>
|
||||
<ha-svg-icon .path=${mdiClose}></ha-svg-icon>
|
||||
</mwc-icon-button>
|
||||
.label=${this.hass.localize("ui.common.clear")}
|
||||
.path=${mdiClose}
|
||||
></ha-icon-button>
|
||||
`}
|
||||
</paper-input>
|
||||
`;
|
||||
@ -90,10 +92,10 @@ class SearchInput extends LitElement {
|
||||
static get styles(): CSSResultGroup {
|
||||
return css`
|
||||
ha-svg-icon,
|
||||
mwc-icon-button {
|
||||
ha-icon-button {
|
||||
color: var(--primary-text-color);
|
||||
}
|
||||
mwc-icon-button {
|
||||
ha-icon-button {
|
||||
--mdc-icon-button-size: 24px;
|
||||
}
|
||||
ha-svg-icon.prefix {
|
||||
|
||||
@ -30,6 +30,7 @@ import "../ha-checkbox";
|
||||
import type { HaCheckbox } from "../ha-checkbox";
|
||||
import "../ha-svg-icon";
|
||||
import { filterData, sortData } from "./sort-filter";
|
||||
import { HomeAssistant } from "../../types";
|
||||
|
||||
declare global {
|
||||
// for fire event
|
||||
@ -93,6 +94,8 @@ export interface SortableColumnContainer {
|
||||
|
||||
@customElement("ha-data-table")
|
||||
export class HaDataTable extends LitElement {
|
||||
@property({ attribute: false }) public hass!: HomeAssistant;
|
||||
|
||||
@property({ type: Object }) public columns: DataTableColumnContainer = {};
|
||||
|
||||
@property({ type: Array }) public data: DataTableRowData[] = [];
|
||||
@ -232,6 +235,7 @@ export class HaDataTable extends LitElement {
|
||||
? html`
|
||||
<div class="table-header">
|
||||
<search-input
|
||||
.hass=${this.hass}
|
||||
@value-changed=${this._handleSearchChange}
|
||||
.label=${this.searchLabel}
|
||||
.noLabelFloat=${this.noLabelFloat}
|
||||
|
||||
@ -1,5 +1,4 @@
|
||||
import "@material/mwc-button/mwc-button";
|
||||
import "@material/mwc-icon-button/mwc-icon-button";
|
||||
import { mdiCheck, mdiClose, mdiMenuDown, mdiMenuUp } from "@mdi/js";
|
||||
import "@polymer/paper-input/paper-input";
|
||||
import "@polymer/paper-item/paper-item";
|
||||
@ -37,6 +36,7 @@ import {
|
||||
import { SubscribeMixin } from "../../mixins/subscribe-mixin";
|
||||
import { PolymerChangedEvent } from "../../polymer-types";
|
||||
import { HomeAssistant } from "../../types";
|
||||
import "../ha-icon-button";
|
||||
import "../ha-svg-icon";
|
||||
import "./ha-devices-picker";
|
||||
|
||||
@ -324,29 +324,25 @@ export class HaAreaDevicesPicker extends SubscribeMixin(LitElement) {
|
||||
>
|
||||
<div class="suffix" slot="suffix">
|
||||
${this.value
|
||||
? html`<mwc-icon-button
|
||||
? html`<ha-icon-button
|
||||
class="clear-button"
|
||||
.label=${this.hass.localize(
|
||||
"ui.components.device-picker.clear"
|
||||
)}
|
||||
.path=${mdiClose}
|
||||
@click=${this._clearValue}
|
||||
no-ripple
|
||||
>
|
||||
<ha-svg-icon .path=${mdiClose}></ha-svg-icon>
|
||||
</mwc-icon-button> `
|
||||
></ha-icon-button> `
|
||||
: ""}
|
||||
${areas.length > 0
|
||||
? html`
|
||||
<mwc-icon-button
|
||||
<ha-icon-button
|
||||
.label=${this.hass.localize(
|
||||
"ui.components.device-picker.show_devices"
|
||||
)}
|
||||
.path=${this._opened ? mdiMenuUp : mdiMenuDown}
|
||||
class="toggle-button"
|
||||
>
|
||||
<ha-svg-icon
|
||||
.path=${this._opened ? mdiMenuUp : mdiMenuDown}
|
||||
></ha-svg-icon>
|
||||
</mwc-icon-button>
|
||||
></ha-icon-button>
|
||||
`
|
||||
: ""}
|
||||
</div>
|
||||
@ -408,7 +404,7 @@ export class HaAreaDevicesPicker extends SubscribeMixin(LitElement) {
|
||||
.suffix {
|
||||
display: flex;
|
||||
}
|
||||
mwc-icon-button {
|
||||
ha-icon-button {
|
||||
--mdc-icon-button-size: 24px;
|
||||
padding: 0px 2px;
|
||||
color: var(--secondary-text-color);
|
||||
|
||||
@ -338,7 +338,7 @@ export class HaDevicePicker extends SubscribeMixin(LitElement) {
|
||||
|
||||
static get styles(): CSSResultGroup {
|
||||
return css`
|
||||
paper-input > mwc-icon-button {
|
||||
paper-input > ha-icon-button {
|
||||
--mdc-icon-button-size: 24px;
|
||||
padding: 2px;
|
||||
color: var(--secondary-text-color);
|
||||
|
||||
@ -1,4 +1,3 @@
|
||||
import "@material/mwc-icon-button/mwc-icon-button";
|
||||
import { mdiCheck, mdiClose, mdiMenuDown, mdiMenuUp } from "@mdi/js";
|
||||
import "@polymer/paper-input/paper-input";
|
||||
import "@polymer/paper-item/paper-item";
|
||||
@ -18,6 +17,7 @@ import { fireEvent } from "../../common/dom/fire_event";
|
||||
import { PolymerChangedEvent } from "../../polymer-types";
|
||||
import { HomeAssistant } from "../../types";
|
||||
import { formatAttributeName } from "../../util/hass-attributes-util";
|
||||
import "../ha-icon-button";
|
||||
import "../ha-svg-icon";
|
||||
import "./state-badge";
|
||||
|
||||
@ -114,31 +114,27 @@ class HaEntityAttributePicker extends LitElement {
|
||||
<div class="suffix" slot="suffix">
|
||||
${this.value
|
||||
? html`
|
||||
<mwc-icon-button
|
||||
<ha-icon-button
|
||||
.label=${this.hass.localize(
|
||||
"ui.components.entity.entity-picker.clear"
|
||||
)}
|
||||
.path=${mdiClose}
|
||||
class="clear-button"
|
||||
tabindex="-1"
|
||||
@click=${this._clearValue}
|
||||
no-ripple
|
||||
>
|
||||
<ha-svg-icon .path=${mdiClose}></ha-svg-icon>
|
||||
</mwc-icon-button>
|
||||
></ha-icon-button>
|
||||
`
|
||||
: ""}
|
||||
|
||||
<mwc-icon-button
|
||||
<ha-icon-button
|
||||
.label=${this.hass.localize(
|
||||
"ui.components.entity.entity-attribute-picker.show_attributes"
|
||||
)}
|
||||
.path=${this._opened ? mdiMenuUp : mdiMenuDown}
|
||||
class="toggle-button"
|
||||
tabindex="-1"
|
||||
>
|
||||
<ha-svg-icon
|
||||
.path=${this._opened ? mdiMenuUp : mdiMenuDown}
|
||||
></ha-svg-icon>
|
||||
</mwc-icon-button>
|
||||
></ha-icon-button>
|
||||
</div>
|
||||
</paper-input>
|
||||
</vaadin-combo-box-light>
|
||||
@ -178,7 +174,7 @@ class HaEntityAttributePicker extends LitElement {
|
||||
.suffix {
|
||||
display: flex;
|
||||
}
|
||||
mwc-icon-button {
|
||||
ha-icon-button {
|
||||
--mdc-icon-button-size: 24px;
|
||||
padding: 0px 2px;
|
||||
color: var(--secondary-text-color);
|
||||
|
||||
@ -1,4 +1,3 @@
|
||||
import "@material/mwc-icon-button/mwc-icon-button";
|
||||
import { mdiCheck, mdiClose, mdiMenuDown, mdiMenuUp } from "@mdi/js";
|
||||
import "@polymer/paper-input/paper-input";
|
||||
import "@polymer/paper-item/paper-icon-item";
|
||||
@ -21,6 +20,7 @@ import { computeDomain } from "../../common/entity/compute_domain";
|
||||
import { computeStateName } from "../../common/entity/compute_state_name";
|
||||
import { PolymerChangedEvent } from "../../polymer-types";
|
||||
import { HomeAssistant } from "../../types";
|
||||
import "../ha-icon-button";
|
||||
import "../ha-svg-icon";
|
||||
import "./state-badge";
|
||||
|
||||
@ -267,31 +267,27 @@ export class HaEntityPicker extends LitElement {
|
||||
<div class="suffix" slot="suffix">
|
||||
${this.value && !this.hideClearIcon
|
||||
? html`
|
||||
<mwc-icon-button
|
||||
<ha-icon-button
|
||||
.label=${this.hass.localize(
|
||||
"ui.components.entity.entity-picker.clear"
|
||||
)}
|
||||
.path=${mdiClose}
|
||||
class="clear-button"
|
||||
tabindex="-1"
|
||||
@click=${this._clearValue}
|
||||
no-ripple
|
||||
>
|
||||
<ha-svg-icon .path=${mdiClose}></ha-svg-icon>
|
||||
</mwc-icon-button>
|
||||
></ha-icon-button>
|
||||
`
|
||||
: ""}
|
||||
|
||||
<mwc-icon-button
|
||||
<ha-icon-button
|
||||
.label=${this.hass.localize(
|
||||
"ui.components.entity.entity-picker.show_entities"
|
||||
)}
|
||||
.path=${this._opened ? mdiMenuUp : mdiMenuDown}
|
||||
class="toggle-button"
|
||||
tabindex="-1"
|
||||
>
|
||||
<ha-svg-icon
|
||||
.path=${this._opened ? mdiMenuUp : mdiMenuDown}
|
||||
></ha-svg-icon>
|
||||
</mwc-icon-button>
|
||||
></ha-icon-button>
|
||||
</div>
|
||||
</paper-input>
|
||||
</vaadin-combo-box-light>
|
||||
@ -340,7 +336,7 @@ export class HaEntityPicker extends LitElement {
|
||||
.suffix {
|
||||
display: flex;
|
||||
}
|
||||
mwc-icon-button {
|
||||
ha-icon-button {
|
||||
--mdc-icon-button-size: 24px;
|
||||
padding: 0px 2px;
|
||||
color: var(--secondary-text-color);
|
||||
|
||||
@ -1,3 +1,4 @@
|
||||
import { mdiFlash, mdiFlashOff } from "@mdi/js";
|
||||
import { HassEntity } from "home-assistant-js-websocket";
|
||||
import {
|
||||
css,
|
||||
@ -41,15 +42,15 @@ export class HaEntityToggle extends LitElement {
|
||||
if (this.stateObj.attributes.assumed_state) {
|
||||
return html`
|
||||
<ha-icon-button
|
||||
aria-label=${`Turn ${computeStateName(this.stateObj)} off`}
|
||||
icon="hass:flash-off"
|
||||
.label=${`Turn ${computeStateName(this.stateObj)} off`}
|
||||
.path=${mdiFlashOff}
|
||||
.disabled=${this.stateObj.state === UNAVAILABLE}
|
||||
@click=${this._turnOff}
|
||||
?state-active=${!this._isOn}
|
||||
></ha-icon-button>
|
||||
<ha-icon-button
|
||||
aria-label=${`Turn ${computeStateName(this.stateObj)} on`}
|
||||
icon="hass:flash"
|
||||
.label=${`Turn ${computeStateName(this.stateObj)} on`}
|
||||
.path=${mdiFlash}
|
||||
.disabled=${this.stateObj.state === UNAVAILABLE}
|
||||
@click=${this._turnOn}
|
||||
?state-active=${this._isOn}
|
||||
|
||||
@ -1,4 +1,3 @@
|
||||
import "@material/mwc-icon-button/mwc-icon-button";
|
||||
import { mdiCheck } from "@mdi/js";
|
||||
import "@polymer/paper-input/paper-input";
|
||||
import "@polymer/paper-item/paper-icon-item";
|
||||
@ -289,7 +288,7 @@ export class HaStatisticPicker extends LitElement {
|
||||
|
||||
static get styles(): CSSResultGroup {
|
||||
return css`
|
||||
paper-input > mwc-icon-button {
|
||||
paper-input > ha-icon-button {
|
||||
--mdc-icon-button-size: 24px;
|
||||
padding: 2px;
|
||||
color: var(--secondary-text-color);
|
||||
|
||||
@ -1,5 +1,4 @@
|
||||
import "@material/mwc-button/mwc-button";
|
||||
import "@material/mwc-icon-button/mwc-icon-button";
|
||||
import {
|
||||
mdiAlertCircleOutline,
|
||||
mdiAlertOutline,
|
||||
@ -11,6 +10,7 @@ import { css, html, LitElement } from "lit";
|
||||
import { customElement, property } from "lit/decorators";
|
||||
import { classMap } from "lit/directives/class-map";
|
||||
import { fireEvent } from "../common/dom/fire_event";
|
||||
import "./ha-icon-button";
|
||||
import "./ha-svg-icon";
|
||||
|
||||
const ALERT_ICONS = {
|
||||
@ -66,12 +66,11 @@ class HaAlert extends LitElement {
|
||||
.label=${this.actionText}
|
||||
></mwc-button>`
|
||||
: this.dismissable
|
||||
? html`<mwc-icon-button
|
||||
? html`<ha-icon-button
|
||||
@click=${this._dismiss_clicked}
|
||||
aria-label="Dismiss alert"
|
||||
>
|
||||
<ha-svg-icon .path=${mdiClose}> </ha-svg-icon>
|
||||
</mwc-icon-button> `
|
||||
label="Dismiss alert"
|
||||
.path=${mdiClose}
|
||||
></ha-icon-button>`
|
||||
: ""}
|
||||
</div>
|
||||
</div>
|
||||
@ -140,7 +139,7 @@ class HaAlert extends LitElement {
|
||||
mwc-button {
|
||||
--mdc-theme-primary: var(--primary-text-color);
|
||||
}
|
||||
mwc-icon-button {
|
||||
ha-icon-button {
|
||||
--mdc-icon-button-size: 36px;
|
||||
}
|
||||
.issue-type.info > .icon {
|
||||
|
||||
@ -1,4 +1,3 @@
|
||||
import "@material/mwc-icon-button/mwc-icon-button";
|
||||
import { mdiCheck, mdiClose, mdiMenuDown, mdiMenuUp } from "@mdi/js";
|
||||
import "@polymer/paper-input/paper-input";
|
||||
import "@polymer/paper-item/paper-item";
|
||||
@ -42,6 +41,7 @@ import { SubscribeMixin } from "../mixins/subscribe-mixin";
|
||||
import { PolymerChangedEvent } from "../polymer-types";
|
||||
import { HomeAssistant } from "../types";
|
||||
import type { HaDevicePickerDeviceFilterFunc } from "./device/ha-device-picker";
|
||||
import "./ha-icon-button";
|
||||
import "./ha-svg-icon";
|
||||
|
||||
const rowRenderer: ComboBoxLitRenderer<AreaRegistryEntry> = (
|
||||
@ -362,28 +362,24 @@ export class HaAreaPicker extends SubscribeMixin(LitElement) {
|
||||
>
|
||||
${this.value
|
||||
? html`
|
||||
<mwc-icon-button
|
||||
<ha-icon-button
|
||||
.label=${this.hass.localize(
|
||||
"ui.components.area-picker.clear"
|
||||
)}
|
||||
.path=${mdiClose}
|
||||
slot="suffix"
|
||||
class="clear-button"
|
||||
@click=${this._clearValue}
|
||||
>
|
||||
<ha-svg-icon .path=${mdiClose}></ha-svg-icon>
|
||||
</mwc-icon-button>
|
||||
></ha-icon-button>
|
||||
`
|
||||
: ""}
|
||||
|
||||
<mwc-icon-button
|
||||
<ha-icon-button
|
||||
.label=${this.hass.localize("ui.components.area-picker.toggle")}
|
||||
.path=${this._opened ? mdiMenuUp : mdiMenuDown}
|
||||
slot="suffix"
|
||||
class="toggle-button"
|
||||
>
|
||||
<ha-svg-icon
|
||||
.path=${this._opened ? mdiMenuUp : mdiMenuDown}
|
||||
></ha-svg-icon>
|
||||
</mwc-icon-button>
|
||||
></ha-icon-button>
|
||||
</paper-input>
|
||||
</vaadin-combo-box-light>
|
||||
`;
|
||||
@ -457,7 +453,7 @@ export class HaAreaPicker extends SubscribeMixin(LitElement) {
|
||||
|
||||
static get styles(): CSSResultGroup {
|
||||
return css`
|
||||
paper-input > mwc-icon-button {
|
||||
paper-input > ha-icon-button {
|
||||
--mdc-icon-button-size: 24px;
|
||||
padding: 2px;
|
||||
color: var(--secondary-text-color);
|
||||
|
||||
@ -1,4 +1,3 @@
|
||||
import "@material/mwc-icon-button";
|
||||
import type { Corner } from "@material/mwc-menu";
|
||||
import "@material/mwc-menu/mwc-menu-surface";
|
||||
import { mdiFilterVariant } from "@mdi/js";
|
||||
@ -12,7 +11,7 @@ import type { HomeAssistant } from "../types";
|
||||
import "./device/ha-device-picker";
|
||||
import "./entity/ha-entity-picker";
|
||||
import "./ha-area-picker";
|
||||
import "./ha-svg-icon";
|
||||
import "./ha-icon-button";
|
||||
|
||||
declare global {
|
||||
// for fire event
|
||||
@ -55,9 +54,10 @@ export class HaRelatedFilterButtonMenu extends LitElement {
|
||||
|
||||
protected render(): TemplateResult {
|
||||
return html`
|
||||
<mwc-icon-button @click=${this._handleClick}>
|
||||
<ha-svg-icon .path=${mdiFilterVariant}></ha-svg-icon>
|
||||
</mwc-icon-button>
|
||||
<ha-icon-button
|
||||
@click=${this._handleClick}
|
||||
.path=${mdiFilterVariant}
|
||||
></ha-icon-button>
|
||||
<mwc-menu-surface
|
||||
.open=${this._open}
|
||||
.anchor=${this}
|
||||
|
||||
@ -1,12 +1,10 @@
|
||||
import "@material/mwc-button/mwc-button";
|
||||
import type { Button } from "@material/mwc-button/mwc-button";
|
||||
import "@material/mwc-icon-button/mwc-icon-button";
|
||||
import { Button } from "@material/mwc-button/mwc-button";
|
||||
import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
|
||||
import { customElement, property, queryAll } from "lit/decorators";
|
||||
import { styleMap } from "lit/directives/style-map";
|
||||
import { fireEvent } from "../common/dom/fire_event";
|
||||
import type { ToggleButton } from "../types";
|
||||
import "./ha-svg-icon";
|
||||
import "./ha-icon-button";
|
||||
|
||||
@customElement("ha-button-toggle-group")
|
||||
export class HaButtonToggleGroup extends LitElement {
|
||||
@ -25,14 +23,13 @@ export class HaButtonToggleGroup extends LitElement {
|
||||
<div>
|
||||
${this.buttons.map((button) =>
|
||||
button.iconPath
|
||||
? html`<mwc-icon-button
|
||||
? html`<ha-icon-button
|
||||
.label=${button.label}
|
||||
.path=${button.iconPath}
|
||||
.value=${button.value}
|
||||
?active=${this.active === button.value}
|
||||
@click=${this._handleClick}
|
||||
>
|
||||
<ha-svg-icon .path=${button.iconPath}></ha-svg-icon>
|
||||
</mwc-icon-button>`
|
||||
></ha-icon-button>`
|
||||
: html`<mwc-button
|
||||
style=${styleMap({
|
||||
width: this.fullWidth
|
||||
@ -77,16 +74,16 @@ export class HaButtonToggleGroup extends LitElement {
|
||||
--mdc-shape-small: 0;
|
||||
--mdc-button-outline-width: 1px 0 1px 1px;
|
||||
}
|
||||
mwc-icon-button {
|
||||
ha-icon-button {
|
||||
border: 1px solid var(--primary-color);
|
||||
border-right-width: 0px;
|
||||
}
|
||||
mwc-icon-button,
|
||||
ha-icon-button,
|
||||
mwc-button {
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
}
|
||||
mwc-icon-button::before,
|
||||
ha-icon-button::before,
|
||||
mwc-button::before {
|
||||
top: 0;
|
||||
left: 0;
|
||||
@ -99,23 +96,23 @@ export class HaButtonToggleGroup extends LitElement {
|
||||
content: "";
|
||||
transition: opacity 15ms linear, background-color 15ms linear;
|
||||
}
|
||||
mwc-icon-button[active]::before,
|
||||
ha-icon-button[active]::before,
|
||||
mwc-button[active]::before {
|
||||
opacity: var(--mdc-icon-button-ripple-opacity, 0.12);
|
||||
}
|
||||
mwc-icon-button:first-child,
|
||||
ha-icon-button:first-child,
|
||||
mwc-button:first-child {
|
||||
--mdc-shape-small: 4px 0 0 4px;
|
||||
border-radius: 4px 0 0 4px;
|
||||
}
|
||||
mwc-icon-button:last-child,
|
||||
ha-icon-button:last-child,
|
||||
mwc-button:last-child {
|
||||
border-radius: 0 4px 4px 0;
|
||||
border-right-width: 1px;
|
||||
--mdc-shape-small: 0 4px 4px 0;
|
||||
--mdc-button-outline-width: 1px;
|
||||
}
|
||||
mwc-icon-button:only-child,
|
||||
ha-icon-button:only-child,
|
||||
mwc-button:only-child {
|
||||
--mdc-shape-small: 4px;
|
||||
border-right-width: 1px;
|
||||
|
||||
@ -3,6 +3,7 @@ import { html } from "@polymer/polymer/lib/utils/html-tag";
|
||||
/* eslint-plugin-disable lit */
|
||||
import { PolymerElement } from "@polymer/polymer/polymer-element";
|
||||
import { EventsMixin } from "../mixins/events-mixin";
|
||||
import "./ha-icon";
|
||||
import "./ha-icon-button";
|
||||
|
||||
/*
|
||||
@ -40,16 +41,14 @@ class HaClimateControl extends EventsMixin(PolymerElement) {
|
||||
<div id="target_temperature">[[value]] [[units]]</div>
|
||||
<div class="control-buttons">
|
||||
<div>
|
||||
<ha-icon-button
|
||||
icon="hass:chevron-up"
|
||||
on-click="incrementValue"
|
||||
></ha-icon-button>
|
||||
<ha-icon-button on-click="incrementValue">
|
||||
<ha-icon icon="hass:chevron-up"></ha-icon>
|
||||
</ha-icon-button>
|
||||
</div>
|
||||
<div>
|
||||
<ha-icon-button
|
||||
icon="hass:chevron-down"
|
||||
on-click="decrementValue"
|
||||
></ha-icon-button>
|
||||
<ha-icon-button on-click="decrementValue">
|
||||
<ha-icon icon="hass:chevron-down"></ha-icon>
|
||||
</ha-icon-button>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
@ -1,4 +1,3 @@
|
||||
import "@material/mwc-icon-button/mwc-icon-button";
|
||||
import { mdiClose, mdiMenuDown, mdiMenuUp } from "@mdi/js";
|
||||
import "@polymer/paper-input/paper-input";
|
||||
import "@polymer/paper-item/paper-item";
|
||||
@ -11,7 +10,7 @@ import { customElement, property, query, state } from "lit/decorators";
|
||||
import { fireEvent } from "../common/dom/fire_event";
|
||||
import { PolymerChangedEvent } from "../polymer-types";
|
||||
import { HomeAssistant } from "../types";
|
||||
import "./ha-svg-icon";
|
||||
import "./ha-icon-button";
|
||||
|
||||
// eslint-disable-next-line lit/prefer-static-styles
|
||||
const defaultRowRenderer: ComboBoxLitRenderer<string> = (item) => html`<style>
|
||||
@ -94,26 +93,22 @@ export class HaComboBox extends LitElement {
|
||||
>
|
||||
${this.value
|
||||
? html`
|
||||
<mwc-icon-button
|
||||
<ha-icon-button
|
||||
.label=${this.hass.localize("ui.components.combo-box.clear")}
|
||||
.path=${mdiClose}
|
||||
slot="suffix"
|
||||
class="clear-button"
|
||||
@click=${this._clearValue}
|
||||
>
|
||||
<ha-svg-icon .path=${mdiClose}></ha-svg-icon>
|
||||
</mwc-icon-button>
|
||||
></ha-icon-button>
|
||||
`
|
||||
: ""}
|
||||
|
||||
<mwc-icon-button
|
||||
<ha-icon-button
|
||||
.label=${this.hass.localize("ui.components.combo-box.show")}
|
||||
.path=${this._opened ? mdiMenuUp : mdiMenuDown}
|
||||
slot="suffix"
|
||||
class="toggle-button"
|
||||
>
|
||||
<ha-svg-icon
|
||||
.path=${this._opened ? mdiMenuUp : mdiMenuDown}
|
||||
></ha-svg-icon>
|
||||
</mwc-icon-button>
|
||||
></ha-icon-button>
|
||||
</paper-input>
|
||||
</vaadin-combo-box-light>
|
||||
`;
|
||||
@ -146,7 +141,7 @@ export class HaComboBox extends LitElement {
|
||||
|
||||
static get styles(): CSSResultGroup {
|
||||
return css`
|
||||
paper-input > mwc-icon-button {
|
||||
paper-input > ha-icon-button {
|
||||
--mdc-icon-button-size: 24px;
|
||||
padding: 2px;
|
||||
color: var(--secondary-text-color);
|
||||
|
||||
@ -1,3 +1,4 @@
|
||||
import { mdiStop } from "@mdi/js";
|
||||
import type { HassEntity } from "home-assistant-js-websocket";
|
||||
import {
|
||||
css,
|
||||
@ -13,6 +14,7 @@ import { computeCloseIcon, computeOpenIcon } from "../common/entity/cover_icon";
|
||||
import { UNAVAILABLE } from "../data/entity";
|
||||
import type { HomeAssistant } from "../types";
|
||||
import CoverEntity from "../util/cover-model";
|
||||
import "./ha-icon";
|
||||
import "./ha-icon-button";
|
||||
|
||||
@customElement("ha-cover-controls")
|
||||
@ -45,10 +47,11 @@ class HaCoverControls extends LitElement {
|
||||
.label=${this.hass.localize(
|
||||
"ui.dialogs.more_info_control.open_cover"
|
||||
)}
|
||||
.icon=${computeOpenIcon(this.stateObj)}
|
||||
@click=${this._onOpenTap}
|
||||
.disabled=${this._computeOpenDisabled()}
|
||||
></ha-icon-button>
|
||||
>
|
||||
<ha-icon .icon=${computeOpenIcon(this.stateObj)}></ha-icon>
|
||||
</ha-icon-button>
|
||||
<ha-icon-button
|
||||
class=${classMap({
|
||||
hidden: !this._entityObj.supportsStop,
|
||||
@ -56,7 +59,7 @@ class HaCoverControls extends LitElement {
|
||||
.label=${this.hass.localize(
|
||||
"ui.dialogs.more_info_control.stop_cover"
|
||||
)}
|
||||
icon="hass:stop"
|
||||
.path=${mdiStop}
|
||||
@click=${this._onStopTap}
|
||||
.disabled=${this.stateObj.state === UNAVAILABLE}
|
||||
></ha-icon-button>
|
||||
@ -67,10 +70,11 @@ class HaCoverControls extends LitElement {
|
||||
.label=${this.hass.localize(
|
||||
"ui.dialogs.more_info_control.close_cover"
|
||||
)}
|
||||
.icon=${computeCloseIcon(this.stateObj)}
|
||||
@click=${this._onCloseTap}
|
||||
.disabled=${this._computeClosedDisabled()}
|
||||
></ha-icon-button>
|
||||
>
|
||||
<ha-icon .icon=${computeCloseIcon(this.stateObj)}></ha-icon>
|
||||
</ha-icon-button>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
@ -1,3 +1,4 @@
|
||||
import { mdiArrowBottomLeft, mdiArrowTopRight, mdiStop } from "@mdi/js";
|
||||
import { HassEntity } from "home-assistant-js-websocket";
|
||||
import {
|
||||
css,
|
||||
@ -39,10 +40,10 @@ class HaCoverTiltControls extends LitElement {
|
||||
class=${classMap({
|
||||
invisible: !this._entityObj.supportsOpenTilt,
|
||||
})}
|
||||
label=${this.hass.localize(
|
||||
.label=${this.hass.localize(
|
||||
"ui.dialogs.more_info_control.open_tilt_cover"
|
||||
)}
|
||||
icon="hass:arrow-top-right"
|
||||
.path=${mdiArrowTopRight}
|
||||
@click=${this._onOpenTiltTap}
|
||||
.disabled=${this._computeOpenDisabled()}
|
||||
></ha-icon-button>
|
||||
@ -50,8 +51,8 @@ class HaCoverTiltControls extends LitElement {
|
||||
class=${classMap({
|
||||
invisible: !this._entityObj.supportsStopTilt,
|
||||
})}
|
||||
label=${this.hass.localize("ui.dialogs.more_info_control.stop_cover")}
|
||||
icon="hass:stop"
|
||||
.label=${this.hass.localize("ui.dialogs.more_info_control.stop_cover")}
|
||||
.path=${mdiStop}
|
||||
@click=${this._onStopTiltTap}
|
||||
.disabled=${this.stateObj.state === UNAVAILABLE}
|
||||
></ha-icon-button>
|
||||
@ -59,10 +60,10 @@ class HaCoverTiltControls extends LitElement {
|
||||
class=${classMap({
|
||||
invisible: !this._entityObj.supportsCloseTilt,
|
||||
})}
|
||||
label=${this.hass.localize(
|
||||
.label=${this.hass.localize(
|
||||
"ui.dialogs.more_info_control.close_tilt_cover"
|
||||
)}
|
||||
icon="hass:arrow-bottom-left"
|
||||
.path=${mdiArrowBottomLeft}
|
||||
@click=${this._onCloseTiltTap}
|
||||
.disabled=${this._computeClosedDisabled()}
|
||||
></ha-icon-button>`;
|
||||
|
||||
@ -4,22 +4,20 @@ import { css, CSSResultGroup, html, TemplateResult } from "lit";
|
||||
import { customElement } from "lit/decorators";
|
||||
import { computeRTLDirection } from "../common/util/compute_rtl";
|
||||
import type { HomeAssistant } from "../types";
|
||||
import "@material/mwc-icon-button/mwc-icon-button";
|
||||
import "./ha-svg-icon";
|
||||
import "./ha-icon-button";
|
||||
|
||||
export const createCloseHeading = (
|
||||
hass: HomeAssistant,
|
||||
title: string | TemplateResult
|
||||
) => html`
|
||||
<span class="header_title">${title}</span>
|
||||
<mwc-icon-button
|
||||
aria-label=${hass.localize("ui.dialogs.generic.close")}
|
||||
<ha-icon-button
|
||||
.label=${hass.localize("ui.dialogs.generic.close")}
|
||||
.path=${mdiClose}
|
||||
dialogAction="close"
|
||||
class="header_button"
|
||||
dir=${computeRTLDirection(hass)}
|
||||
>
|
||||
<ha-svg-icon .path=${mdiClose}></ha-svg-icon>
|
||||
</mwc-icon-button>
|
||||
></ha-icon-button>
|
||||
`;
|
||||
|
||||
@customElement("ha-dialog")
|
||||
|
||||
@ -1,13 +1,13 @@
|
||||
import "@material/mwc-icon-button/mwc-icon-button";
|
||||
import { mdiClose } from "@mdi/js";
|
||||
import "@polymer/iron-input/iron-input";
|
||||
import "@polymer/paper-input/paper-input-container";
|
||||
import { css, html, LitElement, PropertyValues, TemplateResult } from "lit";
|
||||
import { customElement, property, state, query } from "lit/decorators";
|
||||
import { customElement, property, query, state } from "lit/decorators";
|
||||
import { classMap } from "lit/directives/class-map";
|
||||
import { fireEvent } from "../common/dom/fire_event";
|
||||
import { HomeAssistant } from "../types";
|
||||
import "./ha-circular-progress";
|
||||
import "./ha-svg-icon";
|
||||
import "./ha-icon-button";
|
||||
|
||||
declare global {
|
||||
interface HASSDomEvents {
|
||||
@ -17,6 +17,8 @@ declare global {
|
||||
|
||||
@customElement("ha-file-upload")
|
||||
export class HaFileUpload extends LitElement {
|
||||
@property({ attribute: false }) public hass!: HomeAssistant;
|
||||
|
||||
@property() public accept!: string;
|
||||
|
||||
@property() public icon!: string;
|
||||
@ -82,15 +84,15 @@ export class HaFileUpload extends LitElement {
|
||||
${this.value}
|
||||
</iron-input>
|
||||
${this.value
|
||||
? html`<mwc-icon-button
|
||||
? html`<ha-icon-button
|
||||
slot="suffix"
|
||||
@click=${this._clearValue}
|
||||
>
|
||||
<ha-svg-icon .path=${mdiClose}></ha-svg-icon>
|
||||
</mwc-icon-button>`
|
||||
: html`<mwc-icon-button slot="suffix">
|
||||
<ha-svg-icon .path=${this.icon}></ha-svg-icon>
|
||||
</mwc-icon-button>`}
|
||||
.label=${this.hass.localize("ui.common.close")}
|
||||
.path=${mdiClose}
|
||||
></ha-icon-button>`
|
||||
: html`<ha-icon-button slot="suffix">
|
||||
.path=${this.icon} ></ha-icon-button
|
||||
>`}
|
||||
</paper-input-container>
|
||||
</label>
|
||||
`}
|
||||
@ -154,7 +156,7 @@ export class HaFileUpload extends LitElement {
|
||||
max-width: 125px;
|
||||
max-height: 125px;
|
||||
}
|
||||
mwc-icon-button {
|
||||
ha-icon-button {
|
||||
--mdc-icon-button-size: 24px;
|
||||
--mdc-icon-size: 20px;
|
||||
}
|
||||
|
||||
@ -4,7 +4,6 @@ import "@material/mwc-list/mwc-list-item";
|
||||
import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
|
||||
import { customElement, property, query } from "lit/decorators";
|
||||
import { fireEvent } from "../../common/dom/fire_event";
|
||||
import "../ha-svg-icon";
|
||||
import "../ha-radio";
|
||||
import { HaFormElement, HaFormSelectData, HaFormSelectSchema } from "./types";
|
||||
|
||||
|
||||
@ -11,7 +11,7 @@ import {
|
||||
} from "lit";
|
||||
import { customElement, property, state, query } from "lit/decorators";
|
||||
import { fireEvent } from "../../common/dom/fire_event";
|
||||
import "../ha-svg-icon";
|
||||
import "../ha-icon-button";
|
||||
import type {
|
||||
HaFormElement,
|
||||
HaFormStringData,
|
||||
@ -64,17 +64,13 @@ export class HaFormString extends LitElement implements HaFormElement {
|
||||
@input=${this._valueChanged}
|
||||
></mwc-textfield>
|
||||
${isPassword
|
||||
? html`
|
||||
<mwc-icon-button
|
||||
toggles
|
||||
title="Click to toggle between masked and clear password"
|
||||
@click=${this._toggleUnmaskedPassword}
|
||||
tabindex="-1"
|
||||
><ha-svg-icon
|
||||
.path=${this._unmaskedPassword ? mdiEyeOff : mdiEye}
|
||||
></ha-svg-icon>
|
||||
</mwc-icon-button>
|
||||
`
|
||||
? html`<ha-icon-button
|
||||
toggles
|
||||
.label="Click to toggle between masked and clear password"
|
||||
@click=${this._toggleUnmaskedPassword}
|
||||
tabindex="-1"
|
||||
.path=${this._unmaskedPassword ? mdiEyeOff : mdiEye}
|
||||
></ha-icon-button>`
|
||||
: ""}
|
||||
`;
|
||||
}
|
||||
@ -126,7 +122,7 @@ export class HaFormString extends LitElement implements HaFormElement {
|
||||
mwc-textfield {
|
||||
display: block;
|
||||
}
|
||||
mwc-icon-button {
|
||||
ha-icon-button {
|
||||
position: absolute;
|
||||
top: 1em;
|
||||
right: 12px;
|
||||
|
||||
@ -1,9 +1,8 @@
|
||||
import "@material/mwc-icon-button/mwc-icon-button";
|
||||
import { mdiArrowLeft, mdiArrowRight } from "@mdi/js";
|
||||
import { html, LitElement, TemplateResult } from "lit";
|
||||
import { customElement, property, state } from "lit/decorators";
|
||||
import { HomeAssistant } from "../types";
|
||||
import "./ha-svg-icon";
|
||||
import "./ha-icon-button";
|
||||
|
||||
@customElement("ha-icon-button-arrow-next")
|
||||
export class HaIconButtonArrowNext extends LitElement {
|
||||
@ -28,12 +27,13 @@ export class HaIconButtonArrowNext extends LitElement {
|
||||
}
|
||||
|
||||
protected render(): TemplateResult {
|
||||
return html`<mwc-icon-button
|
||||
.disabled=${this.disabled}
|
||||
.label=${this.label || this.hass?.localize("ui.common.next") || "Next"}
|
||||
>
|
||||
<ha-svg-icon .path=${this._icon}></ha-svg-icon>
|
||||
</mwc-icon-button> `;
|
||||
return html`
|
||||
<ha-icon-button
|
||||
.disabled=${this.disabled}
|
||||
.label=${this.label || this.hass?.localize("ui.common.next") || "Next"}
|
||||
.path=${this._icon}
|
||||
></ha-icon-button>
|
||||
`;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -1,9 +1,8 @@
|
||||
import "@material/mwc-icon-button/mwc-icon-button";
|
||||
import { mdiArrowLeft, mdiArrowRight } from "@mdi/js";
|
||||
import { html, LitElement, TemplateResult } from "lit";
|
||||
import { customElement, property, state } from "lit/decorators";
|
||||
import { HomeAssistant } from "../types";
|
||||
import "./ha-svg-icon";
|
||||
import "./ha-icon-button";
|
||||
|
||||
@customElement("ha-icon-button-arrow-prev")
|
||||
export class HaIconButtonArrowPrev extends LitElement {
|
||||
@ -29,12 +28,11 @@ export class HaIconButtonArrowPrev extends LitElement {
|
||||
|
||||
protected render(): TemplateResult {
|
||||
return html`
|
||||
<mwc-icon-button
|
||||
<ha-icon-button
|
||||
.disabled=${this.disabled}
|
||||
.label=${this.label || this.hass?.localize("ui.common.back") || "Back"}
|
||||
>
|
||||
<ha-svg-icon .path=${this._icon}></ha-svg-icon>
|
||||
</mwc-icon-button>
|
||||
.path=${this._icon}
|
||||
></ha-icon-button>
|
||||
`;
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,9 +1,8 @@
|
||||
import "@material/mwc-icon-button";
|
||||
import { mdiChevronLeft, mdiChevronRight } from "@mdi/js";
|
||||
import { html, LitElement, TemplateResult } from "lit";
|
||||
import { customElement, property, state } from "lit/decorators";
|
||||
import { HomeAssistant } from "../types";
|
||||
import "./ha-svg-icon";
|
||||
import "./ha-icon-button";
|
||||
|
||||
@customElement("ha-icon-button-next")
|
||||
export class HaIconButtonNext extends LitElement {
|
||||
@ -29,12 +28,11 @@ export class HaIconButtonNext extends LitElement {
|
||||
|
||||
protected render(): TemplateResult {
|
||||
return html`
|
||||
<mwc-icon-button
|
||||
<ha-icon-button
|
||||
.disabled=${this.disabled}
|
||||
.label=${this.label || this.hass?.localize("ui.common.next") || "Next"}
|
||||
>
|
||||
<ha-svg-icon .path=${this._icon}></ha-svg-icon>
|
||||
</mwc-icon-button>
|
||||
.path=${this._icon}
|
||||
></ha-icon-button>
|
||||
`;
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,9 +1,8 @@
|
||||
import "@material/mwc-icon-button/mwc-icon-button";
|
||||
import { mdiChevronLeft, mdiChevronRight } from "@mdi/js";
|
||||
import { html, LitElement, TemplateResult } from "lit";
|
||||
import { customElement, property, state } from "lit/decorators";
|
||||
import { HomeAssistant } from "../types";
|
||||
import "./ha-svg-icon";
|
||||
import "./ha-icon-button";
|
||||
|
||||
@customElement("ha-icon-button-prev")
|
||||
export class HaIconButtonPrev extends LitElement {
|
||||
@ -29,12 +28,11 @@ export class HaIconButtonPrev extends LitElement {
|
||||
|
||||
protected render(): TemplateResult {
|
||||
return html`
|
||||
<mwc-icon-button
|
||||
<ha-icon-button
|
||||
.disabled=${this.disabled}
|
||||
.label=${this.label || this.hass?.localize("ui.common.back") || "Back"}
|
||||
>
|
||||
<ha-svg-icon .path=${this._icon}></ha-svg-icon>
|
||||
</mwc-icon-button>
|
||||
.path=${this._icon}
|
||||
></ha-icon-button>
|
||||
`;
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,25 +1,35 @@
|
||||
import "@material/mwc-icon-button";
|
||||
import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
|
||||
import { customElement, property } from "lit/decorators";
|
||||
import "./ha-icon";
|
||||
import "./ha-svg-icon";
|
||||
|
||||
@customElement("ha-icon-button")
|
||||
export class HaIconButton extends LitElement {
|
||||
@property({ type: Boolean, reflect: true }) disabled = false;
|
||||
|
||||
@property({ type: String }) icon = "";
|
||||
// SVG icon path (if you need a non SVG icon instead, use the provided slot to pass an <ha-icon> in)
|
||||
@property({ type: String }) path?: string;
|
||||
|
||||
// Label that is used for ARIA support and as tooltip
|
||||
@property({ type: String }) label = "";
|
||||
|
||||
@property({ type: Boolean }) hideTitle = false;
|
||||
|
||||
static shadowRootOptions: ShadowRootInit = {
|
||||
mode: "open",
|
||||
delegatesFocus: true,
|
||||
};
|
||||
|
||||
protected render(): TemplateResult {
|
||||
// Note: `ariaLabel` required despite the `mwc-icon-button` docs saying `label` should be enough
|
||||
return html`
|
||||
<mwc-icon-button .label=${this.label} .disabled=${this.disabled}>
|
||||
<ha-icon .icon=${this.icon}></ha-icon>
|
||||
<mwc-icon-button
|
||||
.ariaLabel=${this.label}
|
||||
.title=${this.hideTitle ? "" : this.label}
|
||||
.disabled=${this.disabled}
|
||||
>
|
||||
${this.path ? html`<ha-svg-icon .path=${this.path}></ha-svg-icon>` : ""}
|
||||
<slot></slot>
|
||||
</mwc-icon-button>
|
||||
`;
|
||||
}
|
||||
|
||||
@ -1,4 +1,3 @@
|
||||
import "@material/mwc-icon-button";
|
||||
import { mdiMenu } from "@mdi/js";
|
||||
import { UnsubscribeFunc } from "home-assistant-js-websocket";
|
||||
import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
|
||||
@ -7,7 +6,7 @@ import { fireEvent } from "../common/dom/fire_event";
|
||||
import { computeDomain } from "../common/entity/compute_domain";
|
||||
import { subscribeNotifications } from "../data/persistent_notification";
|
||||
import { HomeAssistant } from "../types";
|
||||
import "./ha-svg-icon";
|
||||
import "./ha-icon-button";
|
||||
|
||||
@customElement("ha-menu-button")
|
||||
class HaMenuButton extends LitElement {
|
||||
@ -50,12 +49,11 @@ class HaMenuButton extends LitElement {
|
||||
(entityId) => computeDomain(entityId) === "configurator"
|
||||
));
|
||||
return html`
|
||||
<mwc-icon-button
|
||||
aria-label=${this.hass.localize("ui.sidebar.sidebar_toggle")}
|
||||
<ha-icon-button
|
||||
.label=${this.hass.localize("ui.sidebar.sidebar_toggle")}
|
||||
.path=${mdiMenu}
|
||||
@click=${this._toggleMenu}
|
||||
>
|
||||
<ha-svg-icon .path=${mdiMenu}></ha-svg-icon>
|
||||
</mwc-icon-button>
|
||||
></ha-icon-button>
|
||||
${hasNotifications ? html` <div class="dot"></div> ` : ""}
|
||||
`;
|
||||
}
|
||||
|
||||
@ -1,4 +1,3 @@
|
||||
import "@material/mwc-icon-button/mwc-icon-button";
|
||||
import { mdiImagePlus } from "@mdi/js";
|
||||
import "@polymer/paper-input/paper-input-container";
|
||||
import { html, LitElement, TemplateResult } from "lit";
|
||||
@ -13,7 +12,6 @@ import {
|
||||
import { HomeAssistant } from "../types";
|
||||
import "./ha-circular-progress";
|
||||
import "./ha-file-upload";
|
||||
import "./ha-svg-icon";
|
||||
|
||||
@customElement("ha-picture-upload")
|
||||
export class HaPictureUpload extends LitElement {
|
||||
@ -34,6 +32,7 @@ export class HaPictureUpload extends LitElement {
|
||||
public render(): TemplateResult {
|
||||
return html`
|
||||
<ha-file-upload
|
||||
.hass=${this.hass}
|
||||
.icon=${mdiImagePlus}
|
||||
.label=${this.label ||
|
||||
this.hass.localize("ui.components.picture-upload.label")}
|
||||
|
||||
@ -18,6 +18,7 @@ import { Selector } from "../data/selector";
|
||||
import { PolymerChangedEvent } from "../polymer-types";
|
||||
import { HomeAssistant } from "../types";
|
||||
import "./ha-checkbox";
|
||||
import "./ha-icon-button";
|
||||
import "./ha-selector/ha-selector";
|
||||
import "./ha-service-picker";
|
||||
import "./ha-settings-row";
|
||||
@ -204,12 +205,10 @@ export class HaServiceControl extends LitElement {
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
>
|
||||
<mwc-icon-button>
|
||||
<ha-svg-icon
|
||||
path=${mdiHelpCircle}
|
||||
class="help-icon"
|
||||
></ha-svg-icon>
|
||||
</mwc-icon-button>
|
||||
<ha-icon-button
|
||||
.path=${mdiHelpCircle}
|
||||
class="help-icon"
|
||||
></ha-icon-button>
|
||||
</a>`
|
||||
: ""}
|
||||
</div>
|
||||
|
||||
@ -1,5 +1,4 @@
|
||||
import "@material/mwc-button/mwc-button";
|
||||
import "@material/mwc-icon-button";
|
||||
import {
|
||||
mdiBell,
|
||||
mdiCellphoneCog,
|
||||
@ -44,6 +43,7 @@ import { actionHandler } from "../panels/lovelace/common/directives/action-handl
|
||||
import { haStyleScrollbar } from "../resources/styles";
|
||||
import type { HomeAssistant, PanelInfo } from "../types";
|
||||
import "./ha-icon";
|
||||
import "./ha-icon-button";
|
||||
import "./ha-menu-button";
|
||||
import "./ha-svg-icon";
|
||||
import "./user/ha-user-badge";
|
||||
@ -302,16 +302,13 @@ class HaSidebar extends LitElement {
|
||||
>
|
||||
${!this.narrow
|
||||
? html`
|
||||
<mwc-icon-button
|
||||
<ha-icon-button
|
||||
.label=${this.hass.localize("ui.sidebar.sidebar_toggle")}
|
||||
.path=${this.hass.dockedSidebar === "docked"
|
||||
? mdiMenuOpen
|
||||
: mdiMenu}
|
||||
@action=${this._toggleSidebar}
|
||||
>
|
||||
<ha-svg-icon
|
||||
.path=${this.hass.dockedSidebar === "docked"
|
||||
? mdiMenuOpen
|
||||
: mdiMenu}
|
||||
></ha-svg-icon>
|
||||
</mwc-icon-button>
|
||||
></ha-icon-button>
|
||||
`
|
||||
: ""}
|
||||
${this.editMode
|
||||
@ -386,9 +383,11 @@ class HaSidebar extends LitElement {
|
||||
: this.hass.localize(`panel.${panel.title}`) ||
|
||||
panel.title}</span
|
||||
>
|
||||
<mwc-icon-button class="show-panel">
|
||||
<ha-svg-icon .path=${mdiPlus}></ha-svg-icon>
|
||||
</mwc-icon-button>
|
||||
<ha-icon-button
|
||||
.label=${this.hass.localize("ui.sidebar.show_panel")}
|
||||
.path=${mdiPlus}
|
||||
class="show-panel"
|
||||
></ha-icon-button>
|
||||
</paper-icon-item>`;
|
||||
})}
|
||||
${this._renderSpacer()}`
|
||||
@ -723,13 +722,13 @@ class HaSidebar extends LitElement {
|
||||
<span class="item-text">${title}</span>
|
||||
</paper-icon-item>
|
||||
${this.editMode
|
||||
? html`<mwc-icon-button
|
||||
? html`<ha-icon-button
|
||||
.label=${this.hass.localize("ui.sidebar.hide_panel")}
|
||||
.path=${mdiClose}
|
||||
class="hide-panel"
|
||||
.panel=${urlPath}
|
||||
@click=${this._hidePanel}
|
||||
>
|
||||
<ha-svg-icon .path=${mdiClose}></ha-svg-icon>
|
||||
</mwc-icon-button>`
|
||||
></ha-icon-button>`
|
||||
: ""}
|
||||
</a>
|
||||
`;
|
||||
@ -786,7 +785,7 @@ class HaSidebar extends LitElement {
|
||||
:host([rtl][expanded]) .menu {
|
||||
width: calc(256px + env(safe-area-inset-right));
|
||||
}
|
||||
.menu mwc-icon-button {
|
||||
.menu ha-icon-button {
|
||||
color: var(--sidebar-icon-color);
|
||||
}
|
||||
.title {
|
||||
@ -1021,7 +1020,7 @@ class HaSidebar extends LitElement {
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
:host([rtl]) .menu mwc-icon-button {
|
||||
:host([rtl]) .menu ha-icon-button {
|
||||
-webkit-transform: scaleX(-1);
|
||||
transform: scaleX(-1);
|
||||
}
|
||||
|
||||
@ -1,7 +1,6 @@
|
||||
// @ts-ignore
|
||||
import chipStyles from "@material/chips/dist/mdc.chips.min.css";
|
||||
import "@material/mwc-button/mwc-button";
|
||||
import "@material/mwc-icon-button/mwc-icon-button";
|
||||
import {
|
||||
mdiClose,
|
||||
mdiDevices,
|
||||
@ -15,7 +14,7 @@ import {
|
||||
UnsubscribeFunc,
|
||||
} from "home-assistant-js-websocket";
|
||||
import { css, CSSResultGroup, html, LitElement, unsafeCSS } from "lit";
|
||||
import { customElement, property, state, query } from "lit/decorators";
|
||||
import { customElement, property, query, state } from "lit/decorators";
|
||||
import { classMap } from "lit/directives/class-map";
|
||||
import { fireEvent } from "../common/dom/fire_event";
|
||||
import { ensureArray } from "../common/ensure-array";
|
||||
@ -43,6 +42,7 @@ import "./entity/ha-entity-picker";
|
||||
import type { HaEntityPickerEntityFilterFunc } from "./entity/ha-entity-picker";
|
||||
import "./ha-area-picker";
|
||||
import "./ha-icon";
|
||||
import "./ha-icon-button";
|
||||
import "./ha-svg-icon";
|
||||
|
||||
@customElement("ha-target-picker")
|
||||
@ -259,17 +259,19 @@ export class HaTargetPicker extends SubscribeMixin(LitElement) {
|
||||
${type === "entity_id"
|
||||
? ""
|
||||
: html` <span role="gridcell">
|
||||
<mwc-icon-button
|
||||
<ha-icon-button
|
||||
class="expand-btn mdc-chip__icon mdc-chip__icon--trailing"
|
||||
tabindex="-1"
|
||||
role="button"
|
||||
.label=${"Expand"}
|
||||
.label=${this.hass.localize(
|
||||
"ui.components.target-picker.expand"
|
||||
)}
|
||||
.path=${mdiUnfoldMoreVertical}
|
||||
hideTooltip
|
||||
.id=${id}
|
||||
.type=${type}
|
||||
@click=${this._handleExpand}
|
||||
>
|
||||
<ha-svg-icon .path=${mdiUnfoldMoreVertical}></ha-svg-icon>
|
||||
</mwc-icon-button>
|
||||
></ha-icon-button>
|
||||
<paper-tooltip class="expand" animation-delay="0"
|
||||
>${this.hass.localize(
|
||||
`ui.components.target-picker.expand_${type}`
|
||||
@ -277,17 +279,17 @@ export class HaTargetPicker extends SubscribeMixin(LitElement) {
|
||||
>
|
||||
</span>`}
|
||||
<span role="gridcell">
|
||||
<mwc-icon-button
|
||||
<ha-icon-button
|
||||
class="mdc-chip__icon mdc-chip__icon--trailing"
|
||||
tabindex="-1"
|
||||
role="button"
|
||||
.label=${"Remove"}
|
||||
.label=${this.hass.localize("ui.components.target-picker.expand")}
|
||||
.path=${mdiClose}
|
||||
hideTooltip
|
||||
.id=${id}
|
||||
.type=${type}
|
||||
@click=${this._handleRemove}
|
||||
>
|
||||
<ha-svg-icon .path=${mdiClose}></ha-svg-icon>
|
||||
</mwc-icon-button>
|
||||
></ha-icon-button>
|
||||
<paper-tooltip animation-delay="0"
|
||||
>${this.hass.localize(
|
||||
`ui.components.target-picker.remove_${type}`
|
||||
@ -543,13 +545,13 @@ export class HaTargetPicker extends SubscribeMixin(LitElement) {
|
||||
.mdc-chip:not(.add) {
|
||||
cursor: default;
|
||||
}
|
||||
.mdc-chip mwc-icon-button {
|
||||
.mdc-chip ha-icon-button {
|
||||
--mdc-icon-button-size: 24px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
outline: none;
|
||||
}
|
||||
.mdc-chip mwc-icon-button ha-svg-icon {
|
||||
.mdc-chip ha-icon-button ha-svg-icon {
|
||||
border-radius: 50%;
|
||||
background: var(--secondary-text-color);
|
||||
}
|
||||
|
||||
@ -3,6 +3,7 @@ import { html } from "@polymer/polymer/lib/utils/html-tag";
|
||||
/* eslint-plugin-disable lit */
|
||||
import { PolymerElement } from "@polymer/polymer/polymer-element";
|
||||
import { EventsMixin } from "../mixins/events-mixin";
|
||||
import "./ha-icon";
|
||||
import "./ha-icon-button";
|
||||
|
||||
/*
|
||||
@ -40,16 +41,14 @@ class HaWaterHeaterControl extends EventsMixin(PolymerElement) {
|
||||
<div id="target_temperature">[[value]] [[units]]</div>
|
||||
<div class="control-buttons">
|
||||
<div>
|
||||
<ha-icon-button
|
||||
icon="hass:chevron-up"
|
||||
on-click="incrementValue"
|
||||
></ha-icon-button>
|
||||
<ha-icon-button on-click="incrementValue">
|
||||
<ha-icon icon="hass:chevron-up"></ha-icon>
|
||||
</ha-icon-button>
|
||||
</div>
|
||||
<div>
|
||||
<ha-icon-button
|
||||
icon="hass:chevron-down"
|
||||
on-click="decrementValue"
|
||||
></ha-icon-button>
|
||||
<ha-icon-button on-click="decrementValue">
|
||||
<ha-icon icon="hass:chevron-down"></ha-icon>
|
||||
</ha-icon-button>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
@ -15,10 +15,10 @@ import {
|
||||
} from "lit";
|
||||
import {
|
||||
customElement,
|
||||
property,
|
||||
state,
|
||||
query,
|
||||
eventOptions,
|
||||
property,
|
||||
query,
|
||||
state,
|
||||
} from "lit/decorators";
|
||||
import { classMap } from "lit/directives/class-map";
|
||||
import { ifDefined } from "lit/directives/if-defined";
|
||||
@ -45,6 +45,7 @@ import "../ha-button-menu";
|
||||
import "../ha-card";
|
||||
import "../ha-circular-progress";
|
||||
import "../ha-fab";
|
||||
import "../ha-icon-button";
|
||||
import "../ha-svg-icon";
|
||||
|
||||
declare global {
|
||||
@ -225,14 +226,13 @@ export class HaMediaPlayerBrowse extends LitElement {
|
||||
</div>
|
||||
${this.dialog
|
||||
? html`
|
||||
<mwc-icon-button
|
||||
aria-label=${this.hass.localize("ui.dialogs.generic.close")}
|
||||
<ha-icon-button
|
||||
.label=${this.hass.localize("ui.dialogs.generic.close")}
|
||||
.path=${mdiClose}
|
||||
@click=${this._closeDialogAction}
|
||||
class="header_button"
|
||||
dir=${computeRTLDirection(this.hass)}
|
||||
>
|
||||
<ha-svg-icon .path=${mdiClose}></ha-svg-icon>
|
||||
</mwc-icon-button>
|
||||
></ha-icon-button>
|
||||
`
|
||||
: ""}
|
||||
</div>
|
||||
@ -281,7 +281,7 @@ export class HaMediaPlayerBrowse extends LitElement {
|
||||
</ha-card>
|
||||
${child.can_play
|
||||
? html`
|
||||
<mwc-icon-button
|
||||
<ha-icon-button
|
||||
class="play ${classMap({
|
||||
can_expand: child.can_expand,
|
||||
})}"
|
||||
@ -289,14 +289,11 @@ export class HaMediaPlayerBrowse extends LitElement {
|
||||
.label=${this.hass.localize(
|
||||
`ui.components.media-browser.${this.action}-media`
|
||||
)}
|
||||
.path=${this.action === "play"
|
||||
? mdiPlay
|
||||
: mdiPlus}
|
||||
@click=${this._actionClicked}
|
||||
>
|
||||
<ha-svg-icon
|
||||
.path=${this.action === "play"
|
||||
? mdiPlay
|
||||
: mdiPlus}
|
||||
></ha-svg-icon>
|
||||
</mwc-icon-button>
|
||||
></ha-icon-button>
|
||||
`
|
||||
: ""}
|
||||
</div>
|
||||
@ -339,7 +336,7 @@ export class HaMediaPlayerBrowse extends LitElement {
|
||||
)}
|
||||
slot="graphic"
|
||||
>
|
||||
<mwc-icon-button
|
||||
<ha-icon-button
|
||||
class="play ${classMap({
|
||||
show:
|
||||
!mediaClass.show_list_images ||
|
||||
@ -349,14 +346,9 @@ export class HaMediaPlayerBrowse extends LitElement {
|
||||
.label=${this.hass.localize(
|
||||
`ui.components.media-browser.${this.action}-media`
|
||||
)}
|
||||
.path=${this.action === "play" ? mdiPlay : mdiPlus}
|
||||
@click=${this._actionClicked}
|
||||
>
|
||||
<ha-svg-icon
|
||||
.path=${this.action === "play"
|
||||
? mdiPlay
|
||||
: mdiPlus}
|
||||
></ha-svg-icon>
|
||||
</mwc-icon-button>
|
||||
></ha-icon-button>
|
||||
</div>
|
||||
<span class="title">${child.title}</span>
|
||||
</mwc-list-item>
|
||||
@ -952,7 +944,7 @@ export class HaMediaPlayerBrowse extends LitElement {
|
||||
-webkit-line-clamp: 1;
|
||||
}
|
||||
|
||||
:host(:not([narrow])[scroll]) .header:not(.no-img) mwc-icon-button {
|
||||
:host(:not([narrow])[scroll]) .header:not(.no-img) ha-icon-button {
|
||||
align-self: center;
|
||||
}
|
||||
|
||||
|
||||
@ -1,11 +1,10 @@
|
||||
import "@material/mwc-icon-button/mwc-icon-button";
|
||||
import {
|
||||
mdiAbTesting,
|
||||
mdiArrowUp,
|
||||
mdiAsterisk,
|
||||
mdiCallSplit,
|
||||
mdiCheckboxBlankOutline,
|
||||
mdiCheckboxOutline,
|
||||
mdiCheckboxMarkedOutline,
|
||||
mdiChevronDown,
|
||||
mdiChevronRight,
|
||||
mdiChevronUp,
|
||||
@ -39,11 +38,11 @@ import {
|
||||
ConditionTraceStep,
|
||||
TraceExtended,
|
||||
} from "../../data/trace";
|
||||
import "../ha-svg-icon";
|
||||
import "../ha-icon-button";
|
||||
import "./hat-graph-branch";
|
||||
import { BRANCH_HEIGHT, NODE_SIZE, SPACING } from "./hat-graph-const";
|
||||
import "./hat-graph-node";
|
||||
import "./hat-graph-spacer";
|
||||
import "./hat-graph-branch";
|
||||
import { NODE_SIZE, SPACING, BRANCH_HEIGHT } from "./hat-graph-const";
|
||||
|
||||
export interface NodeInfo {
|
||||
path: string;
|
||||
@ -167,7 +166,7 @@ export class HatScriptGraph extends LitElement {
|
||||
<div class="graph-container" ?track=${track_this}>
|
||||
<hat-graph-node
|
||||
.iconPath=${!trace || track_this
|
||||
? mdiCheckboxOutline
|
||||
? mdiCheckboxMarkedOutline
|
||||
: mdiCheckboxBlankOutline}
|
||||
@focus=${this.selectNode(config, branch_path)}
|
||||
?track=${track_this}
|
||||
@ -438,19 +437,17 @@ export class HatScriptGraph extends LitElement {
|
||||
: ""}
|
||||
</div>
|
||||
<div class="actions">
|
||||
<mwc-icon-button
|
||||
<ha-icon-button
|
||||
.disabled=${paths.length === 0 || paths[0] === this.selected}
|
||||
@click=${this._previousTrackedNode}
|
||||
>
|
||||
<ha-svg-icon .path=${mdiChevronUp}></ha-svg-icon>
|
||||
</mwc-icon-button>
|
||||
<mwc-icon-button
|
||||
.path=${mdiChevronUp}
|
||||
></ha-icon-button>
|
||||
<ha-icon-button
|
||||
.disabled=${paths.length === 0 ||
|
||||
paths[paths.length - 1] === this.selected}
|
||||
@click=${this._nextTrackedNode}
|
||||
>
|
||||
<ha-svg-icon .path=${mdiChevronDown}></ha-svg-icon>
|
||||
</mwc-icon-button>
|
||||
.path=${mdiChevronDown}
|
||||
></ha-icon-button>
|
||||
</div>
|
||||
`;
|
||||
} catch (err: any) {
|
||||
|
||||
@ -7,6 +7,7 @@ import { fireEvent } from "../../common/dom/fire_event";
|
||||
import { fetchUsers, User } from "../../data/user";
|
||||
import type { PolymerChangedEvent } from "../../polymer-types";
|
||||
import type { HomeAssistant } from "../../types";
|
||||
import "../ha-icon-button";
|
||||
import "./ha-user-picker";
|
||||
|
||||
@customElement("ha-users-picker")
|
||||
@ -46,7 +47,7 @@ class HaUsersPickerLight extends LitElement {
|
||||
<div>
|
||||
<ha-user-picker
|
||||
.label=${this.pickedUserLabel}
|
||||
.noUserLabel=${this.hass?.localize(
|
||||
.noUserLabel=${this.hass!.localize(
|
||||
"ui.components.user-picker.remove_user"
|
||||
)}
|
||||
.index=${idx}
|
||||
@ -59,16 +60,23 @@ class HaUsersPickerLight extends LitElement {
|
||||
)}
|
||||
@value-changed=${this._userChanged}
|
||||
></ha-user-picker>
|
||||
<mwc-icon-button .userId=${user_id} @click=${this._removeUser}>
|
||||
<ha-svg-icon .path=${mdiClose}></ha-svg-icon>
|
||||
</mwc-icon-button>
|
||||
<ha-icon-button
|
||||
.userId=${user_id}
|
||||
.label=${this.hass!.localize(
|
||||
"ui.components.user-picker.remove_user"
|
||||
)}
|
||||
.path=${mdiClose}
|
||||
@click=${this._removeUser}
|
||||
>
|
||||
></ha-icon-button
|
||||
>
|
||||
</div>
|
||||
`
|
||||
)
|
||||
)}
|
||||
<ha-user-picker
|
||||
.noUserLabel=${this.pickUserLabel ||
|
||||
this.hass?.localize("ui.components.user-picker.add_user")}
|
||||
this.hass!.localize("ui.components.user-picker.add_user")}
|
||||
.hass=${this.hass}
|
||||
.users=${notSelectedUsers}
|
||||
.disabled=${!notSelectedUsers?.length}
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
import "@material/mwc-button";
|
||||
import { mdiClose } from "@mdi/js";
|
||||
import "@polymer/paper-dialog-scrollable/paper-dialog-scrollable";
|
||||
import type { UnsubscribeFunc } from "home-assistant-js-websocket";
|
||||
import {
|
||||
@ -232,10 +233,10 @@ class DataEntryFlowDialog extends LitElement {
|
||||
""
|
||||
: html`
|
||||
<ha-icon-button
|
||||
aria-label=${this.hass.localize(
|
||||
.label=${this.hass.localize(
|
||||
"ui.panel.config.integrations.config_flow.dismiss"
|
||||
)}
|
||||
icon="hass:close"
|
||||
.path=${mdiClose}
|
||||
dialogAction="close"
|
||||
?rtl=${computeRTL(this.hass)}
|
||||
></ha-icon-button>
|
||||
|
||||
@ -75,6 +75,7 @@ class StepFlowPickHandler extends LitElement {
|
||||
return html`
|
||||
<h2>${this.hass.localize("ui.panel.config.integrations.new")}</h2>
|
||||
<search-input
|
||||
.hass=${this.hass}
|
||||
autofocus
|
||||
.filter=${this._filter}
|
||||
@value-changed=${this._filterChanged}
|
||||
|
||||
@ -7,6 +7,7 @@ import { PolymerElement } from "@polymer/polymer/polymer-element";
|
||||
import { attributeClassNames } from "../../../common/entity/attribute_class_names";
|
||||
import { supportsFeature } from "../../../common/entity/supports-feature";
|
||||
import "../../../components/ha-attributes";
|
||||
import "../../../components/ha-icon";
|
||||
import "../../../components/ha-icon-button";
|
||||
import "../../../components/ha-labeled-slider";
|
||||
import "../../../components/ha-paper-dropdown-menu";
|
||||
@ -97,17 +98,19 @@ class MoreInfoFan extends LocalizeMixin(EventsMixin(PolymerElement)) {
|
||||
<div class="direction">
|
||||
<div>[[localize('ui.card.fan.direction')]]</div>
|
||||
<ha-icon-button
|
||||
icon="hass:rotate-left"
|
||||
on-click="onDirectionReverse"
|
||||
title="[[localize('ui.card.fan.reverse')]]"
|
||||
disabled="[[computeIsRotatingReverse(stateObj)]]"
|
||||
></ha-icon-button>
|
||||
>
|
||||
<ha-icon icon="hass:rotate-left"></ha-icon>
|
||||
</ha-icon-button>
|
||||
<ha-icon-button
|
||||
icon="hass:rotate-right"
|
||||
on-click="onDirectionForward"
|
||||
title="[[localize('ui.card.fan.forward')]]"
|
||||
disabled="[[computeIsRotatingForward(stateObj)]]"
|
||||
></ha-icon-button>
|
||||
>
|
||||
<ha-icon icon="hass:rotate-right"></ha-icon>
|
||||
</ha-icon-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1,3 +1,4 @@
|
||||
import { mdiPalette } from "@mdi/js";
|
||||
import "@polymer/paper-item/paper-item";
|
||||
import "@polymer/paper-listbox/paper-listbox";
|
||||
import {
|
||||
@ -142,7 +143,7 @@ class MoreInfoLight extends LitElement {
|
||||
>
|
||||
</ha-color-picker>
|
||||
<ha-icon-button
|
||||
icon="hass:palette"
|
||||
.path=${mdiPalette}
|
||||
@click=${this._segmentClick}
|
||||
class="segmentationButton"
|
||||
></ha-icon-button>
|
||||
|
||||
@ -1,6 +1,12 @@
|
||||
import "@material/mwc-button/mwc-button";
|
||||
import "@material/mwc-icon-button";
|
||||
import { mdiPlayBoxMultiple } from "@mdi/js";
|
||||
import {
|
||||
mdiPlayBoxMultiple,
|
||||
mdiSend,
|
||||
mdiVolumeHigh,
|
||||
mdiVolumeMinus,
|
||||
mdiVolumeOff,
|
||||
mdiVolumePlus,
|
||||
} from "@mdi/js";
|
||||
import "@polymer/paper-input/paper-input";
|
||||
import "@polymer/paper-item/paper-item";
|
||||
import "@polymer/paper-listbox/paper-listbox";
|
||||
@ -13,7 +19,6 @@ import "../../../components/ha-icon";
|
||||
import "../../../components/ha-icon-button";
|
||||
import "../../../components/ha-paper-dropdown-menu";
|
||||
import "../../../components/ha-slider";
|
||||
import "../../../components/ha-svg-icon";
|
||||
import { showMediaBrowserDialog } from "../../../components/media-player/show-media-browser-dialog";
|
||||
import { UNAVAILABLE, UNAVAILABLE_STATES, UNKNOWN } from "../../../data/entity";
|
||||
import {
|
||||
@ -56,21 +61,22 @@ class MoreInfoMediaPlayer extends LitElement {
|
||||
(control) => html`
|
||||
<ha-icon-button
|
||||
action=${control.action}
|
||||
.icon=${control.icon}
|
||||
@click=${this._handleClick}
|
||||
></ha-icon-button>
|
||||
>
|
||||
<ha-icon .icon=${control.icon}></ha-icon>
|
||||
</ha-icon-button>
|
||||
`
|
||||
)}
|
||||
</div>
|
||||
${supportsFeature(stateObj, SUPPORT_BROWSE_MEDIA)
|
||||
? html`
|
||||
<mwc-icon-button
|
||||
.title=${this.hass.localize(
|
||||
<ha-icon-button
|
||||
.label=${this.hass.localize(
|
||||
"ui.card.media_player.browse_media"
|
||||
)}
|
||||
.path=${mdiPlayBoxMultiple}
|
||||
@click=${this._showBrowseMedia}
|
||||
><ha-svg-icon .path=${mdiPlayBoxMultiple}></ha-svg-icon
|
||||
></mwc-icon-button>
|
||||
></ha-icon-button>
|
||||
`
|
||||
: ""}
|
||||
</div>
|
||||
@ -83,9 +89,9 @@ class MoreInfoMediaPlayer extends LitElement {
|
||||
${supportsFeature(stateObj, SUPPORT_VOLUME_MUTE)
|
||||
? html`
|
||||
<ha-icon-button
|
||||
.icon=${stateObj.attributes.is_volume_muted
|
||||
? "hass:volume-off"
|
||||
: "hass:volume-high"}
|
||||
.path=${stateObj.attributes.is_volume_muted
|
||||
? mdiVolumeOff
|
||||
: mdiVolumeHigh}
|
||||
@click=${this._toggleMute}
|
||||
></ha-icon-button>
|
||||
`
|
||||
@ -94,12 +100,12 @@ class MoreInfoMediaPlayer extends LitElement {
|
||||
? html`
|
||||
<ha-icon-button
|
||||
action="volume_down"
|
||||
icon="hass:volume-minus"
|
||||
.path=${mdiVolumeMinus}
|
||||
@click=${this._handleClick}
|
||||
></ha-icon-button>
|
||||
<ha-icon-button
|
||||
action="volume_up"
|
||||
icon="hass:volume-plus"
|
||||
.path=${mdiVolumePlus}
|
||||
@click=${this._handleClick}
|
||||
></ha-icon-button>
|
||||
`
|
||||
@ -184,7 +190,7 @@ class MoreInfoMediaPlayer extends LitElement {
|
||||
@keydown=${this._ttsCheckForEnter}
|
||||
></paper-input>
|
||||
<ha-icon-button
|
||||
icon="hass:send"
|
||||
.path=${mdiSend}
|
||||
.disabled=${UNAVAILABLE_STATES.includes(stateObj.state)}
|
||||
@click=${this._sendTTS}
|
||||
></ha-icon-button>
|
||||
|
||||
@ -1,3 +1,12 @@
|
||||
import {
|
||||
mdiHomeMapMarker,
|
||||
mdiMapMarker,
|
||||
mdiPause,
|
||||
mdiPlay,
|
||||
mdiPlayPause,
|
||||
mdiStop,
|
||||
mdiTargetVariant,
|
||||
} from "@mdi/js";
|
||||
import "@polymer/paper-item/paper-item";
|
||||
import "@polymer/paper-listbox/paper-listbox";
|
||||
import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
|
||||
@ -32,13 +41,13 @@ interface VacuumCommand {
|
||||
const VACUUM_COMMANDS: VacuumCommand[] = [
|
||||
{
|
||||
translationKey: "start",
|
||||
icon: "hass:play",
|
||||
icon: mdiPlay,
|
||||
serviceName: "start",
|
||||
isVisible: (stateObj) => supportsFeature(stateObj, VACUUM_SUPPORT_START),
|
||||
},
|
||||
{
|
||||
translationKey: "pause",
|
||||
icon: "hass:pause",
|
||||
icon: mdiPause,
|
||||
serviceName: "pause",
|
||||
isVisible: (stateObj) =>
|
||||
// We need also to check if Start is supported because if not we show play-pause
|
||||
@ -47,7 +56,7 @@ const VACUUM_COMMANDS: VacuumCommand[] = [
|
||||
},
|
||||
{
|
||||
translationKey: "start_pause",
|
||||
icon: "hass:play-pause",
|
||||
icon: mdiPlayPause,
|
||||
serviceName: "start_pause",
|
||||
isVisible: (stateObj) =>
|
||||
// If start is supported, we don't show this button
|
||||
@ -56,26 +65,26 @@ const VACUUM_COMMANDS: VacuumCommand[] = [
|
||||
},
|
||||
{
|
||||
translationKey: "stop",
|
||||
icon: "hass:stop",
|
||||
icon: mdiStop,
|
||||
serviceName: "stop",
|
||||
isVisible: (stateObj) => supportsFeature(stateObj, VACUUM_SUPPORT_STOP),
|
||||
},
|
||||
{
|
||||
translationKey: "clean_spot",
|
||||
icon: "hass:target-variant",
|
||||
icon: mdiTargetVariant,
|
||||
serviceName: "clean_spot",
|
||||
isVisible: (stateObj) =>
|
||||
supportsFeature(stateObj, VACUUM_SUPPORT_CLEAN_SPOT),
|
||||
},
|
||||
{
|
||||
translationKey: "locate",
|
||||
icon: "hass:map-marker",
|
||||
icon: mdiMapMarker,
|
||||
serviceName: "locate",
|
||||
isVisible: (stateObj) => supportsFeature(stateObj, VACUUM_SUPPORT_LOCATE),
|
||||
},
|
||||
{
|
||||
translationKey: "return_home",
|
||||
icon: "hass:home-map-marker",
|
||||
icon: mdiHomeMapMarker,
|
||||
serviceName: "return_to_base",
|
||||
isVisible: (stateObj) =>
|
||||
supportsFeature(stateObj, VACUUM_SUPPORT_RETURN_HOME),
|
||||
@ -144,10 +153,10 @@ class MoreInfoVacuum extends LitElement {
|
||||
(item) => html`
|
||||
<div>
|
||||
<ha-icon-button
|
||||
.icon=${item.icon}
|
||||
.path=${item.icon}
|
||||
.entry=${item}
|
||||
@click=${this.callService}
|
||||
.title=${this.hass!.localize(
|
||||
.label=${this.hass!.localize(
|
||||
`ui.dialogs.more_info_control.vacuum.${item.translationKey}`
|
||||
)}
|
||||
.disabled=${stateObj.state === UNAVAILABLE}
|
||||
|
||||
@ -1,5 +1,4 @@
|
||||
import "@material/mwc-button";
|
||||
import "@material/mwc-icon-button";
|
||||
import "@material/mwc-tab";
|
||||
import "@material/mwc-tab-bar";
|
||||
import { mdiClose, mdiCog, mdiPencil } from "@mdi/js";
|
||||
@ -17,7 +16,7 @@ import { computeStateName } from "../../common/entity/compute_state_name";
|
||||
import { navigate } from "../../common/navigate";
|
||||
import "../../components/ha-dialog";
|
||||
import "../../components/ha-header-bar";
|
||||
import "../../components/ha-svg-icon";
|
||||
import "../../components/ha-icon-button";
|
||||
import { removeEntityRegistryEntry } from "../../data/entity_registry";
|
||||
import { CONTINUOUS_DOMAINS } from "../../data/logbook";
|
||||
import { showEntityEditorDialog } from "../../panels/config/entities/show-dialog-entity-editor";
|
||||
@ -112,15 +111,14 @@ export class MoreInfoDialog extends LitElement {
|
||||
>
|
||||
<div slot="heading" class="heading">
|
||||
<ha-header-bar>
|
||||
<mwc-icon-button
|
||||
<ha-icon-button
|
||||
slot="navigationIcon"
|
||||
dialogAction="cancel"
|
||||
.label=${this.hass.localize(
|
||||
"ui.dialogs.more_info_control.dismiss"
|
||||
)}
|
||||
>
|
||||
<ha-svg-icon .path=${mdiClose}></ha-svg-icon>
|
||||
</mwc-icon-button>
|
||||
.path=${mdiClose}
|
||||
></ha-icon-button>
|
||||
<div
|
||||
slot="title"
|
||||
class="main-title"
|
||||
@ -131,28 +129,26 @@ export class MoreInfoDialog extends LitElement {
|
||||
</div>
|
||||
${this.hass.user!.is_admin
|
||||
? html`
|
||||
<mwc-icon-button
|
||||
<ha-icon-button
|
||||
slot="actionItems"
|
||||
.label=${this.hass.localize(
|
||||
"ui.dialogs.more_info_control.settings"
|
||||
)}
|
||||
.path=${mdiCog}
|
||||
@click=${this._gotoSettings}
|
||||
>
|
||||
<ha-svg-icon .path=${mdiCog}></ha-svg-icon>
|
||||
</mwc-icon-button>
|
||||
></ha-icon-button>
|
||||
`
|
||||
: ""}
|
||||
${this.shouldShowEditIcon(domain, stateObj)
|
||||
? html`
|
||||
<mwc-icon-button
|
||||
<ha-icon-button
|
||||
slot="actionItems"
|
||||
.label=${this.hass.localize(
|
||||
"ui.dialogs.more_info_control.edit"
|
||||
)}
|
||||
.path=${mdiPencil}
|
||||
@click=${this._gotoEdit}
|
||||
>
|
||||
<ha-svg-icon .path=${mdiPencil}></ha-svg-icon>
|
||||
</mwc-icon-button>
|
||||
></ha-icon-button>
|
||||
`
|
||||
: ""}
|
||||
</ha-header-bar>
|
||||
|
||||
@ -64,7 +64,6 @@ export class HuiNotificationDrawer extends EventsMixin(
|
||||
<app-toolbar>
|
||||
<div main-title>[[localize('ui.notification_drawer.title')]]</div>
|
||||
<ha-icon-button-prev hass="[[hass]]" on-click="_closeDrawer"
|
||||
title="[[localize('ui.notification_drawer.close')]]"
|
||||
label="[[localize('ui.notification_drawer.close')]]">
|
||||
</ha-icon-button-prev>
|
||||
</app-toolbar>
|
||||
|
||||
@ -35,6 +35,7 @@ import "../../components/ha-chip";
|
||||
import "../../components/ha-circular-progress";
|
||||
import "../../components/ha-dialog";
|
||||
import "../../components/ha-header-bar";
|
||||
import "../../components/ha-icon-button";
|
||||
import { domainToName } from "../../data/integration";
|
||||
import { getPanelNameTranslationKey } from "../../data/panel";
|
||||
import { PageNavigation } from "../../layouts/hass-tabs-subpage";
|
||||
@ -160,13 +161,12 @@ export class QuickBar extends LitElement {
|
||||
></ha-svg-icon>`}
|
||||
${this._search &&
|
||||
html`
|
||||
<mwc-icon-button
|
||||
<ha-icon-button
|
||||
slot="suffix"
|
||||
@click=${this._clearSearch}
|
||||
title="Clear"
|
||||
>
|
||||
<ha-svg-icon .path=${mdiClose}></ha-svg-icon>
|
||||
</mwc-icon-button>
|
||||
.label=${this.hass!.localize("ui.common.clear")}
|
||||
.path=${mdiClose}
|
||||
></ha-icon-button>
|
||||
`}
|
||||
</paper-input>
|
||||
${!items
|
||||
@ -613,7 +613,7 @@ export class QuickBar extends LitElement {
|
||||
color: var(--primary-text-color);
|
||||
}
|
||||
|
||||
paper-input mwc-icon-button {
|
||||
paper-input ha-icon-button {
|
||||
--mdc-icon-button-size: 24px;
|
||||
color: var(--primary-text-color);
|
||||
}
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
/* eslint-disable lit/prefer-static-styles */
|
||||
import { mdiMicrophone } from "@mdi/js";
|
||||
import "@polymer/paper-dialog-scrollable/paper-dialog-scrollable";
|
||||
import type { PaperDialogScrollableElement } from "@polymer/paper-dialog-scrollable/paper-dialog-scrollable";
|
||||
import "@polymer/paper-input/paper-input";
|
||||
@ -179,7 +180,7 @@ export class HaVoiceCommandDialog extends LitElement {
|
||||
`
|
||||
: ""}
|
||||
<ha-icon-button
|
||||
icon="hass:microphone"
|
||||
.path=${mdiMicrophone}
|
||||
@click=${this._toggleListening}
|
||||
>
|
||||
</ha-icon-button>
|
||||
|
||||
@ -157,6 +157,7 @@ export class HaTabsSubpageDataTable extends LitElement {
|
||||
: hiddenLabel;
|
||||
|
||||
const headerToolbar = html`<search-input
|
||||
.hass=${this.hass}
|
||||
.filter=${this.filter}
|
||||
no-label-float
|
||||
no-underline
|
||||
@ -205,6 +206,7 @@ export class HaTabsSubpageDataTable extends LitElement {
|
||||
`
|
||||
: ""}
|
||||
<ha-data-table
|
||||
.hass=${this.hass}
|
||||
.columns=${this.columns}
|
||||
.data=${this.data}
|
||||
.filter=${this.filter}
|
||||
|
||||
@ -11,7 +11,14 @@ import listPlugin from "@fullcalendar/list";
|
||||
// @ts-ignore
|
||||
import listStyle from "@fullcalendar/list/main.css";
|
||||
import "@material/mwc-button";
|
||||
import { mdiViewAgenda, mdiViewDay, mdiViewModule, mdiViewWeek } from "@mdi/js";
|
||||
import {
|
||||
mdiChevronLeft,
|
||||
mdiChevronRight,
|
||||
mdiViewAgenda,
|
||||
mdiViewDay,
|
||||
mdiViewModule,
|
||||
mdiViewWeek,
|
||||
} from "@mdi/js";
|
||||
import {
|
||||
css,
|
||||
CSSResultGroup,
|
||||
@ -118,15 +125,15 @@ export class HAFullCalendar extends LitElement {
|
||||
)}</mwc-button
|
||||
>
|
||||
<ha-icon-button
|
||||
label=${this.hass.localize("ui.common.previous")}
|
||||
icon="hass:chevron-left"
|
||||
.label=${this.hass.localize("ui.common.previous")}
|
||||
.path=${mdiChevronLeft}
|
||||
class="prev"
|
||||
@click=${this._handlePrev}
|
||||
>
|
||||
</ha-icon-button>
|
||||
<ha-icon-button
|
||||
label=${this.hass.localize("ui.common.next")}
|
||||
icon="hass:chevron-right"
|
||||
.label=${this.hass.localize("ui.common.next")}
|
||||
.path=${mdiChevronRight}
|
||||
class="next"
|
||||
@click=${this._handleNext}
|
||||
>
|
||||
@ -144,15 +151,15 @@ export class HAFullCalendar extends LitElement {
|
||||
<h1>${this.calendar.view.title}</h1>
|
||||
<div>
|
||||
<ha-icon-button
|
||||
label=${this.hass.localize("ui.common.previous")}
|
||||
icon="hass:chevron-left"
|
||||
.label=${this.hass.localize("ui.common.previous")}
|
||||
.path=${mdiChevronLeft}
|
||||
class="prev"
|
||||
@click=${this._handlePrev}
|
||||
>
|
||||
</ha-icon-button>
|
||||
<ha-icon-button
|
||||
label=${this.hass.localize("ui.common.next")}
|
||||
icon="hass:chevron-right"
|
||||
.label=${this.hass.localize("ui.common.next")}
|
||||
.path=${mdiChevronRight}
|
||||
class="next"
|
||||
@click=${this._handleNext}
|
||||
>
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
import "@material/mwc-checkbox";
|
||||
import "@material/mwc-formfield";
|
||||
import { mdiRefresh } from "@mdi/js";
|
||||
import "@polymer/app-layout/app-header/app-header";
|
||||
import "@polymer/app-layout/app-toolbar/app-toolbar";
|
||||
import {
|
||||
@ -15,6 +16,7 @@ import { styleMap } from "lit/directives/style-map";
|
||||
import { LocalStorage } from "../../common/decorators/local-storage";
|
||||
import { HASSDomEvent } from "../../common/dom/fire_event";
|
||||
import "../../components/ha-card";
|
||||
import "../../components/ha-icon-button";
|
||||
import "../../components/ha-menu-button";
|
||||
import {
|
||||
Calendar,
|
||||
@ -66,7 +68,8 @@ class PanelCalendar extends LitElement {
|
||||
></ha-menu-button>
|
||||
<div main-title>${this.hass.localize("panel.calendar")}</div>
|
||||
<ha-icon-button
|
||||
icon="hass:refresh"
|
||||
.path=${mdiRefresh}
|
||||
.label=${this.hass.localize("ui.common.refresh")}
|
||||
@click=${this._handleRefresh}
|
||||
></ha-icon-button>
|
||||
</app-toolbar>
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
import "@material/mwc-button";
|
||||
import { mdiCog } from "@mdi/js";
|
||||
import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
|
||||
import { customElement, property, state } from "lit/decorators";
|
||||
import { ifDefined } from "lit/directives/if-defined";
|
||||
@ -6,6 +7,7 @@ import memoizeOne from "memoize-one";
|
||||
import { isComponentLoaded } from "../../../common/config/is_component_loaded";
|
||||
import { computeStateName } from "../../../common/entity/compute_state_name";
|
||||
import "../../../components/ha-card";
|
||||
import "../../../components/ha-icon-button";
|
||||
import {
|
||||
AreaRegistryEntry,
|
||||
deleteAreaRegistryEntry,
|
||||
@ -136,9 +138,10 @@ class HaConfigAreaPage extends LitElement {
|
||||
|
||||
<ha-icon-button
|
||||
slot="toolbar-icon"
|
||||
icon="hass:cog"
|
||||
.path=${mdiCog}
|
||||
.entry=${area}
|
||||
@click=${this._showSettings}
|
||||
.label=${this.hass.localize("ui.panel.config.areas.edit_settings")}
|
||||
></ha-icon-button>
|
||||
|
||||
<div class="container">
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import { mdiPlus } from "@mdi/js";
|
||||
import { mdiHelpCircle, mdiPlus } from "@mdi/js";
|
||||
import "@polymer/paper-item/paper-item";
|
||||
import "@polymer/paper-item/paper-item-body";
|
||||
import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
|
||||
@ -147,7 +147,8 @@ export class HaConfigAreasDashboard extends LitElement {
|
||||
>
|
||||
<ha-icon-button
|
||||
slot="toolbar-icon"
|
||||
icon="hass:help-circle"
|
||||
.label=${this.hass.localize("ui.common.help")}
|
||||
.path=${mdiHelpCircle}
|
||||
@click=${this._showHelp}
|
||||
></ha-icon-button>
|
||||
<ha-fab
|
||||
|
||||
@ -1,4 +1,3 @@
|
||||
import "@material/mwc-icon-button";
|
||||
import { ActionDetail } from "@material/mwc-list/mwc-list-foundation";
|
||||
import "@material/mwc-list/mwc-list-item";
|
||||
import { mdiArrowDown, mdiArrowUp, mdiDotsVertical } from "@mdi/js";
|
||||
@ -7,13 +6,13 @@ import "@polymer/paper-item/paper-item";
|
||||
import "@polymer/paper-listbox/paper-listbox";
|
||||
import type { PaperListboxElement } from "@polymer/paper-listbox/paper-listbox";
|
||||
import { css, CSSResultGroup, html, LitElement, PropertyValues } from "lit";
|
||||
import { customElement, property, state, query } from "lit/decorators";
|
||||
import { customElement, property, query, state } from "lit/decorators";
|
||||
import { dynamicElement } from "../../../../common/dom/dynamic-element-directive";
|
||||
import { fireEvent } from "../../../../common/dom/fire_event";
|
||||
import { handleStructError } from "../../../../common/structs/handle-errors";
|
||||
import "../../../../components/ha-button-menu";
|
||||
import "../../../../components/ha-card";
|
||||
import "../../../../components/ha-svg-icon";
|
||||
import "../../../../components/ha-icon-button";
|
||||
import type { HaYamlEditor } from "../../../../components/ha-yaml-editor";
|
||||
import type { Action } from "../../../../data/script";
|
||||
import { showConfirmationDialog } from "../../../../dialogs/generic/show-dialog-box";
|
||||
@ -124,41 +123,32 @@ export default class HaAutomationActionRow extends LitElement {
|
||||
<div class="card-menu">
|
||||
${this.index !== 0
|
||||
? html`
|
||||
<mwc-icon-button
|
||||
.title=${this.hass.localize(
|
||||
"ui.panel.config.automation.editor.move_up"
|
||||
)}
|
||||
<ha-icon-button
|
||||
.label=${this.hass.localize(
|
||||
"ui.panel.config.automation.editor.move_up"
|
||||
)}
|
||||
.path=${mdiArrowUp}
|
||||
@click=${this._moveUp}
|
||||
>
|
||||
<ha-svg-icon .path=${mdiArrowUp}></ha-svg-icon>
|
||||
</mwc-icon-button>
|
||||
></ha-icon-button>
|
||||
`
|
||||
: ""}
|
||||
${this.index !== this.totalActions - 1
|
||||
? html`
|
||||
<mwc-icon-button
|
||||
.title=${this.hass.localize(
|
||||
"ui.panel.config.automation.editor.move_down"
|
||||
)}
|
||||
<ha-icon-button
|
||||
.label=${this.hass.localize(
|
||||
"ui.panel.config.automation.editor.move_down"
|
||||
)}
|
||||
.path=${mdiArrowDown}
|
||||
@click=${this._moveDown}
|
||||
>
|
||||
<ha-svg-icon .path=${mdiArrowDown}></ha-svg-icon>
|
||||
</mwc-icon-button>
|
||||
></ha-icon-button>
|
||||
`
|
||||
: ""}
|
||||
<ha-button-menu corner="BOTTOM_START" @action=${this._handleAction}>
|
||||
<mwc-icon-button
|
||||
<ha-icon-button
|
||||
slot="trigger"
|
||||
.title=${this.hass.localize("ui.common.menu")}
|
||||
.label=${this.hass.localize("ui.common.overflow_menu")}
|
||||
><ha-svg-icon .path=${mdiDotsVertical}></ha-svg-icon>
|
||||
</mwc-icon-button>
|
||||
.label=${this.hass.localize("ui.common.menu")}
|
||||
.path=${mdiDotsVertical}
|
||||
></ha-icon-button>
|
||||
<mwc-list-item .disabled=${!this._uiModeAvailable}>
|
||||
${yamlMode
|
||||
? this.hass.localize(
|
||||
|
||||
@ -5,6 +5,7 @@ import { css, CSSResultGroup, html, LitElement } from "lit";
|
||||
import { customElement, property } from "lit/decorators";
|
||||
import { fireEvent } from "../../../../../common/dom/fire_event";
|
||||
import { ensureArray } from "../../../../../common/ensure-array";
|
||||
import "../../../../../components/ha-icon-button";
|
||||
import { Condition } from "../../../../../data/automation";
|
||||
import { Action, ChooseAction } from "../../../../../data/script";
|
||||
import { haStyle } from "../../../../../resources/styles";
|
||||
@ -28,15 +29,14 @@ export class HaChooseAction extends LitElement implements ActionElement {
|
||||
return html`
|
||||
${(action.choose ? ensureArray(action.choose) : []).map(
|
||||
(option, idx) => html`<ha-card>
|
||||
<mwc-icon-button
|
||||
<ha-icon-button
|
||||
.idx=${idx}
|
||||
@click=${this._removeOption}
|
||||
title=${this.hass.localize(
|
||||
.label=${this.hass.localize(
|
||||
"ui.panel.config.automation.editor.actions.type.choose.remove_option"
|
||||
)}
|
||||
>
|
||||
<ha-svg-icon .path=${mdiDelete}></ha-svg-icon>
|
||||
</mwc-icon-button>
|
||||
.path=${mdiDelete}
|
||||
></ha-icon-button>
|
||||
<div class="card-content">
|
||||
<h2>
|
||||
${this.hass.localize(
|
||||
@ -161,7 +161,7 @@ export class HaChooseAction extends LitElement implements ActionElement {
|
||||
display: block;
|
||||
text-align: center;
|
||||
}
|
||||
mwc-icon-button {
|
||||
ha-icon-button {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
padding: 4px;
|
||||
|
||||
@ -60,12 +60,12 @@ export default class HaAutomationConditionRow extends LitElement {
|
||||
<div class="card-content">
|
||||
<div class="card-menu">
|
||||
<ha-button-menu corner="BOTTOM_START" @action=${this._handleAction}>
|
||||
<mwc-icon-button
|
||||
.title=${this.hass.localize("ui.common.menu")}
|
||||
.label=${this.hass.localize("ui.common.overflow_menu")}
|
||||
<ha-icon-button
|
||||
slot="trigger"
|
||||
><ha-svg-icon .path=${mdiDotsVertical}></ha-svg-icon
|
||||
></mwc-icon-button>
|
||||
.label=${this.hass.localize("ui.common.menu")}
|
||||
.path=${mdiDotsVertical}
|
||||
>
|
||||
</ha-icon-button>
|
||||
<mwc-list-item>
|
||||
${this._yamlMode
|
||||
? this.hass.localize(
|
||||
|
||||
@ -122,12 +122,11 @@ export class HaAutomationEditor extends KeyboardShortcutMixin(LitElement) {
|
||||
@action=${this._handleMenuAction}
|
||||
activatable
|
||||
>
|
||||
<mwc-icon-button
|
||||
<ha-icon-button
|
||||
slot="trigger"
|
||||
.title=${this.hass.localize("ui.common.menu")}
|
||||
.label=${this.hass.localize("ui.common.overflow_menu")}
|
||||
><ha-svg-icon path=${mdiDotsVertical}></ha-svg-icon>
|
||||
</mwc-icon-button>
|
||||
.label=${this.hass.localize("ui.common.menu")}
|
||||
.path=${mdiDotsVertical}
|
||||
></ha-icon-button>
|
||||
|
||||
<mwc-list-item
|
||||
aria-label=${this.hass.localize(
|
||||
|
||||
@ -1,4 +1,3 @@
|
||||
import "@material/mwc-icon-button";
|
||||
import {
|
||||
mdiHelpCircle,
|
||||
mdiHistory,
|
||||
@ -21,6 +20,7 @@ import { DataTableColumnContainer } from "../../../components/data-table/ha-data
|
||||
import "../../../components/entity/ha-entity-toggle";
|
||||
import "../../../components/ha-button-related-filter-menu";
|
||||
import "../../../components/ha-fab";
|
||||
import "../../../components/ha-icon-button";
|
||||
import "../../../components/ha-svg-icon";
|
||||
import {
|
||||
AutomationEntity,
|
||||
@ -147,15 +147,14 @@ class HaAutomationPicker extends LitElement {
|
||||
title: "",
|
||||
type: "icon-button",
|
||||
template: (_info, automation) => html`
|
||||
<mwc-icon-button
|
||||
<ha-icon-button
|
||||
.automation=${automation}
|
||||
@click=${this._showInfo}
|
||||
.label=${this.hass.localize(
|
||||
"ui.panel.config.automation.picker.show_info_automation"
|
||||
)}
|
||||
>
|
||||
<ha-svg-icon .path=${mdiInformationOutline}></ha-svg-icon>
|
||||
</mwc-icon-button>
|
||||
.path=${mdiInformationOutline}
|
||||
></ha-icon-button>
|
||||
`,
|
||||
};
|
||||
columns.trace = {
|
||||
@ -169,14 +168,13 @@ class HaAutomationPicker extends LitElement {
|
||||
: undefined
|
||||
)}
|
||||
>
|
||||
<mwc-icon-button
|
||||
<ha-icon-button
|
||||
.label=${this.hass.localize(
|
||||
"ui.panel.config.automation.picker.dev_automation"
|
||||
)}
|
||||
.path=${mdiHistory}
|
||||
.disabled=${!automation.attributes.id}
|
||||
>
|
||||
<ha-svg-icon .path=${mdiHistory}></ha-svg-icon>
|
||||
</mwc-icon-button>
|
||||
></ha-icon-button>
|
||||
</a>
|
||||
${!automation.attributes.id
|
||||
? html`
|
||||
@ -200,16 +198,13 @@ class HaAutomationPicker extends LitElement {
|
||||
: undefined
|
||||
)}
|
||||
>
|
||||
<mwc-icon-button
|
||||
<ha-icon-button
|
||||
.disabled=${!automation.attributes.id}
|
||||
.label=${this.hass.localize(
|
||||
"ui.panel.config.automation.picker.edit_automation"
|
||||
)}
|
||||
>
|
||||
<ha-svg-icon
|
||||
.path=${automation.attributes.id ? mdiPencil : mdiPencilOff}
|
||||
></ha-svg-icon>
|
||||
</mwc-icon-button>
|
||||
.path=${automation.attributes.id ? mdiPencil : mdiPencilOff}
|
||||
></ha-icon-button>
|
||||
</a>
|
||||
${!automation.attributes.id
|
||||
? html`
|
||||
@ -244,9 +239,12 @@ class HaAutomationPicker extends LitElement {
|
||||
@clear-filter=${this._clearFilter}
|
||||
hasFab
|
||||
>
|
||||
<mwc-icon-button slot="toolbar-icon" @click=${this._showHelp}>
|
||||
<ha-svg-icon .path=${mdiHelpCircle}></ha-svg-icon>
|
||||
</mwc-icon-button>
|
||||
<ha-icon-button
|
||||
slot="toolbar-icon"
|
||||
.label=${this.hass.localize("ui.common.help")}
|
||||
.path=${mdiHelpCircle}
|
||||
@click=${this._showHelp}
|
||||
></ha-icon-button>
|
||||
<ha-button-related-filter-menu
|
||||
slot="filter-menu"
|
||||
corner="BOTTOM_START"
|
||||
|
||||
@ -11,7 +11,18 @@ import { classMap } from "lit/directives/class-map";
|
||||
import { repeat } from "lit/directives/repeat";
|
||||
import { isComponentLoaded } from "../../../common/config/is_component_loaded";
|
||||
import { formatDateTimeWithSeconds } from "../../../common/datetime/format_date_time";
|
||||
import "../../../components/ha-icon-button";
|
||||
import "../../../components/trace/ha-trace-blueprint-config";
|
||||
import "../../../components/trace/ha-trace-config";
|
||||
import "../../../components/trace/ha-trace-logbook";
|
||||
import "../../../components/trace/ha-trace-path-details";
|
||||
import "../../../components/trace/ha-trace-timeline";
|
||||
import "../../../components/trace/hat-script-graph";
|
||||
import type {
|
||||
HatScriptGraph,
|
||||
NodeInfo,
|
||||
} from "../../../components/trace/hat-script-graph";
|
||||
import { traceTabStyles } from "../../../components/trace/trace-tab-styles";
|
||||
import { AutomationEntity } from "../../../data/automation";
|
||||
import { getLogbookDataForContext, LogbookEntry } from "../../../data/logbook";
|
||||
import {
|
||||
@ -24,16 +35,6 @@ import { showAlertDialog } from "../../../dialogs/generic/show-dialog-box";
|
||||
import { haStyle } from "../../../resources/styles";
|
||||
import { HomeAssistant, Route } from "../../../types";
|
||||
import { configSections } from "../ha-panel-config";
|
||||
import "../../../components/trace/ha-trace-blueprint-config";
|
||||
import "../../../components/trace/ha-trace-config";
|
||||
import "../../../components/trace/ha-trace-logbook";
|
||||
import "../../../components/trace/ha-trace-path-details";
|
||||
import "../../../components/trace/ha-trace-timeline";
|
||||
import { traceTabStyles } from "../../../components/trace/trace-tab-styles";
|
||||
import type {
|
||||
HatScriptGraph,
|
||||
NodeInfo,
|
||||
} from "../../../components/trace/hat-script-graph";
|
||||
|
||||
@customElement("ha-automation-trace")
|
||||
export class HaAutomationTrace extends LitElement {
|
||||
@ -90,16 +91,19 @@ export class HaAutomationTrace extends LitElement {
|
||||
}
|
||||
|
||||
const actionButtons = html`
|
||||
<mwc-icon-button label="Refresh" @click=${this._refreshTraces}>
|
||||
<ha-svg-icon .path=${mdiRefresh}></ha-svg-icon>
|
||||
</mwc-icon-button>
|
||||
<mwc-icon-button
|
||||
<ha-icon-button
|
||||
.label=${this.hass.localize("ui.panel.config.automation.trace.refresh")}
|
||||
.path=${mdiRefresh}
|
||||
@click=${this._refreshTraces}
|
||||
></ha-icon-button>
|
||||
<ha-icon-button
|
||||
.label=${this.hass.localize(
|
||||
"ui.panel.config.automation.trace.download_trace"
|
||||
)}
|
||||
.path=${mdiDownload}
|
||||
.disabled=${!this._trace}
|
||||
label="Download Trace"
|
||||
@click=${this._downloadTrace}
|
||||
>
|
||||
<ha-svg-icon .path=${mdiDownload}></ha-svg-icon>
|
||||
</mwc-icon-button>
|
||||
></ha-icon-button>
|
||||
`;
|
||||
|
||||
return html`
|
||||
@ -122,23 +126,28 @@ export class HaAutomationTrace extends LitElement {
|
||||
class="linkButton"
|
||||
href="/config/automation/edit/${this.automationId}"
|
||||
>
|
||||
<mwc-icon-button label="Edit Automation" tabindex="-1">
|
||||
<ha-svg-icon .path=${mdiPencil}></ha-svg-icon>
|
||||
</mwc-icon-button>
|
||||
<ha-icon-button
|
||||
.label=${this.hass!.localize(
|
||||
"ui.panel.config.automation.trace.edit_automation"
|
||||
)}
|
||||
.path=${mdiPencil}
|
||||
tabindex="-1"
|
||||
></ha-icon-button>
|
||||
</a>
|
||||
</div>`
|
||||
: ""}
|
||||
${this._traces && this._traces.length > 0
|
||||
? html`
|
||||
<div>
|
||||
<mwc-icon-button
|
||||
<ha-icon-button
|
||||
.label=${this.hass!.localize(
|
||||
"ui.panel.config.automation.trace.older_trace"
|
||||
)}
|
||||
.path=${mdiRayEndArrow}
|
||||
.disabled=${this._traces[this._traces.length - 1].run_id ===
|
||||
this._runId}
|
||||
label="Older trace"
|
||||
@click=${this._pickOlderTrace}
|
||||
>
|
||||
<ha-svg-icon .path=${mdiRayEndArrow}></ha-svg-icon>
|
||||
</mwc-icon-button>
|
||||
></ha-icon-button>
|
||||
<select .value=${this._runId} @change=${this._pickTrace}>
|
||||
${repeat(
|
||||
this._traces,
|
||||
@ -152,13 +161,14 @@ export class HaAutomationTrace extends LitElement {
|
||||
</option>`
|
||||
)}
|
||||
</select>
|
||||
<mwc-icon-button
|
||||
<ha-icon-button
|
||||
.label=${this.hass!.localize(
|
||||
"ui.panel.config.automation.trace.newer_trace"
|
||||
)}
|
||||
.path=${mdiRayStartArrow}
|
||||
.disabled=${this._traces[0].run_id === this._runId}
|
||||
label="Newer trace"
|
||||
@click=${this._pickNewerTrace}
|
||||
>
|
||||
<ha-svg-icon .path=${mdiRayStartArrow}></ha-svg-icon>
|
||||
</mwc-icon-button>
|
||||
></ha-icon-button>
|
||||
</div>
|
||||
`
|
||||
: ""}
|
||||
|
||||
@ -94,12 +94,11 @@ export default class HaAutomationTriggerRow extends LitElement {
|
||||
<div class="card-content">
|
||||
<div class="card-menu">
|
||||
<ha-button-menu corner="BOTTOM_START" @action=${this._handleAction}>
|
||||
<mwc-icon-button
|
||||
<ha-icon-button
|
||||
slot="trigger"
|
||||
.title=${this.hass.localize("ui.common.menu")}
|
||||
.label=${this.hass.localize("ui.common.overflow_menu")}
|
||||
><ha-svg-icon .path=${mdiDotsVertical}></ha-svg-icon
|
||||
></mwc-icon-button>
|
||||
.label=${this.hass.localize("ui.common.menu")}
|
||||
.path=${mdiDotsVertical}
|
||||
></ha-icon-button>
|
||||
<mwc-list-item .disabled=${selected === -1}>
|
||||
${yamlMode
|
||||
? this.hass.localize(
|
||||
|
||||
@ -1,4 +1,3 @@
|
||||
import "@material/mwc-icon-button";
|
||||
import {
|
||||
mdiDelete,
|
||||
mdiDownload,
|
||||
@ -22,6 +21,7 @@ import { extractSearchParam } from "../../../common/url/search-params";
|
||||
import { DataTableColumnContainer } from "../../../components/data-table/ha-data-table";
|
||||
import "../../../components/entity/ha-entity-toggle";
|
||||
import "../../../components/ha-fab";
|
||||
import "../../../components/ha-icon-button";
|
||||
import "../../../components/ha-svg-icon";
|
||||
import { showAutomationEditor } from "../../../data/automation";
|
||||
import {
|
||||
@ -119,18 +119,14 @@ class HaBlueprintOverview extends LitElement {
|
||||
blueprint.error
|
||||
? ""
|
||||
: narrow
|
||||
? html`<mwc-icon-button
|
||||
? html` <ha-icon-button
|
||||
.blueprint=${blueprint}
|
||||
.label=${this.hass.localize(
|
||||
"ui.panel.config.blueprint.overview.use_blueprint"
|
||||
)}
|
||||
title=${this.hass.localize(
|
||||
"ui.panel.config.blueprint.overview.use_blueprint"
|
||||
)}
|
||||
.path=${mdiRobot}
|
||||
@click=${this._createNew}
|
||||
>
|
||||
<ha-svg-icon .path=${mdiRobot}></ha-svg-icon>
|
||||
</mwc-icon-button>`
|
||||
></ha-icon-button>`
|
||||
: html`<mwc-button
|
||||
.blueprint=${blueprint}
|
||||
@click=${this._createNew}
|
||||
@ -146,7 +142,7 @@ class HaBlueprintOverview extends LitElement {
|
||||
template: (_, blueprint: any) =>
|
||||
blueprint.error
|
||||
? ""
|
||||
: html`<mwc-icon-button
|
||||
: html`<ha-icon-button
|
||||
.blueprint=${blueprint}
|
||||
.disabled=${!blueprint.source_url}
|
||||
.label=${this.hass.localize(
|
||||
@ -154,9 +150,9 @@ class HaBlueprintOverview extends LitElement {
|
||||
? "ui.panel.config.blueprint.overview.share_blueprint"
|
||||
: "ui.panel.config.blueprint.overview.share_blueprint_no_url"
|
||||
)}
|
||||
.path=${mdiShareVariant}
|
||||
@click=${this._share}
|
||||
><ha-svg-icon .path=${mdiShareVariant}></ha-svg-icon
|
||||
></mwc-icon-button>`,
|
||||
></ha-icon-button>`,
|
||||
},
|
||||
delete: {
|
||||
title: "",
|
||||
@ -164,14 +160,14 @@ class HaBlueprintOverview extends LitElement {
|
||||
template: (_, blueprint: any) =>
|
||||
blueprint.error
|
||||
? ""
|
||||
: html` <mwc-icon-button
|
||||
: html` <ha-icon-button
|
||||
.blueprint=${blueprint}
|
||||
.label=${this.hass.localize(
|
||||
"ui.panel.config.blueprint.overview.delete_blueprint"
|
||||
)}
|
||||
.path=${mdiDelete}
|
||||
@click=${this._delete}
|
||||
><ha-svg-icon .path=${mdiDelete}></ha-svg-icon
|
||||
></mwc-icon-button>`,
|
||||
></ha-icon-button>`,
|
||||
},
|
||||
})
|
||||
);
|
||||
@ -220,9 +216,12 @@ class HaBlueprintOverview extends LitElement {
|
||||
</a>
|
||||
</div>`}
|
||||
>
|
||||
<mwc-icon-button slot="toolbar-icon" @click=${this._showHelp}>
|
||||
<ha-svg-icon .path=${mdiHelpCircle}></ha-svg-icon>
|
||||
</mwc-icon-button>
|
||||
<ha-icon-button
|
||||
slot="toolbar-icon"
|
||||
.label=${this.hass.localize("ui.common.help")}
|
||||
.path=${mdiHelpCircle}
|
||||
@click=${this._showHelp}
|
||||
></ha-icon-button>
|
||||
<ha-fab
|
||||
slot="fab"
|
||||
.label=${this.hass.localize(
|
||||
|
||||
@ -116,25 +116,22 @@ class CloudAlexa extends LitElement {
|
||||
? exposedCards
|
||||
: notExposedCards;
|
||||
|
||||
const iconButton = html`<mwc-icon-button
|
||||
const iconButton = html`<ha-icon-button
|
||||
slot="trigger"
|
||||
class=${classMap({
|
||||
exposed: isExposed!,
|
||||
"not-exposed": !isExposed,
|
||||
})}
|
||||
.disabled=${!emptyFilter}
|
||||
.title=${this.hass!.localize("ui.panel.config.cloud.alexa.expose")}
|
||||
>
|
||||
<ha-svg-icon
|
||||
.path=${config.should_expose !== null
|
||||
? isExposed
|
||||
? mdiCheckboxMarked
|
||||
: mdiCloseBox
|
||||
: isDomainExposed
|
||||
? mdiCheckboxMultipleMarked
|
||||
: mdiCloseBoxMultiple}
|
||||
></ha-svg-icon>
|
||||
</mwc-icon-button>`;
|
||||
.label=${this.hass!.localize("ui.panel.config.cloud.alexa.expose")}
|
||||
.path=${config.should_expose !== null
|
||||
? isExposed
|
||||
? mdiCheckboxMarked
|
||||
: mdiCloseBox
|
||||
: isDomainExposed
|
||||
? mdiCheckboxMultipleMarked
|
||||
: mdiCloseBoxMultiple}
|
||||
></ha-icon-button>`;
|
||||
|
||||
target.push(html`
|
||||
<ha-card>
|
||||
|
||||
@ -122,25 +122,22 @@ class CloudGoogleAssistant extends LitElement {
|
||||
? exposedCards
|
||||
: notExposedCards;
|
||||
|
||||
const iconButton = html`<mwc-icon-button
|
||||
const iconButton = html`<ha-icon-button
|
||||
slot="trigger"
|
||||
class=${classMap({
|
||||
exposed: isExposed!,
|
||||
"not-exposed": !isExposed,
|
||||
})}
|
||||
.disabled=${!emptyFilter}
|
||||
.title=${this.hass!.localize("ui.panel.config.cloud.google.expose")}
|
||||
>
|
||||
<ha-svg-icon
|
||||
.path=${config.should_expose !== null
|
||||
? isExposed
|
||||
? mdiCheckboxMarked
|
||||
: mdiCloseBox
|
||||
: isDomainExposed
|
||||
? mdiCheckboxMultipleMarked
|
||||
: mdiCloseBoxMultiple}
|
||||
></ha-svg-icon>
|
||||
</mwc-icon-button>`;
|
||||
.label=${this.hass!.localize("ui.panel.config.cloud.google.expose")}
|
||||
.path=${config.should_expose !== null
|
||||
? isExposed
|
||||
? mdiCheckboxMarked
|
||||
: mdiCloseBox
|
||||
: isDomainExposed
|
||||
? mdiCheckboxMultipleMarked
|
||||
: mdiCloseBoxMultiple}
|
||||
></ha-icon-button>`;
|
||||
|
||||
target.push(html`
|
||||
<ha-card>
|
||||
|
||||
@ -9,6 +9,7 @@ import { PolymerElement } from "@polymer/polymer/polymer-element";
|
||||
import { computeRTL } from "../../../../common/util/compute_rtl";
|
||||
import "../../../../components/buttons/ha-progress-button";
|
||||
import "../../../../components/ha-card";
|
||||
import "../../../../components/ha-icon";
|
||||
import "../../../../components/ha-icon-button";
|
||||
import "../../../../components/ha-icon-next";
|
||||
import "../../../../layouts/hass-subpage";
|
||||
@ -120,9 +121,12 @@ class CloudLogin extends LocalizeMixin(
|
||||
<ha-card hidden$="[[!flashMessage]]">
|
||||
<div class="card-content flash-msg">
|
||||
[[flashMessage]]
|
||||
<ha-icon-button icon="hass:close" on-click="_dismissFlash"
|
||||
>[[localize('ui.panel.config.cloud.login.dismiss')]]</ha-icon-button
|
||||
<ha-icon-button
|
||||
label="[[localize('ui.panel.config.cloud.login.dismiss')]]"
|
||||
on-click="_dismissFlash"
|
||||
>
|
||||
<ha-icon icon="hass:close"></ha-icon>
|
||||
</ha-icon-button>
|
||||
<paper-ripple id="flashRipple" noink=""></paper-ripple>
|
||||
</div>
|
||||
</ha-card>
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
import { html } from "@polymer/polymer/lib/utils/html-tag";
|
||||
/* eslint-plugin-disable lit */
|
||||
import { PolymerElement } from "@polymer/polymer/polymer-element";
|
||||
import "../../../components/ha-icon";
|
||||
import "../../../components/ha-icon-button";
|
||||
import hassAttributeUtil from "../../../util/hass-attributes-util";
|
||||
import "../ha-form-style";
|
||||
@ -28,11 +29,9 @@ class HaCustomizeAttribute extends PolymerElement {
|
||||
}
|
||||
</style>
|
||||
<div id="wrapper" class="form-group"></div>
|
||||
<ha-icon-button
|
||||
class="button"
|
||||
icon="[[getIcon(item.secondary)]]"
|
||||
on-click="tapButton"
|
||||
></ha-icon-button>
|
||||
<ha-icon-button class="button" on-click="tapButton">
|
||||
<ha-icon icon="[[getIcon(item.secondary)]]"></ha-icon>
|
||||
</ha-icon-button>
|
||||
`;
|
||||
}
|
||||
|
||||
|
||||
@ -7,7 +7,6 @@ import { isComponentLoaded } from "../../../common/config/is_component_loaded";
|
||||
import "../../../components/ha-card";
|
||||
import "../../../components/ha-icon-next";
|
||||
import "../../../components/ha-menu-button";
|
||||
import "../../../components/ha-svg-icon";
|
||||
import { CloudStatus } from "../../../data/cloud";
|
||||
import "../../../layouts/ha-app-layout";
|
||||
import { haStyle } from "../../../resources/styles";
|
||||
|
||||
@ -25,7 +25,7 @@ class DialogDeviceRegistryDetail extends LitElement {
|
||||
|
||||
@state() private _params?: DeviceRegistryDetailDialogParams;
|
||||
|
||||
@state() private _areaId?: string | null;
|
||||
@property() public _areaId?: string | null;
|
||||
|
||||
@state() private _disabledBy!: string | null;
|
||||
|
||||
|
||||
@ -1,3 +1,4 @@
|
||||
import { mdiPencil, mdiPlusCircle } from "@mdi/js";
|
||||
import "@polymer/paper-tooltip/paper-tooltip";
|
||||
import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
|
||||
import { customElement, property, state } from "lit/decorators";
|
||||
@ -9,6 +10,7 @@ import { computeStateName } from "../../../common/entity/compute_state_name";
|
||||
import { stringCompare } from "../../../common/string/compare";
|
||||
import { slugify } from "../../../common/string/slugify";
|
||||
import "../../../components/entity/ha-battery-icon";
|
||||
import "../../../components/ha-icon-button";
|
||||
import "../../../components/ha-icon-next";
|
||||
import { AreaRegistryEntry } from "../../../data/area_registry";
|
||||
import {
|
||||
@ -184,8 +186,11 @@ export class HaConfigDevicePage extends LitElement {
|
||||
</span>
|
||||
<ha-icon-button
|
||||
slot="toolbar-icon"
|
||||
icon="hass:pencil"
|
||||
.path=${mdiPencil}
|
||||
@click=${this._showSettings}
|
||||
.label=${this.hass.localize(
|
||||
"ui.panel.config.devices.edit_settings"
|
||||
)}
|
||||
></ha-icon-button>
|
||||
`
|
||||
: ""
|
||||
@ -216,8 +221,11 @@ export class HaConfigDevicePage extends LitElement {
|
||||
: ""}
|
||||
</div>
|
||||
<ha-icon-button
|
||||
icon="hass:pencil"
|
||||
.path=${mdiPencil}
|
||||
@click=${this._showSettings}
|
||||
.label=${this.hass.localize(
|
||||
"ui.panel.config.devices.edit_settings"
|
||||
)}
|
||||
></ha-icon-button>
|
||||
</div>
|
||||
`
|
||||
@ -315,14 +323,14 @@ export class HaConfigDevicePage extends LitElement {
|
||||
<ha-icon-button
|
||||
@click=${this._showAutomationDialog}
|
||||
.disabled=${device.disabled_by}
|
||||
title=${device.disabled_by
|
||||
.label=${device.disabled_by
|
||||
? this.hass.localize(
|
||||
"ui.panel.config.devices.automation.create_disabled"
|
||||
)
|
||||
: this.hass.localize(
|
||||
"ui.panel.config.devices.automation.create"
|
||||
)}
|
||||
icon="hass:plus-circle"
|
||||
.path=${mdiPlusCircle}
|
||||
></ha-icon-button>
|
||||
</h1>
|
||||
${this._related?.automation?.length
|
||||
@ -387,20 +395,20 @@ export class HaConfigDevicePage extends LitElement {
|
||||
"ui.panel.config.devices.scene.scenes"
|
||||
)}
|
||||
|
||||
<ha-icon-button
|
||||
@click=${this._createScene}
|
||||
.disabled=${device.disabled_by}
|
||||
title=${
|
||||
device.disabled_by
|
||||
? this.hass.localize(
|
||||
"ui.panel.config.devices.scene.create_disabled"
|
||||
)
|
||||
: this.hass.localize(
|
||||
"ui.panel.config.devices.scene.create"
|
||||
)
|
||||
}
|
||||
icon="hass:plus-circle"
|
||||
></ha-icon-button>
|
||||
<ha-icon-button @click=${
|
||||
this._createScene
|
||||
} .disabled=${device.disabled_by}
|
||||
.label=${
|
||||
device.disabled_by
|
||||
? this.hass.localize(
|
||||
"ui.panel.config.devices.scene.create_disabled"
|
||||
)
|
||||
: this.hass.localize(
|
||||
"ui.panel.config.devices.scene.create"
|
||||
)
|
||||
}
|
||||
.path=${mdiPlusCircle}
|
||||
></ha-icon-button>
|
||||
</h1>
|
||||
|
||||
${
|
||||
@ -471,14 +479,14 @@ export class HaConfigDevicePage extends LitElement {
|
||||
<ha-icon-button
|
||||
@click=${this._showScriptDialog}
|
||||
.disabled=${device.disabled_by}
|
||||
title=${device.disabled_by
|
||||
.label=${device.disabled_by
|
||||
? this.hass.localize(
|
||||
"ui.panel.config.devices.script.create_disabled"
|
||||
)
|
||||
: this.hass.localize(
|
||||
"ui.panel.config.devices.script.create"
|
||||
)}
|
||||
icon="hass:plus-circle"
|
||||
.path=${mdiPlusCircle}
|
||||
></ha-icon-button>
|
||||
</h1>
|
||||
${this._related?.script?.length
|
||||
|
||||
@ -17,6 +17,7 @@ import {
|
||||
} from "../../../components/data-table/ha-data-table";
|
||||
import "../../../components/entity/ha-battery-icon";
|
||||
import "../../../components/ha-button-menu";
|
||||
import "../../../components/ha-icon-button";
|
||||
import { AreaRegistryEntry } from "../../../data/area_registry";
|
||||
import { ConfigEntry } from "../../../data/config_entries";
|
||||
import {
|
||||
@ -407,17 +408,13 @@ export class HaConfigDeviceDashboard extends LitElement {
|
||||
</a>`
|
||||
: html``}
|
||||
<ha-button-menu slot="filter-menu" corner="BOTTOM_START" multi>
|
||||
<mwc-icon-button
|
||||
<ha-icon-button
|
||||
slot="trigger"
|
||||
.label=${this.hass!.localize(
|
||||
"ui.panel.config.devices.picker.filter.filter"
|
||||
)}
|
||||
.title=${this.hass!.localize(
|
||||
"ui.panel.config.devices.picker.filter.filter"
|
||||
)}
|
||||
>
|
||||
<ha-svg-icon .path=${mdiFilterVariant}></ha-svg-icon>
|
||||
</mwc-icon-button>
|
||||
.path=${mdiFilterVariant}
|
||||
></ha-icon-button>
|
||||
<mwc-list-item
|
||||
@request-selected=${this._showDisabledChanged}
|
||||
graphic="control"
|
||||
|
||||
@ -5,6 +5,7 @@ import { customElement, property } from "lit/decorators";
|
||||
import { fireEvent } from "../../../../common/dom/fire_event";
|
||||
import { computeStateName } from "../../../../common/entity/compute_state_name";
|
||||
import "../../../../components/ha-card";
|
||||
import "../../../../components/ha-icon-button";
|
||||
import "../../../../components/ha-settings-row";
|
||||
import {
|
||||
BatterySourceTypeEnergyPreference,
|
||||
@ -14,8 +15,8 @@ import {
|
||||
saveEnergyPreferences,
|
||||
} from "../../../../data/energy";
|
||||
import {
|
||||
showConfirmationDialog,
|
||||
showAlertDialog,
|
||||
showConfirmationDialog,
|
||||
} from "../../../../dialogs/generic/show-dialog-box";
|
||||
import { haStyle } from "../../../../resources/styles";
|
||||
import { HomeAssistant } from "../../../../types";
|
||||
@ -105,12 +106,14 @@ export class EnergyBatterySettings extends LitElement {
|
||||
: source.stat_energy_to}</span
|
||||
>
|
||||
</div>
|
||||
<mwc-icon-button @click=${this._editSource}>
|
||||
<ha-svg-icon .path=${mdiPencil}></ha-svg-icon>
|
||||
</mwc-icon-button>
|
||||
<mwc-icon-button @click=${this._deleteSource}>
|
||||
<ha-svg-icon .path=${mdiDelete}></ha-svg-icon>
|
||||
</mwc-icon-button>
|
||||
<ha-icon-button
|
||||
@click=${this._editSource}
|
||||
.path=${mdiPencil}
|
||||
></ha-icon-button>
|
||||
<ha-icon-button
|
||||
@click=${this._deleteSource}
|
||||
.path=${mdiDelete}
|
||||
></ha-icon-button>
|
||||
</div>
|
||||
`;
|
||||
})}
|
||||
|
||||
@ -6,6 +6,7 @@ import { fireEvent } from "../../../../common/dom/fire_event";
|
||||
import { computeStateName } from "../../../../common/entity/compute_state_name";
|
||||
import { stateIcon } from "../../../../common/entity/state_icon";
|
||||
import "../../../../components/ha-card";
|
||||
import "../../../../components/ha-icon-button";
|
||||
import {
|
||||
DeviceConsumptionEnergyPreference,
|
||||
EnergyPreferences,
|
||||
@ -13,8 +14,8 @@ import {
|
||||
saveEnergyPreferences,
|
||||
} from "../../../../data/energy";
|
||||
import {
|
||||
showConfirmationDialog,
|
||||
showAlertDialog,
|
||||
showConfirmationDialog,
|
||||
} from "../../../../dialogs/generic/show-dialog-box";
|
||||
import { haStyle } from "../../../../resources/styles";
|
||||
import { HomeAssistant } from "../../../../types";
|
||||
@ -84,9 +85,11 @@ export class EnergyDeviceSettings extends LitElement {
|
||||
? computeStateName(entityState)
|
||||
: device.stat_consumption}</span
|
||||
>
|
||||
<mwc-icon-button @click=${this._deleteDevice} .device=${device}>
|
||||
<ha-svg-icon .path=${mdiDelete}></ha-svg-icon>
|
||||
</mwc-icon-button>
|
||||
<ha-icon-button
|
||||
@click=${this._deleteDevice}
|
||||
.device=${device}
|
||||
.path=${mdiDelete}
|
||||
></ha-icon-button>
|
||||
</div>
|
||||
`;
|
||||
})}
|
||||
|
||||
@ -5,17 +5,18 @@ import { customElement, property } from "lit/decorators";
|
||||
import { fireEvent } from "../../../../common/dom/fire_event";
|
||||
import { computeStateName } from "../../../../common/entity/compute_state_name";
|
||||
import "../../../../components/ha-card";
|
||||
import "../../../../components/ha-icon-button";
|
||||
import {
|
||||
EnergyPreferences,
|
||||
saveEnergyPreferences,
|
||||
GasSourceTypeEnergyPreference,
|
||||
EnergyPreferencesValidation,
|
||||
EnergyValidationIssue,
|
||||
GasSourceTypeEnergyPreference,
|
||||
getEnergyGasUnitCategory,
|
||||
saveEnergyPreferences,
|
||||
} from "../../../../data/energy";
|
||||
import {
|
||||
showConfirmationDialog,
|
||||
showAlertDialog,
|
||||
showConfirmationDialog,
|
||||
} from "../../../../dialogs/generic/show-dialog-box";
|
||||
import { haStyle } from "../../../../resources/styles";
|
||||
import { HomeAssistant } from "../../../../types";
|
||||
@ -92,12 +93,14 @@ export class EnergyGasSettings extends LitElement {
|
||||
? computeStateName(entityState)
|
||||
: source.stat_energy_from}</span
|
||||
>
|
||||
<mwc-icon-button @click=${this._editSource}>
|
||||
<ha-svg-icon .path=${mdiPencil}></ha-svg-icon>
|
||||
</mwc-icon-button>
|
||||
<mwc-icon-button @click=${this._deleteSource}>
|
||||
<ha-svg-icon .path=${mdiDelete}></ha-svg-icon>
|
||||
</mwc-icon-button>
|
||||
<ha-icon-button
|
||||
@click=${this._editSource}
|
||||
.path=${mdiPencil}
|
||||
></ha-icon-button>
|
||||
<ha-icon-button
|
||||
@click=${this._deleteSource}
|
||||
.path=${mdiDelete}
|
||||
></ha-icon-button>
|
||||
</div>
|
||||
`;
|
||||
})}
|
||||
|
||||
@ -11,6 +11,7 @@ import { customElement, property, state } from "lit/decorators";
|
||||
import { fireEvent } from "../../../../common/dom/fire_event";
|
||||
import { computeStateName } from "../../../../common/entity/compute_state_name";
|
||||
import "../../../../components/ha-card";
|
||||
import "../../../../components/ha-icon-button";
|
||||
import {
|
||||
ConfigEntry,
|
||||
deleteConfigEntry,
|
||||
@ -130,12 +131,14 @@ export class EnergyGridSettings extends LitElement {
|
||||
? computeStateName(entityState)
|
||||
: flow.stat_energy_from}</span
|
||||
>
|
||||
<mwc-icon-button @click=${this._editFromSource}>
|
||||
<ha-svg-icon .path=${mdiPencil}></ha-svg-icon>
|
||||
</mwc-icon-button>
|
||||
<mwc-icon-button @click=${this._deleteFromSource}>
|
||||
<ha-svg-icon .path=${mdiDelete}></ha-svg-icon>
|
||||
</mwc-icon-button>
|
||||
<ha-icon-button
|
||||
@click=${this._editFromSource}
|
||||
.path=${mdiPencil}
|
||||
></ha-icon-button>
|
||||
<ha-icon-button
|
||||
@click=${this._deleteFromSource}
|
||||
.path=${mdiDelete}
|
||||
></ha-icon-button>
|
||||
</div>
|
||||
`;
|
||||
})}
|
||||
@ -167,12 +170,14 @@ export class EnergyGridSettings extends LitElement {
|
||||
? computeStateName(entityState)
|
||||
: flow.stat_energy_to}</span
|
||||
>
|
||||
<mwc-icon-button @click=${this._editToSource}>
|
||||
<ha-svg-icon .path=${mdiPencil}></ha-svg-icon>
|
||||
</mwc-icon-button>
|
||||
<mwc-icon-button @click=${this._deleteToSource}>
|
||||
<ha-svg-icon .path=${mdiDelete}></ha-svg-icon>
|
||||
</mwc-icon-button>
|
||||
<ha-icon-button
|
||||
@click=${this._editToSource}
|
||||
.path=${mdiPencil}
|
||||
></ha-icon-button>
|
||||
<ha-icon-button
|
||||
@click=${this._deleteToSource}
|
||||
.path=${mdiDelete}
|
||||
></ha-icon-button>
|
||||
</div>
|
||||
`;
|
||||
})}
|
||||
@ -202,13 +207,12 @@ export class EnergyGridSettings extends LitElement {
|
||||
/>
|
||||
<span class="content">${entry.title}</span>
|
||||
<a href=${`/config/integrations#config_entry=${entry.entry_id}`}>
|
||||
<mwc-icon-button>
|
||||
<ha-svg-icon .path=${mdiPencil}></ha-svg-icon>
|
||||
</mwc-icon-button>
|
||||
<ha-icon-button .path=${mdiPencil}></ha-icon-button>
|
||||
</a>
|
||||
<mwc-icon-button @click=${this._removeCO2Sensor}>
|
||||
<ha-svg-icon .path=${mdiDelete}></ha-svg-icon>
|
||||
</mwc-icon-button>
|
||||
<ha-icon-button
|
||||
@click=${this._removeCO2Sensor}
|
||||
.path=${mdiDelete}
|
||||
></ha-icon-button>
|
||||
</div>`
|
||||
)}
|
||||
${this._configEntries?.length === 0
|
||||
|
||||
@ -5,6 +5,7 @@ import { customElement, property } from "lit/decorators";
|
||||
import { fireEvent } from "../../../../common/dom/fire_event";
|
||||
import { computeStateName } from "../../../../common/entity/compute_state_name";
|
||||
import "../../../../components/ha-card";
|
||||
import "../../../../components/ha-icon-button";
|
||||
import {
|
||||
EnergyInfo,
|
||||
EnergyPreferences,
|
||||
@ -102,14 +103,16 @@ export class EnergySolarSettings extends LitElement {
|
||||
>
|
||||
${this.info
|
||||
? html`
|
||||
<mwc-icon-button @click=${this._editSource}>
|
||||
<ha-svg-icon .path=${mdiPencil}></ha-svg-icon>
|
||||
</mwc-icon-button>
|
||||
<ha-icon-button
|
||||
@click=${this._editSource}
|
||||
.path=${mdiPencil}
|
||||
></ha-icon-button>
|
||||
`
|
||||
: ""}
|
||||
<mwc-icon-button @click=${this._deleteSource}>
|
||||
<ha-svg-icon .path=${mdiDelete}></ha-svg-icon>
|
||||
</mwc-icon-button>
|
||||
<ha-icon-button
|
||||
@click=${this._deleteSource}
|
||||
.path=${mdiDelete}
|
||||
></ha-icon-button>
|
||||
</div>
|
||||
`;
|
||||
})}
|
||||
|
||||
@ -31,7 +31,7 @@ export const energyCardStyles = css`
|
||||
.row .content {
|
||||
flex-grow: 1;
|
||||
}
|
||||
mwc-icon-button {
|
||||
ha-icon-button {
|
||||
color: var(--secondary-text-color);
|
||||
}
|
||||
`;
|
||||
|
||||
@ -1,6 +1,5 @@
|
||||
import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
|
||||
import { customElement, property, state } from "lit/decorators";
|
||||
import "../../../components/ha-svg-icon";
|
||||
import {
|
||||
EnergyPreferencesValidation,
|
||||
getEnergyPreferenceValidation,
|
||||
|
||||
@ -1,4 +1,3 @@
|
||||
import "@material/mwc-icon-button";
|
||||
import "@material/mwc-tab";
|
||||
import "@material/mwc-tab-bar";
|
||||
import { mdiClose, mdiTune } from "@mdi/js";
|
||||
@ -11,8 +10,8 @@ import { fireEvent } from "../../../common/dom/fire_event";
|
||||
import { computeStateName } from "../../../common/entity/compute_state_name";
|
||||
import "../../../components/ha-dialog";
|
||||
import "../../../components/ha-header-bar";
|
||||
import "../../../components/ha-icon-button";
|
||||
import "../../../components/ha-related-items";
|
||||
import "../../../components/ha-svg-icon";
|
||||
import {
|
||||
EntityRegistryEntry,
|
||||
ExtEntityRegistryEntry,
|
||||
@ -82,27 +81,25 @@ export class DialogEntityEditor extends LitElement {
|
||||
>
|
||||
<div slot="heading">
|
||||
<ha-header-bar>
|
||||
<mwc-icon-button
|
||||
<ha-icon-button
|
||||
slot="navigationIcon"
|
||||
.label=${this.hass.localize("ui.dialogs.entity_registry.dismiss")}
|
||||
.path=${mdiClose}
|
||||
dialogAction="cancel"
|
||||
>
|
||||
<ha-svg-icon .path=${mdiClose}></ha-svg-icon>
|
||||
</mwc-icon-button>
|
||||
></ha-icon-button>
|
||||
<span slot="title">
|
||||
${stateObj ? computeStateName(stateObj) : entry?.name || entityId}
|
||||
</span>
|
||||
${stateObj
|
||||
? html`
|
||||
<mwc-icon-button
|
||||
<ha-icon-button
|
||||
slot="actionItems"
|
||||
.label=${this.hass.localize(
|
||||
"ui.dialogs.entity_registry.control"
|
||||
)}
|
||||
.path=${mdiTune}
|
||||
@click=${this._openMoreInfo}
|
||||
>
|
||||
<ha-svg-icon .path=${mdiTune}></ha-svg-icon>
|
||||
</mwc-icon-button>
|
||||
></ha-icon-button>
|
||||
`
|
||||
: ""}
|
||||
</ha-header-bar>
|
||||
|
||||
@ -14,7 +14,7 @@ import "@polymer/paper-listbox/paper-listbox";
|
||||
import "@polymer/paper-tooltip/paper-tooltip";
|
||||
import { UnsubscribeFunc } from "home-assistant-js-websocket";
|
||||
import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
|
||||
import { customElement, property, state, query } from "lit/decorators";
|
||||
import { customElement, property, query, state } from "lit/decorators";
|
||||
import { classMap } from "lit/directives/class-map";
|
||||
import { styleMap } from "lit/directives/style-map";
|
||||
import memoize from "memoize-one";
|
||||
@ -33,6 +33,7 @@ import type {
|
||||
SelectionChangedEvent,
|
||||
} from "../../../components/data-table/ha-data-table";
|
||||
import "../../../components/ha-button-menu";
|
||||
import "../../../components/ha-icon-button";
|
||||
import "../../../components/ha-svg-icon";
|
||||
import {
|
||||
AreaRegistryEntry,
|
||||
@ -540,32 +541,35 @@ export class HaConfigEntities extends SubscribeMixin(LitElement) {
|
||||
>
|
||||
`
|
||||
: html`
|
||||
<mwc-icon-button
|
||||
<ha-icon-button
|
||||
id="enable-btn"
|
||||
@click=${this._enableSelected}
|
||||
><ha-svg-icon .path=${mdiUndo}></ha-svg-icon
|
||||
></mwc-icon-button>
|
||||
.path=${mdiUndo}
|
||||
.label=${this.hass.localize("ui.common.enable")}
|
||||
></ha-icon-button>
|
||||
<paper-tooltip animation-delay="0" for="enable-btn">
|
||||
${this.hass.localize(
|
||||
"ui.panel.config.entities.picker.enable_selected.button"
|
||||
)}
|
||||
</paper-tooltip>
|
||||
<mwc-icon-button
|
||||
<ha-icon-button
|
||||
id="disable-btn"
|
||||
@click=${this._disableSelected}
|
||||
><ha-svg-icon .path=${mdiCancel}></ha-svg-icon
|
||||
></mwc-icon-button>
|
||||
.path=${mdiCancel}
|
||||
.label=${this.hass.localize("ui.common.disable")}
|
||||
></ha-icon-button>
|
||||
<paper-tooltip animation-delay="0" for="disable-btn">
|
||||
${this.hass.localize(
|
||||
"ui.panel.config.entities.picker.disable_selected.button"
|
||||
)}
|
||||
</paper-tooltip>
|
||||
<mwc-icon-button
|
||||
<ha-icon-button
|
||||
class="warning"
|
||||
id="remove-btn"
|
||||
@click=${this._removeSelected}
|
||||
><ha-svg-icon .path=${mdiDelete}></ha-svg-icon
|
||||
></mwc-icon-button>
|
||||
.path=${mdiDelete}
|
||||
.label=${this.hass.localize("ui.common.remove")}
|
||||
></ha-icon-button>
|
||||
<paper-tooltip animation-delay="0" for="remove-btn">
|
||||
${this.hass.localize(
|
||||
"ui.panel.config.entities.picker.remove_selected.button"
|
||||
@ -575,17 +579,13 @@ export class HaConfigEntities extends SubscribeMixin(LitElement) {
|
||||
</div>
|
||||
</div> `
|
||||
: html`<ha-button-menu slot="filter-menu" corner="BOTTOM_START" multi>
|
||||
<mwc-icon-button
|
||||
<ha-icon-button
|
||||
slot="trigger"
|
||||
.label=${this.hass!.localize(
|
||||
"ui.panel.config.entities.picker.filter.filter"
|
||||
)}
|
||||
.title=${this.hass!.localize(
|
||||
"ui.panel.config.entities.picker.filter.filter"
|
||||
)}
|
||||
>
|
||||
<ha-svg-icon .path=${mdiFilterVariant}></ha-svg-icon>
|
||||
</mwc-icon-button>
|
||||
.path=${mdiFilterVariant}
|
||||
></ha-icon-button>
|
||||
<mwc-list-item
|
||||
@request-selected=${this._showDisabledChanged}
|
||||
graphic="control"
|
||||
@ -896,7 +896,7 @@ export class HaConfigEntities extends SubscribeMixin(LitElement) {
|
||||
margin-right: -12px;
|
||||
}
|
||||
.header-btns > mwc-button,
|
||||
.header-btns > mwc-icon-button {
|
||||
.header-btns > ha-icon-button {
|
||||
margin: 8px;
|
||||
}
|
||||
ha-button-menu {
|
||||
|
||||
@ -1,10 +1,11 @@
|
||||
import "@material/mwc-button/mwc-button";
|
||||
import { mdiDelete } from "@mdi/js";
|
||||
import "@polymer/paper-input/paper-input";
|
||||
import type { PaperInputElement } from "@polymer/paper-input/paper-input";
|
||||
import "@polymer/paper-item/paper-item";
|
||||
import "@polymer/paper-item/paper-item-body";
|
||||
import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
|
||||
import { customElement, property, state, query } from "lit/decorators";
|
||||
import { customElement, property, query, state } from "lit/decorators";
|
||||
import { fireEvent } from "../../../../common/dom/fire_event";
|
||||
import "../../../../components/ha-icon-button";
|
||||
import "../../../../components/ha-icon-input";
|
||||
@ -89,11 +90,11 @@ class HaInputSelectForm extends LitElement {
|
||||
<paper-item-body> ${option} </paper-item-body>
|
||||
<ha-icon-button
|
||||
.index=${index}
|
||||
.title=${this.hass.localize(
|
||||
.label=${this.hass.localize(
|
||||
"ui.dialogs.helper_settings.input_select.remove_option"
|
||||
)}
|
||||
@click=${this._removeOption}
|
||||
icon="hass:delete"
|
||||
.path=${mdiDelete}
|
||||
></ha-icon-button>
|
||||
</paper-item>
|
||||
`
|
||||
|
||||
@ -1,5 +1,4 @@
|
||||
import "@material/mwc-button/mwc-button";
|
||||
import "@material/mwc-icon-button";
|
||||
import { ActionDetail } from "@material/mwc-list/mwc-list-foundation";
|
||||
import "@material/mwc-list/mwc-list-item";
|
||||
import { mdiContentCopy } from "@mdi/js";
|
||||
@ -12,7 +11,7 @@ import { copyToClipboard } from "../../../common/util/copy-clipboard";
|
||||
import "../../../components/ha-button-menu";
|
||||
import "../../../components/ha-card";
|
||||
import "../../../components/ha-circular-progress";
|
||||
import "../../../components/ha-svg-icon";
|
||||
import "../../../components/ha-icon-button";
|
||||
import { domainToName } from "../../../data/integration";
|
||||
import {
|
||||
subscribeSystemHealthInfo,
|
||||
@ -150,9 +149,11 @@ class SystemHealthCard extends LitElement {
|
||||
slot="toolbar-icon"
|
||||
@action=${this._copyInfo}
|
||||
>
|
||||
<mwc-icon-button slot="trigger" alt="menu">
|
||||
<ha-svg-icon .path=${mdiContentCopy}></ha-svg-icon>
|
||||
</mwc-icon-button>
|
||||
<ha-icon-button
|
||||
slot="trigger"
|
||||
.label=${this.hass.localize("ui.panel.config.info.copy_menu")}
|
||||
.path=${mdiContentCopy}
|
||||
></ha-icon-button>
|
||||
<mwc-list-item>
|
||||
${this.hass.localize("ui.panel.config.info.copy_raw")}
|
||||
</mwc-list-item>
|
||||
|
||||
@ -1,4 +1,3 @@
|
||||
import "@material/mwc-icon-button";
|
||||
import { ActionDetail } from "@material/mwc-list";
|
||||
import "@material/mwc-list/mwc-list-item";
|
||||
import { mdiFilterVariant, mdiPlus } from "@mdi/js";
|
||||
@ -25,6 +24,7 @@ import { nextRender } from "../../../common/util/render-status";
|
||||
import "../../../components/ha-button-menu";
|
||||
import "../../../components/ha-checkbox";
|
||||
import "../../../components/ha-fab";
|
||||
import "../../../components/ha-icon-button";
|
||||
import "../../../components/ha-svg-icon";
|
||||
import { isComponentLoaded } from "../../../common/config/is_component_loaded";
|
||||
import { ConfigEntry, getConfigEntries } from "../../../data/config_entries";
|
||||
@ -290,13 +290,12 @@ class HaConfigIntegrations extends SubscribeMixin(LitElement) {
|
||||
slot=${ifDefined(this.narrow ? "toolbar-icon" : undefined)}
|
||||
@action=${this._handleMenuAction}
|
||||
>
|
||||
<mwc-icon-button
|
||||
.title=${this.hass.localize("ui.common.menu")}
|
||||
.label=${this.hass.localize("ui.common.overflow_menu")}
|
||||
<ha-icon-button
|
||||
slot="trigger"
|
||||
.label=${this.hass.localize("ui.common.menu")}
|
||||
.path=${mdiFilterVariant}
|
||||
>
|
||||
<ha-svg-icon .path=${mdiFilterVariant}></ha-svg-icon>
|
||||
</mwc-icon-button>
|
||||
</ha-icon-button>
|
||||
<mwc-list-item graphic="control" .selected=${this._showIgnored}>
|
||||
<ha-checkbox slot="graphic" .checked=${this._showIgnored}></ha-checkbox>
|
||||
${this.hass.localize(
|
||||
@ -326,6 +325,7 @@ class HaConfigIntegrations extends SubscribeMixin(LitElement) {
|
||||
? html`
|
||||
<div slot="header">
|
||||
<search-input
|
||||
.hass=${this.hass}
|
||||
.filter=${this._filter}
|
||||
class="header"
|
||||
no-label-float
|
||||
@ -341,6 +341,7 @@ class HaConfigIntegrations extends SubscribeMixin(LitElement) {
|
||||
: html`
|
||||
<div class="search">
|
||||
<search-input
|
||||
.hass=${this.hass}
|
||||
no-label-float
|
||||
no-underline
|
||||
.filter=${this._filter}
|
||||
|
||||
@ -1,7 +1,12 @@
|
||||
import "@material/mwc-button";
|
||||
import "@material/mwc-list/mwc-list-item";
|
||||
import type { RequestSelectedDetail } from "@material/mwc-list/mwc-list-item";
|
||||
import { mdiAlertCircle, mdiDotsVertical, mdiOpenInNew } from "@mdi/js";
|
||||
import {
|
||||
mdiAlertCircle,
|
||||
mdiChevronLeft,
|
||||
mdiDotsVertical,
|
||||
mdiOpenInNew,
|
||||
} from "@mdi/js";
|
||||
import "@polymer/paper-item";
|
||||
import "@polymer/paper-listbox";
|
||||
import "@polymer/paper-tooltip/paper-tooltip";
|
||||
@ -12,6 +17,7 @@ import { fireEvent } from "../../../common/dom/fire_event";
|
||||
import { shouldHandleRequestSelectedEvent } from "../../../common/mwc/handle-request-selected-event";
|
||||
import "../../../components/ha-button-menu";
|
||||
import "../../../components/ha-card";
|
||||
import "../../../components/ha-icon-button";
|
||||
import "../../../components/ha-icon-next";
|
||||
import "../../../components/ha-svg-icon";
|
||||
import {
|
||||
@ -112,8 +118,9 @@ export class HaIntegrationCard extends LitElement {
|
||||
? html`
|
||||
<div class="back-btn" slot="above-header">
|
||||
<ha-icon-button
|
||||
icon="hass:chevron-left"
|
||||
.path=${mdiChevronLeft}
|
||||
@click=${this._back}
|
||||
.label=${this.hass.localize("ui.common.back")}
|
||||
></ha-icon-button>
|
||||
</div>
|
||||
`
|
||||
@ -291,13 +298,11 @@ export class HaIntegrationCard extends LitElement {
|
||||
: ""}
|
||||
</div>
|
||||
<ha-button-menu corner="BOTTOM_START">
|
||||
<mwc-icon-button
|
||||
.title=${this.hass.localize("ui.common.menu")}
|
||||
.label=${this.hass.localize("ui.common.overflow_menu")}
|
||||
<ha-icon-button
|
||||
slot="trigger"
|
||||
>
|
||||
<ha-svg-icon .path=${mdiDotsVertical}></ha-svg-icon>
|
||||
</mwc-icon-button>
|
||||
.label=${this.hass.localize("ui.common.menu")}
|
||||
.path=${mdiDotsVertical}
|
||||
></ha-icon-button>
|
||||
<mwc-list-item @request-selected=${this._handleRename}>
|
||||
${this.hass.localize(
|
||||
"ui.panel.config.integrations.config_entry.rename"
|
||||
|
||||
@ -101,6 +101,7 @@ class DialogZHADeviceChildren extends LitElement {
|
||||
active
|
||||
></ha-circular-progress>`
|
||||
: html`<ha-data-table
|
||||
.hass=${this.hass}
|
||||
.columns=${this._columns}
|
||||
.data=${this._deviceChildren(this._device, this._devices)}
|
||||
auto-height
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
import "@material/mwc-button";
|
||||
import { mdiHelpCircle } from "@mdi/js";
|
||||
import "@polymer/paper-dropdown-menu/paper-dropdown-menu";
|
||||
import "@polymer/paper-input/paper-input";
|
||||
import "@polymer/paper-item/paper-item";
|
||||
@ -78,7 +79,8 @@ export class ZHAClusterAttributes extends LitElement {
|
||||
<ha-icon-button
|
||||
class="toggle-help-icon"
|
||||
@click=${this._onHelpTap}
|
||||
icon="hass:help-circle"
|
||||
.path=${mdiHelpCircle}
|
||||
.label=${this.hass!.localize("ui.common.help")}
|
||||
>
|
||||
</ha-icon-button>
|
||||
</div>
|
||||
|
||||
@ -1,3 +1,4 @@
|
||||
import { mdiHelpCircle } from "@mdi/js";
|
||||
import "@polymer/paper-dropdown-menu/paper-dropdown-menu";
|
||||
import "@polymer/paper-input/paper-input";
|
||||
import "@polymer/paper-item/paper-item";
|
||||
@ -72,7 +73,8 @@ export class ZHAClusterCommands extends LitElement {
|
||||
<ha-icon-button
|
||||
class="toggle-help-icon"
|
||||
@click=${this._onHelpTap}
|
||||
icon="hass:help-circle"
|
||||
.path=${mdiHelpCircle}
|
||||
.label=${this.hass!.localize("ui.common.help")}
|
||||
>
|
||||
</ha-icon-button>
|
||||
</div>
|
||||
|
||||
@ -76,6 +76,7 @@ export class ZHAClustersDataTable extends LitElement {
|
||||
protected render(): TemplateResult {
|
||||
return html`
|
||||
<ha-data-table
|
||||
.hass=${this.hass}
|
||||
.columns=${this._columns(this.narrow)}
|
||||
.data=${this._clusters(this.clusters)}
|
||||
.id=${"cluster_id"}
|
||||
|
||||
@ -1,3 +1,4 @@
|
||||
import { mdiHelpCircle } from "@mdi/js";
|
||||
import "@polymer/paper-dropdown-menu/paper-dropdown-menu";
|
||||
import "@polymer/paper-item/paper-item";
|
||||
import "@polymer/paper-listbox/paper-listbox";
|
||||
@ -67,7 +68,8 @@ export class ZHAClusters extends LitElement {
|
||||
<ha-icon-button
|
||||
class="toggle-help-icon"
|
||||
@click=${this._onHelpTap}
|
||||
icon="hass:help-circle"
|
||||
.path=${mdiHelpCircle}
|
||||
.label=${this.hass!.localize("ui.common.help")}
|
||||
>
|
||||
</ha-icon-button>
|
||||
</div>
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
import "@material/mwc-button/mwc-button";
|
||||
import { mdiHelpCircle } from "@mdi/js";
|
||||
import "@polymer/paper-dropdown-menu/paper-dropdown-menu";
|
||||
import "@polymer/paper-item/paper-item";
|
||||
import "@polymer/paper-listbox/paper-listbox";
|
||||
@ -52,7 +53,8 @@ export class ZHADeviceBindingControl extends LitElement {
|
||||
<ha-icon-button
|
||||
class="toggle-help-icon"
|
||||
@click=${this._onHelpTap}
|
||||
icon="hass:help-circle"
|
||||
.path=${mdiHelpCircle}
|
||||
.label=${this.hass!.localize("ui.common.help")}
|
||||
>
|
||||
</ha-icon-button>
|
||||
</div>
|
||||
|
||||
@ -137,6 +137,7 @@ export class ZHADeviceEndpointDataTable extends LitElement {
|
||||
protected render(): TemplateResult {
|
||||
return html`
|
||||
<ha-data-table
|
||||
.hass=${this.hass}
|
||||
.columns=${this._columns(this.narrow)}
|
||||
.data=${this._deviceEndpoints(this.deviceEndpoints)}
|
||||
.selectable=${this.selectable}
|
||||
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
x
Reference in New Issue
Block a user