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}
|
||||
|
||||
@ -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";
|
||||
@ -81,7 +82,8 @@ export class ZHAGroupBindingControl 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";
|
||||
import { mdiDelete } from "@mdi/js";
|
||||
import { css, CSSResultGroup, html, LitElement, PropertyValues } from "lit";
|
||||
import { customElement, property, state, query } from "lit/decorators";
|
||||
import { HASSDomEvent } from "../../../../../common/dom/fire_event";
|
||||
@ -101,8 +102,9 @@ export class ZHAGroupPage extends LitElement {
|
||||
>
|
||||
<ha-icon-button
|
||||
slot="toolbar-icon"
|
||||
icon="hass:delete"
|
||||
.path=${mdiDelete}
|
||||
@click=${this._deleteGroup}
|
||||
.label=${this.hass.localize("ui.panel.config.zha.groups.delete")}
|
||||
></ha-icon-button>
|
||||
<ha-config-section .isWide=${this.isWide}>
|
||||
<div class="header">
|
||||
|
||||
@ -14,7 +14,6 @@ import "../../../../../components/ha-button-menu";
|
||||
import "../../../../../components/ha-checkbox";
|
||||
import type { HaCheckbox } from "../../../../../components/ha-checkbox";
|
||||
import "../../../../../components/ha-formfield";
|
||||
import "../../../../../components/ha-svg-icon";
|
||||
import { DeviceRegistryEntry } from "../../../../../data/device_registry";
|
||||
import {
|
||||
fetchDevices,
|
||||
@ -142,6 +141,7 @@ export class ZHANetworkVisualizationPage extends LitElement {
|
||||
? html`
|
||||
<div slot="header">
|
||||
<search-input
|
||||
.hass=${this.hass}
|
||||
no-label-float
|
||||
no-underline
|
||||
class="header"
|
||||
@ -158,6 +158,7 @@ export class ZHANetworkVisualizationPage extends LitElement {
|
||||
<div class="header">
|
||||
${!this.narrow
|
||||
? html`<search-input
|
||||
.hass=${this.hass}
|
||||
no-label-float
|
||||
no-underline
|
||||
@value-changed=${this._handleSearchChange}
|
||||
|
||||
@ -13,6 +13,7 @@ import { computeStateName } from "../../../../../common/entity/compute_state_nam
|
||||
import { sortStatesByName } from "../../../../../common/entity/states_sort_by_name";
|
||||
import "../../../../../components/buttons/ha-call-service-button";
|
||||
import "../../../../../components/ha-card";
|
||||
import "../../../../../components/ha-icon";
|
||||
import "../../../../../components/ha-icon-button";
|
||||
import "../../../../../components/ha-icon-button-arrow-prev";
|
||||
import "../../../../../components/ha-menu-button";
|
||||
@ -129,11 +130,9 @@ class HaConfigZwave extends LocalizeMixin(EventsMixin(PolymerElement)) {
|
||||
<span
|
||||
>[[localize('ui.panel.config.zwave.node_management.header')]]</span
|
||||
>
|
||||
<ha-icon-button
|
||||
class="toggle-help-icon"
|
||||
on-click="toggleHelp"
|
||||
icon="hass:help-circle"
|
||||
></ha-icon-button>
|
||||
<ha-icon-button class="toggle-help-icon" on-click="toggleHelp">
|
||||
<ha-icon icon="hass:help-circle"></ha-icon>
|
||||
</ha-icon-button>
|
||||
</div>
|
||||
<span slot="introduction">
|
||||
[[localize('ui.panel.config.zwave.node_management.introduction')]]
|
||||
|
||||
@ -1,3 +1,4 @@
|
||||
import { mdiHelpCircle } from "@mdi/js";
|
||||
import { UnsubscribeFunc } from "home-assistant-js-websocket";
|
||||
import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
|
||||
import { customElement, property, state } from "lit/decorators";
|
||||
@ -55,7 +56,8 @@ export class ZwaveNetwork 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>
|
||||
<div slot="introduction">
|
||||
|
||||
@ -1,10 +1,10 @@
|
||||
import "@material/mwc-button/mwc-button";
|
||||
import "@material/mwc-icon-button/mwc-icon-button";
|
||||
import { mdiAlertCircle, mdiCheckCircle, mdiCircle, mdiRefresh } from "@mdi/js";
|
||||
import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
|
||||
import { customElement, property, state } from "lit/decorators";
|
||||
import { classMap } from "lit/directives/class-map";
|
||||
import "../../../../../components/ha-card";
|
||||
import "../../../../../components/ha-icon-button";
|
||||
import "../../../../../components/ha-icon-next";
|
||||
import "../../../../../components/ha-svg-icon";
|
||||
import { getSignedPath } from "../../../../../data/auth";
|
||||
@ -83,9 +83,12 @@ class ZWaveJSConfigDashboard extends LitElement {
|
||||
.route=${this.route}
|
||||
.tabs=${configTabs}
|
||||
>
|
||||
<mwc-icon-button slot="toolbar-icon" @click=${this._fetchData}>
|
||||
<ha-svg-icon .path=${mdiRefresh}></ha-svg-icon>
|
||||
</mwc-icon-button>
|
||||
<ha-icon-button
|
||||
slot="toolbar-icon"
|
||||
@click=${this._fetchData}
|
||||
.path=${mdiRefresh}
|
||||
.label=${this.hass!.localize("ui.common.refresh")}
|
||||
></ha-icon-button>
|
||||
<ha-config-section .narrow=${this.narrow} .isWide=${this.isWide}>
|
||||
<div slot="header">
|
||||
${this.hass.localize("ui.panel.config.zwave_js.dashboard.header")}
|
||||
|
||||
@ -1,9 +1,11 @@
|
||||
import { mdiDownload } from "@mdi/js";
|
||||
import "@polymer/paper-dropdown-menu/paper-dropdown-menu";
|
||||
import "@polymer/paper-listbox/paper-listbox";
|
||||
import { mdiDownload } from "@mdi/js";
|
||||
import { UnsubscribeFunc } from "home-assistant-js-websocket";
|
||||
import { css, CSSResultArray, html, LitElement } from "lit";
|
||||
import { customElement, property, state, query } from "lit/decorators";
|
||||
import { customElement, property, query, state } from "lit/decorators";
|
||||
import { capitalizeFirstLetter } from "../../../../../common/string/capitalize-first-letter";
|
||||
import "../../../../../components/ha-icon-button";
|
||||
import {
|
||||
fetchZWaveJSLogConfig,
|
||||
setZWaveJSLogLevel,
|
||||
@ -16,7 +18,6 @@ import { haStyle } from "../../../../../resources/styles";
|
||||
import { HomeAssistant, Route } from "../../../../../types";
|
||||
import { fileDownload } from "../../../../../util/file_download";
|
||||
import { configTabs } from "./zwave_js-config-router";
|
||||
import { capitalizeFirstLetter } from "../../../../../common/string/capitalize-first-letter";
|
||||
|
||||
@customElement("zwave_js-logs")
|
||||
class ZWaveJSLogs extends SubscribeMixin(LitElement) {
|
||||
@ -99,14 +100,13 @@ class ZWaveJSLogs extends SubscribeMixin(LitElement) {
|
||||
`
|
||||
: ""}
|
||||
</div>
|
||||
<mwc-icon-button
|
||||
<ha-icon-button
|
||||
.label=${this.hass.localize(
|
||||
"ui.panel.config.zwave_js.logs.download_logs"
|
||||
)}
|
||||
@click=${this._downloadLogs}
|
||||
>
|
||||
<ha-svg-icon .path=${mdiDownload}></ha-svg-icon>
|
||||
</mwc-icon-button>
|
||||
.path=${mdiDownload}
|
||||
></ha-icon-button>
|
||||
</ha-card>
|
||||
<textarea readonly></textarea>
|
||||
</div>
|
||||
|
||||
@ -1,5 +1,4 @@
|
||||
import "@material/mwc-button/mwc-button";
|
||||
import "@material/mwc-icon-button/mwc-icon-button";
|
||||
import {
|
||||
mdiCheckCircle,
|
||||
mdiCircle,
|
||||
|
||||
@ -1,4 +1,3 @@
|
||||
import "@material/mwc-icon-button/mwc-icon-button";
|
||||
import { mdiClose, mdiContentCopy, mdiPackageVariant } from "@mdi/js";
|
||||
import "@polymer/paper-tooltip/paper-tooltip";
|
||||
import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
|
||||
@ -7,6 +6,7 @@ import { fireEvent } from "../../../common/dom/fire_event";
|
||||
import { copyToClipboard } from "../../../common/util/copy-clipboard";
|
||||
import "../../../components/ha-dialog";
|
||||
import "../../../components/ha-header-bar";
|
||||
import "../../../components/ha-icon-button";
|
||||
import "../../../components/ha-svg-icon";
|
||||
import {
|
||||
domainToName,
|
||||
@ -64,15 +64,18 @@ class DialogSystemLogDetail extends LitElement {
|
||||
const showDocumentation =
|
||||
this._manifest &&
|
||||
(this._manifest.is_built_in ||
|
||||
// Custom components with our offical docs should not link to our docs
|
||||
// Custom components with our official docs should not link to our docs
|
||||
!this._manifest.documentation.includes("://www.home-assistant.io"));
|
||||
|
||||
return html`
|
||||
<ha-dialog open @closed=${this.closeDialog} hideActions .heading=${true}>
|
||||
<ha-header-bar slot="heading">
|
||||
<mwc-icon-button slot="navigationIcon" dialogAction="cancel">
|
||||
<ha-svg-icon .path=${mdiClose}></ha-svg-icon>
|
||||
</mwc-icon-button>
|
||||
<ha-icon-button
|
||||
slot="navigationIcon"
|
||||
dialogAction="cancel"
|
||||
.label=${this.hass.localize("ui.common.close")}
|
||||
.path=${mdiClose}
|
||||
></ha-icon-button>
|
||||
<span slot="title">
|
||||
${this.hass.localize(
|
||||
"ui.panel.config.logs.details",
|
||||
@ -84,9 +87,13 @@ class DialogSystemLogDetail extends LitElement {
|
||||
>`
|
||||
)}
|
||||
</span>
|
||||
<mwc-icon-button id="copy" @click=${this._copyLog} slot="actionItems">
|
||||
<ha-svg-icon .path=${mdiContentCopy}></ha-svg-icon>
|
||||
</mwc-icon-button>
|
||||
<ha-icon-button
|
||||
id="copy"
|
||||
@click=${this._copyLog}
|
||||
slot="actionItems"
|
||||
.label=${this.hass.localize("ui.panel.config.logs.copy")}
|
||||
.path=${mdiContentCopy}
|
||||
></ha-icon-button>
|
||||
</ha-header-bar>
|
||||
${this.isCustomIntegration
|
||||
? html`<div class="custom">
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
import "@material/mwc-button";
|
||||
import { mdiRefresh } from "@mdi/js";
|
||||
import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
|
||||
import { property, state } from "lit/decorators";
|
||||
import "../../../components/ha-icon-button";
|
||||
@ -17,8 +18,9 @@ class ErrorLogCard extends LitElement {
|
||||
? html`
|
||||
<ha-card>
|
||||
<ha-icon-button
|
||||
icon="hass:refresh"
|
||||
.path=${mdiRefresh}
|
||||
@click=${this._refreshErrorLog}
|
||||
.label=${this.hass!.localize("ui.common.refresh")}
|
||||
></ha-icon-button>
|
||||
<div class="card-content error-log">${this._errorHTML}</div>
|
||||
</ha-card>
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import { mdiPlus } from "@mdi/js";
|
||||
import { mdiOpenInNew, mdiPlus } from "@mdi/js";
|
||||
import "@polymer/paper-tooltip/paper-tooltip";
|
||||
import { html, LitElement, PropertyValues, TemplateResult } from "lit";
|
||||
import { customElement, property, state } from "lit/decorators";
|
||||
@ -149,9 +149,12 @@ export class HaConfigLovelaceDashboards extends LitElement {
|
||||
narrow
|
||||
? html`
|
||||
<ha-icon-button
|
||||
icon="hass:open-in-new"
|
||||
.path=${mdiOpenInNew}
|
||||
.urlPath=${urlPath}
|
||||
@click=${this._navigate}
|
||||
.label=${this.hass.localize(
|
||||
"ui.panel.config.lovelace.dashboards.picker.open"
|
||||
)}
|
||||
></ha-icon-button>
|
||||
`
|
||||
: html`
|
||||
|
||||
@ -1,4 +1,3 @@
|
||||
import "@material/mwc-icon-button";
|
||||
import {
|
||||
mdiHelpCircle,
|
||||
mdiInformationOutline,
|
||||
@ -19,6 +18,7 @@ import { DataTableColumnContainer } from "../../../components/data-table/ha-data
|
||||
import "../../../components/ha-button-related-filter-menu";
|
||||
import "../../../components/ha-fab";
|
||||
import "../../../components/ha-icon";
|
||||
import "../../../components/ha-icon-button";
|
||||
import "../../../components/ha-svg-icon";
|
||||
import { forwardHaptic } from "../../../data/haptics";
|
||||
import { activateScene, SceneEntity } from "../../../data/scene";
|
||||
@ -72,15 +72,14 @@ class HaSceneDashboard extends LitElement {
|
||||
type: "icon-button",
|
||||
template: (_toggle, scene) =>
|
||||
html`
|
||||
<mwc-icon-button
|
||||
<ha-icon-button
|
||||
.scene=${scene}
|
||||
title=${this.hass.localize(
|
||||
.label=${this.hass.localize(
|
||||
"ui.panel.config.scene.picker.activate_scene"
|
||||
)}
|
||||
.path=${mdiPlay}
|
||||
@click=${this._activateScene}
|
||||
>
|
||||
<ha-svg-icon .path=${mdiPlay}></ha-svg-icon>
|
||||
</mwc-icon-button>
|
||||
></ha-icon-button>
|
||||
`,
|
||||
},
|
||||
icon: {
|
||||
@ -99,15 +98,14 @@ class HaSceneDashboard extends LitElement {
|
||||
title: "",
|
||||
type: "icon-button",
|
||||
template: (_info, scene) => html`
|
||||
<mwc-icon-button
|
||||
<ha-icon-button
|
||||
.scene=${scene}
|
||||
@click=${this._showInfo}
|
||||
title=${this.hass.localize(
|
||||
.label=${this.hass.localize(
|
||||
"ui.panel.config.scene.picker.show_info_scene"
|
||||
)}
|
||||
>
|
||||
<ha-svg-icon .path=${mdiInformationOutline}></ha-svg-icon>
|
||||
</mwc-icon-button>
|
||||
.path=${mdiInformationOutline}
|
||||
></ha-icon-button>
|
||||
`,
|
||||
},
|
||||
edit: {
|
||||
@ -121,16 +119,13 @@ class HaSceneDashboard extends LitElement {
|
||||
: undefined
|
||||
)}
|
||||
>
|
||||
<mwc-icon-button
|
||||
<ha-icon-button
|
||||
.disabled=${!scene.attributes.id}
|
||||
title=${this.hass.localize(
|
||||
.label=${this.hass.localize(
|
||||
"ui.panel.config.scene.picker.edit_scene"
|
||||
)}
|
||||
>
|
||||
<ha-svg-icon
|
||||
.path=${scene.attributes.id ? mdiPencil : mdiPencilOff}
|
||||
></ha-svg-icon>
|
||||
</mwc-icon-button>
|
||||
.path=${scene.attributes.id ? mdiPencil : mdiPencilOff}
|
||||
></ha-icon-button>
|
||||
</a>
|
||||
${!scene.attributes.id
|
||||
? html`
|
||||
@ -164,9 +159,12 @@ class HaSceneDashboard 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"
|
||||
@click=${this._showHelp}
|
||||
.label=${this.hass.localize("ui.common.help")}
|
||||
.path=${mdiHelpCircle}
|
||||
></ha-icon-button>
|
||||
<ha-button-related-filter-menu
|
||||
slot="filter-menu"
|
||||
corner="BOTTOM_START"
|
||||
|
||||
@ -210,12 +210,11 @@ export class HaSceneEditor extends SubscribeMixin(
|
||||
@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
|
||||
.disabled=${!this.sceneId}
|
||||
@ -311,8 +310,8 @@ export class HaSceneEditor extends SubscribeMixin(
|
||||
<h1 class="card-header">
|
||||
${device.name}
|
||||
<ha-icon-button
|
||||
icon="hass:delete"
|
||||
title=${this.hass.localize(
|
||||
.path=${mdiDelete}
|
||||
.label=${this.hass.localize(
|
||||
"ui.panel.config.scene.editor.devices.delete"
|
||||
)}
|
||||
.device=${device.id}
|
||||
@ -402,9 +401,9 @@ export class HaSceneEditor extends SubscribeMixin(
|
||||
${computeStateName(entityStateObj)}
|
||||
</paper-item-body>
|
||||
<ha-icon-button
|
||||
icon="hass:delete"
|
||||
.path=${mdiDelete}
|
||||
.entityId=${entityId}
|
||||
.title=${this.hass.localize(
|
||||
.label=${this.hass.localize(
|
||||
"ui.panel.config.scene.editor.entities.delete"
|
||||
)}
|
||||
@click=${this._deleteEntity}
|
||||
|
||||
@ -96,12 +96,11 @@ export class HaScriptEditor 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,
|
||||
@ -19,6 +18,7 @@ import { computeRTL } from "../../../common/util/compute_rtl";
|
||||
import { DataTableColumnContainer } from "../../../components/data-table/ha-data-table";
|
||||
import "../../../components/ha-button-related-filter-menu";
|
||||
import "../../../components/ha-fab";
|
||||
import "../../../components/ha-icon-button";
|
||||
import "../../../components/ha-svg-icon";
|
||||
import { triggerScript } from "../../../data/script";
|
||||
import { showAlertDialog } from "../../../dialogs/generic/show-dialog-box";
|
||||
@ -74,15 +74,14 @@ class HaScriptPicker extends LitElement {
|
||||
type: "icon-button",
|
||||
template: (_toggle, script) =>
|
||||
html`
|
||||
<mwc-icon-button
|
||||
<ha-icon-button
|
||||
.script=${script}
|
||||
title=${this.hass.localize(
|
||||
.label=${this.hass.localize(
|
||||
"ui.panel.config.script.picker.run_script"
|
||||
)}
|
||||
@click=${this._runScript}
|
||||
>
|
||||
<ha-svg-icon .path=${mdiPlay}></ha-svg-icon>
|
||||
</mwc-icon-button>
|
||||
.path=${mdiPlay}
|
||||
></ha-icon-button>
|
||||
`,
|
||||
},
|
||||
icon: {
|
||||
@ -128,13 +127,14 @@ class HaScriptPicker extends LitElement {
|
||||
title: "",
|
||||
type: "icon-button",
|
||||
template: (_info, script) => html`
|
||||
<mwc-icon-button
|
||||
<ha-icon-button
|
||||
.script=${script}
|
||||
@click=${this._showInfo}
|
||||
title=${this.hass.localize("ui.panel.config.script.picker.show_info")}
|
||||
>
|
||||
<ha-svg-icon .path=${mdiInformationOutline}></ha-svg-icon>
|
||||
</mwc-icon-button>
|
||||
.label=${this.hass.localize(
|
||||
"ui.panel.config.script.picker.show_info"
|
||||
)}
|
||||
.path=${mdiInformationOutline}
|
||||
></ha-icon-button>
|
||||
`,
|
||||
};
|
||||
columns.trace = {
|
||||
@ -142,13 +142,12 @@ class HaScriptPicker extends LitElement {
|
||||
type: "icon-button",
|
||||
template: (_info, script: any) => html`
|
||||
<a href="/config/script/trace/${script.entity_id}">
|
||||
<mwc-icon-button
|
||||
<ha-icon-button
|
||||
.label=${this.hass.localize(
|
||||
"ui.panel.config.script.picker.dev_script"
|
||||
)}
|
||||
>
|
||||
<ha-svg-icon .path=${mdiHistory}></ha-svg-icon>
|
||||
</mwc-icon-button>
|
||||
.path=${mdiHistory}
|
||||
></ha-icon-button>
|
||||
</a>
|
||||
`,
|
||||
};
|
||||
@ -157,13 +156,12 @@ class HaScriptPicker extends LitElement {
|
||||
type: "icon-button",
|
||||
template: (_info, script: any) => html`
|
||||
<a href="/config/script/edit/${script.entity_id}">
|
||||
<mwc-icon-button
|
||||
title=${this.hass.localize(
|
||||
<ha-icon-button
|
||||
.label=${this.hass.localize(
|
||||
"ui.panel.config.script.picker.edit_script"
|
||||
)}
|
||||
>
|
||||
<ha-svg-icon .path=${mdiPencil}></ha-svg-icon>
|
||||
</mwc-icon-button>
|
||||
.path=${mdiPencil}
|
||||
></ha-icon-button>
|
||||
</a>
|
||||
`,
|
||||
};
|
||||
@ -188,9 +186,12 @@ class HaScriptPicker 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 { getLogbookDataForContext, LogbookEntry } from "../../../data/logbook";
|
||||
import { ScriptEntity } from "../../../data/script";
|
||||
import {
|
||||
@ -23,17 +34,7 @@ import {
|
||||
import { showAlertDialog } from "../../../dialogs/generic/show-dialog-box";
|
||||
import { haStyle } from "../../../resources/styles";
|
||||
import { HomeAssistant, Route } from "../../../types";
|
||||
import { traceTabStyles } from "../../../components/trace/trace-tab-styles";
|
||||
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 type {
|
||||
HatScriptGraph,
|
||||
NodeInfo,
|
||||
} from "../../../components/trace/hat-script-graph";
|
||||
|
||||
@customElement("ha-script-trace")
|
||||
export class HaScriptTrace extends LitElement {
|
||||
@ -88,16 +89,17 @@ export class HaScriptTrace 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="Refresh"
|
||||
@click=${this._refreshTraces}
|
||||
.path=${mdiRefresh}
|
||||
></ha-icon-button>
|
||||
<ha-icon-button
|
||||
.disabled=${!this._trace}
|
||||
label="Download Trace"
|
||||
@click=${this._downloadTrace}
|
||||
>
|
||||
<ha-svg-icon .path=${mdiDownload}></ha-svg-icon>
|
||||
</mwc-icon-button>
|
||||
.path=${mdiDownload}
|
||||
></ha-icon-button>
|
||||
`;
|
||||
|
||||
return html`
|
||||
@ -120,23 +122,24 @@ export class HaScriptTrace extends LitElement {
|
||||
class="linkButton"
|
||||
href="/config/script/edit/${this.scriptEntityId}"
|
||||
>
|
||||
<mwc-icon-button label="Edit Script" tabindex="-1">
|
||||
<ha-svg-icon .path=${mdiPencil}></ha-svg-icon>
|
||||
</mwc-icon-button>
|
||||
<ha-icon-button
|
||||
label="Edit Script"
|
||||
tabindex="-1"
|
||||
.path=${mdiPencil}
|
||||
></ha-icon-button>
|
||||
</a>
|
||||
</div>`
|
||||
: ""}
|
||||
${this._traces && this._traces.length > 0
|
||||
? html`
|
||||
<div>
|
||||
<mwc-icon-button
|
||||
<ha-icon-button
|
||||
.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>
|
||||
.path=${mdiRayEndArrow}
|
||||
></ha-icon-button>
|
||||
<select .value=${this._runId} @change=${this._pickTrace}>
|
||||
${repeat(
|
||||
this._traces,
|
||||
@ -150,13 +153,12 @@ export class HaScriptTrace extends LitElement {
|
||||
</option>`
|
||||
)}
|
||||
</select>
|
||||
<mwc-icon-button
|
||||
<ha-icon-button
|
||||
.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>
|
||||
.path=${mdiRayStartArrow}
|
||||
></ha-icon-button>
|
||||
</div>
|
||||
`
|
||||
: ""}
|
||||
|
||||
@ -1,4 +1,3 @@
|
||||
import "@material/mwc-icon-button";
|
||||
import {
|
||||
mdiCog,
|
||||
mdiContentDuplicate,
|
||||
@ -12,6 +11,7 @@ import memoizeOne from "memoize-one";
|
||||
import { DataTableColumnContainer } from "../../../components/data-table/ha-data-table";
|
||||
import "../../../components/ha-card";
|
||||
import "../../../components/ha-fab";
|
||||
import "../../../components/ha-icon-button";
|
||||
import "../../../components/ha-relative-time";
|
||||
import { showAutomationEditor, TagTrigger } from "../../../data/automation";
|
||||
import {
|
||||
@ -107,36 +107,33 @@ export class HaConfigTags extends SubscribeMixin(LitElement) {
|
||||
columns.write = {
|
||||
title: "",
|
||||
type: "icon-button",
|
||||
template: (_write, tag: any) => html` <mwc-icon-button
|
||||
template: (_write, tag: any) => html` <ha-icon-button
|
||||
.tag=${tag}
|
||||
@click=${this._handleWriteClick}
|
||||
title=${this.hass.localize("ui.panel.config.tag.write")}
|
||||
>
|
||||
<ha-svg-icon .path=${mdiContentDuplicate}></ha-svg-icon>
|
||||
</mwc-icon-button>`,
|
||||
.label=${this.hass.localize("ui.panel.config.tag.write")}
|
||||
.path=${mdiContentDuplicate}
|
||||
></ha-icon-button>`,
|
||||
};
|
||||
}
|
||||
columns.automation = {
|
||||
title: "",
|
||||
type: "icon-button",
|
||||
template: (_automation, tag: any) => html` <mwc-icon-button
|
||||
template: (_automation, tag: any) => html` <ha-icon-button
|
||||
.tag=${tag}
|
||||
@click=${this._handleAutomationClick}
|
||||
title=${this.hass.localize("ui.panel.config.tag.create_automation")}
|
||||
>
|
||||
<ha-svg-icon .path=${mdiRobot}></ha-svg-icon>
|
||||
</mwc-icon-button>`,
|
||||
.label=${this.hass.localize("ui.panel.config.tag.create_automation")}
|
||||
.path=${mdiRobot}
|
||||
></ha-icon-button>`,
|
||||
};
|
||||
columns.edit = {
|
||||
title: "",
|
||||
type: "icon-button",
|
||||
template: (_settings, tag: any) => html` <mwc-icon-button
|
||||
template: (_settings, tag: any) => html` <ha-icon-button
|
||||
.tag=${tag}
|
||||
@click=${this._handleEditClick}
|
||||
title=${this.hass.localize("ui.panel.config.tag.edit")}
|
||||
>
|
||||
<ha-svg-icon .path=${mdiCog}></ha-svg-icon>
|
||||
</mwc-icon-button>`,
|
||||
.label=${this.hass.localize("ui.panel.config.tag.edit")}
|
||||
.path=${mdiCog}
|
||||
></ha-icon-button>`,
|
||||
};
|
||||
return columns;
|
||||
}
|
||||
@ -193,9 +190,12 @@ export class HaConfigTags extends SubscribeMixin(LitElement) {
|
||||
.noDataText=${this.hass.localize("ui.panel.config.tag.no_tags")}
|
||||
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"
|
||||
@click=${this._showHelp}
|
||||
.label=${this.hass.localize("ui.common.help")}
|
||||
.path=${mdiHelpCircle}
|
||||
></ha-icon-button>
|
||||
<ha-fab
|
||||
slot="fab"
|
||||
.label=${this.hass.localize("ui.panel.config.tag.add_tag")}
|
||||
|
||||
@ -1,4 +1,3 @@
|
||||
import "@material/mwc-icon-button";
|
||||
import { mdiPencil, mdiPencilOff, mdiPlus } from "@mdi/js";
|
||||
import "@polymer/paper-item/paper-icon-item";
|
||||
import "@polymer/paper-item/paper-item-body";
|
||||
@ -13,7 +12,7 @@ import {
|
||||
PropertyValues,
|
||||
TemplateResult,
|
||||
} from "lit";
|
||||
import { customElement, property, state, query } from "lit/decorators";
|
||||
import { customElement, property, query, state } from "lit/decorators";
|
||||
import { ifDefined } from "lit/directives/if-defined";
|
||||
import memoizeOne from "memoize-one";
|
||||
import { computeStateDomain } from "../../../common/entity/compute_state_domain";
|
||||
@ -21,6 +20,7 @@ import { navigate } from "../../../common/navigate";
|
||||
import { stringCompare } from "../../../common/string/compare";
|
||||
import "../../../components/ha-card";
|
||||
import "../../../components/ha-fab";
|
||||
import "../../../components/ha-icon-button";
|
||||
import "../../../components/ha-svg-icon";
|
||||
import "../../../components/map/ha-locations-editor";
|
||||
import type {
|
||||
@ -124,7 +124,7 @@ export class HaConfigZone extends SubscribeMixin(LitElement) {
|
||||
this._storageItems === undefined ||
|
||||
this._stateItems === undefined
|
||||
) {
|
||||
return html` <hass-loading-screen></hass-loading-screen> `;
|
||||
return html`<hass-loading-screen></hass-loading-screen>`;
|
||||
}
|
||||
const hass = this.hass;
|
||||
const listBox =
|
||||
@ -151,15 +151,17 @@ export class HaConfigZone extends SubscribeMixin(LitElement) {
|
||||
.entry=${entry}
|
||||
>
|
||||
<ha-icon .icon=${entry.icon} slot="item-icon"></ha-icon>
|
||||
<paper-item-body> ${entry.name} </paper-item-body>
|
||||
<paper-item-body>${entry.name}</paper-item-body>
|
||||
${!this.narrow
|
||||
? html`
|
||||
<mwc-icon-button
|
||||
<ha-icon-button
|
||||
.entry=${entry}
|
||||
@click=${this._openEditEntry}
|
||||
>
|
||||
<ha-svg-icon .path=${mdiPencil}></ha-svg-icon>
|
||||
</mwc-icon-button>
|
||||
.path=${mdiPencil}
|
||||
.label=${hass.localize(
|
||||
"ui.panel.config.zone.edit_zone"
|
||||
)}
|
||||
></ha-icon-button>
|
||||
`
|
||||
: ""}
|
||||
</paper-icon-item>
|
||||
@ -181,7 +183,7 @@ export class HaConfigZone extends SubscribeMixin(LitElement) {
|
||||
stateObject.entity_id}
|
||||
</paper-item-body>
|
||||
<div style="display:inline-block">
|
||||
<mwc-icon-button
|
||||
<ha-icon-button
|
||||
.entityId=${stateObject.entity_id}
|
||||
@click=${this._openCoreConfig}
|
||||
disabled=${ifDefined(
|
||||
@ -191,25 +193,25 @@ export class HaConfigZone extends SubscribeMixin(LitElement) {
|
||||
? undefined
|
||||
: true
|
||||
)}
|
||||
>
|
||||
<ha-svg-icon
|
||||
.path=${stateObject.entity_id === "zone.home" &&
|
||||
this.narrow &&
|
||||
this._canEditCore
|
||||
? mdiPencil
|
||||
: mdiPencilOff}
|
||||
></ha-svg-icon>
|
||||
</mwc-icon-button>
|
||||
.path=${stateObject.entity_id === "zone.home" &&
|
||||
this.narrow &&
|
||||
this._canEditCore
|
||||
? mdiPencil
|
||||
: mdiPencilOff}
|
||||
.label=${hass.localize(
|
||||
"ui.panel.config.zone.edit_zone"
|
||||
)}
|
||||
></ha-icon-button>
|
||||
<paper-tooltip animation-delay="0" position="left">
|
||||
${stateObject.entity_id === "zone.home"
|
||||
? this.hass.localize(
|
||||
? hass.localize(
|
||||
`ui.panel.config.zone.${
|
||||
this.narrow
|
||||
? "edit_home_zone_narrow"
|
||||
: "edit_home_zone"
|
||||
}`
|
||||
)
|
||||
: this.hass.localize(
|
||||
: hass.localize(
|
||||
"ui.panel.config.zone.configured_in_yaml"
|
||||
)}
|
||||
</paper-tooltip>
|
||||
@ -488,10 +490,10 @@ export class HaConfigZone extends SubscribeMixin(LitElement) {
|
||||
overflow: hidden;
|
||||
}
|
||||
ha-icon,
|
||||
mwc-icon-button:not([disabled]) {
|
||||
ha-icon-button:not([disabled]) {
|
||||
color: var(--secondary-text-color);
|
||||
}
|
||||
mwc-icon-button {
|
||||
ha-icon-button {
|
||||
--mdc-theme-text-disabled-on-light: var(--disabled-text-color);
|
||||
}
|
||||
.empty {
|
||||
@ -520,6 +522,7 @@ export class HaConfigZone extends SubscribeMixin(LitElement) {
|
||||
paper-icon-item {
|
||||
padding-top: 4px;
|
||||
padding-bottom: 4px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.overflow paper-icon-item:last-child {
|
||||
margin-bottom: 80px;
|
||||
|
||||
@ -14,6 +14,7 @@ import { HaProgressButton } from "../../../components/buttons/ha-progress-button
|
||||
import "../../../components/entity/ha-entity-picker";
|
||||
import "../../../components/ha-card";
|
||||
import "../../../components/ha-expansion-panel";
|
||||
import "../../../components/ha-icon-button";
|
||||
import "../../../components/ha-service-control";
|
||||
import "../../../components/ha-service-picker";
|
||||
import "../../../components/ha-yaml-editor";
|
||||
@ -185,12 +186,11 @@ class HaPanelDevService 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
|
||||
class="help-icon"
|
||||
.path=${mdiHelpCircle}
|
||||
.label=${this.hass!.localize("ui.common.help")}
|
||||
></ha-icon-button>
|
||||
</a>`
|
||||
: ""}
|
||||
</div>`
|
||||
|
||||
@ -16,6 +16,7 @@ import { escapeRegExp } from "../../../common/string/escape_regexp";
|
||||
import { copyToClipboard } from "../../../common/util/copy-clipboard";
|
||||
import "../../../components/entity/ha-entity-picker";
|
||||
import "../../../components/ha-code-editor";
|
||||
import "../../../components/ha-icon-button";
|
||||
import "../../../components/ha-svg-icon";
|
||||
import { showAlertDialog } from "../../../dialogs/generic/show-dialog-box";
|
||||
import { EventsMixin } from "../../../mixins/events-mixin";
|
||||
@ -165,11 +166,11 @@ class HaPanelDevState extends EventsMixin(LocalizeMixin(PolymerElement)) {
|
||||
raised
|
||||
>[[localize('ui.panel.developer-tools.tabs.states.set_state')]]</mwc-button
|
||||
>
|
||||
<mwc-icon-button
|
||||
<ha-icon-button
|
||||
on-click="entityIdChanged"
|
||||
label="[[localize('ui.common.refresh')]]"
|
||||
><ha-svg-icon path="[[refreshIcon()]]"></ha-svg-icon
|
||||
></mwc-icon-button>
|
||||
path="[[refreshIcon()]]"
|
||||
></ha-icon-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="info">
|
||||
|
||||
@ -122,7 +122,7 @@ class PanelEnergy extends LitElement {
|
||||
return [
|
||||
haStyle,
|
||||
css`
|
||||
mwc-icon-button {
|
||||
ha-icon-button {
|
||||
color: var(--text-primary-color);
|
||||
}
|
||||
app-toolbar {
|
||||
|
||||
@ -18,6 +18,7 @@ import "../../components/entity/ha-entity-picker";
|
||||
import "../../components/ha-circular-progress";
|
||||
import "../../components/ha-date-range-picker";
|
||||
import type { DateRangePickerRanges } from "../../components/ha-date-range-picker";
|
||||
import "../../components/ha-icon-button";
|
||||
import "../../components/ha-menu-button";
|
||||
import { computeHistory, fetchDate } from "../../data/history";
|
||||
import "../../layouts/ha-app-layout";
|
||||
@ -65,12 +66,12 @@ class HaPanelHistory extends LitElement {
|
||||
.narrow=${this.narrow}
|
||||
></ha-menu-button>
|
||||
<div main-title>${this.hass.localize("panel.history")}</div>
|
||||
<mwc-icon-button
|
||||
<ha-icon-button
|
||||
@click=${this._refreshHistory}
|
||||
.disabled=${this._isLoading}
|
||||
>
|
||||
<ha-svg-icon .path=${mdiRefresh}></ha-svg-icon>
|
||||
</mwc-icon-button>
|
||||
.path=${mdiRefresh}
|
||||
.label=${this.hass.localize("ui.common.refresh")}
|
||||
></ha-icon-button>
|
||||
</app-toolbar>
|
||||
</app-header>
|
||||
|
||||
|
||||
@ -1,5 +1,4 @@
|
||||
import { mdiRefresh } from "@mdi/js";
|
||||
import "@material/mwc-icon-button";
|
||||
import "@polymer/app-layout/app-header/app-header";
|
||||
import "@polymer/app-layout/app-toolbar/app-toolbar";
|
||||
import { css, html, LitElement, PropertyValues } from "lit";
|
||||
@ -20,6 +19,7 @@ import "../../components/entity/ha-entity-picker";
|
||||
import "../../components/ha-circular-progress";
|
||||
import "../../components/ha-date-range-picker";
|
||||
import type { DateRangePickerRanges } from "../../components/ha-date-range-picker";
|
||||
import "../../components/ha-icon-button";
|
||||
import "../../components/ha-menu-button";
|
||||
import {
|
||||
clearLogbookCache,
|
||||
@ -82,12 +82,12 @@ export class HaPanelLogbook extends LitElement {
|
||||
.narrow=${this.narrow}
|
||||
></ha-menu-button>
|
||||
<div main-title>${this.hass.localize("panel.logbook")}</div>
|
||||
<mwc-icon-button
|
||||
<ha-icon-button
|
||||
@click=${this._refreshLogbook}
|
||||
.path=${mdiRefresh}
|
||||
.label=${this.hass!.localize("ui.common.refresh")}
|
||||
.disabled=${this._isLoading}
|
||||
>
|
||||
<ha-svg-icon .path=${mdiRefresh}></ha-svg-icon>
|
||||
</mwc-icon-button>
|
||||
></ha-icon-button>
|
||||
</app-toolbar>
|
||||
</app-header>
|
||||
|
||||
|
||||
@ -1,3 +1,4 @@
|
||||
import { mdiDotsVertical } from "@mdi/js";
|
||||
import "@thomasloven/round-slider";
|
||||
import { HassEntity } from "home-assistant-js-websocket";
|
||||
import {
|
||||
@ -158,7 +159,7 @@ export class HuiHumidifierCard extends LitElement implements LovelaceCard {
|
||||
return html`
|
||||
<ha-card>
|
||||
<ha-icon-button
|
||||
icon="hass:dots-vertical"
|
||||
.path=${mdiDotsVertical}
|
||||
class="more-info"
|
||||
@click=${this._handleMoreInfo}
|
||||
tabindex="0"
|
||||
|
||||
@ -17,6 +17,7 @@ import { computeStateDisplay } from "../../../common/entity/compute_state_displa
|
||||
import { computeStateName } from "../../../common/entity/compute_state_name";
|
||||
import { stateIcon } from "../../../common/entity/state_icon";
|
||||
import "../../../components/ha-card";
|
||||
import "../../../components/ha-icon";
|
||||
import "../../../components/ha-icon-button";
|
||||
import { UNAVAILABLE, UNAVAILABLE_STATES } from "../../../data/entity";
|
||||
import { LightEntity, lightSupportsDimming } from "../../../data/light";
|
||||
@ -100,14 +101,15 @@ export class HuiLightCard extends LitElement implements LovelaceCard {
|
||||
|
||||
return html`
|
||||
<ha-card>
|
||||
<mwc-icon-button
|
||||
<ha-icon-button
|
||||
class="more-info"
|
||||
label="Open more info"
|
||||
.label=${this.hass!.localize(
|
||||
"ui.panel.lovelace.cards.show_more_info"
|
||||
)}
|
||||
.path=${mdiDotsVertical}
|
||||
@click=${this._handleMoreInfo}
|
||||
tabindex="0"
|
||||
>
|
||||
<ha-svg-icon .path=${mdiDotsVertical}></ha-svg-icon>
|
||||
</mwc-icon-button>
|
||||
></ha-icon-button>
|
||||
|
||||
<div class="content">
|
||||
<div id="controls">
|
||||
@ -131,7 +133,6 @@ export class HuiLightCard extends LitElement implements LovelaceCard {
|
||||
"state-on": stateObj.state === "on",
|
||||
"state-unavailable": stateObj.state === UNAVAILABLE,
|
||||
})}"
|
||||
.icon=${this._config.icon || stateIcon(stateObj)}
|
||||
.disabled=${UNAVAILABLE_STATES.includes(stateObj.state)}
|
||||
style=${styleMap({
|
||||
filter: this._computeBrightness(stateObj),
|
||||
@ -143,7 +144,11 @@ export class HuiLightCard extends LitElement implements LovelaceCard {
|
||||
hasDoubleClick: hasAction(this._config!.double_tap_action),
|
||||
})}
|
||||
tabindex="0"
|
||||
></ha-icon-button>
|
||||
>
|
||||
<ha-icon
|
||||
.icon=${this._config.icon || stateIcon(stateObj)}
|
||||
></ha-icon>
|
||||
</ha-icon-button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
@ -137,13 +137,14 @@ class HuiMapCard extends LitElement implements LovelaceCard {
|
||||
.paths=${this._getHistoryPaths(this._config, this._history)}
|
||||
.darkMode=${this._config.dark_mode}
|
||||
></ha-map>
|
||||
<mwc-icon-button
|
||||
<ha-icon-button
|
||||
.label=${this.hass!.localize(
|
||||
"ui.panel.lovelace.cards.map.reset_focus"
|
||||
)}
|
||||
.path=${mdiImageFilterCenterFocus}
|
||||
@click=${this._fitMap}
|
||||
tabindex="0"
|
||||
title="Reset focus"
|
||||
>
|
||||
<ha-svg-icon .path=${mdiImageFilterCenterFocus}></ha-svg-icon>
|
||||
</mwc-icon-button>
|
||||
></ha-icon-button>
|
||||
</div>
|
||||
</ha-card>
|
||||
`;
|
||||
@ -365,7 +366,7 @@ class HuiMapCard extends LitElement implements LovelaceCard {
|
||||
background: inherit;
|
||||
}
|
||||
|
||||
mwc-icon-button {
|
||||
ha-icon-button {
|
||||
position: absolute;
|
||||
top: 75px;
|
||||
left: 3px;
|
||||
|
||||
@ -1,5 +1,4 @@
|
||||
import "@material/mwc-icon-button";
|
||||
import { mdiPlayBoxMultiple } from "@mdi/js";
|
||||
import { mdiDotsVertical, mdiPlayBoxMultiple } from "@mdi/js";
|
||||
import "@polymer/paper-progress/paper-progress";
|
||||
import type { PaperProgressElement } from "@polymer/paper-progress/paper-progress";
|
||||
import {
|
||||
@ -23,7 +22,6 @@ import { debounce } from "../../../common/util/debounce";
|
||||
import "../../../components/ha-card";
|
||||
import "../../../components/ha-icon";
|
||||
import "../../../components/ha-icon-button";
|
||||
import "../../../components/ha-svg-icon";
|
||||
import { showMediaBrowserDialog } from "../../../components/media-player/show-media-browser-dialog";
|
||||
import { UNAVAILABLE_STATES } from "../../../data/entity";
|
||||
import {
|
||||
@ -237,7 +235,7 @@ export class HuiMediaControlCard extends LitElement implements LovelaceCard {
|
||||
</div>
|
||||
<div>
|
||||
<ha-icon-button
|
||||
icon="hass:dots-vertical"
|
||||
.path=${mdiDotsVertical}
|
||||
class="more-info"
|
||||
@click=${this._handleMoreInfo}
|
||||
></ha-icon-button>
|
||||
@ -271,27 +269,26 @@ export class HuiMediaControlCard extends LitElement implements LovelaceCard {
|
||||
${controls!.map(
|
||||
(control) => html`
|
||||
<ha-icon-button
|
||||
.title=${this.hass.localize(
|
||||
.label=${this.hass.localize(
|
||||
`ui.card.media_player.${control.action}`
|
||||
)}
|
||||
.icon=${control.icon}
|
||||
action=${control.action}
|
||||
@click=${this._handleClick}
|
||||
></ha-icon-button>
|
||||
>
|
||||
<ha-icon .icon=${control.icon}></ha-icon>
|
||||
</ha-icon-button>
|
||||
`
|
||||
)}
|
||||
${supportsFeature(stateObj, SUPPORT_BROWSE_MEDIA)
|
||||
? html`
|
||||
<mwc-icon-button
|
||||
<ha-icon-button
|
||||
class="browse-media"
|
||||
.title=${this.hass.localize(
|
||||
.label=${this.hass.localize(
|
||||
"ui.card.media_player.browse_media"
|
||||
)}
|
||||
.path=${mdiPlayBoxMultiple}
|
||||
@click=${this._handleBrowseMedia}
|
||||
><ha-svg-icon
|
||||
.path=${mdiPlayBoxMultiple}
|
||||
></ha-svg-icon
|
||||
></mwc-icon-button>
|
||||
></ha-icon-button>
|
||||
`
|
||||
: ""}
|
||||
</div>
|
||||
@ -692,7 +689,7 @@ export class HuiMediaControlCard extends LitElement implements LovelaceCard {
|
||||
--mdc-icon-size: 40px;
|
||||
}
|
||||
|
||||
mwc-icon-button.browse-media {
|
||||
ha-icon-button.browse-media {
|
||||
position: absolute;
|
||||
right: 4px;
|
||||
--mdc-icon-size: 24px;
|
||||
|
||||
@ -16,6 +16,7 @@ import { computeStateDisplay } from "../../../common/entity/compute_state_displa
|
||||
import { computeStateName } from "../../../common/entity/compute_state_name";
|
||||
import { stateIcon } from "../../../common/entity/state_icon";
|
||||
import "../../../components/ha-card";
|
||||
import "../../../components/ha-icon";
|
||||
import "../../../components/ha-icon-button";
|
||||
import { ActionHandlerEvent } from "../../../data/lovelace";
|
||||
import { HomeAssistant } from "../../../types";
|
||||
@ -252,13 +253,14 @@ class HuiPictureGlanceCard extends LitElement implements LovelaceCard {
|
||||
class=${classMap({
|
||||
"state-on": !STATES_OFF.has(stateObj.state),
|
||||
})}
|
||||
.icon=${entityConf.icon || stateIcon(stateObj)}
|
||||
title=${`${computeStateName(stateObj)} : ${computeStateDisplay(
|
||||
.label=${`${computeStateName(stateObj)} : ${computeStateDisplay(
|
||||
this.hass!.localize,
|
||||
stateObj,
|
||||
this.hass!.locale
|
||||
)}`}
|
||||
></ha-icon-button>
|
||||
>
|
||||
<ha-icon .icon=${entityConf.icon || stateIcon(stateObj)}></ha-icon>
|
||||
</ha-icon-button>
|
||||
${this._config!.show_state !== true && entityConf.show_state !== true
|
||||
? html`<div class="state"></div>`
|
||||
: html`
|
||||
|
||||
@ -19,6 +19,7 @@ import { computeStateName } from "../../../common/entity/compute_state_name";
|
||||
import { formatNumber } from "../../../common/number/format_number";
|
||||
import "../../../components/ha-card";
|
||||
import type { HaCard } from "../../../components/ha-card";
|
||||
import "../../../components/ha-icon";
|
||||
import "../../../components/ha-icon-button";
|
||||
import {
|
||||
ClimateEntity,
|
||||
@ -233,14 +234,15 @@ export class HuiThermostatCard extends LitElement implements LovelaceCard {
|
||||
[mode]: true,
|
||||
})}
|
||||
>
|
||||
<mwc-icon-button
|
||||
<ha-icon-button
|
||||
class="more-info"
|
||||
label="Open more info"
|
||||
.label=${this.hass!.localize(
|
||||
"ui.panel.lovelace.cards.show_more_info"
|
||||
)}
|
||||
.path=${mdiDotsVertical}
|
||||
@click=${this._handleMoreInfo}
|
||||
tabindex="0"
|
||||
>
|
||||
<ha-svg-icon .path=${mdiDotsVertical}></ha-svg-icon>
|
||||
</mwc-icon-button>
|
||||
></ha-icon-button>
|
||||
|
||||
<div class="content">
|
||||
<div id="controls">
|
||||
@ -414,10 +416,11 @@ export class HuiThermostatCard extends LitElement implements LovelaceCard {
|
||||
<ha-icon-button
|
||||
class=${classMap({ "selected-icon": currentMode === mode })}
|
||||
.mode=${mode}
|
||||
.icon=${modeIcons[mode]}
|
||||
@click=${this._handleAction}
|
||||
tabindex="0"
|
||||
></ha-icon-button>
|
||||
>
|
||||
<ha-icon .icon=${modeIcons[mode]}></ha-icon>
|
||||
</ha-icon-button>
|
||||
`;
|
||||
}
|
||||
|
||||
|
||||
@ -1,5 +1,4 @@
|
||||
import "@material/mwc-button";
|
||||
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";
|
||||
@ -14,6 +13,7 @@ import {
|
||||
import { customElement, property, queryAssignedNodes } from "lit/decorators";
|
||||
import { fireEvent } from "../../../common/dom/fire_event";
|
||||
import "../../../components/ha-button-menu";
|
||||
import "../../../components/ha-icon-button";
|
||||
import { saveConfig } from "../../../data/lovelace";
|
||||
import { showAlertDialog } from "../../../dialogs/generic/show-dialog-box";
|
||||
import { HomeAssistant } from "../../../types";
|
||||
@ -60,36 +60,34 @@ export class HuiCardOptions extends LitElement {
|
||||
>
|
||||
<div>
|
||||
<slot name="buttons"></slot>
|
||||
<mwc-icon-button
|
||||
title="Move card down"
|
||||
<ha-icon-button
|
||||
.label=${this.hass!.localize(
|
||||
"ui.panel.lovelace.editor.edit_card.move_down"
|
||||
)}
|
||||
.path=${mdiArrowDown}
|
||||
class="move-arrow"
|
||||
@click=${this._cardDown}
|
||||
.disabled=${this.lovelace!.config.views[this.path![0]].cards!
|
||||
.length ===
|
||||
this.path![1] + 1}
|
||||
>
|
||||
<ha-svg-icon .path=${mdiArrowDown}></ha-svg-icon>
|
||||
</mwc-icon-button>
|
||||
<mwc-icon-button
|
||||
title="Move card up"
|
||||
></ha-icon-button>
|
||||
<ha-icon-button
|
||||
.label=${this.hass!.localize(
|
||||
"ui.panel.lovelace.editor.edit_card.move_up"
|
||||
)}
|
||||
.path=${mdiArrowUp}
|
||||
class="move-arrow"
|
||||
@click=${this._cardUp}
|
||||
?disabled=${this.path![1] === 0}
|
||||
><ha-svg-icon .path=${mdiArrowUp}></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"
|
||||
aria-label=${this.hass!.localize(
|
||||
.label=${this.hass!.localize(
|
||||
"ui.panel.lovelace.editor.edit_card.options"
|
||||
)}
|
||||
title=${this.hass!.localize(
|
||||
"ui.panel.lovelace.editor.edit_card.options"
|
||||
)}
|
||||
>
|
||||
<ha-svg-icon .path=${mdiDotsVertical}></ha-svg-icon>
|
||||
</mwc-icon-button>
|
||||
|
||||
.path=${mdiDotsVertical}
|
||||
></ha-icon-button>
|
||||
<mwc-list-item>
|
||||
${this.hass!.localize(
|
||||
"ui.panel.lovelace.editor.edit_card.move"
|
||||
@ -137,11 +135,11 @@ export class HuiCardOptions extends LitElement {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
mwc-icon-button {
|
||||
ha-icon-button {
|
||||
color: var(--primary-text-color);
|
||||
}
|
||||
|
||||
mwc-icon-button.move-arrow[disabled] {
|
||||
ha-icon-button.move-arrow[disabled] {
|
||||
color: var(--disabled-text-color);
|
||||
}
|
||||
|
||||
|
||||
@ -1,21 +1,22 @@
|
||||
import "@material/mwc-button/mwc-button";
|
||||
import { mdiChevronLeft, mdiChevronRight } from "@mdi/js";
|
||||
import {
|
||||
endOfToday,
|
||||
addDays,
|
||||
endOfDay,
|
||||
startOfToday,
|
||||
endOfWeek,
|
||||
endOfMonth,
|
||||
startOfDay,
|
||||
startOfWeek,
|
||||
startOfMonth,
|
||||
addMonths,
|
||||
addWeeks,
|
||||
startOfYear,
|
||||
addYears,
|
||||
differenceInDays,
|
||||
endOfDay,
|
||||
endOfMonth,
|
||||
endOfToday,
|
||||
endOfWeek,
|
||||
endOfYear,
|
||||
isWithinInterval,
|
||||
differenceInDays,
|
||||
startOfDay,
|
||||
startOfMonth,
|
||||
startOfToday,
|
||||
startOfWeek,
|
||||
startOfYear,
|
||||
} from "date-fns";
|
||||
import { UnsubscribeFunc } from "home-assistant-js-websocket";
|
||||
import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
|
||||
@ -26,14 +27,12 @@ import {
|
||||
formatDateShort,
|
||||
formatDateYear,
|
||||
} from "../../../common/datetime/format_date";
|
||||
import { toggleAttribute } from "../../../common/dom/toggle_attribute";
|
||||
import "../../../components/ha-button-toggle-group";
|
||||
import "../../../components/ha-icon-button";
|
||||
import { EnergyData, getEnergyDataCollection } from "../../../data/energy";
|
||||
import { SubscribeMixin } from "../../../mixins/subscribe-mixin";
|
||||
import { HomeAssistant, ToggleButton } from "../../../types";
|
||||
import "@material/mwc-icon-button/mwc-icon-button";
|
||||
import "../../../components/ha-svg-icon";
|
||||
import "@material/mwc-button/mwc-button";
|
||||
import "../../../components/ha-button-toggle-group";
|
||||
import { toggleAttribute } from "../../../common/dom/toggle_attribute";
|
||||
|
||||
@customElement("hui-energy-period-selector")
|
||||
export class HuiEnergyPeriodSelector extends SubscribeMixin(LitElement) {
|
||||
@ -108,22 +107,20 @@ export class HuiEnergyPeriodSelector extends SubscribeMixin(LitElement) {
|
||||
this._endDate || new Date(),
|
||||
this.hass.locale
|
||||
)}`}
|
||||
<mwc-icon-button
|
||||
<ha-icon-button
|
||||
.label=${this.hass.localize(
|
||||
"ui.panel.lovelace.components.energy_period_selector.previous"
|
||||
)}
|
||||
@click=${this._pickPrevious}
|
||||
>
|
||||
<ha-svg-icon .path=${mdiChevronLeft}></ha-svg-icon>
|
||||
</mwc-icon-button>
|
||||
<mwc-icon-button
|
||||
.path=${mdiChevronLeft}
|
||||
></ha-icon-button>
|
||||
<ha-icon-button
|
||||
.label=${this.hass.localize(
|
||||
"ui.panel.lovelace.components.energy_period_selector.next"
|
||||
)}
|
||||
@click=${this._pickNext}
|
||||
>
|
||||
<ha-svg-icon .path=${mdiChevronRight}></ha-svg-icon>
|
||||
</mwc-icon-button>
|
||||
.path=${mdiChevronRight}
|
||||
></ha-icon-button>
|
||||
<mwc-button dense outlined @click=${this._pickToday}>
|
||||
${this.hass.localize(
|
||||
"ui.panel.lovelace.components.energy_period_selector.today"
|
||||
@ -264,7 +261,7 @@ export class HuiEnergyPeriodSelector extends SubscribeMixin(LitElement) {
|
||||
--mdc-button-disabled-ink-color: var(--disabled-text-color);
|
||||
--mdc-icon-button-ripple-opacity: 0.2;
|
||||
}
|
||||
mwc-icon-button {
|
||||
ha-icon-button {
|
||||
--mdc-icon-button-size: 28px;
|
||||
}
|
||||
ha-button-toggle-group {
|
||||
|
||||
@ -1,3 +1,4 @@
|
||||
import { mdiClose } from "@mdi/js";
|
||||
import "@polymer/paper-input/paper-input";
|
||||
import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
|
||||
import { customElement, property } from "lit/decorators";
|
||||
@ -33,9 +34,10 @@ export class HuiInputListEditor extends LitElement {
|
||||
><ha-icon-button
|
||||
slot="suffix"
|
||||
class="clear-button"
|
||||
icon="hass:close"
|
||||
.path=${mdiClose}
|
||||
no-ripple
|
||||
@click=${this._removeEntry}
|
||||
.label=${this.hass!.localize("ui.common.clear")}
|
||||
>Clear</ha-icon-button
|
||||
></paper-input
|
||||
>
|
||||
|
||||
@ -98,6 +98,7 @@ export class HuiCardPicker extends LitElement {
|
||||
|
||||
return html`
|
||||
<search-input
|
||||
.hass=${this.hass}
|
||||
.filter=${this._filter}
|
||||
no-label-float
|
||||
@value-changed=${this._handleSearchChange}
|
||||
|
||||
@ -8,13 +8,14 @@ import {
|
||||
PropertyValues,
|
||||
TemplateResult,
|
||||
} from "lit";
|
||||
import { customElement, property, state, query } from "lit/decorators";
|
||||
import { customElement, property, query, state } from "lit/decorators";
|
||||
import type { HASSDomEvent } from "../../../../common/dom/fire_event";
|
||||
import { fireEvent } from "../../../../common/dom/fire_event";
|
||||
import { computeRTLDirection } from "../../../../common/util/compute_rtl";
|
||||
import "../../../../components/ha-circular-progress";
|
||||
import "../../../../components/ha-dialog";
|
||||
import "../../../../components/ha-header-bar";
|
||||
import "../../../../components/ha-icon-button";
|
||||
import type {
|
||||
LovelaceCardConfig,
|
||||
LovelaceViewConfig,
|
||||
@ -175,9 +176,7 @@ export class HuiDialogEditCard
|
||||
rel="noreferrer"
|
||||
dir=${computeRTLDirection(this.hass)}
|
||||
>
|
||||
<mwc-icon-button>
|
||||
<ha-svg-icon .path=${mdiHelpCircle}></ha-svg-icon>
|
||||
</mwc-icon-button>
|
||||
<ha-icon-button .path=${mdiHelpCircle}></ha-icon-button>
|
||||
</a>
|
||||
`
|
||||
: ""}
|
||||
|
||||
@ -28,6 +28,7 @@ export class HuiEntityPickerTable extends LitElement {
|
||||
protected render(): TemplateResult {
|
||||
return html`
|
||||
<ha-data-table
|
||||
.hass=${this.hass}
|
||||
selectable
|
||||
.id=${"entity_id"}
|
||||
.columns=${this._columns(this.narrow!)}
|
||||
|
||||
@ -73,11 +73,12 @@ export class HuiAlarmPanelCardEditor
|
||||
return html`
|
||||
<div class="card-config">
|
||||
<ha-entity-picker
|
||||
.label="${this.hass.localize(
|
||||
.label=${this.hass.localize(
|
||||
"ui.panel.lovelace.editor.card.generic.entity"
|
||||
)} (${this.hass.localize(
|
||||
)}
|
||||
(${this.hass.localize(
|
||||
"ui.panel.lovelace.editor.card.config.required"
|
||||
)})"
|
||||
)})
|
||||
.hass=${this.hass}
|
||||
.value=${this._entity}
|
||||
.configValue=${"entity"}
|
||||
@ -86,11 +87,12 @@ export class HuiAlarmPanelCardEditor
|
||||
allow-custom-entity
|
||||
></ha-entity-picker>
|
||||
<paper-input
|
||||
.label="${this.hass.localize(
|
||||
.label=${this.hass.localize(
|
||||
"ui.panel.lovelace.editor.card.generic.name"
|
||||
)} (${this.hass.localize(
|
||||
)}
|
||||
(${this.hass.localize(
|
||||
"ui.panel.lovelace.editor.card.config.optional"
|
||||
)})"
|
||||
)})
|
||||
.value=${this._name}
|
||||
.configValue=${"name"}
|
||||
@value-changed=${this._valueChanged}
|
||||
|
||||
@ -2,7 +2,7 @@ import { mdiArrowLeft, mdiArrowRight, mdiDelete, mdiPlus } from "@mdi/js";
|
||||
import "@polymer/paper-tabs";
|
||||
import "@polymer/paper-tabs/paper-tab";
|
||||
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 {
|
||||
any,
|
||||
array,
|
||||
@ -13,6 +13,7 @@ import {
|
||||
string,
|
||||
} from "superstruct";
|
||||
import { fireEvent, HASSDomEvent } from "../../../../common/dom/fire_event";
|
||||
import "../../../../components/ha-icon-button";
|
||||
import { LovelaceCardConfig, LovelaceConfig } from "../../../../data/lovelace";
|
||||
import { HomeAssistant } from "../../../../types";
|
||||
import { StackCardConfig } from "../../cards/types";
|
||||
@ -108,36 +109,33 @@ export class HuiStackCardEditor
|
||||
)}
|
||||
</mwc-button>
|
||||
|
||||
<mwc-icon-button
|
||||
<ha-icon-button
|
||||
.disabled=${selected === 0}
|
||||
.title=${this.hass!.localize(
|
||||
.label=${this.hass!.localize(
|
||||
"ui.panel.lovelace.editor.edit_card.move_before"
|
||||
)}
|
||||
.path=${mdiArrowLeft}
|
||||
@click=${this._handleMove}
|
||||
.move=${-1}
|
||||
>
|
||||
<ha-svg-icon .path=${mdiArrowLeft}></ha-svg-icon>
|
||||
</mwc-icon-button>
|
||||
></ha-icon-button>
|
||||
|
||||
<mwc-icon-button
|
||||
.title=${this.hass!.localize(
|
||||
<ha-icon-button
|
||||
.label=${this.hass!.localize(
|
||||
"ui.panel.lovelace.editor.edit_card.move_after"
|
||||
)}
|
||||
.path=${mdiArrowRight}
|
||||
.disabled=${selected === numcards - 1}
|
||||
@click=${this._handleMove}
|
||||
.move=${1}
|
||||
>
|
||||
<ha-svg-icon .path=${mdiArrowRight}></ha-svg-icon>
|
||||
</mwc-icon-button>
|
||||
></ha-icon-button>
|
||||
|
||||
<mwc-icon-button
|
||||
.title=${this.hass!.localize(
|
||||
<ha-icon-button
|
||||
.label=${this.hass!.localize(
|
||||
"ui.panel.lovelace.editor.edit_card.delete"
|
||||
)}
|
||||
.path=${mdiDelete}
|
||||
@click=${this._handleDeleteCard}
|
||||
>
|
||||
<ha-svg-icon .path=${mdiDelete}></ha-svg-icon>
|
||||
</mwc-icon-button>
|
||||
></ha-icon-button>
|
||||
</div>
|
||||
|
||||
<hui-card-element-editor
|
||||
|
||||
@ -1,11 +1,10 @@
|
||||
import "@material/mwc-icon-button/mwc-icon-button";
|
||||
import { mdiClose, mdiPencil, mdiPlus } from "@mdi/js";
|
||||
import "@polymer/paper-item/paper-item";
|
||||
import "@polymer/paper-listbox/paper-listbox";
|
||||
import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
|
||||
import { customElement, property } from "lit/decorators";
|
||||
import { fireEvent } from "../../../../common/dom/fire_event";
|
||||
import "../../../../components/ha-svg-icon";
|
||||
import "../../../../components/ha-icon-button";
|
||||
import type { LovelaceConfig } from "../../../../data/lovelace";
|
||||
import type { HomeAssistant } from "../../../../types";
|
||||
import type { LovelaceHeaderFooterConfig } from "../../header-footer/types";
|
||||
@ -38,35 +37,32 @@ export class HuiHeaderFooterEditor extends LitElement {
|
||||
<div>
|
||||
${!this.config?.type
|
||||
? html`
|
||||
<mwc-icon-button
|
||||
aria-label=${this.hass!.localize(
|
||||
<ha-icon-button
|
||||
.label=${this.hass!.localize(
|
||||
"ui.panel.lovelace.editor.common.add"
|
||||
)}
|
||||
.path=${mdiPlus}
|
||||
class="add-icon"
|
||||
@click=${this._add}
|
||||
>
|
||||
<ha-svg-icon .path=${mdiPlus}></ha-svg-icon>
|
||||
</mwc-icon-button>
|
||||
></ha-icon-button>
|
||||
`
|
||||
: html`
|
||||
<mwc-icon-button
|
||||
aria-label=${this.hass!.localize(
|
||||
<ha-icon-button
|
||||
.label=${this.hass!.localize(
|
||||
"ui.panel.lovelace.editor.common.clear"
|
||||
)}
|
||||
.path=${mdiClose}
|
||||
class="remove-icon"
|
||||
@click=${this._delete}
|
||||
>
|
||||
<ha-svg-icon .path=${mdiClose}></ha-svg-icon>
|
||||
</mwc-icon-button>
|
||||
<mwc-icon-button
|
||||
aria-label=${this.hass!.localize(
|
||||
></ha-icon-button>
|
||||
<ha-icon-button
|
||||
.label=${this.hass!.localize(
|
||||
"ui.panel.lovelace.editor.common.edit"
|
||||
)}
|
||||
.path=${mdiPencil}
|
||||
class="edit-icon"
|
||||
@click=${this._edit}
|
||||
>
|
||||
<ha-svg-icon .path=${mdiPencil}></ha-svg-icon>
|
||||
</mwc-icon-button>
|
||||
></ha-icon-button>
|
||||
`}
|
||||
</div>
|
||||
`;
|
||||
@ -118,7 +114,7 @@ export class HuiHeaderFooterEditor extends LitElement {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
mwc-icon-button,
|
||||
ha-icon-button,
|
||||
.header-footer-icon {
|
||||
--mdc-icon-button-size: 36px;
|
||||
color: var(--secondary-text-color);
|
||||
|
||||
@ -1,5 +1,4 @@
|
||||
import "@material/mwc-button";
|
||||
import "@material/mwc-icon-button/mwc-icon-button";
|
||||
import { mdiHelpCircle } from "@mdi/js";
|
||||
import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
|
||||
import { customElement, property, state } from "lit/decorators";
|
||||
@ -8,7 +7,7 @@ import { computeRTLDirection } from "../../../common/util/compute_rtl";
|
||||
import "../../../components/ha-circular-progress";
|
||||
import "../../../components/ha-dialog";
|
||||
import "../../../components/ha-formfield";
|
||||
import "../../../components/ha-svg-icon";
|
||||
import "../../../components/ha-icon-button";
|
||||
import "../../../components/ha-switch";
|
||||
import "../../../components/ha-yaml-editor";
|
||||
import type { LovelaceConfig } from "../../../data/lovelace";
|
||||
@ -67,9 +66,10 @@ export class HuiSaveConfig extends LitElement implements HassDialog {
|
||||
rel="noreferrer"
|
||||
dir=${computeRTLDirection(this.hass!)}
|
||||
>
|
||||
<mwc-icon-button>
|
||||
<ha-svg-icon .path=${mdiHelpCircle}></ha-svg-icon>
|
||||
</mwc-icon-button>
|
||||
<ha-icon-button
|
||||
.path=${mdiHelpCircle}
|
||||
.label=${this.hass!.localize("ui.common.help")}
|
||||
></ha-icon-button>
|
||||
</a>`}
|
||||
>
|
||||
<div>
|
||||
|
||||
@ -1,4 +1,3 @@
|
||||
import "@material/mwc-icon-button";
|
||||
import { mdiClose, mdiDrag, mdiPencil } from "@mdi/js";
|
||||
import {
|
||||
css,
|
||||
@ -18,6 +17,7 @@ import Sortable, {
|
||||
import { fireEvent } from "../../../common/dom/fire_event";
|
||||
import "../../../components/entity/ha-entity-picker";
|
||||
import type { HaEntityPicker } from "../../../components/entity/ha-entity-picker";
|
||||
import "../../../components/ha-icon-button";
|
||||
import "../../../components/ha-svg-icon";
|
||||
import { sortableStyles } from "../../../resources/ha-sortable-style";
|
||||
import { HomeAssistant } from "../../../types";
|
||||
@ -104,26 +104,24 @@ export class HuiEntitiesCardRowEditor extends LitElement {
|
||||
@value-changed=${this._valueChanged}
|
||||
></ha-entity-picker>
|
||||
`}
|
||||
<mwc-icon-button
|
||||
aria-label=${this.hass!.localize(
|
||||
<ha-icon-button
|
||||
.label=${this.hass!.localize(
|
||||
"ui.components.entity.entity-picker.clear"
|
||||
)}
|
||||
.path=${mdiClose}
|
||||
class="remove-icon"
|
||||
.index=${index}
|
||||
@click=${this._removeRow}
|
||||
>
|
||||
<ha-svg-icon .path=${mdiClose}></ha-svg-icon>
|
||||
</mwc-icon-button>
|
||||
<mwc-icon-button
|
||||
aria-label=${this.hass!.localize(
|
||||
></ha-icon-button>
|
||||
<ha-icon-button
|
||||
.label=${this.hass!.localize(
|
||||
"ui.components.entity.entity-picker.edit"
|
||||
)}
|
||||
.path=${mdiPencil}
|
||||
class="edit-icon"
|
||||
.index=${index}
|
||||
@click=${this._editRow}
|
||||
>
|
||||
<ha-svg-icon .path=${mdiPencil}></ha-svg-icon>
|
||||
</mwc-icon-button>
|
||||
></ha-icon-button>
|
||||
</div>
|
||||
`
|
||||
)
|
||||
|
||||
@ -1,10 +1,9 @@
|
||||
import "@material/mwc-button";
|
||||
import "@material/mwc-icon-button";
|
||||
import { mdiArrowLeft } from "@mdi/js";
|
||||
import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
|
||||
import { customElement, property, state, query } from "lit/decorators";
|
||||
import { fireEvent, HASSDomEvent } from "../../../common/dom/fire_event";
|
||||
import "../../../components/ha-svg-icon";
|
||||
import "../../../components/ha-icon-button";
|
||||
import type { HomeAssistant } from "../../../types";
|
||||
import type { LovelaceRowConfig } from "../entity-rows/types";
|
||||
import type { LovelaceHeaderFooterConfig } from "../header-footer/types";
|
||||
@ -37,9 +36,11 @@ export class HuiSubElementEditor extends LitElement {
|
||||
return html`
|
||||
<div class="header">
|
||||
<div class="back-title">
|
||||
<mwc-icon-button @click=${this._goBack}>
|
||||
<ha-svg-icon .path=${mdiArrowLeft}></ha-svg-icon>
|
||||
</mwc-icon-button>
|
||||
<ha-icon-button
|
||||
.label=${this.hass!.localize("ui.common.back")}
|
||||
.path=${mdiArrowLeft}
|
||||
@click=${this._goBack}
|
||||
></ha-icon-button>
|
||||
<span slot="title"
|
||||
>${this.hass.localize(
|
||||
`ui.panel.lovelace.editor.sub-element-editor.types.${this.config?.type}`
|
||||
|
||||
@ -1,3 +1,16 @@
|
||||
import {
|
||||
mdiPause,
|
||||
mdiPlay,
|
||||
mdiPlayPause,
|
||||
mdiPower,
|
||||
mdiSkipNext,
|
||||
mdiSkipPrevious,
|
||||
mdiStop,
|
||||
mdiVolumeHigh,
|
||||
mdiVolumeMinus,
|
||||
mdiVolumeOff,
|
||||
mdiVolumePlus,
|
||||
} from "@mdi/js";
|
||||
import { HassEntity } from "home-assistant-js-websocket";
|
||||
import {
|
||||
css,
|
||||
@ -102,7 +115,7 @@ class HuiMediaPlayerEntityRow extends LitElement implements LovelaceRow {
|
||||
supportsFeature(stateObj, SUPPORT_PREVIOUS_TRACK)
|
||||
? html`
|
||||
<ha-icon-button
|
||||
icon="hass:skip-previous"
|
||||
.path=${mdiSkipPrevious}
|
||||
@click=${this._previousTrack}
|
||||
></ha-icon-button>
|
||||
`
|
||||
@ -117,7 +130,7 @@ class HuiMediaPlayerEntityRow extends LitElement implements LovelaceRow {
|
||||
supportsFeature(stateObj, SUPPORT_PAUSE)))
|
||||
? html`
|
||||
<ha-icon-button
|
||||
icon=${this._computeControlIcon(stateObj)}
|
||||
.path=${this._computeControlIcon(stateObj)}
|
||||
@click=${this._playPauseStop}
|
||||
></ha-icon-button>
|
||||
`
|
||||
@ -126,7 +139,7 @@ class HuiMediaPlayerEntityRow extends LitElement implements LovelaceRow {
|
||||
supportsFeature(stateObj, SUPPORT_NEXT_TRACK)
|
||||
? html`
|
||||
<ha-icon-button
|
||||
icon="hass:skip-next"
|
||||
.path=${mdiSkipNext}
|
||||
@click=${this._nextTrack}
|
||||
></ha-icon-button>
|
||||
`
|
||||
@ -148,7 +161,7 @@ class HuiMediaPlayerEntityRow extends LitElement implements LovelaceRow {
|
||||
!UNAVAILABLE_STATES.includes(entityState)
|
||||
? html`
|
||||
<ha-icon-button
|
||||
icon="hass:power"
|
||||
.path=${mdiPower}
|
||||
@click=${this._togglePower}
|
||||
></ha-icon-button>
|
||||
`
|
||||
@ -161,7 +174,7 @@ class HuiMediaPlayerEntityRow extends LitElement implements LovelaceRow {
|
||||
!UNAVAILABLE_STATES.includes(entityState)
|
||||
? html`
|
||||
<ha-icon-button
|
||||
icon="hass:power"
|
||||
.path=${mdiPower}
|
||||
@click=${this._togglePower}
|
||||
></ha-icon-button>
|
||||
`
|
||||
@ -177,9 +190,9 @@ class HuiMediaPlayerEntityRow extends LitElement implements LovelaceRow {
|
||||
${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>
|
||||
`
|
||||
@ -200,11 +213,11 @@ class HuiMediaPlayerEntityRow extends LitElement implements LovelaceRow {
|
||||
supportsFeature(stateObj, SUPPORT_VOLUME_BUTTONS)
|
||||
? html`
|
||||
<ha-icon-button
|
||||
icon="hass:volume-minus"
|
||||
.path=${mdiVolumeMinus}
|
||||
@click=${this._volumeDown}
|
||||
></ha-icon-button>
|
||||
<ha-icon-button
|
||||
icon="hass:volume-plus"
|
||||
.path=${mdiVolumePlus}
|
||||
@click=${this._volumeUp}
|
||||
></ha-icon-button>
|
||||
`
|
||||
@ -238,12 +251,12 @@ class HuiMediaPlayerEntityRow extends LitElement implements LovelaceRow {
|
||||
|
||||
private _computeControlIcon(stateObj: HassEntity): string {
|
||||
return stateObj.state === "on"
|
||||
? "hass:play-pause"
|
||||
? mdiPlayPause
|
||||
: stateObj.state !== "playing"
|
||||
? "hass:play"
|
||||
? mdiPlay
|
||||
: supportsFeature(stateObj, SUPPORT_PAUSE)
|
||||
? "hass:pause"
|
||||
: "hass:stop";
|
||||
? mdiPause
|
||||
: mdiStop;
|
||||
}
|
||||
|
||||
private _togglePower(): void {
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
import { undoDepth } from "@codemirror/history";
|
||||
import "@material/mwc-button";
|
||||
import { mdiClose } from "@mdi/js";
|
||||
import "@polymer/app-layout/app-header/app-header";
|
||||
import "@polymer/app-layout/app-toolbar/app-toolbar";
|
||||
import { dump, load } from "js-yaml";
|
||||
@ -55,8 +56,9 @@ class LovelaceFullConfigEditor extends LitElement {
|
||||
<app-header slot="header">
|
||||
<app-toolbar>
|
||||
<ha-icon-button
|
||||
icon="hass:close"
|
||||
.path=${mdiClose}
|
||||
@click=${this._closeEditor}
|
||||
.label=${this.hass!.localize("ui.common.close")}
|
||||
></ha-icon-button>
|
||||
<div main-title>
|
||||
${this.hass!.localize(
|
||||
|
||||
@ -47,6 +47,7 @@ import { debounce } from "../../common/util/debounce";
|
||||
import { afterNextRender } from "../../common/util/render-status";
|
||||
import "../../components/ha-button-menu";
|
||||
import "../../components/ha-icon";
|
||||
import "../../components/ha-icon-button";
|
||||
import "../../components/ha-icon-button-arrow-next";
|
||||
import "../../components/ha-icon-button-arrow-prev";
|
||||
import "../../components/ha-menu-button";
|
||||
@ -118,30 +119,24 @@ class HUIRoot extends LitElement {
|
||||
${this._editMode
|
||||
? html`
|
||||
<app-toolbar class="edit-mode">
|
||||
<mwc-icon-button
|
||||
<ha-icon-button
|
||||
.label=${this.hass!.localize(
|
||||
"ui.panel.lovelace.menu.exit_edit_mode"
|
||||
)}
|
||||
title=${this.hass!.localize("ui.panel.lovelace.menu.close")}
|
||||
.path=${mdiClose}
|
||||
@click=${this._editModeDisable}
|
||||
>
|
||||
<ha-svg-icon .path=${mdiClose}></ha-svg-icon>
|
||||
</mwc-icon-button>
|
||||
></ha-icon-button>
|
||||
<div main-title>
|
||||
${this.config.title ||
|
||||
this.hass!.localize("ui.panel.lovelace.editor.header")}
|
||||
<mwc-icon-button
|
||||
aria-label=${this.hass!.localize(
|
||||
"ui.panel.lovelace.editor.edit_lovelace.edit_title"
|
||||
)}
|
||||
title=${this.hass!.localize(
|
||||
<ha-icon-button
|
||||
.label=${this.hass!.localize(
|
||||
"ui.panel.lovelace.editor.edit_lovelace.edit_title"
|
||||
)}
|
||||
.path=${mdiPencil}
|
||||
class="edit-icon"
|
||||
@click=${this._editLovelace}
|
||||
>
|
||||
<ha-svg-icon .path=${mdiPencil}></ha-svg-icon>
|
||||
</mwc-icon-button>
|
||||
></ha-icon-button>
|
||||
</div>
|
||||
<a
|
||||
href=${documentationUrl(this.hass, "/lovelace/")}
|
||||
@ -149,26 +144,21 @@ class HUIRoot extends LitElement {
|
||||
class="menu-link"
|
||||
target="_blank"
|
||||
>
|
||||
<mwc-icon-button
|
||||
title=${this.hass!.localize(
|
||||
<ha-icon-button
|
||||
.label=${this.hass!.localize(
|
||||
"ui.panel.lovelace.menu.help"
|
||||
)}
|
||||
>
|
||||
<ha-svg-icon .path=${mdiHelpCircle}></ha-svg-icon>
|
||||
</mwc-icon-button>
|
||||
.path=${mdiHelpCircle}
|
||||
></ha-icon-button>
|
||||
</a>
|
||||
<ha-button-menu corner="BOTTOM_START">
|
||||
<mwc-icon-button
|
||||
<ha-icon-button
|
||||
slot="trigger"
|
||||
.title=${this.hass!.localize(
|
||||
"ui.panel.lovelace.editor.menu.open"
|
||||
)}
|
||||
.label=${this.hass!.localize(
|
||||
"ui.panel.lovelace.editor.menu.open"
|
||||
)}
|
||||
>
|
||||
<ha-svg-icon .path=${mdiDotsVertical}></ha-svg-icon>
|
||||
</mwc-icon-button>
|
||||
.path=${mdiDotsVertical}
|
||||
></ha-icon-button>
|
||||
${__DEMO__ /* No unused entities available in the demo */
|
||||
? ""
|
||||
: html`
|
||||
@ -278,28 +268,23 @@ class HUIRoot extends LitElement {
|
||||
${!this.narrow &&
|
||||
this._conversation(this.hass.config.components)
|
||||
? html`
|
||||
<mwc-icon-button
|
||||
<ha-icon-button
|
||||
.label=${this.hass!.localize(
|
||||
"ui.panel.lovelace.menu.start_conversation"
|
||||
)}
|
||||
.path=${mdiMicrophone}
|
||||
@click=${this._showVoiceCommandDialog}
|
||||
>
|
||||
<ha-svg-icon .path=${mdiMicrophone}></ha-svg-icon>
|
||||
</mwc-icon-button>
|
||||
></ha-icon-button>
|
||||
`
|
||||
: ""}
|
||||
<ha-button-menu corner="BOTTOM_START">
|
||||
<mwc-icon-button
|
||||
<ha-icon-button
|
||||
slot="trigger"
|
||||
.label=${this.hass!.localize(
|
||||
"ui.panel.lovelace.editor.menu.open"
|
||||
)}
|
||||
.title=${this.hass!.localize(
|
||||
"ui.panel.lovelace.editor.menu.open"
|
||||
)}
|
||||
>
|
||||
<ha-svg-icon .path=${mdiDotsVertical}></ha-svg-icon>
|
||||
</mwc-icon-button>
|
||||
.path=${mdiDotsVertical}
|
||||
></ha-icon-button>
|
||||
${this.narrow &&
|
||||
this._conversation(this.hass.config.components)
|
||||
? html`
|
||||
@ -448,9 +433,6 @@ class HUIRoot extends LitElement {
|
||||
? html`
|
||||
<ha-icon-button-arrow-prev
|
||||
.hass=${this.hass}
|
||||
.title=${this.hass!.localize(
|
||||
"ui.panel.lovelace.editor.edit_view.move_left"
|
||||
)}
|
||||
.label=${this.hass!.localize(
|
||||
"ui.panel.lovelace.editor.edit_view.move_left"
|
||||
)}
|
||||
@ -480,9 +462,6 @@ class HUIRoot extends LitElement {
|
||||
></ha-svg-icon>
|
||||
<ha-icon-button-arrow-next
|
||||
.hass=${this.hass}
|
||||
.title=${this.hass!.localize(
|
||||
"ui.panel.lovelace.editor.edit_view.move_right"
|
||||
)}
|
||||
.label=${this.hass!.localize(
|
||||
"ui.panel.lovelace.editor.edit_view.move_right"
|
||||
)}
|
||||
@ -498,15 +477,14 @@ class HUIRoot extends LitElement {
|
||||
)}
|
||||
${this._editMode
|
||||
? html`
|
||||
<mwc-icon-button
|
||||
<ha-icon-button
|
||||
id="add-view"
|
||||
@click=${this._addView}
|
||||
title=${this.hass!.localize(
|
||||
.label=${this.hass!.localize(
|
||||
"ui.panel.lovelace.editor.edit_view.add"
|
||||
)}
|
||||
>
|
||||
<ha-svg-icon .path=${mdiPlus}></ha-svg-icon>
|
||||
</mwc-icon-button>
|
||||
.path=${mdiPlus}
|
||||
></ha-icon-button>
|
||||
`
|
||||
: ""}
|
||||
</paper-tabs>
|
||||
|
||||
@ -156,7 +156,7 @@ export class SideBarView extends LitElement implements LovelaceViewElement {
|
||||
element.lovelace = this.lovelace;
|
||||
element.path = [this.index!, idx];
|
||||
card.editMode = true;
|
||||
const movePositionButton = document.createElement("mwc-icon-button");
|
||||
const movePositionButton = document.createElement("ha-icon-button");
|
||||
movePositionButton.slot = "buttons";
|
||||
const moveIcon = document.createElement("ha-svg-icon");
|
||||
moveIcon.path =
|
||||
|
||||
@ -4,6 +4,8 @@ import { html } from "@polymer/polymer/lib/utils/html-tag";
|
||||
import { PolymerElement } from "@polymer/polymer/polymer-element";
|
||||
import "../../components/dialog/ha-paper-dialog";
|
||||
import "../../components/ha-circular-progress";
|
||||
import "../../components/ha-icon";
|
||||
import "../../components/ha-icon-button";
|
||||
import LocalizeMixin from "../../mixins/localize-mixin";
|
||||
import "../../styles/polymer-ha-style-dialog";
|
||||
|
||||
@ -56,11 +58,9 @@ class HaDialogShowAudioMessage extends LocalizeMixin(PolymerElement) {
|
||||
<template is="dom-if" if="[[_loading]]">
|
||||
<ha-circular-progress active></ha-circular-progress>
|
||||
</template>
|
||||
<ha-icon-button
|
||||
id="delicon"
|
||||
on-click="openDeleteDialog"
|
||||
icon="hass:delete"
|
||||
></ha-icon-button>
|
||||
<ha-icon-button id="delicon" on-click="openDeleteDialog">
|
||||
<ha-icon icon="hass:delete"></ha-icon>
|
||||
</ha-icon-button>
|
||||
</div>
|
||||
</h2>
|
||||
<div id="transcribe"></div>
|
||||
|
||||
@ -1,16 +1,15 @@
|
||||
import { mdiPencil } from "@mdi/js";
|
||||
import "@material/mwc-icon-button";
|
||||
import "@polymer/app-layout/app-toolbar/app-toolbar";
|
||||
import { css, CSSResultGroup, html, LitElement, PropertyValues } from "lit";
|
||||
import { property } from "lit/decorators";
|
||||
import { computeStateDomain } from "../../common/entity/compute_state_domain";
|
||||
import { navigate } from "../../common/navigate";
|
||||
import "../../components/ha-svg-icon";
|
||||
import "../../components/ha-menu-button";
|
||||
import "../../layouts/ha-app-layout";
|
||||
import { HomeAssistant } from "../../types";
|
||||
import "../../components/ha-icon-button";
|
||||
import "../../components/map/ha-map";
|
||||
import "../../layouts/ha-app-layout";
|
||||
import { haStyle } from "../../resources/styles";
|
||||
import { HomeAssistant } from "../../types";
|
||||
|
||||
class HaPanelMap extends LitElement {
|
||||
@property({ attribute: false }) public hass!: HomeAssistant;
|
||||
@ -30,9 +29,11 @@ class HaPanelMap extends LitElement {
|
||||
></ha-menu-button>
|
||||
<div main-title>${this.hass.localize("panel.map")}</div>
|
||||
${!__DEMO__ && this.hass.user?.is_admin
|
||||
? html`<mwc-icon-button @click=${this._openZonesEditor}
|
||||
><ha-svg-icon .path=${mdiPencil}></ha-svg-icon
|
||||
></mwc-icon-button>`
|
||||
? html` <ha-icon-button
|
||||
.label=${this.hass!.localize("ui.panel.map.edit_zones")}
|
||||
.path=${mdiPencil}
|
||||
@click=${this._openZonesEditor}
|
||||
></ha-icon-button>`
|
||||
: ""}
|
||||
</app-toolbar>
|
||||
</app-header>
|
||||
|
||||
@ -1,4 +1,3 @@
|
||||
import "@material/mwc-icon-button";
|
||||
import "@polymer/app-layout/app-header/app-header";
|
||||
import "@polymer/app-layout/app-toolbar/app-toolbar";
|
||||
import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
|
||||
|
||||
@ -1,5 +1,4 @@
|
||||
import "@material/mwc-button/mwc-button";
|
||||
import "@material/mwc-icon-button/mwc-icon-button";
|
||||
import { mdiDelete } from "@mdi/js";
|
||||
import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
|
||||
import { customElement, property } from "lit/decorators";
|
||||
@ -8,7 +7,7 @@ import { relativeTime } from "../../common/datetime/relative_time";
|
||||
import { fireEvent } from "../../common/dom/fire_event";
|
||||
import "../../components/ha-card";
|
||||
import "../../components/ha-settings-row";
|
||||
import "../../components/ha-svg-icon";
|
||||
import "../../components/ha-icon-button";
|
||||
import { RefreshToken } from "../../data/refresh_token";
|
||||
import {
|
||||
showAlertDialog,
|
||||
@ -72,14 +71,13 @@ class HaLongLivedTokens extends LitElement {
|
||||
relativeTime(new Date(token.created_at), this.hass.locale)
|
||||
)}
|
||||
</div>
|
||||
<mwc-icon-button
|
||||
<ha-icon-button
|
||||
.token=${token}
|
||||
.disabled=${token.is_current}
|
||||
.title=${this.hass.localize(`ui.common.delete`)}
|
||||
.label=${this.hass.localize("ui.common.delete")}
|
||||
.path=${mdiDelete}
|
||||
@click=${this._deleteToken}
|
||||
>
|
||||
<ha-svg-icon .path=${mdiDelete}></ha-svg-icon>
|
||||
</mwc-icon-button>
|
||||
></ha-icon-button>
|
||||
</ha-settings-row>`
|
||||
)}
|
||||
</div>
|
||||
@ -171,7 +169,7 @@ class HaLongLivedTokens extends LitElement {
|
||||
mwc-button {
|
||||
--mdc-theme-primary: var(--primary-color);
|
||||
}
|
||||
mwc-icon-button {
|
||||
ha-icon-button {
|
||||
color: var(--primary-text-color);
|
||||
}
|
||||
`,
|
||||
|
||||
@ -1,4 +1,3 @@
|
||||
import "@material/mwc-icon-button/mwc-icon-button";
|
||||
import { mdiDelete } from "@mdi/js";
|
||||
import "@polymer/paper-tooltip/paper-tooltip";
|
||||
import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
|
||||
@ -8,7 +7,7 @@ import { relativeTime } from "../../common/datetime/relative_time";
|
||||
import { fireEvent } from "../../common/dom/fire_event";
|
||||
import "../../components/ha-card";
|
||||
import "../../components/ha-settings-row";
|
||||
import "../../components/ha-svg-icon";
|
||||
import "../../components/ha-icon-button";
|
||||
import { RefreshToken } from "../../data/refresh_token";
|
||||
import {
|
||||
showAlertDialog,
|
||||
@ -93,14 +92,13 @@ class HaRefreshTokens extends LitElement {
|
||||
)}
|
||||
</paper-tooltip>`
|
||||
: ""}
|
||||
<mwc-icon-button
|
||||
<ha-icon-button
|
||||
.token=${token}
|
||||
.disabled=${token.is_current}
|
||||
.title=${this.hass.localize(`ui.common.delete`)}
|
||||
.label=${this.hass.localize("ui.common.delete")}
|
||||
.path=${mdiDelete}
|
||||
@click=${this._deleteToken}
|
||||
>
|
||||
<ha-svg-icon .path=${mdiDelete}></ha-svg-icon>
|
||||
</mwc-icon-button>
|
||||
></ha-icon-button>
|
||||
</div>
|
||||
</ha-settings-row>`
|
||||
)
|
||||
@ -144,7 +142,7 @@ class HaRefreshTokens extends LitElement {
|
||||
ha-settings-row {
|
||||
padding: 0;
|
||||
}
|
||||
mwc-icon-button {
|
||||
ha-icon-button {
|
||||
color: var(--primary-text-color);
|
||||
}
|
||||
`,
|
||||
|
||||
@ -12,6 +12,7 @@ import {
|
||||
import { customElement, property, state } from "lit/decorators";
|
||||
import memoizeOne from "memoize-one";
|
||||
import { isComponentLoaded } from "../../common/config/is_component_loaded";
|
||||
import "../../components/ha-icon-button";
|
||||
import "../../components/ha-menu-button";
|
||||
import { showVoiceCommandDialog } from "../../dialogs/voice-command-dialog/show-ha-voice-command-dialog";
|
||||
import "../../layouts/ha-app-layout";
|
||||
@ -60,14 +61,13 @@ class PanelShoppingList extends LitElement {
|
||||
<div main-title>${this.hass.localize("panel.shopping_list")}</div>
|
||||
${this._conversation(this.hass.config.components)
|
||||
? html`
|
||||
<mwc-icon-button
|
||||
<ha-icon-button
|
||||
.label=${this.hass!.localize(
|
||||
"ui.panel.shopping_list.start_conversation"
|
||||
)}
|
||||
.path=${mdiMicrophone}
|
||||
@click=${this._showVoiceCommandDialog}
|
||||
>
|
||||
<ha-svg-icon .path=${mdiMicrophone}></ha-svg-icon>
|
||||
</mwc-icon-button>
|
||||
></ha-icon-button>
|
||||
`
|
||||
: ""}
|
||||
</app-toolbar>
|
||||
|
||||
@ -282,6 +282,7 @@
|
||||
"enable": "Enable",
|
||||
"disable": "Disable",
|
||||
"close": "Close",
|
||||
"clear": "Clear",
|
||||
"leave": "Leave",
|
||||
"stay": "Stay",
|
||||
"next": "Next",
|
||||
@ -294,7 +295,7 @@
|
||||
"not_now": "Not now",
|
||||
"skip": "Skip",
|
||||
"menu": "Menu",
|
||||
"overflow_menu": "Overflow menu",
|
||||
"help": "Help",
|
||||
"successfully_saved": "Successfully saved",
|
||||
"successfully_deleted": "Successfully deleted",
|
||||
"error_required": "Required",
|
||||
@ -341,6 +342,7 @@
|
||||
"entity": {
|
||||
"entity-picker": {
|
||||
"entity": "Entity",
|
||||
"edit": "Edit",
|
||||
"clear": "Clear",
|
||||
"no_match": "No matching entities found",
|
||||
"show_entities": "Show entities"
|
||||
@ -351,8 +353,10 @@
|
||||
}
|
||||
},
|
||||
"target-picker": {
|
||||
"expand": "Expand",
|
||||
"expand_area_id": "Expand this area into the separate devices and entities that it contains. After expanding, it will not update the devices and entities when the area changes.",
|
||||
"expand_device_id": "Expand this device into the separate entities that it contains. After expanding, it will not update the entities when the device changes.",
|
||||
"remove": "Remove",
|
||||
"remove_area_id": "Remove area",
|
||||
"remove_device_id": "Remove device",
|
||||
"remove_entity_id": "Remove entity",
|
||||
@ -895,7 +899,9 @@
|
||||
"sidebar": {
|
||||
"external_app_configuration": "App Configuration",
|
||||
"sidebar_toggle": "Sidebar Toggle",
|
||||
"done": "Done"
|
||||
"done": "Done",
|
||||
"hide_panel": "Hide panel",
|
||||
"show_panel": "Show panel"
|
||||
},
|
||||
"panel": {
|
||||
"my": {
|
||||
@ -922,6 +928,7 @@
|
||||
"areas": {
|
||||
"caption": "Areas",
|
||||
"description": "Group devices and entities into areas",
|
||||
"edit_settings": "Area settings",
|
||||
"data_table": {
|
||||
"area": "Area",
|
||||
"devices": "Devices",
|
||||
@ -1209,6 +1216,7 @@
|
||||
},
|
||||
"info": {
|
||||
"caption": "Info",
|
||||
"copy_menu": "Copy menu",
|
||||
"copy_raw": "Raw Text",
|
||||
"copy_github": "For GitHub",
|
||||
"description": "Version, system health and links to documentation",
|
||||
@ -1243,6 +1251,7 @@
|
||||
"no_issues": "There are no new issues!",
|
||||
"clear": "Clear",
|
||||
"refresh": "Refresh",
|
||||
"copy": "Copy log entry",
|
||||
"multiple_messages": "message first occurred at {time} and shows up {counter} times",
|
||||
"level": {
|
||||
"critical": "CRITICAL",
|
||||
@ -1771,6 +1780,13 @@
|
||||
"ambiguous_entities": "One or more devices have more than one matching entity, please pick the one you want to use.",
|
||||
"unknown_placeholder": "Unknown placeholder"
|
||||
}
|
||||
},
|
||||
"trace": {
|
||||
"refresh": "[%key:ui::common::refresh%]",
|
||||
"download_trace": "Download trace",
|
||||
"edit_automation": "Edit automation",
|
||||
"older_trace": "Older trace",
|
||||
"newer_trace": "Newer trace"
|
||||
}
|
||||
},
|
||||
"blueprint": {
|
||||
@ -2101,6 +2117,7 @@
|
||||
"caption": "Devices",
|
||||
"description": "Manage configured devices",
|
||||
"device_info": "Device info",
|
||||
"edit_settings": "Edit settings",
|
||||
"unnamed_device": "Unnamed device",
|
||||
"unknown_error": "Unknown error",
|
||||
"name": "Name",
|
||||
@ -2276,6 +2293,7 @@
|
||||
"no_zones_created_yet": "Looks like you have not created any zones yet.",
|
||||
"create_zone": "Create Zone",
|
||||
"add_zone": "Add Zone",
|
||||
"edit_zone": "Edit Zone",
|
||||
"confirm_delete": "Are you sure you want to delete this zone?",
|
||||
"configured_in_yaml": "Zones configured via configuration.yaml cannot be edited via the UI.",
|
||||
"edit_home_zone": "The radius of the Home zone can't be edited from the frontend yet. Drag the marker on the map to move the home zone.",
|
||||
@ -2656,7 +2674,8 @@
|
||||
"group_name_placeholder": "Group Name",
|
||||
"create_group": "Zigbee Home Automation - Create Group",
|
||||
"create": "Create Group",
|
||||
"creating_group": "Creating Group"
|
||||
"creating_group": "Creating Group",
|
||||
"delete": "Delete Group"
|
||||
},
|
||||
"visualization": {
|
||||
"header": "Network Visualization",
|
||||
@ -2925,6 +2944,7 @@
|
||||
"lovelace": {
|
||||
"cards": {
|
||||
"confirm_delete": "Are you sure you want to delete this card?",
|
||||
"show_more_info": "Show more information",
|
||||
"actions": {
|
||||
"action_confirmation": "Are you sure you want to run action ''{action}''?",
|
||||
"no_entity_more_info": "No entity provided for more info dialog",
|
||||
@ -2964,6 +2984,9 @@
|
||||
"starting": {
|
||||
"description": "Home Assistant is starting, please wait…"
|
||||
},
|
||||
"map": {
|
||||
"reset_focus": "Reset focus"
|
||||
},
|
||||
"energy": {
|
||||
"loading": "Loading...",
|
||||
"no_data": "There is no data to show. It can take up to 2 hours for new data to arrive after you configure your energy dashboard.",
|
||||
@ -3131,6 +3154,8 @@
|
||||
"delete": "Delete card",
|
||||
"duplicate": "Duplicate card",
|
||||
"move": "Move to view",
|
||||
"move_up": "Move card up",
|
||||
"move_down": "Move card down",
|
||||
"move_before": "Move card before",
|
||||
"move_after": "Move card after",
|
||||
"options": "More options",
|
||||
@ -3471,6 +3496,9 @@
|
||||
"delete_prompt": "Delete this message?",
|
||||
"delete_button": "Delete"
|
||||
},
|
||||
"map": {
|
||||
"edit_zones": "Edit Zones"
|
||||
},
|
||||
"profile": {
|
||||
"current_user": "You are currently logged in as {fullName}.",
|
||||
"is_owner": "You are an owner.",
|
||||
@ -4119,6 +4147,7 @@
|
||||
"running_version": "You are currently running version {version}",
|
||||
"save": "[%key:ui::common::save%]",
|
||||
"close": "[%key:ui::common::close%]",
|
||||
"menu": "[%key:ui::common::menu%]",
|
||||
"show_more": "Show more information about this",
|
||||
"update_available": "{count, plural,\n one {Update}\n other {{count} updates}\n} pending",
|
||||
"update": "Update",
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user