diff --git a/cast/src/launcher/layout/hc-cast.ts b/cast/src/launcher/layout/hc-cast.ts index f592575e08..9fc2ab2273 100644 --- a/cast/src/launcher/layout/hc-cast.ts +++ b/cast/src/launcher/layout/hc-cast.ts @@ -1,5 +1,3 @@ -import "@material/mwc-button/mwc-button"; - import type { ActionDetail } from "@material/mwc-list/mwc-list"; import { mdiCast, mdiCastConnected, mdiViewDashboard } from "@mdi/js"; import type { Auth, Connection } from "home-assistant-js-websocket"; @@ -20,6 +18,7 @@ import { atLeastVersion } from "../../../../src/common/config/version"; import { toggleAttribute } from "../../../../src/common/dom/toggle_attribute"; import "../../../../src/components/ha-icon"; import "../../../../src/components/ha-list"; +import "../../../../src/components/ha-button"; import "../../../../src/components/ha-list-item"; import "../../../../src/components/ha-svg-icon"; import { @@ -63,12 +62,20 @@ class HcCast extends LitElement {

Stay logged in? - + YES - - + + NO - +

` @@ -78,10 +85,10 @@ class HcCast extends LitElement { : !this.castManager.status ? html`

- - + + Start Casting - +

` : html` @@ -121,14 +128,22 @@ class HcCast extends LitElement {
${this.castManager.status ? html` - - + + Manage - + ` : ""}
- Log out + Log out
`; @@ -245,13 +260,6 @@ class HcCast extends LitElement { color: var(--secondary-text-color); } - mwc-button ha-svg-icon { - margin-right: 8px; - margin-inline-end: 8px; - margin-inline-start: initial; - height: 18px; - } - ha-list-item ha-icon, ha-list-item ha-svg-icon { padding: 12px; diff --git a/cast/src/launcher/layout/hc-connect.ts b/cast/src/launcher/layout/hc-connect.ts index 31f88ae8eb..8ace920cbc 100644 --- a/cast/src/launcher/layout/hc-connect.ts +++ b/cast/src/launcher/layout/hc-connect.ts @@ -1,4 +1,3 @@ -import "@material/mwc-button"; import { mdiCastConnected, mdiCast } from "@mdi/js"; import type { Auth, @@ -28,6 +27,7 @@ import "../../../../src/layouts/hass-loading-screen"; import { registerServiceWorker } from "../../../../src/util/register-service-worker"; import "./hc-layout"; import "../../../../src/components/ha-textfield"; +import "../../../../src/components/ha-button"; const seeFAQ = (qid) => html` See the FAQ for more @@ -83,11 +83,14 @@ export class HcConnect extends LitElement { Unable to connect to ${tokens!.hassUrl}.
- - Retry - + Retry
- Log out + Log out
`; @@ -128,16 +131,19 @@ export class HcConnect extends LitElement { ${this.error ? html`

${this.error}

` : ""}
- + Show Demo - +
- Authorize + Authorize
`; @@ -309,10 +315,6 @@ export class HcConnect extends LitElement { color: darkred; } - mwc-button ha-svg-icon { - margin-left: 8px; - } - .spacer { flex: 1; } diff --git a/gallery/src/components/demo-black-white-row.ts b/gallery/src/components/demo-black-white-row.ts index fd4fef13f6..0216a59db2 100644 --- a/gallery/src/components/demo-black-white-row.ts +++ b/gallery/src/components/demo-black-white-row.ts @@ -1,11 +1,11 @@ -import "@material/mwc-button/mwc-button"; -import type { Button } from "@material/mwc-button"; import type { TemplateResult } from "lit"; import { html, LitElement, css, nothing } from "lit"; import { customElement, property } from "lit/decorators"; import { applyThemesOnElement } from "../../../src/common/dom/apply_themes_on_element"; import { fireEvent } from "../../../src/common/dom/fire_event"; import "../../../src/components/ha-card"; +import "../../../src/components/ha-button"; +import type { HaButton } from "../../../src/components/ha-button"; @customElement("demo-black-white-row") class DemoBlackWhiteRow extends LitElement { @@ -25,12 +25,9 @@ class DemoBlackWhiteRow extends LitElement {
- + Submit - +
@@ -40,12 +37,9 @@ class DemoBlackWhiteRow extends LitElement {
- + Submit - +
${this.value @@ -74,7 +68,7 @@ class DemoBlackWhiteRow extends LitElement { } handleSubmit(ev) { - const content = (ev.target as Button).closest(".content")!; + const content = (ev.target as HaButton).closest(".content")!; fireEvent(this, "submitted" as any, { slot: content.classList.contains("light") ? "light" : "dark", }); diff --git a/gallery/src/pages/components/ha-alert.markdown b/gallery/src/pages/components/ha-alert.markdown index 17816fb7e6..0ba70b3913 100644 --- a/gallery/src/pages/components/ha-alert.markdown +++ b/gallery/src/pages/components/ha-alert.markdown @@ -147,13 +147,13 @@ The `title ` option should not be used without a description. This is a success alert — check it out! - + ```html This is a success alert — check it out! - + ``` diff --git a/gallery/src/pages/components/ha-alert.ts b/gallery/src/pages/components/ha-alert.ts index ee7cce600d..cf4aa27ba2 100644 --- a/gallery/src/pages/components/ha-alert.ts +++ b/gallery/src/pages/components/ha-alert.ts @@ -1,10 +1,10 @@ -import "@material/mwc-button/mwc-button"; import type { TemplateResult } from "lit"; import { css, html, LitElement } from "lit"; import { customElement } from "lit/decorators"; import { applyThemesOnElement } from "../../../../src/common/dom/apply_themes_on_element"; import "../../../../src/components/ha-alert"; import "../../../../src/components/ha-card"; +import "../../../../src/components/ha-button"; import "../../../../src/components/ha-logo-svg"; const alerts: { @@ -78,13 +78,21 @@ const alerts: { title: "Error with action", description: "This is a test error alert with action", type: "error", - actionSlot: html``, + actionSlot: html``, }, { title: "Unsaved data", description: "You have unsaved data", type: "warning", - actionSlot: html``, + actionSlot: html``, }, { title: "Slotted icon", @@ -108,7 +116,7 @@ const alerts: { title: "Slotted action", description: "Alert with slotted action", type: "info", - actionSlot: html``, + actionSlot: html``, }, { description: "Dismissable information (RTL)", @@ -120,7 +128,7 @@ const alerts: { title: "Error with action", description: "This is a test error alert with action (RTL)", type: "error", - actionSlot: html``, + actionSlot: html``, rtl: true, }, { @@ -211,7 +219,7 @@ export class DemoHaAlert extends LitElement { max-height: 24px; width: 24px; } - mwc-button { + ha-button { --mdc-theme-primary: var(--primary-text-color); } `; diff --git a/gallery/src/pages/misc/util-long-press.ts b/gallery/src/pages/misc/util-long-press.ts index e111919bb5..12f36807c9 100644 --- a/gallery/src/pages/misc/util-long-press.ts +++ b/gallery/src/pages/misc/util-long-press.ts @@ -1,8 +1,8 @@ -import "@material/mwc-button"; import type { TemplateResult } from "lit"; import { css, html, LitElement } from "lit"; import { customElement } from "lit/decorators"; import "../../../../src/components/ha-card"; +import "../../../../src/components/ha-button"; import type { ActionHandlerEvent } from "../../../../src/data/lovelace/action_handler"; import { actionHandler } from "../../../../src/panels/lovelace/common/directives/action-handler-directive"; @@ -13,12 +13,13 @@ export class DemoUtilLongPress extends LitElement { ${[1, 2, 3].map( () => html` - (long) press me! - + diff --git a/hassio/src/addon-view/config/hassio-addon-network.ts b/hassio/src/addon-view/config/hassio-addon-network.ts index 794984e7a4..b3ce4a3a84 100644 --- a/hassio/src/addon-view/config/hassio-addon-network.ts +++ b/hassio/src/addon-view/config/hassio-addon-network.ts @@ -99,7 +99,8 @@ class HassioAddonNetwork extends LitElement { : nothing}
diff --git a/hassio/src/addon-view/info/hassio-addon-info.ts b/hassio/src/addon-view/info/hassio-addon-info.ts index e4c9c2cb17..4db6733682 100644 --- a/hassio/src/addon-view/info/hassio-addon-info.ts +++ b/hassio/src/addon-view/info/hassio-addon-info.ts @@ -25,6 +25,7 @@ import type { CSSResultGroup, TemplateResult } from "lit"; import { LitElement, css, html, nothing } from "lit"; import { customElement, property, state } from "lit/decorators"; import { classMap } from "lit/directives/class-map"; +import { ifDefined } from "lit/directives/if-defined"; import memoizeOne from "memoize-one"; import { atLeastVersion } from "../../../../src/common/config/version"; import { fireEvent } from "../../../../src/common/dom/fire_event"; @@ -187,12 +188,13 @@ class HassioAddonInfo extends LitElement { "addon.dashboard.protection_mode.content" )} + ${this.supervisor.localize( + "addon.dashboard.protection_mode.enable" + )} ` @@ -692,14 +694,16 @@ class HassioAddonInfo extends LitElement { ? this._computeIsRunning ? html` ${this.supervisor.localize("addon.dashboard.stop")} ${this.supervisor.localize("addon.dashboard.restart")} @@ -709,48 +713,19 @@ class HassioAddonInfo extends LitElement { ${this.supervisor.localize("addon.dashboard.start")} ` - : html` - - ${this.supervisor.localize("addon.dashboard.install")} - - `} + : nothing}
${this.addon.version - ? html` ${this._computeShowWebUI - ? html` - - - ${this.supervisor.localize( - "addon.dashboard.open_web_ui" - )} - - - ` - : nothing} - ${this._computeShowIngressUI - ? html` - - ${this.supervisor.localize( - "addon.dashboard.open_web_ui" - )} - - ` - : nothing} + ? html` @@ -759,14 +734,47 @@ class HassioAddonInfo extends LitElement { ${this.addon.build ? html` ${this.supervisor.localize("addon.dashboard.rebuild")} ` - : nothing}` - : nothing} + : nothing} + ${this._computeShowWebUI || this._computeShowIngressUI + ? html` + + ${this.supervisor.localize( + "addon.dashboard.open_web_ui" + )} + + ` + : nothing} + ` + : html` + + ${this.supervisor.localize("addon.dashboard.install")} + + `}
@@ -1146,15 +1154,17 @@ class HassioAddonInfo extends LitElement { ), dismissText: this.supervisor.localize("common.cancel"), }); + button.actionError(); button.progress = false; return; } } catch (err: any) { + button.actionError(); + button.progress = false; showAlertDialog(this, { title: "Failed to validate addon configuration", text: extractApiErrorMessage(err), }); - button.progress = false; return; } @@ -1168,11 +1178,15 @@ class HassioAddonInfo extends LitElement { }; fireEvent(this, "hass-api-called", eventdata); } catch (err: any) { + button.actionError(); + button.progress = false; showAlertDialog(this, { title: this.supervisor.localize("addon.dashboard.action_error.start"), text: extractApiErrorMessage(err), }); + return; } + button.actionSuccess(); button.progress = false; } @@ -1228,6 +1242,7 @@ class HassioAddonInfo extends LitElement { path: "uninstall", }; fireEvent(this, "hass-api-called", eventdata); + button.actionSuccess(); } catch (err: any) { showAlertDialog(this, { title: this.supervisor.localize( @@ -1235,6 +1250,7 @@ class HassioAddonInfo extends LitElement { ), text: extractApiErrorMessage(err), }); + button.actionError(); } button.progress = false; } diff --git a/hassio/src/backups/hassio-backups.ts b/hassio/src/backups/hassio-backups.ts index acfb5a0ca6..cd73cd3790 100644 --- a/hassio/src/backups/hassio-backups.ts +++ b/hassio/src/backups/hassio-backups.ts @@ -1,4 +1,3 @@ -import "@material/mwc-button"; import type { ActionDetail } from "@material/mwc-list"; import { mdiBackupRestore, mdiDelete, mdiDotsVertical, mdiPlus } from "@mdi/js"; @@ -17,6 +16,7 @@ import type { } from "../../../src/components/data-table/ha-data-table"; import "../../../src/components/ha-button-menu"; import "../../../src/components/ha-fab"; +import "../../../src/components/ha-button"; import "../../../src/components/ha-icon-button"; import "../../../src/components/ha-list-item"; import "../../../src/components/ha-svg-icon"; @@ -241,12 +241,13 @@ export class HassioBackups extends LitElement {
${!this.narrow ? html` - ${this.supervisor.localize("backup.delete_selected")} - + ` : html` mwc-button, + .header-btns > ha-button, .header-btns > ha-icon-button { margin: 8px; } diff --git a/hassio/src/dashboard/hassio-update.ts b/hassio/src/dashboard/hassio-update.ts index 5e5bd09396..e62e4ea327 100644 --- a/hassio/src/dashboard/hassio-update.ts +++ b/hassio/src/dashboard/hassio-update.ts @@ -1,10 +1,9 @@ -import "@material/mwc-button"; import type { CSSResultGroup } from "lit"; import { css, html, LitElement, nothing } from "lit"; import { customElement, property } from "lit/decorators"; import memoizeOne from "memoize-one"; -import "../../../src/components/buttons/ha-progress-button"; import "../../../src/components/ha-card"; +import "../../../src/components/ha-button"; import "../../../src/components/ha-settings-row"; import "../../../src/components/ha-svg-icon"; import type { HassioHassOSInfo } from "../../../src/data/hassio/host"; @@ -109,10 +108,9 @@ export class HassioUpdate extends LitElement {
- - - - + + ${this.supervisor.localize("common.show")} +
`; diff --git a/hassio/src/dialogs/backup/dialog-hassio-backup-location.ts b/hassio/src/dialogs/backup/dialog-hassio-backup-location.ts index aaa176019c..5d5ec48370 100644 --- a/hassio/src/dialogs/backup/dialog-hassio-backup-location.ts +++ b/hassio/src/dialogs/backup/dialog-hassio-backup-location.ts @@ -1,10 +1,10 @@ -import "@material/mwc-button/mwc-button"; import type { CSSResultGroup } from "lit"; import { css, html, LitElement, nothing } from "lit"; import { customElement, property, state } from "lit/decorators"; import memoizeOne from "memoize-one"; import { fireEvent } from "../../../../src/common/dom/fire_event"; import "../../../../src/components/ha-dialog"; +import "../../../../src/components/ha-button"; import "../../../../src/components/ha-form/ha-form"; import type { SchemaUnion } from "../../../../src/components/ha-form/types"; import { extractApiErrorMessage } from "../../../../src/data/hassio/common"; @@ -77,20 +77,21 @@ class HassioBackupLocationDialog extends LitElement { @value-changed=${this._valueChanged} dialogInitialFocus > - ${this._dialogParams.supervisor.localize("common.cancel")} - - + ${this._dialogParams.supervisor.localize("common.save")} - + `; } diff --git a/hassio/src/dialogs/backup/dialog-hassio-backup.ts b/hassio/src/dialogs/backup/dialog-hassio-backup.ts index 9fcf949eb8..c3df55c919 100644 --- a/hassio/src/dialogs/backup/dialog-hassio-backup.ts +++ b/hassio/src/dialogs/backup/dialog-hassio-backup.ts @@ -8,7 +8,6 @@ import { atLeastVersion } from "../../../../src/common/config/version"; import { fireEvent } from "../../../../src/common/dom/fire_event"; import { stopPropagation } from "../../../../src/common/dom/stop_propagation"; import { slugify } from "../../../../src/common/string/slugify"; -import "../../../../src/components/buttons/ha-progress-button"; import "../../../../src/components/ha-alert"; import "../../../../src/components/ha-button"; import "../../../../src/components/ha-button-menu"; diff --git a/hassio/src/dialogs/backup/dialog-hassio-create-backup.ts b/hassio/src/dialogs/backup/dialog-hassio-create-backup.ts index 5728084742..8c2c05d946 100644 --- a/hassio/src/dialogs/backup/dialog-hassio-create-backup.ts +++ b/hassio/src/dialogs/backup/dialog-hassio-create-backup.ts @@ -1,10 +1,9 @@ -import "@material/mwc-button"; import type { CSSResultGroup } from "lit"; import { css, html, LitElement, nothing } from "lit"; import { customElement, property, query, state } from "lit/decorators"; 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"; import "../../../../src/components/ha-spinner"; import { createCloseHeading } from "../../../../src/components/ha-dialog"; import { @@ -69,16 +68,20 @@ class HassioCreateBackupDialog extends LitElement { ${this._error ? html`${this._error}` : ""} - + ${this._dialogParams.supervisor.localize("common.close")} - - + ${this._dialogParams.supervisor.localize("backup.create")} - + `; } diff --git a/hassio/src/dialogs/datadisk/dialog-hassio-datadisk.ts b/hassio/src/dialogs/datadisk/dialog-hassio-datadisk.ts index c5c7b1c974..776d432d68 100644 --- a/hassio/src/dialogs/datadisk/dialog-hassio-datadisk.ts +++ b/hassio/src/dialogs/datadisk/dialog-hassio-datadisk.ts @@ -4,6 +4,7 @@ import { customElement, property, state } from "lit/decorators"; import memoizeOne from "memoize-one"; import { fireEvent } from "../../../../src/common/dom/fire_event"; import "../../../../src/components/ha-dialog"; +import "../../../../src/components/ha-button"; import "../../../../src/components/ha-list-item"; import "../../../../src/components/ha-select"; import "../../../../src/components/ha-spinner"; @@ -109,17 +110,18 @@ class HassioDatadiskDialog extends LitElement { "dialog.datadisk_move.no_devices" )} - ${this.dialogParams.supervisor.localize( "dialog.datadisk_move.cancel" )} - + - `} + `} `; } diff --git a/hassio/src/dialogs/network/dialog-hassio-network.ts b/hassio/src/dialogs/network/dialog-hassio-network.ts index 862b81769a..40fdba7f6f 100644 --- a/hassio/src/dialogs/network/dialog-hassio-network.ts +++ b/hassio/src/dialogs/network/dialog-hassio-network.ts @@ -1,4 +1,3 @@ -import "@material/mwc-button/mwc-button"; import { mdiClose } from "@mdi/js"; import type { CSSResultGroup } from "lit"; import { css, html, LitElement, nothing } from "lit"; @@ -6,6 +5,7 @@ import { customElement, property, state } from "lit/decorators"; import { cache } from "lit/directives/cache"; import { fireEvent } from "../../../../src/common/dom/fire_event"; import "../../../../src/components/ha-alert"; +import "../../../../src/components/ha-button"; import "../../../../src/components/ha-dialog"; import "../../../../src/components/ha-expansion-panel"; import "../../../../src/components/ha-formfield"; @@ -15,7 +15,6 @@ import "../../../../src/components/ha-list"; import "../../../../src/components/ha-list-item"; import "../../../../src/components/ha-password-field"; import "../../../../src/components/ha-radio"; -import "../../../../src/components/ha-spinner"; import "../../../../src/components/ha-textfield"; import type { HaTextField } from "../../../../src/components/ha-textfield"; import { extractApiErrorMessage } from "../../../../src/data/hassio/common"; @@ -154,16 +153,16 @@ export class DialogHassioNetwork )}

` : ""} - - ${this._scanning - ? html` - ` - : this.supervisor.localize("dialog.network.scan_ap")} - + ${this.supervisor.localize("dialog.network.scan_ap")} + ${this._accessPoints && this._accessPoints.accesspoints && this._accessPoints.accesspoints.length !== 0 @@ -270,16 +269,16 @@ export class DialogHassioNetwork : ""}
- + ${this.supervisor.localize("common.cancel")} + + - - - ${this._processing - ? html` ` - : this.supervisor.localize("common.save")} - + ${this.supervisor.localize("common.save")} +
`; } @@ -584,11 +583,7 @@ export class DialogHassioNetwork } } - mwc-button.warning { - --mdc-theme-primary: var(--error-color); - } - - mwc-button.scan { + ha-button.scan { margin-left: 8px; margin-inline-start: 8px; margin-inline-end: initial; diff --git a/hassio/src/dialogs/registries/dialog-hassio-registries.ts b/hassio/src/dialogs/registries/dialog-hassio-registries.ts index 4c4129a1e4..49cbe98f65 100644 --- a/hassio/src/dialogs/registries/dialog-hassio-registries.ts +++ b/hassio/src/dialogs/registries/dialog-hassio-registries.ts @@ -1,5 +1,4 @@ -import "@material/mwc-button/mwc-button"; -import { mdiDelete } from "@mdi/js"; +import { mdiDelete, mdiPlus } from "@mdi/js"; import type { CSSResultGroup, TemplateResult } from "lit"; import { css, html, LitElement } from "lit"; import { customElement, property, state } from "lit/decorators"; @@ -7,6 +6,8 @@ import { createCloseHeading } from "../../../../src/components/ha-dialog"; import "../../../../src/components/ha-form/ha-form"; import type { SchemaUnion } from "../../../../src/components/ha-form/types"; import "../../../../src/components/ha-icon-button"; +import "../../../../src/components/ha-button"; +import "../../../../src/components/ha-svg-icon"; import "../../../../src/components/ha-settings-row"; import { extractApiErrorMessage } from "../../../../src/data/hassio/common"; import { @@ -84,16 +85,19 @@ class HassioRegistriesDialog extends LitElement { dialogInitialFocus >
- + ${this.supervisor.localize("dialog.registries.add_registry")} - +
` : html`${this._registries?.length @@ -126,11 +130,17 @@ class HassioRegistriesDialog extends LitElement { `}
- + + ${this.supervisor.localize( "dialog.registries.add_new_registry" )} - +
`} `; diff --git a/hassio/src/dialogs/repositories/dialog-hassio-repositories.ts b/hassio/src/dialogs/repositories/dialog-hassio-repositories.ts index d7e9d90b28..55480714e1 100644 --- a/hassio/src/dialogs/repositories/dialog-hassio-repositories.ts +++ b/hassio/src/dialogs/repositories/dialog-hassio-repositories.ts @@ -1,5 +1,4 @@ -import "@material/mwc-button/mwc-button"; -import { mdiDelete, mdiDeleteOff } from "@mdi/js"; +import { mdiDelete, mdiDeleteOff, mdiPlus } from "@mdi/js"; import type { CSSResultGroup } from "lit"; import { css, html, LitElement, nothing } from "lit"; import { customElement, property, query, state } from "lit/decorators"; @@ -7,8 +6,9 @@ import memoizeOne from "memoize-one"; import { fireEvent } from "../../../../src/common/dom/fire_event"; import { caseInsensitiveStringCompare } from "../../../../src/common/string/compare"; import "../../../../src/components/ha-alert"; +import "../../../../src/components/ha-button"; import "../../../../src/components/ha-tooltip"; -import "../../../../src/components/ha-spinner"; +import "../../../../src/components/ha-svg-icon"; import { createCloseHeading } from "../../../../src/components/ha-dialog"; import "../../../../src/components/ha-icon-button"; import type { @@ -159,18 +159,22 @@ class HassioRepositoriesDialog extends LitElement { @keydown=${this._handleKeyAdd} dialogInitialFocus > - - ${this._processing - ? html`` - : this._dialogParams!.supervisor.localize( - "dialog.repositories.add" - )} - + + + ${this._dialogParams!.supervisor.localize( + "dialog.repositories.add" + )} + - + ${this._dialogParams?.supervisor.localize("common.close")} - + `; } @@ -191,16 +195,11 @@ class HassioRepositoriesDialog extends LitElement { border-radius: 4px; margin-top: 4px; } - mwc-button { + ha-button { margin-left: 8px; margin-inline-start: 8px; margin-inline-end: initial; } - ha-spinner { - display: block; - margin: 32px; - text-align: center; - } div.delete ha-icon-button { color: var(--error-color); } diff --git a/hassio/src/system/hassio-core-info.ts b/hassio/src/system/hassio-core-info.ts index 8190ef4bf6..7f94858df3 100644 --- a/hassio/src/system/hassio-core-info.ts +++ b/hassio/src/system/hassio-core-info.ts @@ -1,11 +1,10 @@ -import "@material/mwc-button"; - import type { CSSResultGroup, TemplateResult } from "lit"; import { css, html, LitElement } from "lit"; import { customElement, property, state } from "lit/decorators"; import { atLeastVersion } from "../../../src/common/config/version"; import "../../../src/components/buttons/ha-progress-button"; import "../../../src/components/ha-button-menu"; +import "../../../src/components/ha-button"; import "../../../src/components/ha-card"; import "../../../src/components/ha-settings-row"; import type { HassioStats } from "../../../src/data/hassio/common"; @@ -70,12 +69,12 @@ class HassioCoreInfo extends LitElement { ${!atLeastVersion(this.hass.config.version, 2021, 12) && this.supervisor.core.update_available ? html` - - - - + + ${this.supervisor.localize("common.show")} + ` : ""} diff --git a/hassio/src/system/hassio-host-info.ts b/hassio/src/system/hassio-host-info.ts index e517b44829..3f9755443c 100644 --- a/hassio/src/system/hassio-host-info.ts +++ b/hassio/src/system/hassio-host-info.ts @@ -1,5 +1,3 @@ -import "@material/mwc-button"; - import { mdiDotsVertical } from "@mdi/js"; import type { CSSResultGroup, TemplateResult } from "lit"; import { css, html, LitElement } from "lit"; @@ -8,10 +6,11 @@ import memoizeOne from "memoize-one"; import { atLeastVersion } from "../../../src/common/config/version"; import { fireEvent } from "../../../src/common/dom/fire_event"; import "../../../src/components/buttons/ha-progress-button"; +import "../../../src/components/ha-button"; import "../../../src/components/ha-button-menu"; import "../../../src/components/ha-card"; -import "../../../src/components/ha-list-item"; import "../../../src/components/ha-icon-button"; +import "../../../src/components/ha-list-item"; import "../../../src/components/ha-settings-row"; import { extractApiErrorMessage, @@ -77,24 +76,28 @@ class HassioHostInfo extends LitElement { ${this.supervisor.host.hostname} - - + ${this.supervisor.localize("system.host.change")} + ` : ""} ${this.supervisor.host.features.includes("network") - ? html` + ? html` ${this.supervisor.localize("system.host.ip_address")} ${primaryIpAddress} - - + ${this.supervisor.localize("system.host.change")} + ` : ""} @@ -108,12 +111,13 @@ class HassioHostInfo extends LitElement { ${!atLeastVersion(this.hass.config.version, 2021, 12) && this.supervisor.os.update_available ? html` - - - - + + ${this.supervisor.localize("common.show")} + ` : ""} diff --git a/hassio/src/system/hassio-supervisor-info.ts b/hassio/src/system/hassio-supervisor-info.ts index 2cf23b8909..e47bfe42df 100644 --- a/hassio/src/system/hassio-supervisor-info.ts +++ b/hassio/src/system/hassio-supervisor-info.ts @@ -5,6 +5,7 @@ import { atLeastVersion } from "../../../src/common/config/version"; 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"; import "../../../src/components/ha-card"; import "../../../src/components/ha-settings-row"; import "../../../src/components/ha-switch"; @@ -80,12 +81,13 @@ class HassioSupervisorInfo extends LitElement { ${!atLeastVersion(this.hass.config.version, 2021, 12) && this.supervisor.supervisor.update_available ? html` - - - - + + ${this.supervisor.localize("common.show")} + ` : ""} @@ -156,24 +158,28 @@ class HassioSupervisorInfo extends LitElement { ${this.supervisor.localize( "system.supervisor.unsupported_title" )} - - + ${this.supervisor.localize("common.learn_more")} + `} ${!this.supervisor.supervisor.healthy ? html` ${this.supervisor.localize( "system.supervisor.unhealthy_title" )} - - + ${this.supervisor.localize("common.learn_more")} + ` : ""} @@ -448,9 +454,6 @@ class HassioSupervisorInfo extends LitElement { white-space: normal; color: var(--secondary-text-color); } - ha-alert mwc-button { - --mdc-theme-primary: var(--primary-text-color); - } a { text-decoration: none; } diff --git a/src/auth/ha-auth-flow.ts b/src/auth/ha-auth-flow.ts index 2adce4d347..1de19507ef 100644 --- a/src/auth/ha-auth-flow.ts +++ b/src/auth/ha-auth-flow.ts @@ -1,5 +1,4 @@ /* eslint-disable lit/prefer-static-styles */ -import "@material/mwc-button"; import { genClientId } from "home-assistant-js-websocket"; import type { PropertyValues } from "lit"; import { html, LitElement, nothing } from "lit"; @@ -7,6 +6,7 @@ import { keyed } from "lit/directives/keyed"; import { customElement, property, state } from "lit/decorators"; import type { LocalizeFunc } from "../common/translations/localize"; import "../components/ha-alert"; +import "../components/ha-button"; import "../components/ha-checkbox"; import { computeInitialHaFormData } from "../components/ha-form/compute-initial-ha-form-data"; import "../components/ha-formfield"; @@ -173,15 +173,14 @@ export class HaAuthFlow extends LitElement { return html` ${this._renderStep(this.step)}
- ${this.step.type === "form" ? this.localize("ui.panel.page-authorize.form.next") : this.localize("ui.panel.page-authorize.form.start_over")} - +
`; case "error": @@ -192,9 +191,9 @@ export class HaAuthFlow extends LitElement { })}
- + ${this.localize("ui.panel.page-authorize.form.start_over")} - +
`; case "loading": diff --git a/src/components/buttons/ha-call-service-button.ts b/src/components/buttons/ha-call-service-button.ts index 1476ebcffc..668cf4f205 100644 --- a/src/components/buttons/ha-call-service-button.ts +++ b/src/components/buttons/ha-call-service-button.ts @@ -30,6 +30,7 @@ class HaCallServiceButton extends LitElement { diff --git a/src/components/buttons/ha-progress-button.ts b/src/components/buttons/ha-progress-button.ts index 56ef9719c3..1ae8f3cd91 100644 --- a/src/components/buttons/ha-progress-button.ts +++ b/src/components/buttons/ha-progress-button.ts @@ -5,6 +5,13 @@ import { customElement, property, state } from "lit/decorators"; import "../ha-button"; import "../ha-spinner"; import "../ha-svg-icon"; +import type { Appearance } from "../ha-button"; + +const HIGHLIGHT_APPEARANCE = { + accent: "accent" as Appearance, + filled: "accent" as Appearance, + plain: "filled" as Appearance, +}; @customElement("ha-progress-button") export class HaProgressButton extends LitElement { @@ -12,30 +19,53 @@ export class HaProgressButton extends LitElement { @property({ type: Boolean }) public disabled = false; - @property({ type: Boolean }) public progress = false; + @property({ type: Boolean, reflect: true }) public progress = false; - @property({ type: Boolean }) public raised = false; + @property() appearance: Appearance = "accent"; - @property({ type: Boolean }) public unelevated = false; + @property() variant: + | "primary" + | "danger" + | "neutral" + | "warning" + | "success" = "primary"; @state() private _result?: "success" | "error"; + @state() private _hasInitialIcon = false; + public render(): TemplateResult { - const overlay = this._result || this.progress; + const appearance = + this.progress || this._result + ? HIGHLIGHT_APPEARANCE[this.appearance] + : this.appearance; + return html` - - ${this.label} + ${this._hasInitialIcon + ? html`` + : nothing} + ${this._result + ? html`` + : this.label} - ${!overlay + ${!this._result ? nothing : html`
@@ -43,14 +73,20 @@ export class HaProgressButton extends LitElement { ? html`` : this._result === "error" ? html`` - : this.progress - ? html`` - : nothing} + : nothing}
`} `; } + firstUpdated() { + const iconSlot = this.shadowRoot!.querySelector( + 'slot[name="icon"]' + ) as HTMLSlotElement; + this._hasInitialIcon = + iconSlot && iconSlot.assignedNodes({ flatten: true }).length > 0; + } + public actionSuccess(): void { this._setResult("success"); } @@ -71,47 +107,23 @@ export class HaProgressButton extends LitElement { outline: none; display: inline-block; position: relative; + } + + :host([progress]) { pointer-events: none; } ha-button { transition: all 1s; - pointer-events: initial; - } - - ha-button.success { - --mdc-theme-primary: white; - background-color: var(--success-color); - transition: none; - border-radius: 4px; - pointer-events: none; - } - - ha-button[unelevated].success, - ha-button[raised].success { - --mdc-theme-primary: var(--success-color); - --mdc-theme-on-primary: white; - } - - ha-button.error { - --mdc-theme-primary: white; - background-color: var(--error-color); - transition: none; - border-radius: 4px; - pointer-events: none; - } - - ha-button[unelevated].error, - ha-button[raised].error { - --mdc-theme-primary: var(--error-color); - --mdc-theme-on-primary: white; } .progress { - bottom: 4px; + bottom: 0; + display: flex; + justify-content: center; + align-items: center; position: absolute; - text-align: center; - top: 4px; + top: 0; width: 100%; } diff --git a/src/components/ha-button.ts b/src/components/ha-button.ts index df8a16f558..05c1161125 100644 --- a/src/components/ha-button.ts +++ b/src/components/ha-button.ts @@ -3,6 +3,8 @@ import styles from "@shoelace-style/shoelace/dist/components/button/button.style import { css } from "lit"; import { customElement, property } from "lit/decorators"; +export type Appearance = "accent" | "filled" | "plain"; + /** * Home Assistant button component * @@ -35,12 +37,15 @@ import { customElement, property } from "lit/decorators"; * @cssprop --ha-button-font-size - Font weight for the button text. * * @attr {("small"|"medium")} size - Sets the button size. - * @attr {("primary"|"danger"|"neutral"|"warning")} variant - Sets the button color variant. "primary" is default. + * @attr {("primary"|"danger"|"neutral"|"warning"|"success")} variant - Sets the button color variant. "primary" is default. * @attr {("accent"|"filled"|"plain")} appearance - Sets the button appearance. */ @customElement("ha-button") export class HaButton extends Button { - @property({ reflect: true }) appearance?: "accent" | "filled" | "plain"; + @property({ reflect: true }) appearance?: Appearance; + + @property({ type: Boolean, attribute: "hide-content", reflect: true }) + hideContent = false; static override styles = [ styles, @@ -97,6 +102,12 @@ export class HaButton extends Button { --ha-button-theme-lighter-color: #fef3cd; } + :host([variant="success"]) { + --ha-button-theme-color: var(--success-color); + --ha-button-theme-darker-color: #275e2a; + --ha-button-theme-lighter-color: #5ce463; + } + .button { height: var(--ha-button-height, var(--button-height, 40px)); align-items: center; @@ -113,11 +124,13 @@ export class HaButton extends Button { .button--standard.button--neutral, .button--standard.button--danger, .button--standard.button--warning, + .button--standard.button--success, .button--standard.button--default:active:not(.button--disabled), .button--standard.button--primary:active:not(.button--disabled), .button--standard.button--neutral:active:not(.button--disabled), .button--standard.button--danger:active:not(.button--disabled), .button--standard.button--warning:active:not(.button--disabled), + .button--standard.button--success:active:not(.button--disabled), .button:active:not(.button--disabled) { background-color: var(--ha-button-theme-color); color: var(--ha-button-text-color, var(--white-color)); @@ -127,6 +140,7 @@ export class HaButton extends Button { .button--standard.button--primary:hover:not(.button--disabled), .button--standard.button--neutral:hover:not(.button--disabled), .button--standard.button--warning:hover:not(.button--disabled), + .button--standard.button--success:hover:not(.button--disabled), .button--standard.button--danger:hover:not(.button--disabled) { background-color: var(--ha-button-theme-darker-color); color: var(--ha-button-text-color, var(--white-color)); @@ -167,6 +181,17 @@ export class HaButton extends Button { .button--caret.button--small .button__label { padding-inline-end: 4px; } + + /* + * hide content for overlays + */ + + :host([hide-content]) .button .button__prefix, + :host([hide-content]) .button .button__label, + :host([hide-content]) .button .button__suffix, + :host([hide-content]) .button .button__caret { + visibility: hidden; + } `, ]; } diff --git a/src/components/ha-dialog-date-picker.ts b/src/components/ha-dialog-date-picker.ts index c86a5f89eb..54a8cdda0c 100644 --- a/src/components/ha-dialog-date-picker.ts +++ b/src/components/ha-dialog-date-picker.ts @@ -1,4 +1,3 @@ -import "@material/mwc-button/mwc-button"; import "app-datepicker"; import { format } from "date-fns"; import { css, html, LitElement, nothing } from "lit"; @@ -9,6 +8,7 @@ import { haStyleDialog } from "../resources/styles"; import type { HomeAssistant } from "../types"; import type { DatePickerDialogParams } from "./ha-date-input"; import "./ha-dialog"; +import "./ha-button"; @customElement("ha-dialog-date-picker") export class HaDialogDatePicker extends LitElement { @@ -51,23 +51,33 @@ export class HaDialogDatePicker extends LitElement { .firstDayOfWeek=${this._params.firstWeekday} > ${this._params.canClear - ? html` ${this.hass.localize("ui.dialogs.date-picker.clear")} - ` + ` : nothing} - + ${this.hass.localize("ui.dialogs.date-picker.today")} - - + + ${this.hass.localize("ui.common.cancel")} - - + + ${this.hass.localize("ui.common.ok")} - + `; } diff --git a/src/components/ha-lawn_mower-action-button.ts b/src/components/ha-lawn_mower-action-button.ts index 95a4314362..f78ca85656 100644 --- a/src/components/ha-lawn_mower-action-button.ts +++ b/src/components/ha-lawn_mower-action-button.ts @@ -1,7 +1,7 @@ -import "@material/mwc-button"; import { LitElement, css, html } from "lit"; import { customElement, property } from "lit/decorators"; import { supportsFeature } from "../common/entity/supports-feature"; +import "./ha-button"; import type { LawnMowerEntity, LawnMowerEntityState } from "../data/lawn_mower"; import { LawnMowerEntityFeature } from "../data/lawn_mower"; import type { HomeAssistant } from "../types"; @@ -49,16 +49,21 @@ class HaLawnMowerActionButton extends LitElement { if (action && supportsFeature(this.stateObj, action.feature)) { return html` - + ${this.hass.localize(`ui.card.lawn_mower.actions.${action.action}`)} - + `; } return html` - + ${this.hass.formatEntityState(this.stateObj)} - + `; } @@ -72,17 +77,13 @@ class HaLawnMowerActionButton extends LitElement { } static styles = css` - mwc-button { + ha-button { top: 3px; height: 37px; margin-right: -0.57em; margin-inline-end: -0.57em; margin-inline-start: initial; } - mwc-button[disabled] { - background-color: transparent; - color: var(--secondary-text-color); - } `; } diff --git a/src/dialogs/notifications/notification-item-template.ts b/src/dialogs/notifications/notification-item-template.ts index b2bb5cdeee..c9859f9102 100644 --- a/src/dialogs/notifications/notification-item-template.ts +++ b/src/dialogs/notifications/notification-item-template.ts @@ -39,6 +39,8 @@ export class HuiNotificationItemTemplate extends LitElement { .actions { border-top: 1px solid var(--divider-color, #e8e8e8); padding: 5px 16px; + display: flex; + justify-content: flex-end; } ::slotted(.primary) { diff --git a/src/dialogs/notifications/persistent-notification-item.ts b/src/dialogs/notifications/persistent-notification-item.ts index 2e4b99b6be..819ec413fd 100644 --- a/src/dialogs/notifications/persistent-notification-item.ts +++ b/src/dialogs/notifications/persistent-notification-item.ts @@ -41,7 +41,10 @@ export class HuiPersistentNotificationItem extends LitElement { - ${this.hass.localize( "ui.card.persistent_notification.dismiss" )} - - + + ${this.hass.localize( "ui.panel.config.backup.encryption_key.download_emergency_kit_action" )} @@ -54,7 +59,12 @@ class HaBackupConfigEncryptionKey extends LitElement { "ui.panel.config.backup.encryption_key.show_encryption_key_description" )} - + ${this.hass.localize( "ui.panel.config.backup.encryption_key.show_encryption_key_action" )} @@ -71,7 +81,13 @@ class HaBackupConfigEncryptionKey extends LitElement { "ui.panel.config.backup.encryption_key.change_encryption_key_description" )} - + ${this.hass.localize( "ui.panel.config.backup.encryption_key.change_encryption_key_action" )} @@ -141,8 +157,9 @@ class HaBackupConfigEncryptionKey extends LitElement { ha-md-list-item { --md-item-overflow: visible; } - .danger { - --mdc-theme-primary: var(--error-color); + + ha-button[size="small"] ha-svg-icon { + --mdc-icon-size: 16px; } `; } diff --git a/src/panels/config/backup/components/ha-backup-details-restore.ts b/src/panels/config/backup/components/ha-backup-details-restore.ts index 6ee18e8e85..f7da7cf38a 100644 --- a/src/panels/config/backup/components/ha-backup-details-restore.ts +++ b/src/panels/config/backup/components/ha-backup-details-restore.ts @@ -67,7 +67,8 @@ class HaBackupDetailsRestore extends LitElement { ${this.localize( `ui.panel.${this.translationKeyPanel}.details.restore.action` diff --git a/src/panels/config/backup/components/overview/ha-backup-overview-backups.ts b/src/panels/config/backup/components/overview/ha-backup-overview-backups.ts index 583f6c6d57..76bcc6e5ac 100644 --- a/src/panels/config/backup/components/overview/ha-backup-overview-backups.ts +++ b/src/panels/config/backup/components/overview/ha-backup-overview-backups.ts @@ -100,7 +100,7 @@ class HaBackupOverviewBackups extends LitElement {
- + ${this.hass.localize( "ui.panel.config.backup.overview.backups.show_all" )} diff --git a/src/panels/config/backup/components/overview/ha-backup-overview-settings.ts b/src/panels/config/backup/components/overview/ha-backup-overview-settings.ts index 4fd90b7048..d38bc0a691 100644 --- a/src/panels/config/backup/components/overview/ha-backup-overview-settings.ts +++ b/src/panels/config/backup/components/overview/ha-backup-overview-settings.ts @@ -285,7 +285,7 @@ class HaBackupBackupsSummary extends LitElement {
- + ${this.hass.localize( "ui.panel.config.backup.overview.settings.configure" )} diff --git a/src/panels/config/backup/dialogs/dialog-generate-backup.ts b/src/panels/config/backup/dialogs/dialog-generate-backup.ts index 65d70784c3..bcfff67081 100644 --- a/src/panels/config/backup/dialogs/dialog-generate-backup.ts +++ b/src/panels/config/backup/dialogs/dialog-generate-backup.ts @@ -204,7 +204,7 @@ class DialogGenerateBackup extends LitElement implements HassDialog {
${isFirstStep ? html` - + ${this.hass.localize("ui.common.cancel")} ` diff --git a/src/panels/config/backup/ha-config-backup-settings.ts b/src/panels/config/backup/ha-config-backup-settings.ts index 1659777828..80a117f08b 100644 --- a/src/panels/config/backup/ha-config-backup-settings.ts +++ b/src/panels/config/backup/ha-config-backup-settings.ts @@ -274,44 +274,42 @@ class HaConfigBackupSettings extends LitElement { )}
- - - ${this.hass.localize( - "ui.panel.config.voice_assistants.assistants.cloud.sign_in" - )} - - - - - ${this.hass.localize( - "ui.panel.config.voice_assistants.assistants.cloud.try_one_month" - )} - - + + ${this.hass.localize( + "ui.panel.config.voice_assistants.assistants.cloud.sign_in" + )} + + + ${this.hass.localize( + "ui.panel.config.voice_assistants.assistants.cloud.try_one_month" + )} +
` : nothing}
- - - - ${this.hass.localize( - "ui.panel.config.backup.settings.locations.more_locations" - )} - - + + ${this.hass.localize( + "ui.panel.config.backup.settings.locations.more_locations" + )} + ${supervisor - ? html` - - ${this.hass.localize( - "ui.panel.config.backup.settings.locations.manage_network_storage" - )} - - ` + ? html` + ${this.hass.localize( + "ui.panel.config.backup.settings.locations.manage_network_storage" + )} + ` : nothing}
@@ -549,6 +547,10 @@ class HaConfigBackupSettings extends LitElement { display: flex; justify-content: space-between; } + + ha-button[size="small"] ha-svg-icon { + --mdc-icon-size: 16px; + } `; } diff --git a/src/panels/config/cloud/account/dialog-cloud-tts-try.ts b/src/panels/config/cloud/account/dialog-cloud-tts-try.ts index 73556815d4..a16e0cd761 100644 --- a/src/panels/config/cloud/account/dialog-cloud-tts-try.ts +++ b/src/panels/config/cloud/account/dialog-cloud-tts-try.ts @@ -1,5 +1,3 @@ -import "@material/mwc-button"; - import { mdiPlayCircleOutline, mdiRobot } from "@mdi/js"; import type { CSSResultGroup } from "lit"; import { css, html, LitElement, nothing } from "lit"; @@ -13,6 +11,7 @@ import { supportsFeature } from "../../../../common/entity/supports-feature"; import { createCloseHeading } from "../../../../components/ha-dialog"; import "../../../../components/ha-list-item"; import "../../../../components/ha-select"; +import "../../../../components/ha-button"; import "../../../../components/ha-textarea"; import type { HaTextArea } from "../../../../components/ha-textarea"; import { showAutomationEditor } from "../../../../data/automation"; @@ -118,26 +117,28 @@ export class DialogTryTts extends LitElement { )}
- - - - + ${this.hass.localize("ui.panel.config.cloud.account.tts.dialog.play")} + + - - + + ${this.hass.localize( + "ui.panel.config.cloud.account.tts.dialog.create_automation" + )} + `; } diff --git a/src/panels/config/cloud/dialog-cloud-certificate/dialog-cloud-certificate.ts b/src/panels/config/cloud/dialog-cloud-certificate/dialog-cloud-certificate.ts index d8752ecabb..44f4629fe8 100644 --- a/src/panels/config/cloud/dialog-cloud-certificate/dialog-cloud-certificate.ts +++ b/src/panels/config/cloud/dialog-cloud-certificate/dialog-cloud-certificate.ts @@ -1,4 +1,3 @@ -import "@material/mwc-button"; import type { CSSResultGroup } from "lit"; import { css, html, LitElement, nothing } from "lit"; import { customElement, state } from "lit/decorators"; @@ -7,6 +6,7 @@ import { fireEvent } from "../../../../common/dom/fire_event"; import { createCloseHeading } from "../../../../components/ha-dialog"; import { haStyleDialog } from "../../../../resources/styles"; import type { HomeAssistant } from "../../../../types"; +import "../../../../components/ha-button"; import type { CloudCertificateParams as CloudCertificateDialogParams } from "./show-dialog-cloud-certificate"; @customElement("dialog-cloud-certificate") @@ -74,11 +74,11 @@ class DialogCloudCertificate extends LitElement { - + ${this.hass!.localize( "ui.panel.config.cloud.dialog_certificate.close" )} - + `; } diff --git a/src/panels/config/cloud/dialog-manage-cloudhook/dialog-manage-cloudhook.ts b/src/panels/config/cloud/dialog-manage-cloudhook/dialog-manage-cloudhook.ts index 909866095e..c7c0ced613 100644 --- a/src/panels/config/cloud/dialog-manage-cloudhook/dialog-manage-cloudhook.ts +++ b/src/panels/config/cloud/dialog-manage-cloudhook/dialog-manage-cloudhook.ts @@ -1,4 +1,3 @@ -import "@material/mwc-button"; import { mdiOpenInNew } from "@mdi/js"; import type { CSSResultGroup } from "lit"; import { css, html, LitElement, nothing } from "lit"; @@ -11,6 +10,7 @@ import type { HomeAssistant } from "../../../../types"; import { documentationUrl } from "../../../../util/documentation-url"; import type { WebhookDialogParams } from "./show-dialog-manage-cloudhook"; +import "../../../../components/ha-button"; import "../../../../components/ha-copy-textfield"; export class DialogManageCloudhook extends LitElement { @@ -86,21 +86,20 @@ export class DialogManageCloudhook extends LitElement { > - - - ${this.hass!.localize( - "ui.panel.config.cloud.dialog_cloudhook.view_documentation" - )} - - - + ${this.hass!.localize( + "ui.panel.config.cloud.dialog_cloudhook.view_documentation" + )} + + ${this.hass!.localize("ui.panel.config.cloud.dialog_cloudhook.close")} - + `; } diff --git a/src/panels/config/core/ha-config-analytics.ts b/src/panels/config/core/ha-config-analytics.ts index 6beac677d9..4de52cd159 100644 --- a/src/panels/config/core/ha-config-analytics.ts +++ b/src/panels/config/core/ha-config-analytics.ts @@ -1,12 +1,14 @@ -import "@material/mwc-button/mwc-button"; +import { mdiOpenInNew } from "@mdi/js"; import type { CSSResultGroup, PropertyValues, TemplateResult } from "lit"; import { css, html, LitElement } from "lit"; import { customElement, property, state } from "lit/decorators"; import { isComponentLoaded } from "../../../common/config/is_component_loaded"; import "../../../components/ha-analytics"; +import "../../../components/ha-button"; import "../../../components/ha-card"; import "../../../components/ha-checkbox"; import "../../../components/ha-settings-row"; +import "../../../components/ha-svg-icon"; import type { Analytics } from "../../../data/analytics"; import { getAnalyticsDetails, @@ -44,21 +46,24 @@ class ConfigAnalytics extends LitElement { >
- + ${this.hass.localize( "ui.panel.config.core.section.core.core_config.save_button" )} - +
- + ${this.hass.localize("ui.panel.config.analytics.learn_more")} - +
`; } @@ -122,6 +127,10 @@ class ConfigAnalytics extends LitElement { padding: 32px 0 16px; text-align: center; } + + ha-button[size="small"] ha-svg-icon { + --mdc-icon-size: 16px; + } `, // row-reverse so we tab first to "save" ]; } diff --git a/src/panels/config/core/updates/dialog-join-beta.ts b/src/panels/config/core/updates/dialog-join-beta.ts index 120ee48a9e..32018be0ba 100644 --- a/src/panels/config/core/updates/dialog-join-beta.ts +++ b/src/panels/config/core/updates/dialog-join-beta.ts @@ -1,10 +1,10 @@ -import "@material/mwc-button/mwc-button"; import { mdiOpenInNew } from "@mdi/js"; import type { CSSResultGroup } from "lit"; import { css, html, LitElement, nothing } from "lit"; import { customElement, property, state } from "lit/decorators"; import { fireEvent } from "../../../../common/dom/fire_event"; import "../../../../components/ha-alert"; +import "../../../../components/ha-button"; import { createCloseHeading } from "../../../../components/ha-dialog"; import type { HassDialog } from "../../../../dialogs/make-dialog-manager"; import { haStyleDialog } from "../../../../resources/styles"; @@ -67,12 +67,16 @@ export class DialogJoinBeta )} - + ${this.hass.localize("ui.common.cancel")} - - + + ${this.hass.localize("ui.dialogs.join_beta_channel.join")} - + `; } diff --git a/src/panels/config/devices/device-registry-detail/dialog-device-registry-detail.ts b/src/panels/config/devices/device-registry-detail/dialog-device-registry-detail.ts index 7b912ef489..90451c0776 100644 --- a/src/panels/config/devices/device-registry-detail/dialog-device-registry-detail.ts +++ b/src/panels/config/devices/device-registry-detail/dialog-device-registry-detail.ts @@ -1,4 +1,3 @@ -import "@material/mwc-button/mwc-button"; import type { CSSResultGroup } from "lit"; import { css, html, LitElement, nothing } from "lit"; import { customElement, property, state } from "lit/decorators"; @@ -7,6 +6,7 @@ import { computeDeviceNameDisplay } from "../../../../common/entity/compute_devi import "../../../../components/ha-alert"; import "../../../../components/ha-area-picker"; import "../../../../components/ha-dialog"; +import "../../../../components/ha-button"; import "../../../../components/ha-labels-picker"; import type { HaSwitch } from "../../../../components/ha-switch"; import "../../../../components/ha-textfield"; @@ -131,20 +131,21 @@ class DialogDeviceRegistryDetail extends LitElement { - ${this.hass.localize("ui.common.cancel")} - - + ${this.hass.localize("ui.dialogs.device-registry-detail.update")} - + `; } @@ -190,7 +191,7 @@ class DialogDeviceRegistryDetail extends LitElement { haStyle, haStyleDialog, css` - mwc-button.warning { + ha-button.warning { margin-right: auto; margin-inline-end: auto; margin-inline-start: initial; diff --git a/src/panels/config/devices/ha-config-device-page.ts b/src/panels/config/devices/ha-config-device-page.ts index e9cd570a80..4cfea54ae7 100644 --- a/src/panels/config/devices/ha-config-device-page.ts +++ b/src/panels/config/devices/ha-config-device-page.ts @@ -27,6 +27,7 @@ import { groupBy } from "../../../common/util/group-by"; import "../../../components/entity/ha-battery-icon"; import "../../../components/ha-alert"; import "../../../components/ha-button-menu"; +import "../../../components/ha-button"; import "../../../components/ha-expansion-panel"; import "../../../components/ha-icon-button"; import "../../../components/ha-icon-next"; @@ -405,9 +406,9 @@ export class HaConfigDevicePage extends LitElement { ${device.disabled_by === "user" ? html`
- + ${this.hass.localize("ui.common.enable")} - +
` : ""} @@ -750,7 +751,7 @@ export class HaConfigDevicePage extends LitElement { )} target=${ifDefined(firstDeviceAction!.target)} > - ` : ""} - + diff --git a/src/panels/config/energy/components/ha-energy-grid-settings.ts b/src/panels/config/energy/components/ha-energy-grid-settings.ts index ae58d26794..ab639fa37d 100644 --- a/src/panels/config/energy/components/ha-energy-grid-settings.ts +++ b/src/panels/config/energy/components/ha-energy-grid-settings.ts @@ -1,9 +1,9 @@ -import "@material/mwc-button/mwc-button"; import { mdiDelete, mdiHomeExportOutline, mdiHomeImportOutline, mdiPencil, + mdiPlus, mdiTransmissionTower, } from "@mdi/js"; import type { CSSResultGroup, TemplateResult } from "lit"; @@ -11,7 +11,9 @@ import { html, LitElement } from "lit"; import { customElement, property, state } from "lit/decorators"; import { fireEvent } from "../../../../common/dom/fire_event"; import "../../../../components/ha-card"; +import "../../../../components/ha-button"; import "../../../../components/ha-icon-button"; +import "../../../../components/ha-svg-icon"; import type { ConfigEntry } from "../../../../data/config_entries"; import { deleteConfigEntry, @@ -160,10 +162,15 @@ export class EnergyGridSettings extends LitElement { })}
- ${this.hass.localize( + + + ${this.hass.localize( "ui.panel.config.energy.grid.add_consumption" - )}
@@ -207,10 +214,15 @@ export class EnergyGridSettings extends LitElement { })}
- + ${this.hass.localize( "ui.panel.config.energy.grid.add_return" - )}
@@ -257,11 +269,16 @@ export class EnergyGridSettings extends LitElement { darkOptimized: this.hass.themes?.darkMode, })} /> - + + ${this.hass.localize( "ui.panel.config.energy.grid.add_co2_signal" )} - + `} diff --git a/src/panels/config/energy/dialogs/dialog-energy-battery-settings.ts b/src/panels/config/energy/dialogs/dialog-energy-battery-settings.ts index 745713ad85..1ffe3249f1 100644 --- a/src/panels/config/energy/dialogs/dialog-energy-battery-settings.ts +++ b/src/panels/config/energy/dialogs/dialog-energy-battery-settings.ts @@ -1,4 +1,3 @@ -import "@material/mwc-button/mwc-button"; import { mdiBatteryHigh } from "@mdi/js"; import type { CSSResultGroup } from "lit"; import { css, html, LitElement, nothing } from "lit"; @@ -6,6 +5,7 @@ import { customElement, property, state } from "lit/decorators"; import { fireEvent } from "../../../../common/dom/fire_event"; import "../../../../components/entity/ha-statistic-picker"; import "../../../../components/ha-dialog"; +import "../../../../components/ha-button"; import type { BatterySourceTypeEnergyPreference } from "../../../../data/energy"; import { emptyBatteryEnergyPreference, @@ -123,17 +123,21 @@ export class DialogEnergyBatterySettings @value-changed=${this._statisticFromChanged} > - + ${this.hass.localize("ui.common.cancel")} - - + ${this.hass.localize("ui.common.save")} - + `; } diff --git a/src/panels/config/energy/dialogs/dialog-energy-device-settings.ts b/src/panels/config/energy/dialogs/dialog-energy-device-settings.ts index 0f4b415444..c6aceb6081 100644 --- a/src/panels/config/energy/dialogs/dialog-energy-device-settings.ts +++ b/src/panels/config/energy/dialogs/dialog-energy-device-settings.ts @@ -1,4 +1,3 @@ -import "@material/mwc-button/mwc-button"; import { mdiDevices } from "@mdi/js"; import type { CSSResultGroup } from "lit"; import { css, html, LitElement, nothing } from "lit"; @@ -9,6 +8,7 @@ import "../../../../components/entity/ha-entity-picker"; import "../../../../components/entity/ha-statistic-picker"; import "../../../../components/ha-dialog"; import "../../../../components/ha-radio"; +import "../../../../components/ha-button"; import "../../../../components/ha-select"; import "../../../../components/ha-list-item"; import type { DeviceConsumptionEnergyPreference } from "../../../../data/energy"; @@ -183,16 +183,20 @@ export class DialogEnergyDeviceSettings )} - + ${this.hass.localize("ui.common.cancel")} - - + ${this.hass.localize("ui.common.save")} - + `; } diff --git a/src/panels/config/energy/dialogs/dialog-energy-solar-settings.ts b/src/panels/config/energy/dialogs/dialog-energy-solar-settings.ts index cc63e33b2f..3144ae6790 100644 --- a/src/panels/config/energy/dialogs/dialog-energy-solar-settings.ts +++ b/src/panels/config/energy/dialogs/dialog-energy-solar-settings.ts @@ -1,5 +1,4 @@ -import "@material/mwc-button/mwc-button"; -import { mdiSolarPower } from "@mdi/js"; +import { mdiPlus, mdiSolarPower } from "@mdi/js"; import type { CSSResultGroup } from "lit"; import { css, html, LitElement, nothing } from "lit"; import { customElement, property, state } from "lit/decorators"; @@ -9,7 +8,9 @@ import "../../../../components/ha-checkbox"; import type { HaCheckbox } from "../../../../components/ha-checkbox"; import "../../../../components/ha-dialog"; import "../../../../components/ha-formfield"; +import "../../../../components/ha-button"; import "../../../../components/ha-radio"; +import "../../../../components/ha-svg-icon"; import type { HaRadio } from "../../../../components/ha-radio"; import type { ConfigEntry } from "../../../../data/config_entries"; import { getConfigEntries } from "../../../../data/config_entries"; @@ -179,24 +180,33 @@ export class DialogEnergySolarSettings ` )} - + + ${this.hass.localize( "ui.panel.config.energy.solar.dialog.add_forecast" )} - + ` : ""} - + ${this.hass.localize("ui.common.cancel")} - - + ${this.hass.localize("ui.common.save")} - + `; } @@ -294,7 +304,7 @@ export class DialogEnergySolarSettings padding-inline-start: 32px; padding-inline-end: initial; } - .forecast-options mwc-button { + .forecast-options ha-button { padding-left: 8px; padding-inline-start: 8px; padding-inline-end: initial; diff --git a/src/panels/config/energy/dialogs/dialog-energy-water-settings.ts b/src/panels/config/energy/dialogs/dialog-energy-water-settings.ts index 85a857219e..46d1552b06 100644 --- a/src/panels/config/energy/dialogs/dialog-energy-water-settings.ts +++ b/src/panels/config/energy/dialogs/dialog-energy-water-settings.ts @@ -1,4 +1,3 @@ -import "@material/mwc-button/mwc-button"; import { mdiWater } from "@mdi/js"; import type { CSSResultGroup } from "lit"; import { css, html, LitElement, nothing } from "lit"; @@ -7,6 +6,7 @@ import { fireEvent } from "../../../../common/dom/fire_event"; import "../../../../components/entity/ha-entity-picker"; import "../../../../components/entity/ha-statistic-picker"; import "../../../../components/ha-dialog"; +import "../../../../components/ha-button"; import "../../../../components/ha-formfield"; import "../../../../components/ha-radio"; import type { HaRadio } from "../../../../components/ha-radio"; @@ -236,16 +236,20 @@ export class DialogEnergyWaterSettings ` : ""} - + ${this.hass.localize("ui.common.cancel")} - - + ${this.hass.localize("ui.common.save")} - + `; } diff --git a/src/panels/config/hardware/ha-config-hardware.ts b/src/panels/config/hardware/ha-config-hardware.ts index 0b1beadf79..1ba2b75b8e 100644 --- a/src/panels/config/hardware/ha-config-hardware.ts +++ b/src/panels/config/hardware/ha-config-hardware.ts @@ -12,6 +12,7 @@ import "../../../components/buttons/ha-progress-button"; import "../../../components/chart/ha-chart-base"; import "../../../components/ha-alert"; import "../../../components/ha-card"; +import "../../../components/ha-button"; import "../../../components/ha-md-list-item"; import "../../../components/ha-icon-button"; import "../../../components/ha-icon-next"; @@ -311,23 +312,27 @@ class HaConfigHardware extends SubscribeMixin(LitElement) { ? html`
${boardConfigEntries.length ? html` - ${this.hass.localize( "ui.panel.config.hardware.configure" )} - + ` : nothing} ${isComponentLoaded(this.hass, "hassio") ? html` - + ${this.hass.localize( "ui.panel.config.hardware.available_hardware.title" )} - + ` : nothing}
` @@ -345,14 +350,15 @@ class HaConfigHardware extends SubscribeMixin(LitElement) { )[0]; return html`
${dongle.name}${configEntry - ? html` ${this.hass.localize( "ui.panel.config.hardware.configure" )} - ` + ` : ""}
`; })} diff --git a/src/panels/config/integrations/dialog-yaml-integration.ts b/src/panels/config/integrations/dialog-yaml-integration.ts index 953071c949..a1e869ce22 100644 --- a/src/panels/config/integrations/dialog-yaml-integration.ts +++ b/src/panels/config/integrations/dialog-yaml-integration.ts @@ -1,4 +1,3 @@ -import "@material/mwc-button/mwc-button"; import { css, html, LitElement, nothing } from "lit"; import { customElement, property, state } from "lit/decorators"; import { fireEvent } from "../../../common/dom/fire_event"; @@ -6,6 +5,7 @@ import type { HomeAssistant } from "../../../types"; import { documentationUrl } from "../../../util/documentation-url"; import type { YamlIntegrationDialogParams } from "./show-add-integration-dialog"; import "../../../components/ha-dialog"; +import "../../../components/ha-button"; @customElement("dialog-yaml-integration") export class DialogYamlIntegration extends LitElement { @@ -43,25 +43,30 @@ export class DialogYamlIntegration extends LitElement { "ui.panel.config.integrations.config_flow.yaml_only" )}

- + ${this.hass.localize("ui.common.cancel")} - + ${docLink - ? html` - - ${this.hass.localize( - "ui.panel.config.integrations.config_flow.open_documentation" - )} - - ` - : html` + ${this.hass.localize( + "ui.panel.config.integrations.config_flow.open_documentation" + )} + ` + : html` ${this.hass.localize("ui.common.ok")} - `} + `} `; } diff --git a/src/panels/config/integrations/ha-config-integrations-dashboard.ts b/src/panels/config/integrations/ha-config-integrations-dashboard.ts index 3cb99481cd..01b1d1f185 100644 --- a/src/panels/config/integrations/ha-config-integrations-dashboard.ts +++ b/src/panels/config/integrations/ha-config-integrations-dashboard.ts @@ -21,6 +21,7 @@ import "../../../components/ha-button-menu"; import "../../../components/ha-check-list-item"; import "../../../components/ha-checkbox"; import "../../../components/ha-fab"; +import "../../../components/ha-button"; import "../../../components/ha-icon-button"; import "../../../components/ha-svg-icon"; import "../../../components/search-input"; @@ -489,12 +490,15 @@ class HaConfigIntegrationsDashboard extends KeyboardShortcutMixin( "ui.panel.config.integrations.disable.disabled_integrations", { number: disabledConfigEntries.length } )} - + ${this.hass.localize( "ui.panel.config.integrations.disable.show" )} - > + ` : ""} ${filterMenu} @@ -605,13 +609,16 @@ class HaConfigIntegrationsDashboard extends KeyboardShortcutMixin( "ui.panel.config.integrations.none_found_detail" )}

- + + ${this.hass.localize( "ui.panel.config.integrations.add_integration" )} - > + ` : // If we have a filter, never show a card @@ -634,13 +641,19 @@ class HaConfigIntegrationsDashboard extends KeyboardShortcutMixin( "ui.panel.config.integrations.no_integrations" )}

- + + ${this.hass.localize( "ui.panel.config.integrations.add_integration" )} - > + ` : ""} @@ -1042,7 +1055,7 @@ class HaConfigIntegrationsDashboard extends KeyboardShortcutMixin( direction: var(--direction); height: 32px; } - .active-filters mwc-button { + .active-filters ha-button { margin-left: 8px; margin-inline-start: 8px; margin-inline-end: initial; diff --git a/src/panels/config/integrations/integration-panels/matter/dialog-matter-open-commissioning-window.ts b/src/panels/config/integrations/integration-panels/matter/dialog-matter-open-commissioning-window.ts index e687259c2f..53d1932c0b 100644 --- a/src/panels/config/integrations/integration-panels/matter/dialog-matter-open-commissioning-window.ts +++ b/src/panels/config/integrations/integration-panels/matter/dialog-matter-open-commissioning-window.ts @@ -1,4 +1,3 @@ -import "@material/mwc-button/mwc-button"; import { mdiCloseCircle } from "@mdi/js"; import type { CSSResultGroup } from "lit"; import { LitElement, css, html, nothing } from "lit"; @@ -6,6 +5,7 @@ import { customElement, property, state } from "lit/decorators"; import { fireEvent } from "../../../../../common/dom/fire_event"; import "../../../../../components/ha-spinner"; import { createCloseHeading } from "../../../../../components/ha-dialog"; +import "../../../../../components/ha-button"; import "../../../../../components/ha-qr-code"; import { domainToName } from "../../../../../data/integration"; import type { MatterCommissioningParameters } from "../../../../../data/matter"; @@ -90,11 +90,11 @@ class DialogMatterOpenCommissioningWindow extends LitElement { > - + ${this.hass.localize( "ui.panel.config.matter.open_commissioning_window.copy_code" )} - + ` : this._status === "started" ? html` @@ -110,9 +110,9 @@ class DialogMatterOpenCommissioningWindow extends LitElement {

- + ${this.hass.localize("ui.common.close")} - + ` : this._status === "failed" ? html` @@ -129,9 +129,9 @@ class DialogMatterOpenCommissioningWindow extends LitElement {

- + ${this.hass.localize("ui.common.close")} - + ` : html`

@@ -151,11 +151,11 @@ class DialogMatterOpenCommissioningWindow extends LitElement { "ui.panel.config.matter.open_commissioning_window.prevent_misuse_description" )}

- + ${this.hass.localize( "ui.panel.config.matter.open_commissioning_window.start_commissioning" )} - + `} `; diff --git a/src/panels/config/integrations/integration-panels/matter/dialog-matter-ping-node.ts b/src/panels/config/integrations/integration-panels/matter/dialog-matter-ping-node.ts index 830a9a2855..638b02ea90 100644 --- a/src/panels/config/integrations/integration-panels/matter/dialog-matter-ping-node.ts +++ b/src/panels/config/integrations/integration-panels/matter/dialog-matter-ping-node.ts @@ -1,4 +1,3 @@ -import "@material/mwc-button/mwc-button"; import { mdiAlertCircle, mdiCheckCircle, mdiCloseCircle } from "@mdi/js"; import type { CSSResultGroup } from "lit"; import { css, html, LitElement, nothing } from "lit"; @@ -7,6 +6,7 @@ import { fireEvent } from "../../../../../common/dom/fire_event"; import { copyToClipboard } from "../../../../../common/util/copy-clipboard"; import { createCloseHeading } from "../../../../../components/ha-dialog"; import "../../../../../components/ha-list"; +import "../../../../../components/ha-button"; import "../../../../../components/ha-list-item"; import "../../../../../components/ha-spinner"; import { pingMatterNode } from "../../../../../data/matter"; @@ -71,9 +71,9 @@ class DialogMatterPingNode extends LitElement {

- + ${this.hass.localize("ui.common.close")} - + ` : this._pingResultEntries ? html` @@ -98,9 +98,9 @@ class DialogMatterPingNode extends LitElement { ` )} - + ${this.hass.localize("ui.common.close")} - + ` : this._status === "started" ? html` @@ -116,9 +116,9 @@ class DialogMatterPingNode extends LitElement {

- + ${this.hass.localize("ui.common.close")} - + ` : html`

@@ -133,11 +133,11 @@ class DialogMatterPingNode extends LitElement { )}

- + ${this.hass.localize( "ui.panel.config.matter.ping_node.start_ping" )} - + `} `; diff --git a/src/panels/config/integrations/integration-panels/matter/dialog-matter-reinterview-node.ts b/src/panels/config/integrations/integration-panels/matter/dialog-matter-reinterview-node.ts index 636921dbac..dc4c24a0c6 100644 --- a/src/panels/config/integrations/integration-panels/matter/dialog-matter-reinterview-node.ts +++ b/src/panels/config/integrations/integration-panels/matter/dialog-matter-reinterview-node.ts @@ -1,9 +1,9 @@ -import "@material/mwc-button/mwc-button"; import { mdiCheckCircle, mdiCloseCircle } from "@mdi/js"; import type { CSSResultGroup } from "lit"; import { css, html, LitElement, nothing } from "lit"; import { customElement, property, state } from "lit/decorators"; import { fireEvent } from "../../../../../common/dom/fire_event"; +import "../../../../../components/ha-button"; import "../../../../../components/ha-spinner"; import { createCloseHeading } from "../../../../../components/ha-dialog"; import { interviewMatterNode } from "../../../../../data/matter"; @@ -53,11 +53,11 @@ class DialogMatterReinterviewNode extends LitElement { )}

- + ${this.hass.localize( "ui.panel.config.matter.reinterview_node.start_reinterview" )} - + ` : this._status === "started" ? html` @@ -78,9 +78,9 @@ class DialogMatterReinterviewNode extends LitElement {

- + ${this.hass.localize("ui.common.close")} - + ` : this._status === "failed" ? html` @@ -97,9 +97,9 @@ class DialogMatterReinterviewNode extends LitElement {

- + ${this.hass.localize("ui.common.close")} - + ` : this._status === "finished" ? html` @@ -116,9 +116,9 @@ class DialogMatterReinterviewNode extends LitElement {

- + ${this.hass.localize("ui.common.close")} - + ` : nothing} diff --git a/src/panels/config/integrations/integration-panels/matter/matter-config-dashboard.ts b/src/panels/config/integrations/integration-panels/matter/matter-config-dashboard.ts index e98845fed6..b122fc9b70 100644 --- a/src/panels/config/integrations/integration-panels/matter/matter-config-dashboard.ts +++ b/src/panels/config/integrations/integration-panels/matter/matter-config-dashboard.ts @@ -1,4 +1,3 @@ -import "@material/mwc-button"; import type { UnsubscribeFunc } from "home-assistant-js-websocket"; import type { TemplateResult } from "lit"; import { css, html, LitElement } from "lit"; @@ -6,6 +5,7 @@ import { customElement, property, state } from "lit/decorators"; import { isComponentLoaded } from "../../../../../common/config/is_component_loaded"; import "../../../../../components/ha-alert"; import "../../../../../components/ha-card"; +import "../../../../../components/ha-button"; import { acceptSharedMatterDevice, canCommissionMatterExternal, @@ -40,9 +40,14 @@ export class MatterConfigDashboard extends LitElement { ${isComponentLoaded(this.hass, "otbr") ? html` - - Visit Thread Panel - + + Visit Thread Panel ` : ""}
@@ -62,21 +67,23 @@ export class MatterConfigDashboard extends LitElement {
${canCommissionMatterExternal(this.hass) - ? html`Commission device with mobile appCommission device with mobile app` : ""} - Commission deviceCommission device - Add shared deviceAdd shared device - Set WiFi CredentialsSet WiFi Credentials - Set Thread CredentialsSet Thread Credentials
diff --git a/src/panels/config/integrations/integration-panels/mqtt/mqtt-config-panel.ts b/src/panels/config/integrations/integration-panels/mqtt/mqtt-config-panel.ts index c3f9302fe4..fd425047ae 100644 --- a/src/panels/config/integrations/integration-panels/mqtt/mqtt-config-panel.ts +++ b/src/panels/config/integrations/integration-panels/mqtt/mqtt-config-panel.ts @@ -1,4 +1,3 @@ -import "@material/mwc-button"; import type { CSSResultGroup, TemplateResult } from "lit"; import { css, html, LitElement } from "lit"; import { customElement, property, state } from "lit/decorators"; @@ -8,6 +7,7 @@ import "../../../../../components/ha-code-editor"; import "../../../../../components/ha-formfield"; import "../../../../../components/ha-list-item"; import "../../../../../components/ha-switch"; +import "../../../../../components/ha-button"; import { getConfigEntries } from "../../../../../data/config_entries"; import { showOptionsFlowDialog } from "../../../../../dialogs/config-flow/show-dialog-options-flow"; import "../../../../../layouts/hass-subpage"; @@ -71,10 +71,10 @@ export class MQTTConfigPanel extends LitElement { .header=${this.hass.localize("ui.panel.config.mqtt.settings_title")} >
- ${this.hass.localize( "ui.panel.config.mqtt.option_flow" - )}
@@ -138,10 +138,10 @@ export class MQTTConfigPanel extends LitElement { >
- ${this.hass.localize( "ui.panel.config.mqtt.publish" - )}
diff --git a/src/panels/config/integrations/integration-panels/thread/thread-config-panel.ts b/src/panels/config/integrations/integration-panels/thread/thread-config-panel.ts index 3ea16c8dbc..07bc1d6e13 100644 --- a/src/panels/config/integrations/integration-panels/thread/thread-config-panel.ts +++ b/src/panels/config/integrations/integration-panels/thread/thread-config-panel.ts @@ -1,11 +1,10 @@ -import "@material/mwc-button"; import type { ActionDetail } from "@material/mwc-list"; import { + mdiCellphoneKey, mdiDeleteOutline, mdiDevices, mdiDotsVertical, mdiInformationOutline, - mdiCellphoneKey, } from "@mdi/js"; import type { PropertyValues, TemplateResult } from "lit"; import { LitElement, css, html, nothing } from "lit"; @@ -14,9 +13,10 @@ import memoizeOne from "memoize-one"; import { isComponentLoaded } from "../../../../../common/config/is_component_loaded"; import { stringCompare } from "../../../../../common/string/compare"; import { extractSearchParam } from "../../../../../common/url/search-params"; +import "../../../../../components/ha-button"; import "../../../../../components/ha-button-menu"; -import "../../../../../components/ha-list-item"; import "../../../../../components/ha-card"; +import "../../../../../components/ha-list-item"; import { getSignedPath } from "../../../../../data/auth"; import { getConfigEntryDiagnosticsDownloadUrl } from "../../../../../data/diagnostics"; import type { OTBRInfo, OTBRInfoDict } from "../../../../../data/otbr"; @@ -47,8 +47,8 @@ import { SubscribeMixin } from "../../../../../mixins/subscribe-mixin"; import { haStyle } from "../../../../../resources/styles"; import type { HomeAssistant } from "../../../../../types"; import { brandsUrl } from "../../../../../util/brands-url"; -import { fileDownload } from "../../../../../util/file_download"; import { documentationUrl } from "../../../../../util/documentation-url"; +import { fileDownload } from "../../../../../util/file_download"; import { showThreadDatasetDialog } from "./show-dialog-thread-dataset"; export interface ThreadNetwork { @@ -117,16 +117,16 @@ export class ThreadConfigPanel extends SubscribeMixin(LitElement) { )} - - ${this.hass.localize( - "ui.panel.config.thread.more_info" - )} - + ${this.hass.localize( + "ui.panel.config.thread.more_info" + )} `} ${networks.networks.length @@ -294,21 +294,23 @@ export class ThreadConfigPanel extends SubscribeMixin(LitElement) { ? html`${this.hass.localize( "ui.panel.config.thread.no_routers_otbr_network" )} - ${this.hass.localize( "ui.panel.config.thread.reset_border_router" - )}` : this.hass.localize("ui.panel.config.thread.no_border_routers")} `} ${network.dataset && !network.dataset.preferred ? html`
- Make preferred networkMake preferred network
` : ""} @@ -316,10 +318,11 @@ export class ThreadConfigPanel extends SubscribeMixin(LitElement) { network.dataset?.preferred && network.routers?.length ? html`
- Send credentials to phoneSend credentials to phone
` : ""} diff --git a/src/panels/config/integrations/integration-panels/zha/dialog-zha-reconfigure-device.ts b/src/panels/config/integrations/integration-panels/zha/dialog-zha-reconfigure-device.ts index f87b63b895..1250ac0593 100644 --- a/src/panels/config/integrations/integration-panels/zha/dialog-zha-reconfigure-device.ts +++ b/src/panels/config/integrations/integration-panels/zha/dialog-zha-reconfigure-device.ts @@ -1,4 +1,3 @@ -import "@material/mwc-button/mwc-button"; import { mdiCheckCircle, mdiCloseCircle } from "@mdi/js"; import type { UnsubscribeFunc } from "home-assistant-js-websocket"; import type { CSSResultGroup } from "lit"; @@ -9,6 +8,7 @@ import "../../../../../components/ha-spinner"; import { createCloseHeading } from "../../../../../components/ha-dialog"; import "../../../../../components/ha-svg-icon"; import "../../../../../components/ha-tooltip"; +import "../../../../../components/ha-button"; import type { AttributeConfigurationStatus, Cluster, @@ -95,14 +95,14 @@ class DialogZHAReconfigureDevice extends LitElement { )}

- ${this.hass.localize( "ui.dialogs.zha_reconfigure_device.start_reconfiguration" )} - + ` : ``} ${this._status === "started" @@ -124,10 +124,11 @@ class DialogZHAReconfigureDevice extends LitElement {

- - ${this.hass.localize("ui.common.close")} - - + ${this._showDetails ? this.hass.localize( `ui.dialogs.zha_reconfigure_device.button_hide` @@ -135,7 +136,10 @@ class DialogZHAReconfigureDevice extends LitElement { : this.hass.localize( `ui.dialogs.zha_reconfigure_device.button_show` )} - + + + ${this.hass.localize("ui.common.close")} + ` : ``} ${this._status === "failed" @@ -153,10 +157,10 @@ class DialogZHAReconfigureDevice extends LitElement {

- + ${this.hass.localize("ui.common.close")} - - + + ${this._showDetails ? this.hass.localize( `ui.dialogs.zha_reconfigure_device.button_hide` @@ -164,7 +168,7 @@ class DialogZHAReconfigureDevice extends LitElement { : this.hass.localize( `ui.dialogs.zha_reconfigure_device.button_show` )} - + ` : ``} ${this._status === "finished" @@ -182,10 +186,10 @@ class DialogZHAReconfigureDevice extends LitElement {

- + ${this.hass.localize("ui.common.close")} - - + + ${this._showDetails ? this.hass.localize( `ui.dialogs.zha_reconfigure_device.button_hide` @@ -193,7 +197,7 @@ class DialogZHAReconfigureDevice extends LitElement { : this.hass.localize( `ui.dialogs.zha_reconfigure_device.button_show` )} - + ` : ``} ${this._stages diff --git a/src/panels/config/integrations/integration-panels/zha/zha-add-devices-page.ts b/src/panels/config/integrations/integration-panels/zha/zha-add-devices-page.ts index aa14d9a3b8..5a1b6b77fb 100644 --- a/src/panels/config/integrations/integration-panels/zha/zha-add-devices-page.ts +++ b/src/panels/config/integrations/integration-panels/zha/zha-add-devices-page.ts @@ -1,8 +1,9 @@ -import "@material/mwc-button"; import type { CSSResultGroup, PropertyValues, TemplateResult } from "lit"; import { css, html, LitElement } from "lit"; import { customElement, property, state } from "lit/decorators"; +import "../../../../../components/ha-button"; import "../../../../../components/ha-spinner"; +import "../../../../../components/ha-textarea"; import type { ZHADevice } from "../../../../../data/zha"; import { DEVICE_MESSAGE_TYPES, LOG_OUTPUT } from "../../../../../data/zha"; import "../../../../../layouts/hass-tabs-subpage"; @@ -11,7 +12,6 @@ import type { HomeAssistant, Route } from "../../../../../types"; import { documentationUrl } from "../../../../../util/documentation-url"; import { zhaTabs } from "./zha-config-dashboard"; import "./zha-device-pairing-status-card"; -import "../../../../../components/ha-textarea"; @customElement("zha-add-devices-page") class ZHAAddDevicesPage extends LitElement { @@ -80,8 +80,12 @@ class ZHAAddDevicesPage extends LitElement { .route=${this.route!} .tabs=${zhaTabs} > - ${this._showLogs ? "Hide logs" : "Show logs"}${this._showLogs ? "Hide logs" : "Show logs"}
${this._active @@ -95,11 +99,15 @@ class ZHAAddDevicesPage extends LitElement { ` : html`
- + ${this.hass!.localize( "ui.panel.config.zha.add_device_page.search_again" )} - +
`}
diff --git a/src/panels/config/integrations/integration-panels/zha/zha-config-dashboard.ts b/src/panels/config/integrations/integration-panels/zha/zha-config-dashboard.ts index 08dea39813..ea03ebe426 100644 --- a/src/panels/config/integrations/integration-panels/zha/zha-config-dashboard.ts +++ b/src/panels/config/integrations/integration-panels/zha/zha-config-dashboard.ts @@ -1,4 +1,3 @@ -import "@material/mwc-button/mwc-button"; import { mdiAlertCircle, mdiCheckCircle, @@ -14,6 +13,7 @@ import { customElement, property, state } from "lit/decorators"; import "../../../../../components/buttons/ha-progress-button"; import "../../../../../components/ha-alert"; import "../../../../../components/ha-card"; +import "../../../../../components/ha-button"; import "../../../../../components/ha-fab"; import "../../../../../components/ha-form/ha-form"; import "../../../../../components/ha-icon-button"; @@ -149,24 +149,24 @@ class ZHAConfigDashboard extends LitElement { ${this.configEntryId ? html`
- - ${this.hass.localize( - "ui.panel.config.devices.caption" - )} - - + - ${this.hass.localize( - "ui.panel.config.entities.caption" - )} - + ${this.hass.localize( + "ui.panel.config.entities.caption" + )}
` : ""} @@ -246,6 +246,7 @@ class ZHAConfigDashboard extends LitElement { : ""}
- + ${this.hass.localize( "ui.panel.config.zha.configuration_page.migrate_radio" )} - +
${this._configuration @@ -287,11 +288,11 @@ class ZHAConfigDashboard extends LitElement { : ""}
- + ${this.hass.localize( "ui.panel.config.zha.configuration_page.update_button" )} - +
diff --git a/src/panels/config/integrations/integration-panels/zha/zha-group-page.ts b/src/panels/config/integrations/integration-panels/zha/zha-group-page.ts index 4b69c4ca42..26a3b558a2 100644 --- a/src/panels/config/integrations/integration-panels/zha/zha-group-page.ts +++ b/src/panels/config/integrations/integration-panels/zha/zha-group-page.ts @@ -1,4 +1,3 @@ -import "@material/mwc-button"; import { mdiDelete } from "@mdi/js"; import type { CSSResultGroup, PropertyValues } from "lit"; import { LitElement, css, html, nothing } from "lit"; @@ -6,11 +5,11 @@ import { customElement, property, query, state } from "lit/decorators"; import type { HASSDomEvent } from "../../../../../common/dom/fire_event"; import { navigate } from "../../../../../common/navigate"; import type { SelectionChangedEvent } from "../../../../../components/data-table/ha-data-table"; +import "../../../../../components/ha-button"; import "../../../../../components/ha-card"; import "../../../../../components/ha-icon-button"; import "../../../../../components/ha-list"; import "../../../../../components/ha-list-item"; -import "../../../../../components/ha-spinner"; import type { ZHADeviceEndpoint, ZHAGroup } from "../../../../../data/zha"; import { addMembersToGroup, @@ -164,22 +163,19 @@ export class ZHAGroupPage extends LitElement {
- - ${this._processingRemove - ? html`` - : nothing} ${this.hass!.localize( "ui.panel.config.zha.groups.remove_members" - )}
` @@ -200,21 +196,18 @@ export class ZHAGroupPage extends LitElement {
- - ${this._processingAdd - ? html`` - : ""} ${this.hass!.localize( "ui.panel.config.zha.groups.add_members" - )}
diff --git a/src/panels/config/integrations/integration-panels/zwave_js/dialog-zwave_js-hard-reset-controller.ts b/src/panels/config/integrations/integration-panels/zwave_js/dialog-zwave_js-hard-reset-controller.ts index b5dec3687e..96dff920e5 100644 --- a/src/panels/config/integrations/integration-panels/zwave_js/dialog-zwave_js-hard-reset-controller.ts +++ b/src/panels/config/integrations/integration-panels/zwave_js/dialog-zwave_js-hard-reset-controller.ts @@ -1,11 +1,11 @@ import { mdiCheckCircle, mdiDeleteForever, mdiRestore } from "@mdi/js"; -import "@material/mwc-button/mwc-button"; import type { CSSResultGroup } from "lit"; import { css, html, LitElement, nothing } from "lit"; import { customElement, property, state } from "lit/decorators"; import { fireEvent } from "../../../../../common/dom/fire_event"; import { createCloseHeading } from "../../../../../components/ha-dialog"; import "../../../../../components/ha-svg-icon"; +import "../../../../../components/ha-button"; import { hardResetController } from "../../../../../data/zwave_js"; import { haStyleDialog } from "../../../../../resources/styles"; import type { HomeAssistant } from "../../../../../types"; @@ -77,15 +77,16 @@ class DialogZWaveJSHardResetController extends LitElement {

${this._resetStatus === ResetStatus.NotStarted - ? html` - ${this.hass.localize("ui.common.continue")} - - ${this.hass.localize("ui.common.cancel")} - ` + + + ${this.hass.localize("ui.common.continue")} + ` : nothing} `; } diff --git a/src/panels/config/integrations/integration-panels/zwave_js/dialog-zwave_js-rebuild-network-routes.ts b/src/panels/config/integrations/integration-panels/zwave_js/dialog-zwave_js-rebuild-network-routes.ts index 5714df0d73..c668b84210 100644 --- a/src/panels/config/integrations/integration-panels/zwave_js/dialog-zwave_js-rebuild-network-routes.ts +++ b/src/panels/config/integrations/integration-panels/zwave_js/dialog-zwave_js-rebuild-network-routes.ts @@ -1,4 +1,3 @@ -import "@material/mwc-button/mwc-button"; import "@material/mwc-linear-progress/mwc-linear-progress"; import { mdiCheckCircle, mdiCloseCircle, mdiStethoscope } from "@mdi/js"; import type { UnsubscribeFunc } from "home-assistant-js-websocket"; @@ -6,10 +5,11 @@ import type { CSSResultGroup } from "lit"; import { css, html, LitElement, nothing } from "lit"; import { customElement, property, state } from "lit/decorators"; import { fireEvent } from "../../../../../common/dom/fire_event"; +import "../../../../../components/ha-button"; import { createCloseHeading } from "../../../../../components/ha-dialog"; import type { - ZWaveJSRebuildRoutesStatusMessage, ZWaveJSNetwork, + ZWaveJSRebuildRoutesStatusMessage, } from "../../../../../data/zwave_js"; import { fetchZwaveNetworkStatus, @@ -91,14 +91,14 @@ class DialogZWaveJSRebuildNetworkRoutes extends LitElement { )}

- ${this.hass.localize( "ui.panel.config.zwave_js.rebuild_network_routes.start_rebuilding_routes" )} - + ` : ``} ${this._status === "started" @@ -122,17 +122,19 @@ class DialogZWaveJSRebuildNetworkRoutes extends LitElement { ` : ""} - ${this.hass.localize( "ui.panel.config.zwave_js.rebuild_network_routes.stop_rebuilding_routes" )} - - + + ${this.hass.localize("ui.common.close")} - + ` : ``} ${this._status === "failed" @@ -150,9 +152,9 @@ class DialogZWaveJSRebuildNetworkRoutes extends LitElement {

- + ${this.hass.localize("ui.common.close")} - + ` : ``} ${this._status === "finished" @@ -170,9 +172,9 @@ class DialogZWaveJSRebuildNetworkRoutes extends LitElement {

- + ${this.hass.localize("ui.common.close")} - + ` : ``} ${this._status === "cancelled" @@ -190,9 +192,9 @@ class DialogZWaveJSRebuildNetworkRoutes extends LitElement {

- + ${this.hass.localize("ui.common.close")} - + ` : ``} ${this._progress_total && this._status !== "finished" diff --git a/src/panels/config/integrations/integration-panels/zwave_js/dialog-zwave_js-rebuild-node-routes.ts b/src/panels/config/integrations/integration-panels/zwave_js/dialog-zwave_js-rebuild-node-routes.ts index 19b12b06fd..1d75a827e0 100644 --- a/src/panels/config/integrations/integration-panels/zwave_js/dialog-zwave_js-rebuild-node-routes.ts +++ b/src/panels/config/integrations/integration-panels/zwave_js/dialog-zwave_js-rebuild-node-routes.ts @@ -1,4 +1,3 @@ -import "@material/mwc-button/mwc-button"; import { mdiCheckCircle, mdiCloseCircle, mdiStethoscope } from "@mdi/js"; import type { CSSResultGroup } from "lit"; import { css, html, LitElement, nothing } from "lit"; @@ -6,6 +5,7 @@ import { customElement, property, state } from "lit/decorators"; import { fireEvent } from "../../../../../common/dom/fire_event"; import { computeDeviceNameDisplay } from "../../../../../common/entity/compute_device_name"; import { createCloseHeading } from "../../../../../components/ha-dialog"; +import "../../../../../components/ha-button"; import "../../../../../components/ha-spinner"; import type { DeviceRegistryEntry } from "../../../../../data/device_registry"; import type { ZWaveJSNetwork } from "../../../../../data/zwave_js"; @@ -83,14 +83,14 @@ class DialogZWaveJSRebuildNodeRoutes extends LitElement { )}

- ${this.hass.localize( "ui.panel.config.zwave_js.rebuild_node_routes.start_rebuilding_routes" )} - + ` : ``} ${this._status === "started" @@ -110,9 +110,9 @@ class DialogZWaveJSRebuildNodeRoutes extends LitElement {

- + ${this.hass.localize("ui.common.close")} - + ` : ``} ${this._status === "failed" @@ -147,9 +147,9 @@ class DialogZWaveJSRebuildNodeRoutes extends LitElement {

- + ${this.hass.localize("ui.common.close")} - + ` : ``} ${this._status === "finished" @@ -172,9 +172,9 @@ class DialogZWaveJSRebuildNodeRoutes extends LitElement {

- + ${this.hass.localize("ui.common.close")} - + ` : ``} ${this._status === "rebuilding-routes" @@ -192,9 +192,9 @@ class DialogZWaveJSRebuildNodeRoutes extends LitElement {

- + ${this.hass.localize("ui.common.close")} - + ` : ``} diff --git a/src/panels/config/integrations/integration-panels/zwave_js/dialog-zwave_js-reinterview-node.ts b/src/panels/config/integrations/integration-panels/zwave_js/dialog-zwave_js-reinterview-node.ts index 58edf8fa02..6c74a47863 100644 --- a/src/panels/config/integrations/integration-panels/zwave_js/dialog-zwave_js-reinterview-node.ts +++ b/src/panels/config/integrations/integration-panels/zwave_js/dialog-zwave_js-reinterview-node.ts @@ -1,4 +1,3 @@ -import "@material/mwc-button/mwc-button"; import { mdiCheckCircle, mdiCloseCircle } from "@mdi/js"; import type { UnsubscribeFunc } from "home-assistant-js-websocket"; import type { CSSResultGroup } from "lit"; @@ -6,6 +5,7 @@ import { css, html, LitElement, nothing } from "lit"; import { customElement, property, state } from "lit/decorators"; import { fireEvent } from "../../../../../common/dom/fire_event"; import "../../../../../components/ha-spinner"; +import "../../../../../components/ha-button"; import { createCloseHeading } from "../../../../../components/ha-dialog"; import { reinterviewZwaveNode } from "../../../../../data/zwave_js"; import { haStyleDialog } from "../../../../../resources/styles"; @@ -59,11 +59,11 @@ class DialogZWaveJSReinterviewNode extends LitElement { )}

- + ${this.hass.localize( "ui.panel.config.zwave_js.reinterview_node.start_reinterview" )} - + ` : ``} ${this._status === "started" @@ -85,9 +85,9 @@ class DialogZWaveJSReinterviewNode extends LitElement {

- + ${this.hass.localize("ui.common.close")} - + ` : ``} ${this._status === "failed" @@ -105,9 +105,9 @@ class DialogZWaveJSReinterviewNode extends LitElement {

- + ${this.hass.localize("ui.common.close")} - + ` : ``} ${this._status === "finished" @@ -125,9 +125,9 @@ class DialogZWaveJSReinterviewNode extends LitElement {

- + ${this.hass.localize("ui.common.close")} - + ` : ``} ${this._stages diff --git a/src/panels/config/integrations/integration-panels/zwave_js/dialog-zwave_js-remove-failed-node.ts b/src/panels/config/integrations/integration-panels/zwave_js/dialog-zwave_js-remove-failed-node.ts index e5b46004a1..dfe1cc827b 100644 --- a/src/panels/config/integrations/integration-panels/zwave_js/dialog-zwave_js-remove-failed-node.ts +++ b/src/panels/config/integrations/integration-panels/zwave_js/dialog-zwave_js-remove-failed-node.ts @@ -1,4 +1,3 @@ -import "@material/mwc-button/mwc-button"; import { mdiCheckCircle, mdiCloseCircle, mdiRobotDead } from "@mdi/js"; import type { UnsubscribeFunc } from "home-assistant-js-websocket"; import type { CSSResultGroup } from "lit"; @@ -6,6 +5,7 @@ import { css, html, LitElement, nothing } from "lit"; import { customElement, property, state } from "lit/decorators"; import { fireEvent } from "../../../../../common/dom/fire_event"; import "../../../../../components/ha-spinner"; +import "../../../../../components/ha-button"; import { createCloseHeading } from "../../../../../components/ha-dialog"; import type { ZWaveJSRemovedNode } from "../../../../../data/zwave_js"; import { removeFailedZwaveNode } from "../../../../../data/zwave_js"; @@ -80,11 +80,15 @@ class DialogZWaveJSRemoveFailedNode extends LitElement { )} - + ${this.hass.localize( "ui.panel.config.zwave_js.remove_failed_node.remove_device" )} - + ` : ``} ${this._status === "started" @@ -121,9 +125,9 @@ class DialogZWaveJSRemoveFailedNode extends LitElement { : ``} - + ${this.hass.localize("ui.common.close")} - + ` : ``} ${this._status === "finished" @@ -142,12 +146,12 @@ class DialogZWaveJSRemoveFailedNode extends LitElement {

- ${this.hass.localize("ui.common.close")} - + ` : ``} diff --git a/src/panels/config/integrations/integration-panels/zwave_js/dialog-zwave_js-update-firmware-node.ts b/src/panels/config/integrations/integration-panels/zwave_js/dialog-zwave_js-update-firmware-node.ts index 706d394b85..51640dc508 100644 --- a/src/panels/config/integrations/integration-panels/zwave_js/dialog-zwave_js-update-firmware-node.ts +++ b/src/panels/config/integrations/integration-panels/zwave_js/dialog-zwave_js-update-firmware-node.ts @@ -1,4 +1,3 @@ -import "@material/mwc-button/mwc-button"; import "@material/mwc-linear-progress/mwc-linear-progress"; import { mdiCheckCircle, mdiCloseCircle, mdiFileUpload } from "@mdi/js"; import type { UnsubscribeFunc } from "home-assistant-js-websocket"; @@ -9,6 +8,7 @@ import { fireEvent } from "../../../../../common/dom/fire_event"; import { computeDeviceNameDisplay } from "../../../../../common/entity/compute_device_name"; import { createCloseHeading } from "../../../../../components/ha-dialog"; import "../../../../../components/ha-file-upload"; +import "../../../../../components/ha-button"; import "../../../../../components/ha-form/ha-form"; import type { HaFormSchema } from "../../../../../components/ha-form/types"; import "../../../../../components/ha-svg-icon"; @@ -130,7 +130,7 @@ class DialogZWaveJSUpdateFirmwareNode extends LitElement { .schema=${firmwareTargetSchema} @value-changed=${this._firmwareTargetChanged} >`} - `; + `; const status = this._updateFinishedMessage ? this._updateFinishedMessage.success @@ -153,11 +153,11 @@ class DialogZWaveJSUpdateFirmwareNode extends LitElement { const abortFirmwareUpdateButton = this._nodeStatus.is_controller_node ? nothing : html` - + ${this.hass.localize( "ui.panel.config.zwave_js.update_firmware.abort" )} - + `; return html` diff --git a/src/panels/config/logs/ha-config-logs.ts b/src/panels/config/logs/ha-config-logs.ts index a76522fced..283ef66a9e 100644 --- a/src/panels/config/logs/ha-config-logs.ts +++ b/src/panels/config/logs/ha-config-logs.ts @@ -117,16 +117,14 @@ export class HaConfigLogs extends LitElement { ${isComponentLoaded(this.hass, "hassio") ? html` - p.key === this._selectedLogProvider - )!.name} - > + + ${this._logProviders.find( + (p) => p.key === this._selectedLogProvider + )!.name} ${this._logProviders.map( (provider) => html` @@ -255,15 +253,6 @@ export class HaConfigLogs extends LitElement { .content { direction: ltr; } - - mwc-button[slot="trigger"] { - --mdc-theme-primary: var(--primary-text-color); - --mdc-icon-size: 36px; - } - ha-button-menu > ha-button > ha-svg-icon { - margin-inline-end: 0px; - margin-inline-start: 8px; - } `, ]; } diff --git a/src/panels/config/lovelace/resources/dialog-lovelace-resource-detail.ts b/src/panels/config/lovelace/resources/dialog-lovelace-resource-detail.ts index 0dee14c356..7c1e2c5d32 100644 --- a/src/panels/config/lovelace/resources/dialog-lovelace-resource-detail.ts +++ b/src/panels/config/lovelace/resources/dialog-lovelace-resource-detail.ts @@ -1,4 +1,3 @@ -import "@material/mwc-button/mwc-button"; import { html, LitElement, nothing } from "lit"; import { customElement, property, state, query } from "lit/decorators"; import memoizeOne from "memoize-one"; @@ -9,6 +8,7 @@ import type { HaMdDialog } from "../../../../components/ha-md-dialog"; import "../../../../components/ha-dialog-header"; import "../../../../components/ha-form/ha-form"; import "../../../../components/ha-icon-button"; +import "../../../../components/ha-button"; import type { SchemaUnion } from "../../../../components/ha-form/types"; import type { LovelaceResourcesMutableParams } from "../../../../data/lovelace/resource"; import type { HomeAssistant } from "../../../../types"; @@ -127,10 +127,10 @@ export class DialogLovelaceResourceDetail extends LitElement { >
- + ${this.hass!.localize("ui.common.cancel")} - - + @@ -141,7 +141,7 @@ export class DialogLovelaceResourceDetail extends LitElement { : this.hass!.localize( "ui.panel.config.lovelace.resources.detail.create" )} - +
`; diff --git a/src/panels/config/network/ha-config-network.ts b/src/panels/config/network/ha-config-network.ts index cf9d3e1f36..a7599c40d7 100644 --- a/src/panels/config/network/ha-config-network.ts +++ b/src/panels/config/network/ha-config-network.ts @@ -1,10 +1,10 @@ -import "@material/mwc-button/mwc-button"; import type { CSSResultGroup, PropertyValues } from "lit"; import { css, html, LitElement, nothing } from "lit"; import { customElement, property, state } from "lit/decorators"; import { isComponentLoaded } from "../../../common/config/is_component_loaded"; import "../../../components/ha-alert"; import "../../../components/ha-card"; +import "../../../components/ha-button"; import "../../../components/ha-checkbox"; import "../../../components/ha-network"; import "../../../components/ha-settings-row"; @@ -55,11 +55,11 @@ class ConfigNetwork extends LitElement { >
- + ${this.hass.localize( "ui.panel.config.core.section.core.core_config.save_button" )} - +
`; diff --git a/src/panels/config/network/ha-config-url-form.ts b/src/panels/config/network/ha-config-url-form.ts index d7995ae9cf..cbfef7ea74 100644 --- a/src/panels/config/network/ha-config-url-form.ts +++ b/src/panels/config/network/ha-config-url-form.ts @@ -1,4 +1,3 @@ -import "@material/mwc-button/mwc-button"; import type { PropertyValues } from "lit"; import { css, html, LitElement, nothing } from "lit"; import { customElement, property, state } from "lit/decorators"; @@ -171,8 +170,13 @@ class ConfigUrlForm extends SubscribeMixin(LitElement) { ` : nothing} - - + + ${this.hass.localize("ui.panel.config.common.copy_link")} @@ -206,13 +210,16 @@ class ConfigUrlForm extends SubscribeMixin(LitElement) { ${this.hass.localize( "ui.panel.config.url.ha_cloud_remote_not_enabled" )} - + + ${this.hass.localize( + "ui.panel.config.url.enable_remote" + )} + `} ` @@ -271,7 +278,12 @@ class ConfigUrlForm extends SubscribeMixin(LitElement) { ` : nothing} - + ${this.hass.localize("ui.panel.config.common.copy_link")} @@ -302,11 +314,11 @@ class ConfigUrlForm extends SubscribeMixin(LitElement) { }
- + ${this.hass.localize( "ui.panel.config.core.section.core.core_config.save_button" )} - +
`; diff --git a/src/panels/config/network/supervisor-hostname.ts b/src/panels/config/network/supervisor-hostname.ts index c34765cf8f..1ae40855b9 100644 --- a/src/panels/config/network/supervisor-hostname.ts +++ b/src/panels/config/network/supervisor-hostname.ts @@ -1,11 +1,9 @@ -import "@material/mwc-button/mwc-button"; - import type { CSSResultGroup } from "lit"; import { css, html, LitElement, nothing } from "lit"; import { customElement, property, state } from "lit/decorators"; import "../../../components/ha-alert"; import "../../../components/ha-card"; -import "../../../components/ha-spinner"; +import "../../../components/ha-button"; import "../../../components/ha-expansion-panel"; import "../../../components/ha-icon-button"; import "../../../components/ha-radio"; @@ -66,11 +64,13 @@ export class HassioHostname extends LitElement {
- - ${this._processing - ? html`` - : this.hass.localize("ui.common.save")} - + + ${this.hass.localize("ui.common.save")} +
`; diff --git a/src/panels/config/network/supervisor-network.ts b/src/panels/config/network/supervisor-network.ts index 089bfdad70..467a9987e9 100644 --- a/src/panels/config/network/supervisor-network.ts +++ b/src/panels/config/network/supervisor-network.ts @@ -17,6 +17,7 @@ import type { HaRadio } from "../../../components/ha-radio"; import "../../../components/ha-spinner"; import "../../../components/ha-textfield"; import type { HaTextField } from "../../../components/ha-textfield"; +import "../../../components/sl-tab-group"; import { extractApiErrorMessage } from "../../../data/hassio/common"; import { type AccessPoint, @@ -33,7 +34,6 @@ import { showConfirmationDialog, } from "../../../dialogs/generic/show-dialog-box"; import type { HomeAssistant } from "../../../types"; -import "../../../components/sl-tab-group"; const IP_VERSIONS = ["ipv4", "ipv6"]; @@ -141,6 +141,7 @@ export class HassioNetwork extends LitElement {

` : nothing}
- - ${this._processing - ? html`` - : this.hass.localize("ui.common.save")} + + ${this.hass.localize("ui.common.save")} - + ${this.hass.localize("ui.panel.config.network.supervisor.reset")}
`; @@ -446,11 +449,13 @@ export class HassioNetwork extends LitElement { @click=${this._addAddress} .version=${version} class="add-address" + appearance="filled" + size="small" > ${this.hass.localize( "ui.panel.config.network.supervisor.add_address" )} - + ` : nothing} @@ -500,13 +505,15 @@ export class HassioNetwork extends LitElement { @closed=${this._handleDNSMenuClosed} .version=${version} class="add-nameserver" + appearance="filled" + size="small" > - + ${this.hass.localize( "ui.panel.config.network.supervisor.add_dns_server" )} @@ -780,10 +787,6 @@ export class HassioNetwork extends LitElement { padding: 20px 24px; } - ha-button.warning { - --mdc-theme-primary: var(--error-color); - } - ha-button.scan { margin-left: 8px; margin-inline-start: 8px; diff --git a/src/panels/config/repairs/dialog-system-information.ts b/src/panels/config/repairs/dialog-system-information.ts index a556d96ce9..f985676c42 100644 --- a/src/panels/config/repairs/dialog-system-information.ts +++ b/src/panels/config/repairs/dialog-system-information.ts @@ -1,4 +1,3 @@ -import "@material/mwc-button/mwc-button"; import type { UnsubscribeFunc } from "home-assistant-js-websocket"; import type { CSSResultGroup, TemplateResult } from "lit"; import { css, html, LitElement, nothing } from "lit"; @@ -9,10 +8,11 @@ import { fireEvent } from "../../../common/dom/fire_event"; import { copyToClipboard } from "../../../common/util/copy-clipboard"; import { subscribePollingCollection } from "../../../common/util/subscribe-polling"; import "../../../components/ha-alert"; +import "../../../components/ha-button"; import "../../../components/ha-card"; -import "../../../components/ha-spinner"; import { createCloseHeading } from "../../../components/ha-dialog"; import "../../../components/ha-metric"; +import "../../../components/ha-spinner"; import type { HassioStats } from "../../../data/hassio/common"; import { fetchHassioStats } from "../../../data/hassio/common"; import type { HassioResolution } from "../../../data/hassio/resolution"; @@ -146,27 +146,29 @@ class DialogSystemInformation extends LitElement { ? html`${this._resolutionInfo.unhealthy.length ? html` ${this.hass.localize("ui.dialogs.unhealthy.title")} - - ` + ${this.hass.localize("ui.panel.config.common.learn_more")} + ` : ""} ${this._resolutionInfo.unsupported.length ? html` ${this.hass.localize("ui.dialogs.unsupported.title")} - - + ${this.hass.localize("ui.panel.config.common.learn_more")} + ` : ""} ` : ""} @@ -222,11 +224,9 @@ class DialogSystemInformation extends LitElement { `} - + + ${this.hass.localize("ui.panel.config.repairs.copy")} + `; } @@ -361,13 +361,16 @@ class DialogSystemInformation extends LitElement { ${!domainInfo.manage_url ? "" : html` - - - ${this.hass.localize( - "ui.panel.config.info.system_health.manage" - )} - - + + ${this.hass.localize( + "ui.panel.config.info.system_health.manage" + )} + `} `); @@ -481,10 +484,6 @@ class DialogSystemInformation extends LitElement { .error { color: var(--error-color); } - - a.manage { - text-decoration: none; - } `, ]; } diff --git a/src/panels/config/script/ha-script-editor.ts b/src/panels/config/script/ha-script-editor.ts index 0e422ae834..60662bb5a3 100644 --- a/src/panels/config/script/ha-script-editor.ts +++ b/src/panels/config/script/ha-script-editor.ts @@ -1,5 +1,4 @@ import { consume } from "@lit/context"; -import "@material/mwc-button"; import { mdiCog, mdiContentDuplicate, @@ -27,6 +26,7 @@ import { slugify } from "../../../common/string/slugify"; import { computeRTL } from "../../../common/util/compute_rtl"; import { promiseTimeout } from "../../../common/util/promise-timeout"; import { afterNextRender } from "../../../common/util/render-status"; +import "../../../components/ha-button"; import "../../../components/ha-button-menu"; import "../../../components/ha-fab"; @@ -45,12 +45,12 @@ import { } from "../../../data/entity_registry"; import type { BlueprintScriptConfig, ScriptConfig } from "../../../data/script"; import { - normalizeScriptConfig, deleteScript, fetchScriptFileConfig, getScriptEditorInitData, getScriptStateConfig, hasScriptFields, + normalizeScriptConfig, showScriptEditor, triggerScript, } from "../../../data/script"; @@ -172,11 +172,15 @@ export class HaScriptEditor extends SubscribeMixin( > ${this.scriptId && !this.narrow ? html` - + ${this.hass.localize( "ui.panel.config.script.editor.show_trace" )} - + ` : ""} @@ -383,11 +387,11 @@ export class HaScriptEditor extends SubscribeMixin( "ui.panel.config.script.editor.confirm_take_control" )}
- ${this.hass.localize("ui.common.yes")}${this.hass.localize("ui.common.yes")} - ${this.hass.localize("ui.common.no")}${this.hass.localize("ui.common.no")}
` @@ -396,11 +400,15 @@ export class HaScriptEditor extends SubscribeMixin( >${this.hass.localize( "ui.panel.config.script.editor.read_only" )} - + ${this.hass.localize( "ui.panel.config.script.editor.migrate" )} - + ` : nothing} ${this._mode === "gui" diff --git a/src/panels/config/script/ha-script-trace.ts b/src/panels/config/script/ha-script-trace.ts index a69e685a30..6d620af034 100644 --- a/src/panels/config/script/ha-script-trace.ts +++ b/src/panels/config/script/ha-script-trace.ts @@ -16,6 +16,7 @@ import { isComponentLoaded } from "../../../common/config/is_component_loaded"; import { formatDateTimeWithSeconds } from "../../../common/datetime/format_date_time"; import { fireEvent } from "../../../common/dom/fire_event"; import "../../../components/ha-button-menu"; +import "../../../components/ha-button"; import "../../../components/ha-icon-button"; import "../../../components/ha-list-item"; import "../../../components/trace/ha-trace-blueprint-config"; @@ -101,17 +102,16 @@ export class HaScriptTrace extends LitElement { ${!this.narrow && this.scriptId ? html` - - - ${this.hass.localize( - "ui.panel.config.script.trace.edit_script" - )} - - + ${this.hass.localize( + "ui.panel.config.script.trace.edit_script" + )} + ` : ""} diff --git a/src/panels/config/storage/dialog-mount-view.ts b/src/panels/config/storage/dialog-mount-view.ts index 38d579a26e..4590df946f 100644 --- a/src/panels/config/storage/dialog-mount-view.ts +++ b/src/panels/config/storage/dialog-mount-view.ts @@ -271,19 +271,24 @@ class ViewMountDialog extends LitElement { ${this._existing ? html` ${this.hass.localize("ui.common.delete")} ` : nothing}
- + ${this.hass.localize("ui.common.cancel")} ${this._existing diff --git a/src/panels/config/storage/dialog-move-datadisk.ts b/src/panels/config/storage/dialog-move-datadisk.ts index 917794b534..2d89b2d024 100644 --- a/src/panels/config/storage/dialog-move-datadisk.ts +++ b/src/panels/config/storage/dialog-move-datadisk.ts @@ -5,6 +5,7 @@ import memoizeOne from "memoize-one"; import { fireEvent } from "../../../common/dom/fire_event"; import { stopPropagation } from "../../../common/dom/stop_propagation"; import "../../../components/ha-dialog"; +import "../../../components/ha-button"; import "../../../components/ha-list-item"; import "../../../components/ha-select"; import "../../../components/ha-spinner"; @@ -152,21 +153,22 @@ class MoveDatadiskDialog extends LitElement { )} - ${this.hass.localize("ui.panel.config.storage.datadisk.cancel")} - + - ${this.hass.localize("ui.panel.config.storage.datadisk.move")} - + `} `; diff --git a/src/panels/config/storage/ha-config-section-storage.ts b/src/panels/config/storage/ha-config-section-storage.ts index 494aaccafe..cdf5ca741c 100644 --- a/src/panels/config/storage/ha-config-section-storage.ts +++ b/src/panels/config/storage/ha-config-section-storage.ts @@ -11,6 +11,7 @@ import { customElement, property, state } from "lit/decorators"; import { isComponentLoaded } from "../../../common/config/is_component_loaded"; import { navigate } from "../../../common/navigate"; import "../../../components/ha-alert"; +import "../../../components/ha-button"; import "../../../components/ha-button-menu"; import "../../../components/ha-icon-button"; import "../../../components/ha-icon-next"; @@ -123,11 +124,14 @@ class HaConfigSectionStorage extends LitElement {
${this._hostInfo ? html`
- + ${this.hass.localize( "ui.panel.config.storage.datadisk.title" )} - +
` : nothing} @@ -153,14 +157,15 @@ class HaConfigSectionStorage extends LitElement { "ui.panel.config.storage.network_mounts.not_supported.os", { version: "10.2" } )} - ${this.hass.localize( "ui.panel.config.storage.network_mounts.not_supported.navigate_to_updates" )} - ` + ` : this.hass.localize( "ui.panel.config.storage.network_mounts.not_supported.supervised" )} @@ -218,11 +223,11 @@ class HaConfigSectionStorage extends LitElement { `} ${this._mountsInfo !== null ? html`
- + ${this.hass.localize( "ui.panel.config.storage.network_mounts.add_title" )} - +
` : nothing} @@ -304,6 +309,10 @@ class HaConfigSectionStorage extends LitElement { max-width: 1040px; margin: 0 auto; } + .card-actions { + display: flex; + justify-content: flex-end; + } ha-card { max-width: 600px; margin: 0 auto 12px; diff --git a/src/panels/config/users/dialog-admin-change-password.ts b/src/panels/config/users/dialog-admin-change-password.ts index fe1c9cb29a..67d43cd769 100644 --- a/src/panels/config/users/dialog-admin-change-password.ts +++ b/src/panels/config/users/dialog-admin-change-password.ts @@ -1,4 +1,3 @@ -import "@material/mwc-button"; import type { CSSResultGroup } from "lit"; import { css, html, LitElement, nothing } from "lit"; import { customElement, property, state } from "lit/decorators"; @@ -8,6 +7,7 @@ import { createCloseHeading } from "../../../components/ha-dialog"; import "../../../components/ha-form/ha-form"; import type { SchemaUnion } from "../../../components/ha-form/types"; import "../../../components/ha-textfield"; +import "../../../components/ha-button"; import { adminChangePassword } from "../../../data/auth"; import { haStyleDialog } from "../../../resources/styles"; import type { HomeAssistant } from "../../../types"; @@ -121,9 +121,9 @@ class DialogAdminChangePassword extends LitElement { "ui.panel.config.users.change_password.password_changed" )}

- + ${this.hass.localize("ui.common.ok")} - + ` : html` - + ${this.hass.localize("ui.common.cancel")} - - + + `} `; diff --git a/src/panels/config/voice-assistants/cloud-alexa-pref.ts b/src/panels/config/voice-assistants/cloud-alexa-pref.ts index 0eb9fd5ae0..5fadf0abc2 100644 --- a/src/panels/config/voice-assistants/cloud-alexa-pref.ts +++ b/src/panels/config/voice-assistants/cloud-alexa-pref.ts @@ -1,4 +1,3 @@ -import "@material/mwc-button"; import { mdiHelpCircle } from "@mdi/js"; import { css, html, LitElement, nothing } from "lit"; import { property, state } from "lit/decorators"; @@ -7,6 +6,7 @@ import { fireEvent } from "../../../common/dom/fire_event"; import { isEmptyEntityDomainFilter } from "../../../common/entity/entity_domain_filter"; import "../../../components/ha-alert"; import "../../../components/ha-card"; +import "../../../components/ha-button"; import "../../../components/ha-settings-row"; import "../../../components/ha-switch"; import type { HaSwitch } from "../../../components/ha-switch"; @@ -180,24 +180,23 @@ export class CloudAlexaPref extends LitElement { ${alexa_enabled ? html`
- - - ${manualConfig - ? this.hass!.localize( - "ui.panel.config.cloud.account.alexa.show_entities" - ) - : this.hass.localize( - "ui.panel.config.cloud.account.alexa.exposed_entities", - { - number: this.exposedEntities - ? this._exposedEntitiesCount(this.exposedEntities) - : 0, - } - )} - - + ${manualConfig + ? this.hass!.localize( + "ui.panel.config.cloud.account.alexa.show_entities" + ) + : this.hass.localize( + "ui.panel.config.cloud.account.alexa.exposed_entities", + { + number: this.exposedEntities + ? this._exposedEntitiesCount(this.exposedEntities) + : 0, + } + )} +
` : nothing} diff --git a/src/panels/config/voice-assistants/cloud-google-pref.ts b/src/panels/config/voice-assistants/cloud-google-pref.ts index 3c66c9eccb..02f3ede333 100644 --- a/src/panels/config/voice-assistants/cloud-google-pref.ts +++ b/src/panels/config/voice-assistants/cloud-google-pref.ts @@ -1,4 +1,3 @@ -import "@material/mwc-button"; import { mdiHelpCircle } from "@mdi/js"; import { css, html, LitElement, nothing } from "lit"; import { property, state } from "lit/decorators"; @@ -7,6 +6,7 @@ import { fireEvent } from "../../../common/dom/fire_event"; import { isEmptyEntityDomainFilter } from "../../../common/entity/entity_domain_filter"; import "../../../components/ha-alert"; import "../../../components/ha-card"; +import "../../../components/ha-button"; import "../../../components/ha-settings-row"; import "../../../components/ha-switch"; import type { HaSwitch } from "../../../components/ha-switch"; @@ -237,24 +237,24 @@ export class CloudGooglePref extends LitElement { ${google_enabled ? html`
- - - ${manualConfig - ? this.hass!.localize( - "ui.panel.config.cloud.account.google.show_entities" - ) - : this.hass.localize( - "ui.panel.config.cloud.account.google.exposed_entities", - { - number: this.exposedEntities - ? this._exposedEntitiesCount(this.exposedEntities) - : 0, - } - )} - - + ${manualConfig + ? this.hass!.localize( + "ui.panel.config.cloud.account.google.show_entities" + ) + : this.hass.localize( + "ui.panel.config.cloud.account.google.exposed_entities", + { + number: this.exposedEntities + ? this._exposedEntitiesCount(this.exposedEntities) + : 0, + } + )} +
` : nothing} diff --git a/src/panels/config/voice-assistants/ha-config-voice-assistants-expose.ts b/src/panels/config/voice-assistants/ha-config-voice-assistants-expose.ts index 300abc7d57..758bdd8cd2 100644 --- a/src/panels/config/voice-assistants/ha-config-voice-assistants-expose.ts +++ b/src/panels/config/voice-assistants/ha-config-voice-assistants-expose.ts @@ -27,6 +27,7 @@ import type { SortingChangedEvent, } from "../../../components/data-table/ha-data-table"; import "../../../components/ha-fab"; +import "../../../components/ha-button"; import "../../../components/ha-tooltip"; import type { AlexaEntity } from "../../../data/alexa"; import { fetchCloudAlexaEntities } from "../../../data/alexa"; @@ -588,15 +589,21 @@ export class VoiceAssistantsExpose extends LitElement {
${!this.narrow ? html` - ${this.hass.localize( "ui.panel.config.voice_assistants.expose.expose" - )} - ${this.hass.localize( "ui.panel.config.voice_assistants.expose.unexpose" - )} ` : html` @@ -831,7 +838,7 @@ export class VoiceAssistantsExpose extends LitElement { .header-btns { display: flex; } - .header-btns > mwc-button, + .header-btns > ha-button, .header-btns > ha-icon-button { margin: 8px; } diff --git a/src/panels/developer-tools/statistics/developer-tools-statistics.ts b/src/panels/developer-tools/statistics/developer-tools-statistics.ts index a171eb1a24..2941eb3291 100644 --- a/src/panels/developer-tools/statistics/developer-tools-statistics.ts +++ b/src/panels/developer-tools/statistics/developer-tools-statistics.ts @@ -1,4 +1,3 @@ -import "@material/mwc-button/mwc-button"; import { mdiArrowDown, mdiArrowUp, @@ -22,6 +21,7 @@ import { computeStateName } from "../../../common/entity/compute_state_name"; import type { LocalizeFunc } from "../../../common/translations/localize"; import "../../../components/chips/ha-assist-chip"; import "../../../components/ha-md-divider"; +import "../../../components/ha-button"; import "../../../components/data-table/ha-data-table"; import type { DataTableColumnContainer, @@ -203,9 +203,11 @@ class HaPanelDevStatistics extends KeyboardShortcutMixin(LitElement) { ), template: (statistic) => html`${statistic.issues - ? html` ${localize( statistic.issues.some((issue) => @@ -214,7 +216,7 @@ class HaPanelDevStatistics extends KeyboardShortcutMixin(LitElement) { ? "ui.panel.developer-tools.tabs.statistics.fix_issue.fix" : "ui.panel.developer-tools.tabs.statistics.fix_issue.info" )} - ` + ` : "—"}`, minWidth: "113px", maxWidth: "113px", diff --git a/src/panels/developer-tools/statistics/dialog-statistics-adjust-sum.ts b/src/panels/developer-tools/statistics/dialog-statistics-adjust-sum.ts index b1647f4c0a..8e14cb897e 100644 --- a/src/panels/developer-tools/statistics/dialog-statistics-adjust-sum.ts +++ b/src/panels/developer-tools/statistics/dialog-statistics-adjust-sum.ts @@ -1,4 +1,3 @@ -import "@material/mwc-button/mwc-button"; import { formatISO9075 } from "date-fns"; import type { CSSResultGroup, PropertyValues, TemplateResult } from "lit"; import { css, html, LitElement, nothing } from "lit"; @@ -8,6 +7,7 @@ import { formatDateTime } from "../../../common/datetime/format_date_time"; import { fireEvent } from "../../../common/dom/fire_event"; import "../../../components/ha-spinner"; import "../../../components/ha-dialog"; +import "../../../components/ha-button"; import "../../../components/ha-form/ha-form"; import "../../../components/ha-icon-next"; import "../../../components/ha-list-item"; @@ -193,18 +193,18 @@ export class DialogStatisticsFixUnsupportedUnitMetadata extends LitElement { @value-changed=${this._dateTimeSelectorChanged} >
${stats}
- + ${this.hass.localize( "ui.panel.developer-tools.tabs.statistics.fix_issue.adjust_sum.outliers" )} - @click=${this._fetchOutliers} - > - + + + ${this.hass.localize("ui.common.close")} + `; } @@ -283,20 +283,22 @@ export class DialogStatisticsFixUnsupportedUnitMetadata extends LitElement { @value-changed=${this._amountChanged} > - - + > + ${this.hass.localize("ui.common.back")} + + ${this.hass.localize( + "ui.panel.developer-tools.tabs.statistics.fix_issue.adjust_sum.adjust" + )} `; } diff --git a/src/panels/lovelace/cards/energy/hui-energy-distribution-card.ts b/src/panels/lovelace/cards/energy/hui-energy-distribution-card.ts index a84858d13e..00d70d6351 100644 --- a/src/panels/lovelace/cards/energy/hui-energy-distribution-card.ts +++ b/src/panels/lovelace/cards/energy/hui-energy-distribution-card.ts @@ -1,4 +1,3 @@ -import "@material/mwc-button"; import { mdiArrowDown, mdiArrowLeft, @@ -18,6 +17,7 @@ import { css, html, LitElement, svg, nothing } from "lit"; import { customElement, property, state } from "lit/decorators"; import { classMap } from "lit/directives/class-map"; import "../../../../components/ha-card"; +import "../../../../components/ha-button"; import "../../../../components/ha-svg-icon"; import type { EnergyData } from "../../../../data/energy"; import { @@ -756,13 +756,11 @@ class HuiEnergyDistrubutionCard ${this._config.link_dashboard ? html`
- - ${this.hass.localize( - "ui.panel.lovelace.cards.energy.energy_distribution.go_to_energy_dashboard" - )} - + + ${this.hass.localize( + "ui.panel.lovelace.cards.energy.energy_distribution.go_to_energy_dashboard" + )} +
` : ""} diff --git a/src/panels/lovelace/cards/hui-alarm-panel-card.ts b/src/panels/lovelace/cards/hui-alarm-panel-card.ts index 01b980aebc..75c2f36ba0 100644 --- a/src/panels/lovelace/cards/hui-alarm-panel-card.ts +++ b/src/panels/lovelace/cards/hui-alarm-panel-card.ts @@ -10,6 +10,7 @@ import { stateColorCss } from "../../../common/entity/state_color"; import { supportsFeature } from "../../../common/entity/supports-feature"; import "../../../components/chips/ha-assist-chip"; import "../../../components/ha-card"; +import "../../../components/ha-button"; import "../../../components/ha-state-icon"; import "../../../components/ha-textfield"; import type { HaTextField } from "../../../components/ha-textfield"; @@ -258,13 +259,15 @@ class HuiAlarmPanelCard extends LitElement implements LovelaceCard { : (["disarm"] as const) ).map( (stateAction) => html` - ${this._actionDisplay(stateAction)} - + ` )}
@@ -286,12 +289,12 @@ class HuiAlarmPanelCard extends LitElement implements LovelaceCard {
${BUTTONS.map((value) => value === "" - ? html` ` + ? html` ` : html` - + ` )}
@@ -418,7 +421,7 @@ class HuiAlarmPanelCard extends LitElement implements LovelaceCard { direction: ltr; } - #keypad mwc-button { + #keypad ha-button { padding: 8px; width: 30%; box-sizing: border-box; @@ -431,19 +434,12 @@ class HuiAlarmPanelCard extends LitElement implements LovelaceCard { justify-content: center; } - .actions mwc-button { + .actions ha-button { margin: 0 4px 4px; } - mwc-button#disarm { - color: var(--error-color); - } - - mwc-button.numberkey { - --mdc-typography-button-font-size: var( - --keypad-font-size, - var(--ha-font-size-s) - ); + ha-button.numberkey { + --ha-button-font-size: var(--keypad-font-size, var(--ha-font-size-s)); } `; } diff --git a/src/panels/lovelace/cards/hui-empty-state-card.ts b/src/panels/lovelace/cards/hui-empty-state-card.ts index 5a183e5f63..9969767be2 100644 --- a/src/panels/lovelace/cards/hui-empty-state-card.ts +++ b/src/panels/lovelace/cards/hui-empty-state-card.ts @@ -1,7 +1,7 @@ -import "@material/mwc-button/mwc-button"; import { css, html, LitElement, nothing } from "lit"; import { customElement, property } from "lit/decorators"; import "../../../components/ha-card"; +import "../../../components/ha-button"; import type { HomeAssistant } from "../../../types"; import type { LovelaceCard } from "../types"; import type { EmptyStateCardConfig } from "./types"; @@ -34,13 +34,11 @@ export class HuiEmptyStateCard extends LitElement implements LovelaceCard { )}
- - - ${this.hass.localize( - "ui.panel.lovelace.cards.empty_state.go_to_integrations_page" - )} - - + + ${this.hass.localize( + "ui.panel.lovelace.cards.empty_state.go_to_integrations_page" + )} +
`; @@ -56,7 +54,7 @@ export class HuiEmptyStateCard extends LitElement implements LovelaceCard { text-decoration: none; } - mwc-button { + ha-button { margin-left: -8px; margin-inline-start: -8px; margin-inline-end: initial; diff --git a/src/panels/lovelace/components/hui-card-options.ts b/src/panels/lovelace/components/hui-card-options.ts index 873ee0ef52..9db8553b59 100644 --- a/src/panels/lovelace/components/hui-card-options.ts +++ b/src/panels/lovelace/components/hui-card-options.ts @@ -1,4 +1,3 @@ -import "@material/mwc-button"; import type { ActionDetail } from "@material/mwc-list/mwc-list-foundation"; import { mdiContentCopy, @@ -17,6 +16,7 @@ import { storage } from "../../../common/decorators/storage"; import { fireEvent } from "../../../common/dom/fire_event"; import "../../../components/ha-button-menu"; import "../../../components/ha-card"; +import "../../../components/ha-button"; import "../../../components/ha-icon-button"; import "../../../components/ha-list-item"; import type { LovelaceCardConfig } from "../../../data/lovelace/config/card"; @@ -95,10 +95,10 @@ export class HuiCardOptions extends LitElement {
- ${this.hass!.localize( "ui.panel.lovelace.editor.edit_card.edit" - )}
diff --git a/src/panels/lovelace/editor/badge-editor/hui-dialog-create-badge.ts b/src/panels/lovelace/editor/badge-editor/hui-dialog-create-badge.ts index 9388295802..e2c363b52b 100644 --- a/src/panels/lovelace/editor/badge-editor/hui-dialog-create-badge.ts +++ b/src/panels/lovelace/editor/badge-editor/hui-dialog-create-badge.ts @@ -6,6 +6,7 @@ import { cache } from "lit/directives/cache"; import { classMap } from "lit/directives/class-map"; import { fireEvent } from "../../../../common/dom/fire_event"; import "../../../../components/ha-dialog"; +import "../../../../components/ha-button"; import "../../../../components/ha-dialog-header"; import "../../../../components/sl-tab-group"; import type { LovelaceViewConfig } from "../../../../data/lovelace/config/view"; @@ -139,14 +140,14 @@ export class HuiCreateDialogBadge )}
- + ${this.hass!.localize("ui.common.cancel")} - + ${this._selectedEntities.length ? html` - + ${this.hass!.localize("ui.common.continue")} - + ` : ""}
diff --git a/src/panels/lovelace/editor/badge-editor/hui-dialog-edit-badge.ts b/src/panels/lovelace/editor/badge-editor/hui-dialog-edit-badge.ts index 16175b9ea5..5ceee2696b 100644 --- a/src/panels/lovelace/editor/badge-editor/hui-dialog-edit-badge.ts +++ b/src/panels/lovelace/editor/badge-editor/hui-dialog-edit-badge.ts @@ -6,10 +6,11 @@ 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-spinner"; import "../../../../components/ha-dialog"; import "../../../../components/ha-dialog-header"; import "../../../../components/ha-icon-button"; +import "../../../../components/ha-spinner"; +import "../../../../components/ha-button"; import type { LovelaceBadgeConfig } from "../../../../data/lovelace/config/badge"; import { ensureBadgeConfig } from "../../../../data/lovelace/config/badge"; import type { LovelaceViewConfig } from "../../../../data/lovelace/config/view"; @@ -255,7 +256,8 @@ export class HuiDialogEditBadge
${this._badgeConfig !== undefined ? html` - + ` - : ""} -
- - ${this.hass!.localize("ui.common.cancel")} - - ${this._badgeConfig !== undefined && this._dirty - ? html` - - ${this._saving - ? html` - - ` - : this.hass!.localize("ui.common.save")} - - ` - : ``} -
+ : nothing} + + ${this.hass!.localize("ui.common.cancel")} + + ${this._badgeConfig !== undefined && this._dirty + ? html` + + ${this.hass!.localize("ui.common.save")} + + ` + : nothing} `; } diff --git a/src/panels/lovelace/editor/badge-editor/hui-dialog-suggest-badge.ts b/src/panels/lovelace/editor/badge-editor/hui-dialog-suggest-badge.ts index c6fbba1387..cf90884686 100644 --- a/src/panels/lovelace/editor/badge-editor/hui-dialog-suggest-badge.ts +++ b/src/panels/lovelace/editor/badge-editor/hui-dialog-suggest-badge.ts @@ -4,7 +4,7 @@ import { css, html, LitElement, nothing } from "lit"; import { customElement, property, query, state } from "lit/decorators"; import { fireEvent } from "../../../../common/dom/fire_event"; import "../../../../components/ha-yaml-editor"; -import "../../../../components/ha-spinner"; +import "../../../../components/ha-button"; import type { HaYamlEditor } from "../../../../components/ha-yaml-editor"; import type { LovelaceBadgeConfig } from "../../../../data/lovelace/config/badge"; @@ -92,30 +92,27 @@ export class HuiDialogSuggestBadge extends LitElement { ` : nothing}
- ${this._params.yaml ? this.hass!.localize("ui.common.close") : this.hass!.localize("ui.common.cancel")} - + ${!this._params.yaml ? html` - - ${this._saving - ? html` - - ` - : this.hass!.localize( - "ui.panel.lovelace.editor.suggest_badge.add" - )} - + ${this.hass!.localize( + "ui.panel.lovelace.editor.suggest_badge.add" + )} + ` : nothing} diff --git a/src/panels/lovelace/editor/hui-dialog-save-config.ts b/src/panels/lovelace/editor/hui-dialog-save-config.ts index cc0faf67a3..ac1721830b 100644 --- a/src/panels/lovelace/editor/hui-dialog-save-config.ts +++ b/src/panels/lovelace/editor/hui-dialog-save-config.ts @@ -1,10 +1,9 @@ -import "@material/mwc-button"; import { mdiClose, mdiHelpCircle } from "@mdi/js"; import type { CSSResultGroup } from "lit"; import { LitElement, css, html, nothing } from "lit"; import { customElement, property, state } from "lit/decorators"; import { fireEvent } from "../../../common/dom/fire_event"; -import "../../../components/ha-spinner"; +import "../../../components/ha-button"; import "../../../components/ha-dialog"; import "../../../components/ha-dialog-header"; import "../../../components/ha-formfield"; @@ -133,30 +132,28 @@ export class HuiSaveConfig extends LitElement implements HassDialog { ${this._params.mode === "storage" ? html` - - ${this.hass!.localize("ui.common.cancel")} - - + ${this.hass!.localize("ui.common.cancel")} + + - ${this._saving - ? html`` - : ""} ${this.hass!.localize( "ui.panel.lovelace.editor.save_config.save" )} - + ` : html` - + ${this.hass!.localize( "ui.panel.lovelace.editor.save_config.close" - )} `} diff --git a/src/panels/lovelace/editor/select-view/hui-dialog-select-view.ts b/src/panels/lovelace/editor/select-view/hui-dialog-select-view.ts index 4b23bd6501..8d4a699388 100644 --- a/src/panels/lovelace/editor/select-view/hui-dialog-select-view.ts +++ b/src/panels/lovelace/editor/select-view/hui-dialog-select-view.ts @@ -1,11 +1,10 @@ -import "@material/mwc-button/mwc-button"; - import type { CSSResultGroup } from "lit"; import { css, html, LitElement, nothing } from "lit"; import { customElement, state } from "lit/decorators"; import { fireEvent } from "../../../../common/dom/fire_event"; import { stopPropagation } from "../../../../common/dom/stop_propagation"; import "../../../../components/ha-alert"; +import "../../../../components/ha-button"; import { createCloseHeading } from "../../../../components/ha-dialog"; import "../../../../components/ha-icon"; import "../../../../components/ha-list"; @@ -140,20 +139,21 @@ export class HuiDialogSelectView extends LitElement { ` : ""} - ${this.hass!.localize("ui.common.cancel")} - - + ${this._params.actionLabel || this.hass!.localize("ui.common.move")} - + `; } diff --git a/src/panels/lovelace/entity-rows/hui-button-entity-row.ts b/src/panels/lovelace/entity-rows/hui-button-entity-row.ts index e41c4de02d..1eb067770c 100644 --- a/src/panels/lovelace/entity-rows/hui-button-entity-row.ts +++ b/src/panels/lovelace/entity-rows/hui-button-entity-row.ts @@ -1,4 +1,3 @@ -import "@material/mwc-button/mwc-button"; import type { PropertyValues } from "lit"; import { css, html, LitElement, nothing } from "lit"; import { customElement, property, state } from "lit/decorators"; @@ -6,6 +5,7 @@ import { UNAVAILABLE } from "../../../data/entity"; import type { HomeAssistant } from "../../../types"; import { hasConfigOrEntityChanged } from "../common/has-changed"; import "../components/hui-generic-entity-row"; +import "../../../components/ha-button"; import { createEntityNotFoundWarning } from "../components/hui-warning"; import type { ActionRowConfig, LovelaceRow } from "./types"; import { confirmAction } from "../common/confirm-action"; @@ -44,18 +44,20 @@ class HuiButtonEntityRow extends LitElement implements LovelaceRow { return html` - ${this.hass.localize("ui.card.button.press")} - + `; } static styles = css` - mwc-button:last-child { + ha-button:last-child { margin-right: -0.57em; margin-inline-end: -0.57em; margin-inline-start: initial; diff --git a/src/panels/lovelace/entity-rows/hui-input-button-entity-row.ts b/src/panels/lovelace/entity-rows/hui-input-button-entity-row.ts index d869d98abd..93b59a3938 100644 --- a/src/panels/lovelace/entity-rows/hui-input-button-entity-row.ts +++ b/src/panels/lovelace/entity-rows/hui-input-button-entity-row.ts @@ -1,14 +1,14 @@ -import "@material/mwc-button/mwc-button"; import type { PropertyValues } from "lit"; import { css, html, LitElement, nothing } from "lit"; import { customElement, property, state } from "lit/decorators"; import { UNAVAILABLE } from "../../../data/entity"; import type { HomeAssistant } from "../../../types"; +import { confirmAction } from "../common/confirm-action"; import { hasConfigOrEntityChanged } from "../common/has-changed"; +import "../../../components/ha-button"; import "../components/hui-generic-entity-row"; import { createEntityNotFoundWarning } from "../components/hui-warning"; import type { ActionRowConfig, LovelaceRow } from "./types"; -import { confirmAction } from "../common/confirm-action"; @customElement("hui-input-button-entity-row") class HuiInputButtonEntityRow extends LitElement implements LovelaceRow { @@ -44,18 +44,20 @@ class HuiInputButtonEntityRow extends LitElement implements LovelaceRow { return html` - ${this.hass.localize("ui.card.button.press")} - + `; } static styles = css` - mwc-button:last-child { + ha-button:last-child { margin-right: -0.57em; margin-inline-end: -0.57em; margin-inline-start: initial; diff --git a/src/panels/lovelace/ha-panel-lovelace.ts b/src/panels/lovelace/ha-panel-lovelace.ts index deb0432d63..7ad1ab0c2e 100644 --- a/src/panels/lovelace/ha-panel-lovelace.ts +++ b/src/panels/lovelace/ha-panel-lovelace.ts @@ -1,4 +1,3 @@ -import "@material/mwc-button"; import deepFreeze from "deep-freeze"; import type { UnsubscribeFunc } from "home-assistant-js-websocket"; import type { PropertyValues, TemplateResult } from "lit"; @@ -35,6 +34,7 @@ import { checkLovelaceConfig } from "./common/check-lovelace-config"; import { loadLovelaceResources } from "./common/load-resources"; import { showSaveDialog } from "./editor/show-save-config-dialog"; import "./hui-root"; +import "../../components/ha-button"; import { generateLovelaceDashboardStrategy } from "./strategies/get-strategy"; import type { Lovelace } from "./types"; @@ -147,9 +147,9 @@ export class LovelacePanel extends LitElement { title=${domainToName(this.hass!.localize, "lovelace")} .error=${this._errorMsg} > - + ${this.hass!.localize("ui.panel.lovelace.reload_lovelace")} - + `; } diff --git a/src/panels/lovelace/hui-editor.ts b/src/panels/lovelace/hui-editor.ts index a7fd0c0216..914282becf 100644 --- a/src/panels/lovelace/hui-editor.ts +++ b/src/panels/lovelace/hui-editor.ts @@ -1,5 +1,4 @@ import { undoDepth } from "@codemirror/commands"; -import "@material/mwc-button"; import { mdiClose } from "@mdi/js"; import { dump, load } from "js-yaml"; import type { CSSResultGroup, PropertyValues, TemplateResult } from "lit"; @@ -11,6 +10,7 @@ import { deepEqual } from "../../common/util/deep-equal"; import "../../components/ha-code-editor"; import type { HaCodeEditor } from "../../components/ha-code-editor"; import "../../components/ha-icon-button"; +import "../../components/ha-button"; import { showAlertDialog, showConfirmationDialog, @@ -71,14 +71,13 @@ class LovelaceFullConfigEditor extends LitElement { ) : this.hass!.localize("ui.panel.lovelace.editor.raw_editor.saved")} - ${this.hass!.localize( "ui.panel.lovelace.editor.raw_editor.save" - )}
` : ""}`}
- ${["abort", "create_entry"].includes(this._step?.type || "") - ? html`${this.hass.localize( - "ui.panel.profile.mfa_setup.close" - )}` - : ""} + ${this.hass.localize( + ["abort", "create_entry"].includes(this._step?.type || "") + ? "ui.panel.profile.mfa_setup.close" + : "ui.common.cancel" + )} ${this._step?.type === "form" - ? html`${this.hass.localize( "ui.panel.profile.mfa_setup.submit" - )}` - : ""} + : nothing} `; } diff --git a/src/panels/profile/ha-change-password-card.ts b/src/panels/profile/ha-change-password-card.ts index d30a68b3bd..4398a1ce20 100644 --- a/src/panels/profile/ha-change-password-card.ts +++ b/src/panels/profile/ha-change-password-card.ts @@ -1,8 +1,8 @@ -import "@material/mwc-button"; import type { CSSResultGroup, PropertyValues, TemplateResult } from "lit"; import { css, html, LitElement } from "lit"; import { customElement, property, state } from "lit/decorators"; import "../../components/ha-card"; +import "../../components/ha-button"; import "../../components/ha-spinner"; import "../../components/ha-textfield"; import "../../components/ha-password-field"; @@ -89,17 +89,14 @@ class HaChangePasswordCard extends LitElement {
- ${this._loading - ? html`
- -
` - : html`${this.hass.localize( - "ui.panel.profile.change_password.submit" - )}`} + ${this.hass.localize( + "ui.panel.profile.change_password.submit" + )}
`; @@ -205,6 +202,10 @@ class HaChangePasswordCard extends LitElement { #currentPassword { margin-top: 0; } + .card-actions { + display: flex; + justify-content: flex-end; + } `, ]; } diff --git a/src/panels/profile/ha-long-lived-access-tokens-card.ts b/src/panels/profile/ha-long-lived-access-tokens-card.ts index 2877db9301..f6941feb04 100644 --- a/src/panels/profile/ha-long-lived-access-tokens-card.ts +++ b/src/panels/profile/ha-long-lived-access-tokens-card.ts @@ -1,4 +1,3 @@ -import "@material/mwc-button/mwc-button"; import { mdiDelete } from "@mdi/js"; import type { CSSResultGroup, TemplateResult } from "lit"; import { css, html, LitElement } from "lit"; @@ -6,9 +5,10 @@ import { customElement, property } from "lit/decorators"; import memoizeOne from "memoize-one"; import { relativeTime } from "../../common/datetime/relative_time"; import { fireEvent } from "../../common/dom/fire_event"; +import "../../components/ha-button"; import "../../components/ha-card"; -import "../../components/ha-settings-row"; import "../../components/ha-icon-button"; +import "../../components/ha-settings-row"; import type { RefreshToken } from "../../data/refresh_token"; import { showAlertDialog, @@ -88,11 +88,11 @@ class HaLongLivedTokens extends LitElement {
- + ${this.hass.localize( "ui.panel.profile.long_lived_access_tokens.create" )} - +
`; @@ -175,12 +175,13 @@ class HaLongLivedTokens extends LitElement { a { color: var(--primary-color); } - mwc-button { - --mdc-theme-primary: var(--primary-color); - } ha-icon-button { color: var(--primary-text-color); } + .card-actions { + display: flex; + justify-content: flex-end; + } `, ]; } diff --git a/src/panels/profile/ha-mfa-modules-card.ts b/src/panels/profile/ha-mfa-modules-card.ts index 2d7d618aa4..39bc08d12e 100644 --- a/src/panels/profile/ha-mfa-modules-card.ts +++ b/src/panels/profile/ha-mfa-modules-card.ts @@ -1,9 +1,9 @@ -import "@material/mwc-button"; import type { TemplateResult } from "lit"; import { css, html, LitElement } from "lit"; import { customElement, property } from "lit/decorators"; import { fireEvent } from "../../common/dom/fire_event"; import "../../components/ha-card"; +import "../../components/ha-button"; import { showConfirmationDialog } from "../../dialogs/generic/show-dialog-box"; import type { HomeAssistant, MFAModule } from "../../types"; import { showMfaModuleSetupFlowDialog } from "./show-ha-mfa-module-setup-flow-dialog"; @@ -22,17 +22,15 @@ class HaMfaModulesCard extends LitElement { html` ${module.name} ${module.id} - ${module.enabled - ? html`${this.hass.localize( - "ui.panel.profile.mfa.disable" - )}` - : html`${this.hass.localize( - "ui.panel.profile.mfa.enable" - )}`} + ${this.hass.localize( + `ui.panel.profile.mfa.${module.enabled ? "disable" : "enable"}` + )} ` )} @@ -40,7 +38,7 @@ class HaMfaModulesCard extends LitElement { } static styles = css` - mwc-button { + ha-button { margin-right: -0.57em; margin-inline-end: -0.57em; margin-inline-start: initial; diff --git a/src/panels/profile/ha-profile-section-general.ts b/src/panels/profile/ha-profile-section-general.ts index a14043f625..e7e95e3a3e 100644 --- a/src/panels/profile/ha-profile-section-general.ts +++ b/src/panels/profile/ha-profile-section-general.ts @@ -1,4 +1,3 @@ -import "@material/mwc-button"; import type { UnsubscribeFunc } from "home-assistant-js-websocket"; import type { CSSResultGroup, TemplateResult } from "lit"; import { css, html, LitElement } from "lit"; @@ -6,6 +5,7 @@ import { customElement, property, state } from "lit/decorators"; import { fireEvent } from "../../common/dom/fire_event"; import { nextRender } from "../../common/util/render-status"; import "../../components/ha-card"; +import "../../components/ha-button"; import { isExternal } from "../../data/external"; import type { CoreFrontendUserData } from "../../data/frontend"; import { subscribeFrontendUserData } from "../../data/frontend"; @@ -113,9 +113,13 @@ class HaProfileSectionGeneral extends LitElement { : ""}
- + ${this.hass.localize("ui.panel.profile.logout")} - +
- + ${this.hass.localize( "ui.panel.profile.customize_sidebar.button" )} - + ${this.hass.dockedSidebar !== "auto" || !this.narrow ? html` diff --git a/src/panels/todo/dialog-todo-item-editor.ts b/src/panels/todo/dialog-todo-item-editor.ts index 79bc135e61..6d0b800ba6 100644 --- a/src/panels/todo/dialog-todo-item-editor.ts +++ b/src/panels/todo/dialog-todo-item-editor.ts @@ -1,4 +1,3 @@ -import "@material/mwc-button"; import { formatInTimeZone, toDate } from "date-fns-tz"; import type { CSSResultGroup } from "lit"; import { LitElement, css, html, nothing } from "lit"; @@ -8,6 +7,7 @@ import { resolveTimeZone } from "../../common/datetime/resolve-time-zone"; import { fireEvent } from "../../common/dom/fire_event"; import { supportsFeature } from "../../common/entity/supports-feature"; import "../../components/ha-alert"; +import "../../components/ha-button"; import "../../components/ha-checkbox"; import "../../components/ha-date-input"; import { createCloseHeading } from "../../components/ha-dialog"; @@ -188,34 +188,35 @@ class DialogTodoItemEditor extends LitElement { ${isCreate ? html` - ${this.hass.localize("ui.components.todo.item.add")} - + ` : html` - ${this.hass.localize("ui.components.todo.item.save")} - + ${this._todoListSupportsFeature( TodoListEntityFeature.DELETE_TODO_ITEM ) ? html` - ${this.hass.localize("ui.components.todo.item.delete")} - + ` : ""} `} diff --git a/src/state-summary/state-card-button.ts b/src/state-summary/state-card-button.ts index eb9203b7f8..b9f9fbbec7 100644 --- a/src/state-summary/state-card-button.ts +++ b/src/state-summary/state-card-button.ts @@ -1,10 +1,10 @@ -import "@material/mwc-button"; import type { HassEntity } from "home-assistant-js-websocket"; import type { CSSResultGroup } from "lit"; import { html, LitElement } from "lit"; import { customElement, property } from "lit/decorators"; import "../components/entity/ha-entity-toggle"; import "../components/entity/state-info"; +import "../components/ha-button"; import { UNAVAILABLE } from "../data/entity"; import { haStyle } from "../resources/styles"; import type { HomeAssistant } from "../types"; @@ -26,12 +26,14 @@ class StateCardButton extends LitElement { .stateObj=${stateObj} .inDialog=${this.inDialog} > - ${this.hass.localize("ui.card.button.press")} - + `; } diff --git a/src/state-summary/state-card-configurator.ts b/src/state-summary/state-card-configurator.ts index d5dacddefc..210fd38b78 100644 --- a/src/state-summary/state-card-configurator.ts +++ b/src/state-summary/state-card-configurator.ts @@ -1,6 +1,6 @@ -import "@material/mwc-button"; import type { HassEntity } from "home-assistant-js-websocket"; import "../components/entity/state-info"; +import "../components/ha-button"; import { customElement, property } from "lit/decorators"; import type { CSSResultGroup, TemplateResult } from "lit"; import { LitElement, css, html, nothing } from "lit"; @@ -24,8 +24,8 @@ class StateCardConfigurator extends LitElement { .inDialog=${this.inDialog} > ${this.inDialog - ? html`${this.hass.formatEntityState(this.stateObj)}${this.hass.formatEntityState(this.stateObj)}` : nothing} @@ -36,7 +36,7 @@ class StateCardConfigurator extends LitElement { return [ haStyle, css` - mwc-button { + ha-button { top: 3px; height: 37px; margin-right: -0.57em; diff --git a/src/state-summary/state-card-input_button.ts b/src/state-summary/state-card-input_button.ts index e44c9bf576..5e8f460a47 100644 --- a/src/state-summary/state-card-input_button.ts +++ b/src/state-summary/state-card-input_button.ts @@ -1,10 +1,10 @@ -import "@material/mwc-button"; import type { HassEntity } from "home-assistant-js-websocket"; import type { CSSResultGroup } from "lit"; import { html, LitElement } from "lit"; import { customElement, property } from "lit/decorators"; import "../components/entity/ha-entity-toggle"; import "../components/entity/state-info"; +import "../components/ha-button"; import { UNAVAILABLE } from "../data/entity"; import { haStyle } from "../resources/styles"; import type { HomeAssistant } from "../types"; @@ -26,12 +26,13 @@ class StateCardInputButton extends LitElement { .stateObj=${stateObj} .inDialog=${this.inDialog} > - ${this.hass.localize("ui.card.button.press")} - + `; } diff --git a/src/state-summary/state-card-lock.ts b/src/state-summary/state-card-lock.ts index 3e73be74e5..99eb92b587 100644 --- a/src/state-summary/state-card-lock.ts +++ b/src/state-summary/state-card-lock.ts @@ -1,10 +1,10 @@ -import "@material/mwc-button"; import type { HassEntity } from "home-assistant-js-websocket"; import type { CSSResultGroup, TemplateResult } from "lit"; import { css, html, LitElement, nothing } from "lit"; import { customElement, property } from "lit/decorators"; import { supportsFeature } from "../common/entity/supports-feature"; import "../components/entity/state-info"; +import "../components/ha-button"; import { callProtectedLockService, LockEntityFeature } from "../data/lock"; import type { HomeAssistant } from "../types"; import { haStyle } from "../resources/styles"; @@ -29,18 +29,30 @@ class StateCardLock extends LitElement { .inDialog=${this.inDialog} > ${!supportsOpen - ? html`${this.hass.localize("ui.card.lock.open")}${this.hass.localize("ui.card.lock.open")}` : nothing} ${isLocked - ? html` ${this.hass.localize("ui.card.lock.unlock")}${this.hass.localize("ui.card.lock.unlock")}` : nothing} ${!isLocked - ? html`${this.hass.localize("ui.card.lock.lock")}${this.hass.localize("ui.card.lock.lock")}` : nothing} @@ -60,7 +72,7 @@ class StateCardLock extends LitElement { return [ haStyle, css` - mwc-button { + ha-button { top: 3px; height: 37px; margin-right: -0.57em; diff --git a/src/state-summary/state-card-scene.ts b/src/state-summary/state-card-scene.ts index cf42b3e284..b414eba78b 100644 --- a/src/state-summary/state-card-scene.ts +++ b/src/state-summary/state-card-scene.ts @@ -1,9 +1,9 @@ -import "@material/mwc-button"; import type { HassEntity } from "home-assistant-js-websocket"; import type { CSSResultGroup } from "lit"; import { css, html, LitElement } from "lit"; import { customElement, property } from "lit/decorators"; import "../components/entity/state-info"; +import "../components/ha-button"; import { activateScene } from "../data/scene"; import type { HomeAssistant } from "../types"; import { haStyle } from "../resources/styles"; @@ -24,8 +24,8 @@ class StateCardScene extends LitElement { .stateObj=${this.stateObj} .inDialog=${this.inDialog} > - ${this.hass.localize("ui.card.scene.activate")}${this.hass.localize("ui.card.scene.activate")} `; diff --git a/src/state-summary/state-card-script.ts b/src/state-summary/state-card-script.ts index ea07602420..ce9ae87b70 100644 --- a/src/state-summary/state-card-script.ts +++ b/src/state-summary/state-card-script.ts @@ -1,10 +1,10 @@ -import "@material/mwc-button"; import type { HassEntity } from "home-assistant-js-websocket"; import type { CSSResultGroup } from "lit"; import { html, LitElement } from "lit"; import { customElement, property } from "lit/decorators"; import "../components/entity/ha-entity-toggle"; import "../components/entity/state-info"; +import "../components/ha-button"; import { isUnavailableState } from "../data/entity"; import type { ScriptEntity } from "../data/script"; import { canRun, hasScriptFields } from "../data/script"; @@ -30,23 +30,29 @@ class StateCardScript extends LitElement { .inDialog=${this.inDialog} > ${stateObj.state === "on" - ? html` + ? html` ${stateObj.attributes.mode !== "single" && (stateObj.attributes.current || 0) > 0 ? this.hass.localize("ui.card.script.cancel_multiple", { number: stateObj.attributes.current, }) : this.hass.localize("ui.card.script.cancel")} - ` + ` : ""} ${stateObj.state === "off" || stateObj.attributes.max - ? html` ${this.hass!.localize("ui.card.script.run")} - ` + ` : ""} `; diff --git a/src/translations/en.json b/src/translations/en.json index 488c2f82a9..dba54f05b1 100644 --- a/src/translations/en.json +++ b/src/translations/en.json @@ -8923,12 +8923,12 @@ "not_available_arch": "This add-on is not compatible with the processor of your device or the operating system you have installed on your device.", "not_available_version": "You are running Home Assistant {core_version_installed}, to update to this version of the add-on you need at least version {core_version_needed} of Home Assistant", "visit_addon_page": "Visit the {name} page for more details.", - "restart": "restart", - "start": "start", - "stop": "stop", - "install": "install", - "uninstall": "uninstall", - "rebuild": "rebuild", + "restart": "Restart", + "start": "Start", + "stop": "Stop", + "install": "Install", + "uninstall": "Uninstall", + "rebuild": "Rebuild", "open_web_ui": "Open web UI", "protection_mode": { "title": "Protection mode is disabled!",