From fa758f2bee62ce2aa52d59b455b2770c3bdb8615 Mon Sep 17 00:00:00 2001 From: Wendelin <12148533+wendevlin@users.noreply.github.com> Date: Wed, 30 Jul 2025 16:15:18 +0200 Subject: [PATCH] Redesign ha-button (#25564) Co-authored-by: Bram Kragten --- cast/src/launcher/layout/hc-cast.ts | 48 +++-- cast/src/launcher/layout/hc-connect.ts | 26 +-- .../src/components/demo-black-white-row.ts | 20 +- .../src/pages/components/ha-alert.markdown | 4 +- gallery/src/pages/components/ha-alert.ts | 20 +- .../src/pages/components/ha-button.markdown | 66 ++++++ gallery/src/pages/components/ha-button.ts | 171 +++++++++++++++ gallery/src/pages/components/ha-form.ts | 1 - .../components/ha-progress-button.markdown | 32 +++ .../pages/components/ha-progress-button.ts | 139 +++++++++++++ gallery/src/pages/components/ha-selector.ts | 1 - gallery/src/pages/misc/util-long-press.ts | 12 +- .../addon-view/config/hassio-addon-network.ts | 3 +- .../src/addon-view/info/hassio-addon-info.ts | 102 +++++---- .../info/hassio-addon-system-managed.ts | 1 - hassio/src/backups/hassio-backups.ts | 11 +- hassio/src/dashboard/hassio-update.ts | 10 +- .../backup/dialog-hassio-backup-location.ts | 11 +- .../dialogs/backup/dialog-hassio-backup.ts | 1 - .../backup/dialog-hassio-create-backup.ts | 15 +- .../datadisk/dialog-hassio-datadisk.ts | 12 +- .../dialogs/network/dialog-hassio-network.ts | 39 ++-- .../registries/dialog-hassio-registries.ts | 22 +- .../dialog-hassio-repositories.ts | 35 ++-- hassio/src/system/hassio-core-info.ts | 22 +- hassio/src/system/hassio-host-info.ts | 44 ++-- hassio/src/system/hassio-supervisor-info.ts | 33 +-- hassio/src/system/hassio-supervisor-log.ts | 2 - .../src/components/landing-page-logs.ts | 8 +- .../src/components/landing-page-network.ts | 1 + package.json | 1 + src/auth/ha-auth-flow.ts | 11 +- src/common/dom/apply_themes_on_element.ts | 3 + .../buttons/ha-call-service-button.ts | 1 + src/components/buttons/ha-progress-button.ts | 109 +++++----- .../data-table/dialog-data-table-settings.ts | 5 +- src/components/data-table/ha-data-table.ts | 2 +- src/components/ha-alert.ts | 1 - src/components/ha-button-menu.ts | 6 +- src/components/ha-button.ts | 196 +++++++++++++++--- src/components/ha-card.ts | 2 +- src/components/ha-copy-textfield.ts | 14 +- src/components/ha-date-range-picker.ts | 11 +- src/components/ha-dialog-date-picker.ts | 30 ++- src/components/ha-dialog-header.ts | 2 +- src/components/ha-dialog.ts | 6 +- src/components/ha-fab.ts | 6 + src/components/ha-file-upload.ts | 20 +- .../ha-form/ha-form-optional_actions.ts | 10 +- src/components/ha-lawn_mower-action-button.ts | 21 +- src/components/ha-md-button-menu.ts | 6 +- src/components/ha-md-dialog.ts | 4 + src/components/ha-multi-textfield.ts | 14 +- .../ha-selector/ha-selector-media.ts | 3 - .../ha-selector/ha-selector-object.ts | 4 +- src/components/ha-target-picker.ts | 1 - src/components/ha-vacuum-state.ts | 17 +- .../media-player/dialog-join-media-players.ts | 40 ++-- .../media-player/dialog-media-manage.ts | 2 +- .../media-player/ha-browse-media-tts.ts | 20 +- .../media-player/ha-media-manage-button.ts | 17 +- .../media-player/ha-media-player-browse.ts | 21 +- .../media-player/ha-media-upload-button.ts | 46 +--- .../dialog-config-entry-system-options.ts | 13 +- .../previews/entity-preview-row.ts | 17 +- src/dialogs/config-flow/step-flow-abort.ts | 6 +- .../config-flow/step-flow-create-entry.ts | 6 +- src/dialogs/config-flow/step-flow-external.ts | 14 +- src/dialogs/config-flow/step-flow-form.ts | 10 +- src/dialogs/config-flow/step-flow-progress.ts | 1 - src/dialogs/enter-code/dialog-enter-code.ts | 6 +- src/dialogs/form/dialog-form.ts | 8 +- src/dialogs/generic/dialog-box.ts | 3 +- .../image-cropper-dialog.ts | 22 +- .../lights/light-color-rgb-picker.ts | 1 - .../controls/more-info-automation.ts | 8 +- .../controls/more-info-configurator.ts | 21 +- .../more-info/controls/more-info-counter.ts | 20 +- .../controls/more-info-media_player.ts | 25 +-- .../more-info/controls/more-info-person.ts | 10 +- .../more-info/controls/more-info-script.ts | 1 - .../more-info/controls/more-info-timer.ts | 38 +++- .../more-info/controls/more-info-update.ts | 6 +- .../configurator-notification-item.ts | 10 +- .../notifications/notification-drawer.ts | 6 +- .../notification-item-template.ts | 2 + .../persistent-notification-item.ts | 5 +- src/dialogs/quick-bar/ha-quick-bar.ts | 10 +- src/dialogs/sidebar/dialog-edit-sidebar.ts | 2 +- src/dialogs/tts-try/dialog-tts-try.ts | 6 +- .../cloud/cloud-step-intro.ts | 13 +- .../voice-assistant-setup-dialog.ts | 1 - .../voice-assistant-setup-step-area.ts | 4 +- .../voice-assistant-setup-step-success.ts | 2 +- .../ha-voice-command-dialog.ts | 41 ++-- src/layouts/ha-init-page.ts | 6 +- src/layouts/hass-error-screen.ts | 6 +- src/layouts/hass-tabs-subpage-data-table.ts | 7 - src/layouts/supervisor-error-screen.ts | 1 - src/onboarding/onboarding-analytics.ts | 10 +- src/onboarding/onboarding-core-config.ts | 8 +- src/onboarding/onboarding-create-user.ts | 7 +- src/onboarding/onboarding-integrations.ts | 4 +- src/onboarding/onboarding-location.ts | 7 +- src/onboarding/onboarding-welcome.ts | 3 +- .../calendar/confirm-event-dialog-box.ts | 4 +- .../calendar/dialog-calendar-event-detail.ts | 13 +- .../calendar/dialog-calendar-event-editor.ts | 16 +- src/panels/calendar/ha-full-calendar.ts | 16 +- .../dialog-add-application-credential.ts | 6 +- .../ha-config-application-credentials.ts | 11 +- .../areas/dialog-area-registry-detail.ts | 7 +- .../areas/dialog-floor-registry-detail.ts | 17 +- .../config/areas/ha-config-area-page.ts | 19 +- .../automation/action/ha-automation-action.ts | 18 +- .../dialog-automation-mode.ts | 15 +- .../dialog-automation-save.ts | 15 +- .../automation/blueprint-automation-editor.ts | 11 +- .../condition/ha-automation-condition.ts | 18 +- .../config/automation/ha-automation-editor.ts | 38 +++- .../config/automation/ha-automation-picker.ts | 15 +- .../config/automation/ha-automation-trace.ts | 15 +- .../automation/manual-automation-editor.ts | 33 +-- .../trigger/ha-automation-trigger.ts | 9 +- .../ha-automation-trigger-conversation.ts | 5 - .../config/ha-backup-config-encryption-key.ts | 29 ++- .../components/ha-backup-details-restore.ts | 3 +- .../overview/ha-backup-overview-backups.ts | 2 +- .../overview/ha-backup-overview-settings.ts | 2 +- .../backup/dialogs/dialog-generate-backup.ts | 2 +- .../backup/dialogs/dialog-restore-backup.ts | 2 +- .../backup/ha-config-backup-location.ts | 2 +- .../backup/ha-config-backup-settings.ts | 60 +++--- .../blueprint/blueprint-generic-editor.ts | 1 - .../blueprint/dialog-import-blueprint.ts | 61 +++--- .../config/blueprint/ha-blueprint-overview.ts | 20 +- .../config/category/dialog-assign-category.ts | 16 +- .../dialog-category-registry-detail.ts | 16 +- .../config/cloud/account/cloud-account.ts | 25 ++- .../config/cloud/account/cloud-tts-pref.ts | 7 +- .../config/cloud/account/cloud-webhooks.ts | 9 +- .../account/dialog-cloud-support-package.ts | 2 - .../cloud/account/dialog-cloud-tts-try.ts | 26 ++- .../dialog-cloud-already-connected.ts | 12 +- .../dialog-cloud-certificate.ts | 6 +- .../dialog-manage-cloudhook.ts | 19 +- src/panels/config/cloud/login/cloud-login.ts | 2 +- .../config/cloud/register/cloud-register.ts | 14 +- src/panels/config/core/ha-config-analytics.ts | 19 +- .../config/core/ha-config-section-general.ts | 11 +- .../config/core/updates/dialog-join-beta.ts | 14 +- .../device-detail/ha-device-entities-card.ts | 10 +- .../mqtt/dialog-mqtt-device-debug-info.ts | 6 +- .../dialog-device-registry-detail.ts | 15 +- .../config/devices/ha-config-device-page.ts | 63 +++--- .../components/ha-energy-battery-settings.ts | 16 +- .../components/ha-energy-device-settings.ts | 13 +- .../components/ha-energy-gas-settings.ts | 13 +- .../components/ha-energy-grid-settings.ts | 33 ++- .../components/ha-energy-solar-settings.ts | 13 +- .../components/ha-energy-water-settings.ts | 13 +- .../dialogs/dialog-energy-battery-settings.ts | 14 +- .../dialogs/dialog-energy-device-settings.ts | 14 +- .../dialogs/dialog-energy-gas-settings.ts | 14 +- .../dialog-energy-grid-flow-settings.ts | 14 +- .../dialogs/dialog-energy-solar-settings.ts | 28 ++- .../dialogs/dialog-energy-water-settings.ts | 14 +- .../settings/entity-settings-helper-tab.ts | 12 +- .../entity-registry-settings-editor.ts | 8 +- .../entities/entity-registry-settings.ts | 35 ++-- .../config/entities/ha-config-entities.ts | 1 - .../config/hardware/ha-config-hardware.ts | 19 +- .../config/helpers/dialog-helper-detail.ts | 11 +- .../helpers/forms/ha-input_select-form.ts | 5 - .../integrations/dialog-add-integration.ts | 2 - .../integrations/dialog-yaml-integration.ts | 29 +-- .../integrations/ha-config-flow-card.ts | 31 +-- .../ha-config-integration-page.ts | 28 ++- .../ha-config-integrations-dashboard.ts | 37 ++-- .../integrations/ha-integration-card.ts | 8 +- .../bluetooth/bluetooth-config-dashboard.ts | 39 ++-- .../bluetooth/dialog-bluetooth-device-info.ts | 17 +- .../matter/dialog-matter-manage-fabrics.ts | 1 - ...dialog-matter-open-commissioning-window.ts | 18 +- .../matter/dialog-matter-ping-node.ts | 18 +- .../matter/dialog-matter-reinterview-node.ts | 18 +- .../matter/matter-config-dashboard.ts | 35 ++-- .../mqtt/mqtt-config-panel.ts | 10 +- .../mqtt/mqtt-subscribe-card.ts | 8 +- .../thread/thread-config-panel.ts | 37 ++-- .../dialog-zeroconf-discovery-info.ts | 17 +- .../zha/dialog-zha-reconfigure-device.ts | 36 ++-- .../zha/zha-add-devices-page.ts | 20 +- .../zha/zha-add-group-page.ts | 16 +- .../zha/zha-config-dashboard.ts | 44 ++-- .../integration-panels/zha/zha-group-page.ts | 31 ++- .../zha/zha-groups-dashboard.ts | 1 - .../zha/zha-network-visualization-page.ts | 1 - .../dialog-zwave_js-hard-reset-controller.ts | 15 +- .../dialog-zwave_js-rebuild-network-routes.ts | 30 +-- .../dialog-zwave_js-rebuild-node-routes.ts | 22 +- .../dialog-zwave_js-reinterview-node.ts | 18 +- .../dialog-zwave_js-update-firmware-node.ts | 6 +- .../zwave_js/zwave_js-config-dashboard.ts | 47 +++-- .../zwave_js/zwave_js-node-config.ts | 2 - .../zwave_js/zwave_js-node-installer.ts | 2 - .../config/labels/dialog-label-detail.ts | 13 +- src/panels/config/logs/ha-config-logs.ts | 20 +- src/panels/config/logs/system-log-card.ts | 1 - .../dialog-lovelace-dashboard-detail.ts | 18 +- .../ha-config-lovelace-dashboards.ts | 10 +- .../dialog-lovelace-resource-detail.ts | 10 +- .../config/network/ha-config-network.ts | 6 +- .../config/network/ha-config-url-form.ts | 38 ++-- .../config/network/supervisor-hostname.ts | 16 +- .../config/network/supervisor-network.ts | 29 +-- .../config/person/dialog-person-detail.ts | 12 +- src/panels/config/person/ha-config-person.ts | 11 +- .../repairs/dialog-integration-startup.ts | 1 - .../config/repairs/dialog-repairs-issue.ts | 24 +-- .../repairs/dialog-system-information.ts | 57 +++-- src/panels/config/scene/ha-scene-dashboard.ts | 15 +- src/panels/config/scene/ha-scene-editor.ts | 10 +- .../config/script/blueprint-script-editor.ts | 1 - src/panels/config/script/ha-script-editor.ts | 28 ++- src/panels/config/script/ha-script-fields.ts | 10 +- src/panels/config/script/ha-script-picker.ts | 15 +- src/panels/config/script/ha-script-trace.ts | 14 +- .../config/script/manual-script-editor.ts | 1 - .../config/storage/dialog-mount-view.ts | 11 +- .../config/storage/dialog-move-datadisk.ts | 12 +- .../storage/ha-config-section-storage.ts | 21 +- src/panels/config/tags/dialog-tag-detail.ts | 17 +- src/panels/config/users/dialog-add-user.ts | 37 ++-- .../users/dialog-admin-change-password.ts | 18 +- src/panels/config/users/dialog-user-detail.ts | 47 +++-- .../config/voice-assistants/assist-pref.ts | 49 +++-- .../voice-assistants/cloud-alexa-pref.ts | 33 ++- .../config/voice-assistants/cloud-discover.ts | 36 ++-- .../voice-assistants/cloud-google-pref.ts | 34 +-- .../voice-assistants/dialog-expose-entity.ts | 13 +- .../voice-assistants/dialog-voice-settings.ts | 1 - .../ha-config-voice-assistants-expose.ts | 17 +- .../config/zone/dialog-home-zone-detail.ts | 15 +- src/panels/config/zone/dialog-zone-detail.ts | 22 +- src/panels/config/zone/ha-config-zone.ts | 5 +- .../action/developer-tools-action.ts | 16 +- .../assist/developer-tools-assist.ts | 3 +- .../event/developer-tools-event.ts | 4 +- .../event/event-subscribe-card.ts | 4 +- .../statistics/developer-tools-statistics.ts | 8 +- .../dialog-statistics-adjust-sum.ts | 44 ++-- .../dialog-statistics-fix-units-changed.ts | 16 +- .../statistics/dialog-statistics-fix.ts | 33 ++- .../template/developer-tools-template.ts | 10 +- .../developer-yaml-config.ts | 16 +- .../energy/cards/energy-setup-wizard-card.ts | 16 +- .../cards/energy/hui-energy-compare-card.ts | 8 +- .../energy/hui-energy-distribution-card.ts | 14 +- .../lovelace/cards/hui-alarm-panel-card.ts | 15 +- .../lovelace/cards/hui-empty-state-card.ts | 16 +- .../lovelace/cards/hui-recovery-mode-card.ts | 1 - .../lovelace/cards/hui-starting-card.ts | 1 - .../lovelace/components/hui-card-options.ts | 6 +- .../components/hui-energy-period-selector.ts | 19 +- .../badge-editor/hui-dialog-create-badge.ts | 9 +- .../badge-editor/hui-dialog-edit-badge.ts | 52 ++--- .../badge-editor/hui-dialog-suggest-badge.ts | 25 +-- .../card-editor/hui-dialog-create-card.ts | 9 +- .../card-editor/hui-dialog-delete-card.ts | 12 +- .../card-editor/hui-dialog-edit-card.ts | 35 ++-- .../card-editor/hui-dialog-suggest-card.ts | 22 +- .../conditions/ha-card-conditions-editor.ts | 9 +- .../hui-conditional-card-editor.ts | 7 +- .../dialog-dashboard-strategy-editor.ts | 17 +- .../hui-dialog-create-headerfooter.ts | 6 +- .../lovelace/editor/hui-dialog-save-config.ts | 31 ++- .../section-editor/hui-dialog-edit-section.ts | 6 +- .../select-view/hui-dialog-select-view.ts | 14 +- .../view-editor/hui-dialog-edit-view.ts | 5 +- .../entity-rows/hui-button-entity-row.ts | 10 +- .../hui-input-button-entity-row.ts | 12 +- .../entity-rows/hui-lock-entity-row.ts | 10 +- .../entity-rows/hui-scene-entity-row.ts | 10 +- .../entity-rows/hui-script-entity-row.ts | 18 +- src/panels/lovelace/ha-panel-lovelace.ts | 6 +- src/panels/lovelace/hui-editor.ts | 12 +- src/panels/lovelace/hui-root.ts | 18 +- .../lovelace/special-rows/hui-button-row.ts | 10 +- .../lovelace/special-rows/hui-cast-row.ts | 9 +- .../media-browser/ha-bar-media-player.ts | 25 +-- .../media-browser/ha-panel-media-browser.ts | 1 - .../dialog-ha-mfa-module-setup-flow.ts | 31 +-- src/panels/profile/ha-change-password-card.ts | 25 +-- .../ha-long-lived-access-token-dialog.ts | 10 +- .../ha-long-lived-access-tokens-card.ts | 15 +- src/panels/profile/ha-mfa-modules-card.ts | 24 +-- src/panels/profile/ha-pick-theme-row.ts | 11 +- .../profile/ha-profile-section-general.ts | 18 +- src/panels/profile/ha-refresh-tokens-card.ts | 12 +- src/panels/todo/dialog-todo-item-editor.ts | 17 +- src/resources/polyfills/stateset.ts | 57 +++++ src/resources/styles.ts | 9 - src/resources/theme/color/color.globals.ts | 6 + src/resources/theme/color/core.globals.ts | 2 +- src/resources/theme/color/index.ts | 3 + src/resources/theme/color/semantic.globals.ts | 2 +- src/resources/theme/color/wa.globals.ts | 57 +++++ src/resources/theme/theme.ts | 3 + src/resources/theme/wa.globals.ts | 14 ++ src/state-summary/state-card-button.ts | 8 +- src/state-summary/state-card-configurator.ts | 8 +- src/state-summary/state-card-input_button.ts | 7 +- src/state-summary/state-card-lock.ts | 28 ++- src/state-summary/state-card-scene.ts | 21 +- src/state-summary/state-card-script.ts | 16 +- src/translations/en.json | 12 +- yarn.lock | 36 +++- 318 files changed, 3333 insertions(+), 2189 deletions(-) create mode 100644 gallery/src/pages/components/ha-button.markdown create mode 100644 gallery/src/pages/components/ha-button.ts create mode 100644 gallery/src/pages/components/ha-progress-button.markdown create mode 100644 gallery/src/pages/components/ha-progress-button.ts create mode 100644 src/resources/polyfills/stateset.ts create mode 100644 src/resources/theme/color/wa.globals.ts create mode 100644 src/resources/theme/wa.globals.ts diff --git a/cast/src/launcher/layout/hc-cast.ts b/cast/src/launcher/layout/hc-cast.ts index f592575e08..35e214f0b1 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..8aab0f0e6f 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/components/ha-button.markdown b/gallery/src/pages/components/ha-button.markdown new file mode 100644 index 0000000000..0195b996db --- /dev/null +++ b/gallery/src/pages/components/ha-button.markdown @@ -0,0 +1,66 @@ +--- +title: Button +--- + + + +# Button `` + +## Implementation + +### Example Usage + +
+ + simple button + + + plain button + + + filled button + + + + small + +
+ +```html + simple button + + small +``` + +### API + +This component is based on the webawesome button component. +Check the [webawesome documentation](https://webawesome.com/docs/components/button/) for more details. + +**Slots** + +- default slot: Label of the button + ` - no default +- `start`: The prefix container (usually for icons). + ` - no default +- `end`: The suffix container (usually for icons). + ` - no default + +**Properties/Attributes** + +| Name | Type | Default | Description | +| ----------- | ---------------------------------------------- | -------- | -------------------------------------------------- | +| appearance | "accent"/"filled"/"plain" | "accent" | Sets the button appearance. | +| variants | "brand"/"danger"/"neutral"/"warning"/"success" | "brand" | Sets the button color variant. "brand" is default. | +| size | "small"/"medium" | "medium" | Sets the button size. | +| hideContent | Boolean | false | Hides the button content (for overlays) | + +**CSS Custom Properties** + +- `--ha-button-height` - Height of the button. +- `--ha-button-radius` - Border radius of the button. Defaults to `var(--wa-border-radius-pill)`. diff --git a/gallery/src/pages/components/ha-button.ts b/gallery/src/pages/components/ha-button.ts new file mode 100644 index 0000000000..a0a07fbb75 --- /dev/null +++ b/gallery/src/pages/components/ha-button.ts @@ -0,0 +1,171 @@ +import { mdiHome } from "@mdi/js"; +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 { titleCase } from "../../../../src/common/string/title-case"; +import "../../../../src/components/ha-button"; +import "../../../../src/components/ha-card"; +import "../../../../src/components/ha-svg-icon"; +import { mdiHomeAssistant } from "../../../../src/resources/home-assistant-logo-svg"; + +const appearances = ["accent", "filled", "plain"]; +const variants = ["brand", "danger", "neutral", "warning", "success"]; + +@customElement("demo-components-ha-button") +export class DemoHaButton extends LitElement { + protected render(): TemplateResult { + return html` + ${["light", "dark"].map( + (mode) => html` +
+ +
+ ${variants.map( + (variant) => html` +
+ ${appearances.map( + (appearance) => html` + + + ${titleCase(`${variant} ${appearance}`)} + + + ` + )} +
+
+ ${appearances.map( + (appearance) => html` + + ${titleCase(`${variant} ${appearance}`)} + + ` + )} +
+
+ ${appearances.map( + (appearance) => html` + + + ${titleCase(`${variant} ${appearance}`)} + + + ` + )} +
+ ` + )} + ${variants.map( + (variant) => html` +
+ ${appearances.map( + (appearance) => html` + + ${titleCase(`${appearance}`)} + + ` + )} +
+
+ ${appearances.map( + (appearance) => html` + + ${titleCase(`${appearance}`)} + + ` + )} +
+ ` + )} +
+ +
+ ` + )} + `; + } + + firstUpdated(changedProps) { + super.firstUpdated(changedProps); + applyThemesOnElement( + this.shadowRoot!.querySelector(".dark"), + { + default_theme: "default", + default_dark_theme: "default", + themes: {}, + darkMode: true, + theme: "default", + }, + undefined, + undefined, + true + ); + } + + static styles = css` + :host { + display: flex; + justify-content: center; + } + .dark, + .light { + display: block; + background-color: var(--primary-background-color); + padding: 0 50px; + } + .button { + padding: unset; + } + ha-card { + margin: 24px auto; + } + .card-content { + display: flex; + flex-direction: column; + gap: 24px; + } + .card-content div { + display: flex; + gap: 8px; + } + `; +} + +declare global { + interface HTMLElementTagNameMap { + "demo-components-ha-button": DemoHaButton; + } +} diff --git a/gallery/src/pages/components/ha-form.ts b/gallery/src/pages/components/ha-form.ts index b890f571cf..9602ca288c 100644 --- a/gallery/src/pages/components/ha-form.ts +++ b/gallery/src/pages/components/ha-form.ts @@ -1,5 +1,4 @@ /* eslint-disable lit/no-template-arrow */ -import "@material/mwc-button"; import type { TemplateResult } from "lit"; import { html, LitElement } from "lit"; import { customElement, state } from "lit/decorators"; diff --git a/gallery/src/pages/components/ha-progress-button.markdown b/gallery/src/pages/components/ha-progress-button.markdown new file mode 100644 index 0000000000..d0966ff8cc --- /dev/null +++ b/gallery/src/pages/components/ha-progress-button.markdown @@ -0,0 +1,32 @@ +--- +title: Progress Button +--- + + + +# Progress Button `` + +### API + +This component is a wrapper around `` that adds support for showing progress + +**Slots** + +- default slot: Label of the button + ` - no default + +**Properties/Attributes** + +| Name | Type | Default | Description | +| ---------- | ---------------------------------------------- | --------- | -------------------------------------------------- | +| label | string | "accent" | Sets the button label. | +| disabled | Boolean | false | Disables the button if true. | +| progress | Boolean | false | Shows a progress indicator on the button. | +| appearance | "accent"/"filled"/"plain" | "accent" | Sets the button appearance. | +| variants | "brand"/"danger"/"neutral"/"warning"/"success" | "brand" | Sets the button color variant. "brand" is default. | +| iconPath | string | undefined | Sets the icon path for the button. | diff --git a/gallery/src/pages/components/ha-progress-button.ts b/gallery/src/pages/components/ha-progress-button.ts new file mode 100644 index 0000000000..4e4b92379c --- /dev/null +++ b/gallery/src/pages/components/ha-progress-button.ts @@ -0,0 +1,139 @@ +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/buttons/ha-progress-button"; +import "../../../../src/components/ha-card"; +import "../../../../src/components/ha-svg-icon"; +import { mdiHomeAssistant } from "../../../../src/resources/home-assistant-logo-svg"; + +@customElement("demo-components-ha-progress-button") +export class DemoHaProgressButton extends LitElement { + protected render(): TemplateResult { + return html` + ${["light", "dark"].map( + (mode) => html` +
+ +
+ + Success + + + Fail + + + small + + + filled + + + plain + + + warning + + + With Icon + + + progress + + + disabled + +
+ +
+ ` + )} + `; + } + + firstUpdated(changedProps) { + super.firstUpdated(changedProps); + applyThemesOnElement( + this.shadowRoot!.querySelector(".dark"), + { + default_theme: "default", + default_dark_theme: "default", + themes: {}, + darkMode: true, + theme: "default", + }, + undefined, + undefined, + true + ); + } + + private async _clickedSuccess(ev: CustomEvent): Promise { + console.log("Clicked success"); + const button = ev.currentTarget as any; + button.progress = true; + + setTimeout(() => { + button.actionSuccess(); + button.progress = false; + }, 1000); + } + + private async _clickedFail(ev: CustomEvent): Promise { + const button = ev.currentTarget as any; + button.progress = true; + + setTimeout(() => { + button.actionError(); + button.progress = false; + }, 1000); + } + + static styles = css` + :host { + display: flex; + justify-content: center; + } + .dark, + .light { + display: block; + background-color: var(--primary-background-color); + padding: 0 50px; + } + .button { + padding: unset; + } + ha-card { + margin: 24px auto; + } + .card-content { + display: flex; + flex-direction: column; + gap: 24px; + } + .card-content div { + display: flex; + gap: 8px; + } + `; +} + +declare global { + interface HTMLElementTagNameMap { + "demo-components-ha-progress-button": DemoHaProgressButton; + } +} diff --git a/gallery/src/pages/components/ha-selector.ts b/gallery/src/pages/components/ha-selector.ts index 4420b483ed..ef87cad816 100644 --- a/gallery/src/pages/components/ha-selector.ts +++ b/gallery/src/pages/components/ha-selector.ts @@ -1,4 +1,3 @@ -import "@material/mwc-button"; import type { TemplateResult } from "lit"; import { css, html, LitElement } from "lit"; import { customElement, state } from "lit/decorators"; diff --git a/gallery/src/pages/misc/util-long-press.ts b/gallery/src/pages/misc/util-long-press.ts index e111919bb5..6f5dff139c 100644 --- a/gallery/src/pages/misc/util-long-press.ts +++ b/gallery/src/pages/misc/util-long-press.ts @@ -1,7 +1,7 @@ -import "@material/mwc-button"; import type { TemplateResult } from "lit"; import { css, html, LitElement } from "lit"; import { customElement } from "lit/decorators"; +import "../../../../src/components/ha-button"; import "../../../../src/components/ha-card"; import type { ActionHandlerEvent } from "../../../../src/data/lovelace/action_handler"; import { actionHandler } from "../../../../src/panels/lovelace/common/directives/action-handler-directive"; @@ -13,12 +13,16 @@ 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/addon-view/info/hassio-addon-system-managed.ts b/hassio/src/addon-view/info/hassio-addon-system-managed.ts index 4684e8ebe3..f4eb7e10b0 100644 --- a/hassio/src/addon-view/info/hassio-addon-system-managed.ts +++ b/hassio/src/addon-view/info/hassio-addon-system-managed.ts @@ -1,4 +1,3 @@ -import "@material/mwc-button"; import type { TemplateResult } from "lit"; import { LitElement, css, html, nothing } from "lit"; import { customElement, property } from "lit/decorators"; 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..6bf7b23360 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 3c37d66c0b..10d691e178 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..7206c13859 100644 --- a/hassio/src/system/hassio-core-info.ts +++ b/hassio/src/system/hassio-core-info.ts @@ -1,10 +1,9 @@ -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"; import "../../../src/components/ha-button-menu"; import "../../../src/components/ha-card"; import "../../../src/components/ha-settings-row"; @@ -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")} + ` : ""} @@ -95,7 +94,7 @@ class HassioCoreInfo 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")} + ` : ""} @@ -167,7 +171,7 @@ class HassioHostInfo extends LitElement {
${this.supervisor.host.features.includes("reboot") ? html` - + ${this.supervisor.localize("system.host.reboot_host")} ` @@ -175,7 +179,7 @@ class HassioHostInfo extends LitElement { ${this.supervisor.host.features.includes("shutdown") ? html` ${this.supervisor.localize("system.host.shutdown_host")} @@ -431,10 +435,6 @@ class HassioHostInfo extends LitElement { color: var(--secondary-text-color); } - .warning { - --mdc-theme-primary: var(--error-color); - } - ha-button-menu { color: var(--secondary-text-color); --mdc-menu-min-width: 200px; 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/hassio/src/system/hassio-supervisor-log.ts b/hassio/src/system/hassio-supervisor-log.ts index 3aed53b720..13f2e6540f 100644 --- a/hassio/src/system/hassio-supervisor-log.ts +++ b/hassio/src/system/hassio-supervisor-log.ts @@ -1,5 +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"; diff --git a/landing-page/src/components/landing-page-logs.ts b/landing-page/src/components/landing-page-logs.ts index 0b0c3e7c81..9dd7f01fa9 100644 --- a/landing-page/src/components/landing-page-logs.ts +++ b/landing-page/src/components/landing-page-logs.ts @@ -64,7 +64,7 @@ class LandingPageLogs extends LitElement { protected render() { return html`
- + ${this.localize(this._show ? "hide_details" : "show_details")} ${this._show @@ -81,7 +81,11 @@ class LandingPageLogs extends LitElement { alert-type="error" .title=${this.localize("logs.fetch_error")} > - + ${this.localize("logs.retry")} diff --git a/landing-page/src/components/landing-page-network.ts b/landing-page/src/components/landing-page-network.ts index bea2336e48..d890ecddfc 100644 --- a/landing-page/src/components/landing-page-network.ts +++ b/landing-page/src/components/landing-page-network.ts @@ -67,6 +67,7 @@ class LandingPageNetwork extends LitElement { ${ALTERNATIVE_DNS_SERVERS.map( ({ translationKey }, key) => html` - ${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/common/dom/apply_themes_on_element.ts b/src/common/dom/apply_themes_on_element.ts index fd6dffe3dd..2df35d5e62 100644 --- a/src/common/dom/apply_themes_on_element.ts +++ b/src/common/dom/apply_themes_on_element.ts @@ -83,6 +83,9 @@ export const applyThemesOnElement = ( themeRules["light-primary-color"] = rgb2hex(rgbLightPrimaryColor); themeRules["dark-primary-color"] = lab2hex(labDarken(labPrimaryColor)); + themeRules["darker-primary-color"] = lab2hex( + labDarken(labPrimaryColor, 2) + ); themeRules["text-primary-color"] = rgbContrast(rgbPrimaryColor, [33, 33, 33]) < 6 ? "#fff" : "#212121"; themeRules["text-light-primary-color"] = 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 a0c535316b..19d9240f74 100644 --- a/src/components/buttons/ha-progress-button.ts +++ b/src/components/buttons/ha-progress-button.ts @@ -2,7 +2,9 @@ import { mdiAlertOctagram, mdiCheckBold } from "@mdi/js"; import type { TemplateResult } from "lit"; import { css, html, LitElement, nothing } from "lit"; import { customElement, property, state } from "lit/decorators"; +import { classMap } from "lit/directives/class-map"; import "../ha-button"; +import type { Appearance } from "../ha-button"; import "../ha-spinner"; import "../ha-svg-icon"; @@ -12,28 +14,47 @@ 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({ attribute: false }) public iconPath?: string; + + @property() variant: "brand" | "danger" | "neutral" | "warning" | "success" = + "brand"; @state() private _result?: "success" | "error"; public render(): TemplateResult { - const overlay = this._result || this.progress; + const appearance = + this.progress || this._result ? "accent" : this.appearance; + return html` - - + ${this.iconPath + ? html`` + : nothing} + + ${this.label} - ${!overlay + ${!this._result ? nothing : html`
@@ -41,9 +62,7 @@ export class HaProgressButton extends LitElement { ? html`` : this._result === "error" ? html`` - : this.progress - ? html`` - : nothing} + : nothing}
`} `; @@ -69,60 +88,36 @@ 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%; } - ha-svg-icon { - color: white; + ha-button { + width: 100%; } - ha-button.success slot, - ha-button.error slot { + ha-button.result::part(start), + ha-button.result::part(end), + ha-button.result::part(label), + ha-button.result::part(caret), + ha-button.result::part(spinner) { visibility: hidden; } - :host([destructive]) { - --mdc-theme-primary: var(--error-color); + + ha-svg-icon { + color: var(--white); } `; } diff --git a/src/components/data-table/dialog-data-table-settings.ts b/src/components/data-table/dialog-data-table-settings.ts index ac7acac001..142bc83d8c 100644 --- a/src/components/data-table/dialog-data-table-settings.ts +++ b/src/components/data-table/dialog-data-table-settings.ts @@ -152,7 +152,10 @@ export class DialogDataTableSettings extends LitElement { )} - ${localize("ui.components.data-table.settings.restore")} diff --git a/src/components/data-table/ha-data-table.ts b/src/components/data-table/ha-data-table.ts index c625e9782d..8d0672e528 100644 --- a/src/components/data-table/ha-data-table.ts +++ b/src/components/data-table/ha-data-table.ts @@ -932,7 +932,7 @@ export class HaDataTable extends LitElement { .find((el) => [ "ha-checkbox", - "mwc-button", + "ha-button", "ha-button", "ha-icon-button", "ha-assist-chip", diff --git a/src/components/ha-alert.ts b/src/components/ha-alert.ts index 9f39af4bf2..1e5b59d606 100644 --- a/src/components/ha-alert.ts +++ b/src/components/ha-alert.ts @@ -131,7 +131,6 @@ class HaAlert extends LitElement { margin-top: 2px; font-weight: var(--ha-font-weight-bold); } - .action mwc-button, .action ha-icon-button { --mdc-theme-primary: var(--primary-text-color); --mdc-icon-button-size: 36px; diff --git a/src/components/ha-button-menu.ts b/src/components/ha-button-menu.ts index 5bb561f8c7..9562339013 100644 --- a/src/components/ha-button-menu.ts +++ b/src/components/ha-button-menu.ts @@ -1,4 +1,3 @@ -import type { Button } from "@material/mwc-button"; import type { Corner, Menu, MenuCorner } from "@material/mwc-menu"; import type { TemplateResult } from "lit"; import { css, html, LitElement } from "lit"; @@ -6,6 +5,7 @@ import { customElement, property, query } from "lit/decorators"; import { mainWindow } from "../common/dom/get_main_window"; import { FOCUS_TARGET } from "../dialogs/make-dialog-manager"; import type { HaIconButton } from "./ha-icon-button"; +import type { HaButton } from "./ha-button"; import "./ha-menu"; @customElement("ha-button-menu") @@ -93,8 +93,8 @@ export class HaButtonMenu extends LitElement { private get _triggerButton() { return this.querySelector( - 'ha-icon-button[slot="trigger"], ha-button[slot="trigger"], mwc-button[slot="trigger"]' - ) as HaIconButton | Button | null; + 'ha-icon-button[slot="trigger"], ha-button[slot="trigger"]' + ) as HaIconButton | HaButton | null; } private _setTriggerAria() { diff --git a/src/components/ha-button.ts b/src/components/ha-button.ts index 5ccbcadd14..eab93b843e 100644 --- a/src/components/ha-button.ts +++ b/src/components/ha-button.ts @@ -1,33 +1,177 @@ -import { Button } from "@material/mwc-button"; -import { css } from "lit"; +import Button from "@awesome.me/webawesome/dist/components/button/button"; +import { css, type CSSResultGroup } from "lit"; import { customElement } from "lit/decorators"; -import { styles } from "@material/mwc-button/styles.css"; +import { StateSet } from "../resources/polyfills/stateset"; + +export type Appearance = "accent" | "filled" | "outlined" | "plain"; + +/** + * Home Assistant button component + * + * @element ha-button + * @extends {Button} + * + * @summary + * A stylable button component supporting Home Assistant theming, variants, and appearances based on webawesome button. + * + * @slot - Label of the button + * @slot start - The prefix container (usually for icons). + * @slot end - The suffix container (usually for icons). + * + * @csspart base - The component's base wrapper. + * @csspart start - The container that wraps the prefix. + * @csspart label - The button's label. + * @csspart end - The container that wraps the suffix. + * @csspart caret - The button's caret icon, an `` element. + * @csspart spinner - The spinner that shows when the button is in the loading state. + * + * @cssprop --ha-button-height - The height of the button. + * @cssprop --ha-button-radius - The border radius of the button. defaults to `var(--wa-border-radius-pill)`. + * + * @attr {("small"|"medium")} size - Sets the button size. + * @attr {("brand"|"neutral"|"danger"|"warning"|"success")} variant - Sets the button color variant. "primary" is default. + * @attr {("accent"|"filled"|"plain")} appearance - Sets the button appearance. + * @attr {boolean} hideContent - Hides the button content (for overlays). + */ @customElement("ha-button") export class HaButton extends Button { - static override styles = [ - styles, - css` - ::slotted([slot="icon"]) { - margin-inline-start: 0px; - margin-inline-end: 8px; - direction: var(--direction); - display: block; - } - .mdc-button { - height: var(--button-height, 36px); - } - .trailing-icon { - display: flex; - } - .slot-container { - overflow: var(--button-slot-container-overflow, visible); - } - :host([destructive]) { - --mdc-theme-primary: var(--error-color); - } - `, - ]; + variant: "brand" | "neutral" | "success" | "warning" | "danger" = "brand"; + + attachInternals() { + const internals = super.attachInternals(); + Object.defineProperty(internals, "states", { + value: new StateSet(this, internals.states), + }); + return internals; + } + + static get styles(): CSSResultGroup { + return [ + Button.styles, + css` + .button { + /* set theme vars */ + --wa-form-control-padding-inline: 16px; + --wa-font-weight-action: var(--ha-font-weight-medium); + --wa-border-radius-pill: 9999px; + --wa-form-control-border-radius: var( + --ha-button-radius, + var(--wa-border-radius-pill) + ); + + --wa-form-control-height: var( + --ha-button-height, + var(--button-height, 40px) + ); + + font-size: var(--ha-font-size-m); + } + + :host([size="small"]) .button { + --wa-form-control-height: var( + --ha-button-height, + var(--button-height, 32px) + ); + font-size: var(--wa-font-size-s, var(--ha-font-size-m)); + } + + :host([variant="brand"]) { + --color-fill-normal-active: var(--color-fill-primary-normal-active); + --color-fill-normal-hover: var(--color-fill-primary-normal-hover); + --color-fill-loud-active: var(--color-fill-primary-loud-active); + --color-fill-loud-hover: var(--color-fill-primary-loud-hover); + } + + :host([variant="neutral"]) { + --color-fill-normal-active: var(--color-fill-neutral-normal-active); + --color-fill-normal-hover: var(--color-fill-neutral-normal-hover); + --color-fill-loud-active: var(--color-fill-neutral-loud-active); + --color-fill-loud-hover: var(--color-fill-neutral-loud-hover); + } + + :host([variant="success"]) { + --color-fill-normal-active: var(--color-fill-success-normal-active); + --color-fill-normal-hover: var(--color-fill-success-normal-hover); + --color-fill-loud-active: var(--color-fill-success-loud-active); + --color-fill-loud-hover: var(--color-fill-success-loud-hover); + } + + :host([variant="warning"]) { + --color-fill-normal-active: var(--color-fill-warning-normal-active); + --color-fill-normal-hover: var(--color-fill-warning-normal-hover); + --color-fill-loud-active: var(--color-fill-warning-loud-active); + --color-fill-loud-hover: var(--color-fill-warning-loud-hover); + } + + :host([variant="danger"]) { + --color-fill-normal-active: var(--color-fill-danger-normal-active); + --color-fill-normal-hover: var(--color-fill-danger-normal-hover); + --color-fill-loud-active: var(--color-fill-danger-loud-active); + --color-fill-loud-hover: var(--color-fill-danger-loud-hover); + } + + :host([appearance~="plain"]) .button { + color: var(--wa-color-on-normal); + } + :host([appearance~="plain"]) .button.disabled { + background-color: var(--transparent-none); + color: var(--color-on-disabled-quiet); + } + + :host([appearance~="outlined"]) .button.disabled { + background-color: var(--transparent-none); + color: var(--color-on-disabled-quiet); + } + + @media (hover: hover) { + :host([appearance~="filled"]) + .button:not(.disabled):not(.loading):hover { + background-color: var(--color-fill-normal-hover); + } + :host([appearance~="accent"]) + .button:not(.disabled):not(.loading):hover { + background-color: var(--color-fill-loud-hover); + } + :host([appearance~="plain"]) + .button:not(.disabled):not(.loading):hover { + color: var(--wa-color-on-normal); + } + } + :host([appearance~="filled"]) + .button:not(.disabled):not(.loading):active { + background-color: var(--color-fill-normal-active); + } + :host([appearance~="filled"]) .button.disabled { + background-color: var(--color-fill-disabled-normal-resting); + color: var(--color-on-disabled-normal); + } + + :host([appearance~="accent"]) .button { + background-color: var( + --wa-color-fill-loud, + var(--wa-color-neutral-fill-loud) + ); + } + :host([appearance~="accent"]) + .button:not(.disabled):not(.loading):active { + background-color: var(--color-fill-loud-active); + } + :host([appearance~="accent"]) .button.disabled { + background-color: var(--color-fill-disabled-loud-resting); + color: var(--color-on-disabled-loud); + } + + :host([loading]) { + pointer-events: none; + } + + .button.disabled { + opacity: 1; + } + `, + ]; + } } declare global { diff --git a/src/components/ha-card.ts b/src/components/ha-card.ts index b0342bdd6d..9fd6ad8dee 100644 --- a/src/components/ha-card.ts +++ b/src/components/ha-card.ts @@ -63,7 +63,7 @@ export class HaCard extends LitElement { :host ::slotted(.card-actions) { border-top: 1px solid var(--divider-color, #e8e8e8); - padding: 5px 16px; + padding: 8px; } `; diff --git a/src/components/ha-copy-textfield.ts b/src/components/ha-copy-textfield.ts index 4980524130..8645d205b9 100644 --- a/src/components/ha-copy-textfield.ts +++ b/src/components/ha-copy-textfield.ts @@ -1,14 +1,14 @@ -import { customElement, property, state } from "lit/decorators"; -import { css, html, LitElement, nothing } from "lit"; import { mdiContentCopy, mdiEye, mdiEyeOff } from "@mdi/js"; +import { css, html, LitElement, nothing } from "lit"; +import { customElement, property, state } from "lit/decorators"; +import { copyToClipboard } from "../common/util/copy-clipboard"; +import type { HomeAssistant } from "../types"; +import { showToast } from "../util/toast"; import "./ha-button"; import "./ha-icon-button"; import "./ha-svg-icon"; import "./ha-textfield"; -import type { HomeAssistant } from "../types"; -import { copyToClipboard } from "../common/util/copy-clipboard"; -import { showToast } from "../util/toast"; import type { HaTextField } from "./ha-textfield"; @customElement("ha-copy-textfield") @@ -48,8 +48,8 @@ export class HaCopyTextfield extends LitElement { >` : nothing}
- - + + ${this.label || this.hass.localize("ui.common.copy")} diff --git a/src/components/ha-date-range-picker.ts b/src/components/ha-date-range-picker.ts index 5d94626f92..00a4ef44ef 100644 --- a/src/components/ha-date-range-picker.ts +++ b/src/components/ha-date-range-picker.ts @@ -1,5 +1,3 @@ -import "@material/mwc-button/mwc-button"; - import type { ActionDetail } from "@material/mwc-list/mwc-list-foundation"; import { mdiCalendar } from "@mdi/js"; @@ -22,6 +20,7 @@ import { fireEvent } from "../common/dom/fire_event"; import { TimeZone } from "../data/translation"; import type { HomeAssistant } from "../types"; import "./date-range-picker"; +import "./ha-button"; import "./ha-icon-button"; import "./ha-icon-button-next"; import "./ha-icon-button-prev"; @@ -197,13 +196,13 @@ export class HaDateRangePicker extends LitElement { ` : nothing}
- ${this.hass.localize("ui.common.cancel")}${this.hass.localize("ui.common.cancel")} - ${this.hass.localize( "ui.components.date-range-picker.select" - )}
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-dialog-header.ts b/src/components/ha-dialog-header.ts index 01e7d9fbf9..ea6541f595 100644 --- a/src/components/ha-dialog-header.ts +++ b/src/components/ha-dialog-header.ts @@ -64,7 +64,7 @@ export class HaDialogHeader extends LitElement { } @media all and (min-width: 450px) and (min-height: 500px) { .header-bar { - padding: 12px; + padding: 16px; } } .header-navigation-icon { diff --git a/src/components/ha-dialog.ts b/src/components/ha-dialog.ts index 933a70efef..6e17d5e885 100644 --- a/src/components/ha-dialog.ts +++ b/src/components/ha-dialog.ts @@ -90,7 +90,7 @@ export class HaDialog extends DialogBase { } .mdc-dialog__actions { justify-content: var(--justify-action-buttons, flex-end); - padding: 12px 24px max(var(--safe-area-inset-bottom), 12px) 24px; + padding: 12px 16px max(var(--safe-area-inset-bottom), 16px) 16px; } .mdc-dialog__actions span:nth-child(1) { flex: var(--secondary-action-button-flex, unset); @@ -102,7 +102,7 @@ export class HaDialog extends DialogBase { align-items: var(--vertical-align-dialog, center); } .mdc-dialog__title { - padding: 24px 24px 0 24px; + padding: 16px 16px 0 16px; } .mdc-dialog__title:has(span) { padding: 12px 12px 0; @@ -125,7 +125,7 @@ export class HaDialog extends DialogBase { top: var(--dialog-surface-top); margin-top: var(--dialog-surface-margin-top); min-height: var(--mdc-dialog-min-height, auto); - border-radius: var(--ha-dialog-border-radius, 28px); + border-radius: var(--ha-dialog-border-radius, 24px); -webkit-backdrop-filter: var(--ha-dialog-surface-backdrop-filter, none); backdrop-filter: var(--ha-dialog-surface-backdrop-filter, none); background: var( diff --git a/src/components/ha-fab.ts b/src/components/ha-fab.ts index fed289b2da..a97a1bfe39 100644 --- a/src/components/ha-fab.ts +++ b/src/components/ha-fab.ts @@ -14,6 +14,12 @@ export class HaFab extends FabBase { static override styles = [ styles, css` + :host { + --mdc-typography-button-text-transform: none; + --mdc-typography-button-font-size: var(--ha-font-size-l); + --mdc-typography-button-font-family: var(--ha-font-family-body); + --mdc-typography-button-font-weight: var(--ha-font-weight-medium); + } :host .mdc-fab--extended .mdc-fab__icon { margin-inline-start: -8px; margin-inline-end: 12px; diff --git a/src/components/ha-file-upload.ts b/src/components/ha-file-upload.ts index 785e67ca32..02ca8c6edf 100644 --- a/src/components/ha-file-upload.ts +++ b/src/components/ha-file-upload.ts @@ -118,11 +118,15 @@ export class HaFileUpload extends LitElement { @dragleave=${this._handleDragEnd} @dragend=${this._handleDragEnd} >${!this.value - ? html` - + ? html` + ${this.label || localize("ui.components.file-upload.label")} - + + ${this.localize?.("ui.components.form-optional-actions.add") || "Add interaction"} 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/components/ha-md-button-menu.ts b/src/components/ha-md-button-menu.ts index beb2e0bff2..637e773f71 100644 --- a/src/components/ha-md-button-menu.ts +++ b/src/components/ha-md-button-menu.ts @@ -1,9 +1,9 @@ -import type { Button } from "@material/mwc-button"; import type { TemplateResult } from "lit"; import { css, html, LitElement } from "lit"; import { customElement, property, query } from "lit/decorators"; import { fireEvent } from "../common/dom/fire_event"; import { FOCUS_TARGET } from "../dialogs/make-dialog-manager"; +import type { HaButton } from "./ha-button"; import type { HaIconButton } from "./ha-icon-button"; import "./ha-md-menu"; import type { HaMdMenu } from "./ha-md-menu"; @@ -71,8 +71,8 @@ export class HaMdButtonMenu extends LitElement { private get _triggerButton() { return this.querySelector( - 'ha-icon-button[slot="trigger"], mwc-button[slot="trigger"], ha-assist-chip[slot="trigger"]' - ) as HaIconButton | Button | null; + 'ha-icon-button[slot="trigger"], ha-button[slot="trigger"], ha-assist-chip[slot="trigger"]' + ) as HaIconButton | HaButton | null; } private _setTriggerAria() { diff --git a/src/components/ha-md-dialog.ts b/src/components/ha-md-dialog.ts index 3aaf8e1a20..6240cef67f 100644 --- a/src/components/ha-md-dialog.ts +++ b/src/components/ha-md-dialog.ts @@ -183,6 +183,10 @@ export class HaMdDialog extends Dialog { display: contents; } + slot[name="actions"]::slotted(*) { + padding: 16px; + } + .scroller { overflow: var(--dialog-content-overflow, auto); } diff --git a/src/components/ha-multi-textfield.ts b/src/components/ha-multi-textfield.ts index c40b6033b6..346190865f 100644 --- a/src/components/ha-multi-textfield.ts +++ b/src/components/ha-multi-textfield.ts @@ -73,7 +73,12 @@ class HaMultiTextField extends LitElement { `; })}
- + ${this.addLabel ?? (this.label ? this.hass?.localize("ui.components.multi-textfield.add_item", { @@ -81,7 +86,7 @@ class HaMultiTextField extends LitElement { }) : this.hass?.localize("ui.common.add")) ?? "Add"} - +
${this.helper @@ -145,11 +150,6 @@ class HaMultiTextField extends LitElement { ha-icon-button { display: block; } - ha-button { - margin-left: 8px; - margin-inline-start: 8px; - margin-inline-end: initial; - } `, ]; } diff --git a/src/components/ha-selector/ha-selector-media.ts b/src/components/ha-selector/ha-selector-media.ts index c4b3a25f11..3f8b229d9f 100644 --- a/src/components/ha-selector/ha-selector-media.ts +++ b/src/components/ha-selector/ha-selector-media.ts @@ -244,9 +244,6 @@ export class HaMediaSelector extends LitElement { display: block; margin-bottom: 16px; } - mwc-button { - margin-top: 8px; - } ha-alert { display: block; margin-bottom: 16px; diff --git a/src/components/ha-selector/ha-selector-object.ts b/src/components/ha-selector/ha-selector-object.ts index 2b321e458a..a69c1afb64 100644 --- a/src/components/ha-selector/ha-selector-object.ts +++ b/src/components/ha-selector/ha-selector-object.ts @@ -138,7 +138,7 @@ export class HaObjectSelector extends LitElement { ${items.map((item, index) => this._renderItem(item, index))} - + ${this.hass.localize("ui.common.add")} @@ -153,7 +153,7 @@ export class HaObjectSelector extends LitElement { ${this._renderItem(this.value, 0)} ` : html` - + ${this.hass.localize("ui.common.add")} `} diff --git a/src/components/ha-target-picker.ts b/src/components/ha-target-picker.ts index 6088764c3c..4282f9210a 100644 --- a/src/components/ha-target-picker.ts +++ b/src/components/ha-target-picker.ts @@ -1,6 +1,5 @@ // @ts-ignore import chipStyles from "@material/chips/dist/mdc.chips.min.css"; -import "@material/mwc-button/mwc-button"; import "@material/mwc-menu/mwc-menu-surface"; import { mdiClose, diff --git a/src/components/ha-vacuum-state.ts b/src/components/ha-vacuum-state.ts index 677b27d822..dd411892f7 100644 --- a/src/components/ha-vacuum-state.ts +++ b/src/components/ha-vacuum-state.ts @@ -1,10 +1,10 @@ -import "@material/mwc-button"; import type { CSSResultGroup, TemplateResult } from "lit"; import { LitElement, css, html } from "lit"; import { customElement, property } from "lit/decorators"; import type { HassEntity } from "home-assistant-js-websocket"; import { haStyle } from "../resources/styles"; import type { HomeAssistant } from "../types"; +import "./ha-button"; const STATES_INTERCEPTABLE: Record< string, @@ -56,9 +56,14 @@ export class HaVacuumState extends LitElement { this.stateObj.attributes.supported_features ); return html` - + ${this._computeLabel(this.stateObj.state, interceptable)} - + `; } @@ -92,17 +97,13 @@ export class HaVacuumState extends LitElement { return [ haStyle, 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/components/media-player/dialog-join-media-players.ts b/src/components/media-player/dialog-join-media-players.ts index 44958aa938..ac5b581c45 100644 --- a/src/components/media-player/dialog-join-media-players.ts +++ b/src/components/media-player/dialog-join-media-players.ts @@ -1,28 +1,28 @@ -import type { CSSResultGroup } from "lit"; import { mdiClose } from "@mdi/js"; +import type { HassEntity } from "home-assistant-js-websocket"; +import type { CSSResultGroup } from "lit"; import { LitElement, css, html, nothing } from "lit"; import { customElement, property, state } from "lit/decorators"; -import type { HassEntity } from "home-assistant-js-websocket"; import { fireEvent } from "../../common/dom/fire_event"; -import { haStyleDialog } from "../../resources/styles"; -import type { HomeAssistant } from "../../types"; -import "../ha-alert"; -import "../ha-dialog"; -import "../ha-button"; -import "../ha-dialog-header"; -import "./ha-media-player-toggle"; -import type { JoinMediaPlayersDialogParams } from "./show-join-media-players-dialog"; +import { computeDomain } from "../../common/entity/compute_domain"; import { computeStateName } from "../../common/entity/compute_state_name"; import { supportsFeature } from "../../common/entity/supports-feature"; +import type { EntityRegistryDisplayEntry } from "../../data/entity_registry"; +import { extractApiErrorMessage } from "../../data/hassio/common"; import { type MediaPlayerEntity, MediaPlayerEntityFeature, mediaPlayerJoin, mediaPlayerUnjoin, } from "../../data/media-player"; -import { extractApiErrorMessage } from "../../data/hassio/common"; -import type { EntityRegistryDisplayEntry } from "../../data/entity_registry"; -import { computeDomain } from "../../common/entity/compute_domain"; +import { haStyleDialog } from "../../resources/styles"; +import type { HomeAssistant } from "../../types"; +import "../ha-alert"; +import "../ha-button"; +import "../ha-dialog"; +import "../ha-dialog-header"; +import "./ha-media-player-toggle"; +import type { JoinMediaPlayersDialogParams } from "./show-join-media-players-dialog"; @customElement("dialog-join-media-players") class DialogJoinMediaPlayers extends LitElement { @@ -90,7 +90,11 @@ class DialogJoinMediaPlayers extends LitElement { ${this.hass.localize("ui.card.media_player.media_players")} - + ${this.hass.localize("ui.card.media_player.select_all")} @@ -114,11 +118,15 @@ class DialogJoinMediaPlayers extends LitElement { >` )} - + ${this.hass.localize("ui.common.cancel")} diff --git a/src/components/media-player/dialog-media-manage.ts b/src/components/media-player/dialog-media-manage.ts index 6a38ec9847..da2bacc886 100644 --- a/src/components/media-player/dialog-media-manage.ts +++ b/src/components/media-player/dialog-media-manage.ts @@ -127,7 +127,7 @@ class DialogMediaManage extends LitElement { )} @click=${this._handleDelete} > - + ${this._deleting diff --git a/src/components/media-player/ha-browse-media-tts.ts b/src/components/media-player/ha-browse-media-tts.ts index c6b327975c..e448f4f268 100644 --- a/src/components/media-player/ha-browse-media-tts.ts +++ b/src/components/media-player/ha-browse-media-tts.ts @@ -1,10 +1,11 @@ -import "@material/mwc-button/mwc-button"; +import { mdiContentCopy } from "@mdi/js"; import type { PropertyValues } from "lit"; import { css, html, LitElement, nothing } from "lit"; import { customElement, property, state } from "lit/decorators"; -import { mdiContentCopy } from "@mdi/js"; import { storage } from "../../common/decorators/storage"; import { fireEvent } from "../../common/dom/fire_event"; +import { copyToClipboard } from "../../common/util/copy-clipboard"; +import { fetchCloudStatus } from "../../data/cloud"; import type { MediaPlayerBrowseAction, MediaPlayerItem, @@ -13,13 +14,12 @@ import type { TTSEngine } from "../../data/tts"; import { getProviderFromTTSMediaSource, getTTSEngine } from "../../data/tts"; import { buttonLinkStyle } from "../../resources/styles"; import type { HomeAssistant } from "../../types"; -import "../ha-textarea"; -import "../ha-language-picker"; -import "../ha-tts-voice-picker"; -import "../ha-card"; -import { fetchCloudStatus } from "../../data/cloud"; -import { copyToClipboard } from "../../common/util/copy-clipboard"; import { showToast } from "../../util/toast"; +import "../ha-button"; +import "../ha-card"; +import "../ha-language-picker"; +import "../ha-textarea"; +import "../ha-tts-voice-picker"; export interface TtsMediaPickedEvent { item: MediaPlayerItem; @@ -92,11 +92,11 @@ class BrowseMediaTTS extends LitElement { : nothing}
- + ${this.hass.localize( `ui.components.media-browser.tts.action_${this.action}` )} - +
${this._voice diff --git a/src/components/media-player/ha-media-manage-button.ts b/src/components/media-player/ha-media-manage-button.ts index 4eec8d0217..8a8e8d7a52 100644 --- a/src/components/media-player/ha-media-manage-button.ts +++ b/src/components/media-player/ha-media-manage-button.ts @@ -1,4 +1,3 @@ -import "@material/mwc-button"; import { mdiFolderEdit } from "@mdi/js"; import { css, html, LitElement, nothing } from "lit"; import { customElement, property, state } from "lit/decorators"; @@ -10,6 +9,7 @@ import { } from "../../data/media_source"; import type { HomeAssistant } from "../../types"; import "../ha-svg-icon"; +import "../ha-button"; import { showMediaManageDialog } from "./show-media-manage-dialog"; declare global { @@ -38,14 +38,12 @@ class MediaManageButton extends LitElement { return nothing; } return html` - + + ${this.hass.localize( "ui.components.media-browser.file_management.manage" )} - @click=${this._manage} - > - - + `; } @@ -57,11 +55,6 @@ class MediaManageButton extends LitElement { } static styles = css` - mwc-button { - /* We use icon + text to show disabled state */ - --mdc-button-disabled-ink-color: --mdc-theme-primary; - } - ha-svg-icon[slot="icon"] { vertical-align: middle; } diff --git a/src/components/media-player/ha-media-player-browse.ts b/src/components/media-player/ha-media-player-browse.ts index 0a0d6fb3f1..25f68bed8e 100644 --- a/src/components/media-player/ha-media-player-browse.ts +++ b/src/components/media-player/ha-media-player-browse.ts @@ -1,6 +1,5 @@ import type { LitVirtualizer } from "@lit-labs/virtualizer"; import { grid } from "@lit-labs/virtualizer/layouts/grid"; -import "@material/mwc-button/mwc-button"; import { mdiArrowUpRight, mdiPlay, mdiPlus } from "@mdi/js"; import type { CSSResultGroup, PropertyValues, TemplateResult } from "lit"; @@ -42,6 +41,7 @@ import { import { documentationUrl } from "../../util/documentation-url"; import "../entity/ha-entity-picker"; import "../ha-alert"; +import "../ha-button"; import "../ha-button-menu"; import "../ha-card"; import "../ha-spinner"; @@ -440,8 +440,7 @@ export class HaMediaPlayerBrowse extends LitElement { ${currentItem.can_play && (!currentItem.thumbnail || !this.narrow) ? html` - @@ -452,11 +451,12 @@ export class HaMediaPlayerBrowse extends LitElement { .path=${this.action === "play" ? mdiPlay : mdiPlus} + slot="start" > ${this.hass.localize( `ui.components.media-browser.${this.action}` )} - + ` : ""} @@ -990,9 +990,8 @@ export class HaMediaPlayerBrowse extends LitElement { min-width: 0; flex: 1; } - .header-info mwc-button { + .header-info ha-button { display: block; - --mdc-theme-primary: var(--primary-color); padding-bottom: 16px; } .breadcrumb { @@ -1284,7 +1283,7 @@ export class HaMediaPlayerBrowse extends LitElement { bottom: -20px; right: 20px; } - :host([narrow]) .header-info mwc-button { + :host([narrow]) .header-info ha-button { margin-top: 16px; margin-bottom: 8px; } @@ -1303,17 +1302,17 @@ export class HaMediaPlayerBrowse extends LitElement { :host(:not([narrow])[scrolled]) .header:not(.no-img) ha-icon-button { align-self: center; } - :host([scrolled]) .header-info mwc-button, - .no-img .header-info mwc-button { + :host([scrolled]) .header-info ha-button, + .no-img .header-info ha-button { padding-right: 4px; } - :host([scrolled][narrow]) .no-img .header-info mwc-button { + :host([scrolled][narrow]) .no-img .header-info ha-button { padding-right: 16px; } :host([scrolled]) .header-info { flex-direction: row; } - :host([scrolled]) .header-info mwc-button { + :host([scrolled]) .header-info ha-button { align-self: center; margin-top: 0; margin-bottom: 0; diff --git a/src/components/media-player/ha-media-upload-button.ts b/src/components/media-player/ha-media-upload-button.ts index 8922cb4476..4e77857bc6 100644 --- a/src/components/media-player/ha-media-upload-button.ts +++ b/src/components/media-player/ha-media-upload-button.ts @@ -1,6 +1,5 @@ -import "@material/mwc-button"; import { mdiUpload } from "@mdi/js"; -import { css, html, LitElement, nothing } from "lit"; +import { html, LitElement, nothing } from "lit"; import { customElement, property, state } from "lit/decorators"; import { fireEvent } from "../../common/dom/fire_event"; import type { MediaPlayerItem } from "../../data/media-player"; @@ -10,7 +9,7 @@ import { } from "../../data/media_source"; import { showAlertDialog } from "../../dialogs/generic/show-dialog-box"; import type { HomeAssistant } from "../../types"; -import "../ha-spinner"; +import "../ha-button"; import "../ha-svg-icon"; declare global { @@ -36,8 +35,13 @@ class MediaUploadButton extends LitElement { return nothing; } return html` - 0 + 0} + @click=${this._startUpload} + .loading=${this._uploading > 0} + > + + ${this._uploading > 0 ? this.hass.localize( "ui.components.media-browser.file_management.uploading", { @@ -47,19 +51,7 @@ class MediaUploadButton extends LitElement { : this.hass.localize( "ui.components.media-browser.file_management.add_media" )} - .disabled=${this._uploading > 0} - @click=${this._startUpload} - > - ${this._uploading > 0 - ? html` - - ` - : html` `} - + `; } @@ -107,24 +99,6 @@ class MediaUploadButton extends LitElement { document.body.append(input); input.click(); } - - static styles = css` - mwc-button { - /* We use icon + text to show disabled state */ - --mdc-button-disabled-ink-color: --mdc-theme-primary; - } - - ha-svg-icon[slot="icon"], - ha-spinner[slot="icon"] { - vertical-align: middle; - } - - ha-svg-icon[slot="icon"] { - margin-inline-start: 0px; - margin-inline-end: 8px; - direction: var(--direction); - } - `; } declare global { diff --git a/src/dialogs/config-entry-system-options/dialog-config-entry-system-options.ts b/src/dialogs/config-entry-system-options/dialog-config-entry-system-options.ts index 85f30279d3..0975f3edda 100644 --- a/src/dialogs/config-entry-system-options/dialog-config-entry-system-options.ts +++ b/src/dialogs/config-entry-system-options/dialog-config-entry-system-options.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"; @@ -6,6 +5,7 @@ import { fireEvent } from "../../common/dom/fire_event"; import { createCloseHeading } from "../../components/ha-dialog"; import "../../components/ha-formfield"; import "../../components/ha-switch"; +import "../../components/ha-button"; import type { HaSwitch } from "../../components/ha-switch"; import type { ConfigEntryMutableParams } from "../../data/config_entries"; import { updateConfigEntry } from "../../data/config_entries"; @@ -113,20 +113,21 @@ class DialogConfigEntrySystemOptions extends LitElement { .disabled=${this._submitting} > - ${this.hass.localize("ui.common.cancel")} - - + ${this.hass.localize("ui.dialogs.config_entry_system_options.update")} - + `; } diff --git a/src/dialogs/config-flow/previews/entity-preview-row.ts b/src/dialogs/config-flow/previews/entity-preview-row.ts index 14acb8f20a..ead79ccfb1 100644 --- a/src/dialogs/config-flow/previews/entity-preview-row.ts +++ b/src/dialogs/config-flow/previews/entity-preview-row.ts @@ -7,6 +7,7 @@ import { ifDefined } from "lit/directives/if-defined"; import { computeStateName } from "../../../common/entity/compute_state_name"; import "../../../components/entity/ha-entity-toggle"; import "../../../components/entity/state-badge"; +import "../../../components/ha-button"; import "../../../components/ha-climate-state"; import "../../../components/ha-cover-controls"; import "../../../components/ha-cover-tilt-controls"; @@ -91,7 +92,7 @@ class EntityPreviewRow extends LitElement { justify-content: flex-end; width: 100%; } - mwc-button { + ha-button { margin-right: -0.57em; margin-inline-end: -0.57em; margin-inline-start: initial; @@ -107,9 +108,13 @@ class EntityPreviewRow extends LitElement { if (domain === "button") { return html` - + ${this.hass.localize("ui.card.button.press")} - + `; } @@ -232,14 +237,16 @@ class EntityPreviewRow extends LitElement { if (domain === "lock") { return html` - ${stateObj.state === "locked" ? this.hass!.localize("ui.card.lock.unlock") : this.hass!.localize("ui.card.lock.lock")} - + `; } diff --git a/src/dialogs/config-flow/step-flow-abort.ts b/src/dialogs/config-flow/step-flow-abort.ts index 7277e0b0f8..dec5183d00 100644 --- a/src/dialogs/config-flow/step-flow-abort.ts +++ b/src/dialogs/config-flow/step-flow-abort.ts @@ -1,4 +1,3 @@ -import "@material/mwc-button"; import type { CSSResultGroup, PropertyValues } from "lit"; import { html, LitElement, nothing } from "lit"; import { customElement, property } from "lit/decorators"; @@ -9,6 +8,7 @@ import type { HomeAssistant } from "../../types"; import { showConfigFlowDialog } from "./show-dialog-config-flow"; import type { DataEntryFlowDialogParams } from "./show-dialog-data-entry-flow"; import { configFlowContentStyles } from "./styles"; +import "../../components/ha-button"; @customElement("step-flow-abort") class StepFlowAbort extends LitElement { @@ -38,10 +38,10 @@ class StepFlowAbort extends LitElement { ${this.params.flowConfig.renderAbortDescription(this.hass, this.step)}
- ${this.hass.localize( "ui.panel.config.integrations.config_flow.close" - )}
`; diff --git a/src/dialogs/config-flow/step-flow-create-entry.ts b/src/dialogs/config-flow/step-flow-create-entry.ts index 4b9eae53a7..03b18f1024 100644 --- a/src/dialogs/config-flow/step-flow-create-entry.ts +++ b/src/dialogs/config-flow/step-flow-create-entry.ts @@ -1,4 +1,3 @@ -import "@material/mwc-button"; import type { CSSResultGroup, PropertyValues, TemplateResult } from "lit"; import { css, html, LitElement, nothing } from "lit"; import { customElement, property, state } from "lit/decorators"; @@ -11,6 +10,7 @@ import { import { computeDomain } from "../../common/entity/compute_domain"; import { navigate } from "../../common/navigate"; import "../../components/ha-area-picker"; +import "../../components/ha-button"; import { assistSatelliteSupportsSetupFlow } from "../../data/assist_satellite"; import type { DataEntryFlowStepCreateEntry } from "../../data/data_entry_flow"; import type { DeviceRegistryEntry } from "../../data/device_registry"; @@ -171,10 +171,10 @@ class StepFlowCreateEntry extends LitElement { `}
- ${localize( `ui.panel.config.integrations.config_flow.${!this.devices.length || Object.keys(this._deviceUpdate).length ? "finish" : "finish_skip"}` - )}
`; diff --git a/src/dialogs/config-flow/step-flow-external.ts b/src/dialogs/config-flow/step-flow-external.ts index 7907dd2901..c18cfd5195 100644 --- a/src/dialogs/config-flow/step-flow-external.ts +++ b/src/dialogs/config-flow/step-flow-external.ts @@ -1,4 +1,3 @@ -import "@material/mwc-button"; import type { CSSResultGroup, TemplateResult } from "lit"; import { css, html, LitElement } from "lit"; import { customElement, property } from "lit/decorators"; @@ -6,6 +5,7 @@ import type { DataEntryFlowStepExternal } from "../../data/data_entry_flow"; import type { HomeAssistant } from "../../types"; import type { FlowConfig } from "./show-dialog-data-entry-flow"; import { configFlowContentStyles } from "./styles"; +import "../../components/ha-button"; @customElement("step-flow-external") class StepFlowExternal extends LitElement { @@ -22,13 +22,11 @@ class StepFlowExternal extends LitElement {
${this.flowConfig.renderExternalStepDescription(this.hass, this.step)}
- - - ${localize( - "ui.panel.config.integrations.config_flow.external_step.open_site" - )} - - + + ${localize( + "ui.panel.config.integrations.config_flow.external_step.open_site" + )} +
`; diff --git a/src/dialogs/config-flow/step-flow-form.ts b/src/dialogs/config-flow/step-flow-form.ts index 97d74500ee..48bcace33a 100644 --- a/src/dialogs/config-flow/step-flow-form.ts +++ b/src/dialogs/config-flow/step-flow-form.ts @@ -1,4 +1,3 @@ -import "@material/mwc-button"; import type { CSSResultGroup, PropertyValues, TemplateResult } from "lit"; import { css, html, LitElement, nothing } from "lit"; import { customElement, property, state } from "lit/decorators"; @@ -6,6 +5,7 @@ import memoizeOne from "memoize-one"; import { dynamicElement } from "../../common/dom/dynamic-element-directive"; import { fireEvent } from "../../common/dom/fire_event"; import { isNavigationClick } from "../../common/dom/is-navigation-click"; +import "../../components/ha-button"; import "../../components/ha-alert"; import { computeInitialHaFormData } from "../../components/ha-form/compute-initial-ha-form-data"; import "../../components/ha-form/ha-form"; @@ -112,12 +112,12 @@ class StepFlowForm extends LitElement { ` : html`
- + ${this.flowConfig.renderShowFormStepSubmitButton( this.hass, this.step )} - +
`} @@ -318,6 +318,10 @@ class StepFlowForm extends LitElement { margin-top: 24px; display: block; } + + .buttons { + padding: 8px; + } `, ]; } diff --git a/src/dialogs/config-flow/step-flow-progress.ts b/src/dialogs/config-flow/step-flow-progress.ts index f92d355920..3467bba1f7 100644 --- a/src/dialogs/config-flow/step-flow-progress.ts +++ b/src/dialogs/config-flow/step-flow-progress.ts @@ -1,4 +1,3 @@ -import "@material/mwc-button"; import type { CSSResultGroup, TemplateResult } from "lit"; import { css, html, LitElement } from "lit"; import { customElement, property } from "lit/decorators"; diff --git a/src/dialogs/enter-code/dialog-enter-code.ts b/src/dialogs/enter-code/dialog-enter-code.ts index 0eb95992a1..374e5a8ae9 100644 --- a/src/dialogs/enter-code/dialog-enter-code.ts +++ b/src/dialogs/enter-code/dialog-enter-code.ts @@ -110,7 +110,11 @@ export class DialogEnterCode pattern=${ifDefined(this._dialogParams.codePattern)} inputmode="text" > - + ${this._dialogParams.cancelText ?? this.hass.localize("ui.common.cancel")} diff --git a/src/dialogs/form/dialog-form.ts b/src/dialogs/form/dialog-form.ts index af755a2224..5369304bd2 100644 --- a/src/dialogs/form/dialog-form.ts +++ b/src/dialogs/form/dialog-form.ts @@ -4,10 +4,10 @@ import { fireEvent } from "../../common/dom/fire_event"; import "../../components/ha-button"; import { createCloseHeading } from "../../components/ha-dialog"; import "../../components/ha-form/ha-form"; +import { haStyleDialog } from "../../resources/styles"; import type { HomeAssistant } from "../../types"; import type { HassDialog } from "../make-dialog-manager"; import type { FormDialogData, FormDialogParams } from "./show-form-dialog"; -import { haStyleDialog } from "../../resources/styles"; @customElement("dialog-form") export class DialogForm @@ -69,7 +69,11 @@ export class DialogForm @value-changed=${this._valueChanged} > - + ${this._params.cancelText || this.hass.localize("ui.common.cancel")} diff --git a/src/dialogs/generic/dialog-box.ts b/src/dialogs/generic/dialog-box.ts index 0b8b463664..f030ec90ee 100644 --- a/src/dialogs/generic/dialog-box.ts +++ b/src/dialogs/generic/dialog-box.ts @@ -106,6 +106,7 @@ class DialogBox extends LitElement { @click=${this._dismiss} ?dialogInitialFocus=${!this._params.prompt && this._params.destructive} + appearance="plain" > ${this._params.dismissText ? this._params.dismissText @@ -116,7 +117,7 @@ class DialogBox extends LitElement { @click=${this._confirm} ?dialogInitialFocus=${!this._params.prompt && !this._params.destructive} - ?destructive=${this._params.destructive} + variant=${this._params.destructive ? "danger" : "brand"} > ${this._params.confirmText ? this._params.confirmText diff --git a/src/dialogs/image-cropper-dialog/image-cropper-dialog.ts b/src/dialogs/image-cropper-dialog/image-cropper-dialog.ts index 57d6717cf0..93911e20a6 100644 --- a/src/dialogs/image-cropper-dialog/image-cropper-dialog.ts +++ b/src/dialogs/image-cropper-dialog/image-cropper-dialog.ts @@ -1,4 +1,3 @@ -import "@material/mwc-button/mwc-button"; import Cropper from "cropperjs"; // @ts-ignore import cropperCss from "cropperjs/dist/cropper.css"; @@ -7,6 +6,7 @@ import { css, html, nothing, LitElement, unsafeCSS } from "lit"; import { customElement, property, state, query } from "lit/decorators"; import { classMap } from "lit/directives/class-map"; import "../../components/ha-dialog"; +import "../../components/ha-button"; import { haStyleDialog } from "../../resources/styles"; import type { HomeAssistant } from "../../types"; import type { HaImageCropperDialogParams } from "./show-image-cropper-dialog"; @@ -92,18 +92,26 @@ export class HaImagecropperDialog extends LitElement { > ${this.hass.localize("ui.dialogs.image_cropper.crop_image")} - + ${this.hass.localize("ui.common.cancel")} - + ${this._isTargetAspectRatio - ? html` + ? html` ${this.hass.localize("ui.dialogs.image_cropper.use_original")} - ` + ` : nothing} - + ${this.hass.localize("ui.dialogs.image_cropper.crop")} - + `; } diff --git a/src/dialogs/more-info/components/lights/light-color-rgb-picker.ts b/src/dialogs/more-info/components/lights/light-color-rgb-picker.ts index 1cceea263b..fcb40e617f 100644 --- a/src/dialogs/more-info/components/lights/light-color-rgb-picker.ts +++ b/src/dialogs/more-info/components/lights/light-color-rgb-picker.ts @@ -1,4 +1,3 @@ -import "@material/mwc-button"; import { mdiEyedropper } from "@mdi/js"; import type { CSSResultGroup, PropertyValues } from "lit"; import { css, html, LitElement, nothing } from "lit"; diff --git a/src/dialogs/more-info/controls/more-info-automation.ts b/src/dialogs/more-info/controls/more-info-automation.ts index 0f554e2fd9..586bda9c97 100644 --- a/src/dialogs/more-info/controls/more-info-automation.ts +++ b/src/dialogs/more-info/controls/more-info-automation.ts @@ -1,4 +1,3 @@ -import "@material/mwc-button"; import type { HassEntity } from "home-assistant-js-websocket"; import { css, html, LitElement, nothing } from "lit"; import { customElement, property } from "lit/decorators"; @@ -6,6 +5,7 @@ import "../../../components/ha-relative-time"; import { triggerAutomationActions } from "../../../data/automation"; import { isUnavailableState } from "../../../data/entity"; import type { HomeAssistant } from "../../../types"; +import "../../../components/ha-button"; @customElement("more-info-automation") class MoreInfoAutomation extends LitElement { @@ -30,12 +30,14 @@ class MoreInfoAutomation extends LitElement {
- ${this.hass.localize("ui.card.automation.trigger")} - +
`; } diff --git a/src/dialogs/more-info/controls/more-info-configurator.ts b/src/dialogs/more-info/controls/more-info-configurator.ts index d32e90f112..8ac51f1f78 100644 --- a/src/dialogs/more-info/controls/more-info-configurator.ts +++ b/src/dialogs/more-info/controls/more-info-configurator.ts @@ -1,9 +1,8 @@ -import "@material/mwc-button"; import type { HassEntity } from "home-assistant-js-websocket"; import { css, html, LitElement, nothing } from "lit"; import { customElement, property, state } from "lit/decorators"; import "../../../components/ha-alert"; -import "../../../components/ha-spinner"; +import "../../../components/ha-button"; import "../../../components/ha-markdown"; import "../../../components/ha-textfield"; import type { HomeAssistant } from "../../../types"; @@ -46,19 +45,13 @@ export class MoreInfoConfigurator extends LitElement { )} ${this.stateObj.attributes.submit_caption ? html`

- - ${this._isConfiguring - ? html`` - : ""} ${this.stateObj.attributes.submit_caption} - +

` : ""} @@ -113,12 +106,6 @@ export class MoreInfoConfigurator extends LitElement { text-align: center; height: 41px; } - - ha-spinner { - --ha-spinner-indicator-color: var(--primary-text-color); - margin-right: auto; - margin-left: auto; - } `; } diff --git a/src/dialogs/more-info/controls/more-info-counter.ts b/src/dialogs/more-info/controls/more-info-counter.ts index 2eb4a9763f..a52c43c277 100644 --- a/src/dialogs/more-info/controls/more-info-counter.ts +++ b/src/dialogs/more-info/controls/more-info-counter.ts @@ -1,9 +1,9 @@ -import "@material/mwc-button"; import type { HassEntity } from "home-assistant-js-websocket"; import { css, html, LitElement, nothing } from "lit"; import { customElement, property } from "lit/decorators"; import { isUnavailableState } from "../../../data/entity"; import type { HomeAssistant } from "../../../types"; +import "../../../components/ha-button"; @customElement("more-info-counter") class MoreInfoCounter extends LitElement { @@ -20,29 +20,35 @@ class MoreInfoCounter extends LitElement { return html`
- ${this.hass!.localize("ui.card.counter.actions.increment")} - - + ${this.hass!.localize("ui.card.counter.actions.decrement")} - - + ${this.hass!.localize("ui.card.counter.actions.reset")} - +
`; } diff --git a/src/dialogs/more-info/controls/more-info-media_player.ts b/src/dialogs/more-info/controls/more-info-media_player.ts index 2140e9e3ab..54241a7630 100644 --- a/src/dialogs/more-info/controls/more-info-media_player.ts +++ b/src/dialogs/more-info/controls/more-info-media_player.ts @@ -1,5 +1,3 @@ -import "@material/mwc-button/mwc-button"; - import { mdiLoginVariant, mdiMusicNote, @@ -19,6 +17,7 @@ import "../../../components/ha-icon-button"; import "../../../components/ha-list-item"; import "../../../components/ha-select"; import "../../../components/ha-slider"; +import "../../../components/ha-button"; import "../../../components/ha-svg-icon"; import { showMediaBrowserDialog } from "../../../components/media-player/show-media-browser-dialog"; import { showJoinMediaPlayersDialog } from "../../../components/media-player/show-join-media-players-dialog"; @@ -73,15 +72,15 @@ class MoreInfoMediaPlayer extends LitElement { supportsFeature(stateObj, MediaPlayerEntityFeature.BROWSE_MEDIA) ? html` + ${this.hass.localize("ui.card.media_player.browse_media")} ` : ""} @@ -89,18 +88,20 @@ class MoreInfoMediaPlayer extends LitElement { supportsFeature(stateObj, MediaPlayerEntityFeature.GROUPING) ? html` ${groupMembers && groupMembers > 1 ? html` - ${stateObj.attributes.group_members?.length} + ${stateObj.attributes.group_members?.length || 4} ` : nothing} + ${this.hass.localize("ui.card.media_player.join")} ` : ""} @@ -284,14 +285,14 @@ class MoreInfoMediaPlayer extends LitElement { font-style: italic; } - mwc-button > ha-svg-icon { + ha-button > ha-svg-icon { vertical-align: text-bottom; } .badge { position: absolute; - top: 0; - left: 16px; + top: -6px; + left: 24px; display: flex; justify-content: center; align-items: center; diff --git a/src/dialogs/more-info/controls/more-info-person.ts b/src/dialogs/more-info/controls/more-info-person.ts index c364786eb2..efebf00e85 100644 --- a/src/dialogs/more-info/controls/more-info-person.ts +++ b/src/dialogs/more-info/controls/more-info-person.ts @@ -1,10 +1,10 @@ -import "@material/mwc-button"; import type { HassEntity } from "home-assistant-js-websocket"; import { css, html, LitElement, nothing } from "lit"; import { customElement, property } from "lit/decorators"; import memoizeOne from "memoize-one"; import { fireEvent } from "../../../common/dom/fire_event"; import "../../../components/ha-attributes"; +import "../../../components/ha-button"; import "../../../components/map/ha-map"; import { showZoneEditor } from "../../../data/zone"; import type { HomeAssistant } from "../../../types"; @@ -38,11 +38,15 @@ class MoreInfoPerson extends LitElement { this.stateObj.attributes.longitude ? html`
- + ${this.hass.localize( "ui.dialogs.more_info_control.person.create_zone" )} - +
` : ""} diff --git a/src/dialogs/more-info/controls/more-info-script.ts b/src/dialogs/more-info/controls/more-info-script.ts index 2b24ad8646..eece6780d0 100644 --- a/src/dialogs/more-info/controls/more-info-script.ts +++ b/src/dialogs/more-info/controls/more-info-script.ts @@ -1,5 +1,4 @@ import { mdiPlay, mdiStop } from "@mdi/js"; -import "@material/mwc-button"; import type { HassEntity } from "home-assistant-js-websocket"; import type { PropertyValues } from "lit"; import { css, html, LitElement, nothing } from "lit"; diff --git a/src/dialogs/more-info/controls/more-info-timer.ts b/src/dialogs/more-info/controls/more-info-timer.ts index 3f5c729752..3568caf444 100644 --- a/src/dialogs/more-info/controls/more-info-timer.ts +++ b/src/dialogs/more-info/controls/more-info-timer.ts @@ -1,7 +1,7 @@ -import "@material/mwc-button"; import { css, html, LitElement, nothing } from "lit"; import { customElement, property } from "lit/decorators"; import "../../../components/ha-attributes"; +import "../../../components/ha-button"; import type { TimerEntity } from "../../../data/timer"; import type { HomeAssistant } from "../../../types"; @@ -20,26 +20,46 @@ class MoreInfoTimer extends LitElement {
${this.stateObj.state === "idle" || this.stateObj.state === "paused" ? html` - + ${this.hass!.localize("ui.card.timer.actions.start")} - + ` : ""} ${this.stateObj.state === "active" ? html` - + ${this.hass!.localize("ui.card.timer.actions.pause")} - + ` : ""} ${this.stateObj.state === "active" || this.stateObj.state === "paused" ? html` - + ${this.hass!.localize("ui.card.timer.actions.cancel")} - - + + ${this.hass!.localize("ui.card.timer.actions.finish")} - + ` : ""}
diff --git a/src/dialogs/more-info/controls/more-info-update.ts b/src/dialogs/more-info/controls/more-info-update.ts index 4bb768c1c7..7dec37eb35 100644 --- a/src/dialogs/more-info/controls/more-info-update.ts +++ b/src/dialogs/more-info/controls/more-info-update.ts @@ -299,7 +299,10 @@ class MoreInfoUpdate extends LitElement { ${this.stateObj.state === BINARY_STATE_OFF && this.stateObj.attributes.skipped_version ? html` - + ${this.hass.localize( "ui.dialogs.more_info_control.update.clear_skipped" )} @@ -307,6 +310,7 @@ class MoreInfoUpdate extends LitElement { ` : html` - + ${this.hass.formatEntityState(this.notification)} - + `; } diff --git a/src/dialogs/notifications/notification-drawer.ts b/src/dialogs/notifications/notification-drawer.ts index bbb41039eb..e7817c4103 100644 --- a/src/dialogs/notifications/notification-drawer.ts +++ b/src/dialogs/notifications/notification-drawer.ts @@ -1,4 +1,3 @@ -import "@material/mwc-button"; import type { UnsubscribeFunc } from "home-assistant-js-websocket"; import { LitElement, html, css, nothing } from "lit"; import { customElement, property, query, state } from "lit/decorators"; @@ -10,6 +9,7 @@ import { subscribeNotifications } from "../../data/persistent_notification"; import type { HomeAssistant } from "../../types"; import "./notification-item"; import "../../components/ha-header-bar"; +import "../../components/ha-button"; import "../../components/ha-drawer"; import type { HaDrawer } from "../../components/ha-drawer"; import { computeRTLDirection } from "../../common/util/compute_rtl"; @@ -122,11 +122,11 @@ export class HuiNotificationDrawer extends LitElement { )} ${this._notifications.length > 1 ? html`
- + ${this.hass.localize( "ui.notification_drawer.dismiss_all" )} - +
` : ""}` : html`
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._narrow ? html` - + > + ${this.hass!.localize("ui.common.close")} + ` : ""} diff --git a/src/dialogs/sidebar/dialog-edit-sidebar.ts b/src/dialogs/sidebar/dialog-edit-sidebar.ts index 692443a40e..c5ad542229 100644 --- a/src/dialogs/sidebar/dialog-edit-sidebar.ts +++ b/src/dialogs/sidebar/dialog-edit-sidebar.ts @@ -160,7 +160,7 @@ class DialogEditSidebar extends LitElement {
${this._renderContent()}
- + ${this.hass.localize("ui.common.cancel")} - + ${this.hass.localize("ui.dialogs.tts-try.play")} `; diff --git a/src/dialogs/voice-assistant-setup/cloud/cloud-step-intro.ts b/src/dialogs/voice-assistant-setup/cloud/cloud-step-intro.ts index 7777ab3ddd..e7bf0703b4 100644 --- a/src/dialogs/voice-assistant-setup/cloud/cloud-step-intro.ts +++ b/src/dialogs/voice-assistant-setup/cloud/cloud-step-intro.ts @@ -97,17 +97,16 @@ export class CloudStepIntro extends LitElement {
- - - - nabucasa.com - - - + nabucasa.com + + ${this.hass.localize( "ui.panel.config.cloud.register.headline" )}
- ${this.hass.localize("ui.common.next")}
`; diff --git a/src/dialogs/voice-assistant-setup/voice-assistant-setup-step-success.ts b/src/dialogs/voice-assistant-setup/voice-assistant-setup-step-success.ts index d995047403..96e6406307 100644 --- a/src/dialogs/voice-assistant-setup/voice-assistant-setup-step-success.ts +++ b/src/dialogs/voice-assistant-setup/voice-assistant-setup-step-success.ts @@ -180,7 +180,7 @@ export class HaVoiceAssistantSetupStepSuccess extends LitElement {
- ${this.hass.localize( "ui.panel.config.voice_assistants.satellite_wizard.success.done" )} - + ${this._pipeline?.name} - + ${!this._pipelines ? html`
@@ -270,19 +271,17 @@ export class HaVoiceCommandDialog extends LitElement { margin-inline-start: -8px; } ha-button-menu ha-button { - --mdc-theme-primary: var(--secondary-text-color); - --mdc-typography-button-text-transform: none; - --mdc-typography-button-font-size: unset; - --mdc-typography-button-font-weight: var(--ha-font-weight-normal); - --mdc-typography-button-letter-spacing: var( - --mdc-typography-headline6-letter-spacing, - 0.0125em - ); - --mdc-typography-button-line-height: var( - --mdc-typography-headline6-line-height, - var(--ha-line-height-expanded) - ); - --button-height: auto; + --ha-font-size-l: var(--ha-font-size-m); + --ha-button-height: 20px; + } + ha-button-menu ha-button::part(base) { + margin-left: 5px; + padding: 0; + } + @media (prefers-color-scheme: dark) { + ha-button-menu ha-button { + --ha-button-theme-lighter-color: rgba(255, 255, 255, 0.1); + } } ha-button-menu ha-button ha-svg-icon { height: 28px; diff --git a/src/layouts/ha-init-page.ts b/src/layouts/ha-init-page.ts index af33535a32..89f53ac60a 100644 --- a/src/layouts/ha-init-page.ts +++ b/src/layouts/ha-init-page.ts @@ -1,8 +1,8 @@ import type { PropertyValues } from "lit"; import { css, html, LitElement } from "lit"; import { property, state } from "lit/decorators"; -import "@material/mwc-button"; import "../components/ha-spinner"; +import "../components/ha-button"; class HaInitPage extends LitElement { @property({ type: Boolean }) public error = false; @@ -22,7 +22,7 @@ class HaInitPage extends LitElement {

Retrying in ${this._retryInSeconds} seconds...

- Retry now + Retry now ${location.host.includes("ui.nabu.casa") ? html`

@@ -66,7 +66,7 @@ class HaInitPage extends LitElement { protected willUpdate(changedProperties: PropertyValues) { if (changedProperties.has("error") && this.error) { - import("@material/mwc-button"); + import("../components/ha-button"); } } diff --git a/src/layouts/hass-error-screen.ts b/src/layouts/hass-error-screen.ts index bae81d2e87..b43dde9c2e 100644 --- a/src/layouts/hass-error-screen.ts +++ b/src/layouts/hass-error-screen.ts @@ -1,8 +1,8 @@ -import "@material/mwc-button"; import type { CSSResultGroup, TemplateResult } from "lit"; import { css, html, LitElement } from "lit"; import { customElement, property } from "lit/decorators"; import "../components/ha-icon-button-arrow-prev"; +import "../components/ha-button"; import "../components/ha-menu-button"; import type { HomeAssistant } from "../types"; import "../components/ha-alert"; @@ -41,9 +41,9 @@ class HassErrorScreen extends LitElement {

${this.error} - + ${this.hass?.localize("ui.common.back")} - +
`; diff --git a/src/layouts/hass-tabs-subpage-data-table.ts b/src/layouts/hass-tabs-subpage-data-table.ts index dba3b154bd..18c5e25d6e 100644 --- a/src/layouts/hass-tabs-subpage-data-table.ts +++ b/src/layouts/hass-tabs-subpage-data-table.ts @@ -1,5 +1,4 @@ import { ResizeController } from "@lit-labs/observers/resize-controller"; -import "@material/mwc-button/mwc-button"; import { mdiArrowDown, mdiArrowUp, @@ -768,12 +767,6 @@ export class HaTabsSubpageDataTable extends KeyboardShortcutMixin(LitElement) { .active-filters ha-svg-icon { color: var(--primary-color); } - .active-filters mwc-button { - margin-left: 8px; - margin-inline-start: 8px; - margin-inline-end: initial; - direction: var(--direction); - } .active-filters::before { background-color: var(--primary-color); opacity: 0.12; diff --git a/src/layouts/supervisor-error-screen.ts b/src/layouts/supervisor-error-screen.ts index 503fe9a7aa..4e4eef6078 100644 --- a/src/layouts/supervisor-error-screen.ts +++ b/src/layouts/supervisor-error-screen.ts @@ -1,4 +1,3 @@ -import "@material/mwc-button"; import type { CSSResultGroup, PropertyValues, TemplateResult } from "lit"; import { css, html, LitElement } from "lit"; import { customElement, property } from "lit/decorators"; diff --git a/src/onboarding/onboarding-analytics.ts b/src/onboarding/onboarding-analytics.ts index be08ccb5fd..b0478f9137 100644 --- a/src/onboarding/onboarding-analytics.ts +++ b/src/onboarding/onboarding-analytics.ts @@ -1,4 +1,3 @@ -import "@material/mwc-button/mwc-button"; import { mdiOpenInNew } from "@mdi/js"; 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 type { LocalizeFunc } from "../common/translations/localize"; import "../components/ha-analytics"; +import "../components/ha-button"; import "../components/ha-svg-icon"; import type { Analytics } from "../data/analytics"; import { setAnalyticsPreferences } from "../data/analytics"; @@ -49,13 +49,9 @@ class OnboardingAnalytics extends LitElement { ${this._error ? html`
${this._error}
` : ""}
- + ${this.localize("ui.panel.page-onboarding.analytics.finish")} - +
`; } diff --git a/src/onboarding/onboarding-core-config.ts b/src/onboarding/onboarding-core-config.ts index d19a8d29c4..27fd4cf43e 100644 --- a/src/onboarding/onboarding-core-config.ts +++ b/src/onboarding/onboarding-core-config.ts @@ -1,4 +1,3 @@ -import "@material/mwc-button/mwc-button"; import type { PropertyValues, TemplateResult } from "lit"; import { css, html, LitElement, nothing } from "lit"; import { customElement, property, state } from "lit/decorators"; @@ -6,8 +5,9 @@ import { LOCAL_TIME_ZONE } from "../common/datetime/resolve-time-zone"; import { fireEvent } from "../common/dom/fire_event"; import type { LocalizeFunc } from "../common/translations/localize"; import "../components/ha-alert"; -import "../components/ha-spinner"; +import "../components/ha-button"; import { COUNTRIES } from "../components/ha-country-picker"; +import "../components/ha-spinner"; import type { ConfigUpdateValues } from "../data/core"; import { saveCoreConfig } from "../data/core"; import { countryCurrency } from "../data/currency"; @@ -80,11 +80,11 @@ class OnboardingCoreConfig extends LitElement {
- + ${this.onboardingLocalize( "ui.panel.page-onboarding.core-config.finish" )} - +
`; } diff --git a/src/onboarding/onboarding-create-user.ts b/src/onboarding/onboarding-create-user.ts index 5c928aec0a..19f20586f1 100644 --- a/src/onboarding/onboarding-create-user.ts +++ b/src/onboarding/onboarding-create-user.ts @@ -1,4 +1,3 @@ -import "@material/mwc-button"; import { genClientId } from "home-assistant-js-websocket"; import type { CSSResultGroup, PropertyValues, TemplateResult } from "lit"; import { html, LitElement } from "lit"; @@ -6,6 +5,7 @@ import { customElement, property, query, state } from "lit/decorators"; import { fireEvent } from "../common/dom/fire_event"; import type { LocalizeFunc } from "../common/translations/localize"; import { debounce } from "../common/util/debounce"; +import "../components/ha-button"; import "../components/ha-form/ha-form"; import type { HaForm } from "../components/ha-form/ha-form"; import type { @@ -76,8 +76,7 @@ class OnboardingCreateUser extends LitElement { @value-changed=${this._handleValueChanged} >
- ${this.localize("ui.panel.page-onboarding.user.create_account")} - +
`; } diff --git a/src/onboarding/onboarding-integrations.ts b/src/onboarding/onboarding-integrations.ts index 7c59134f38..bbbd52898d 100644 --- a/src/onboarding/onboarding-integrations.ts +++ b/src/onboarding/onboarding-integrations.ts @@ -135,7 +135,7 @@ class OnboardingIntegrations extends SubscribeMixin(LitElement) { )}

- + ${this.onboardingLocalize( "ui.panel.page-onboarding.integration.finish" )} @@ -176,7 +176,7 @@ class OnboardingIntegrations extends SubscribeMixin(LitElement) { : nothing}
- + ${this.onboardingLocalize( "ui.panel.page-onboarding.integration.finish" )} diff --git a/src/onboarding/onboarding-location.ts b/src/onboarding/onboarding-location.ts index 8ac0c60669..7116b3bf62 100644 --- a/src/onboarding/onboarding-location.ts +++ b/src/onboarding/onboarding-location.ts @@ -1,5 +1,3 @@ -import "@material/mwc-button/mwc-button"; - import { mdiCrosshairsGps, mdiMagnify, @@ -14,6 +12,7 @@ import { fireEvent } from "../common/dom/fire_event"; import type { LocalizeFunc } from "../common/translations/localize"; import "../components/ha-alert"; import "../components/ha-list"; +import "../components/ha-button"; import "../components/ha-list-item"; import "../components/ha-radio"; import "../components/ha-spinner"; @@ -194,11 +193,11 @@ class OnboardingLocation extends LitElement {

${addressAttribution}

- + ${this.onboardingLocalize( "ui.panel.page-onboarding.core-config.finish" )} - +
`; } diff --git a/src/onboarding/onboarding-welcome.ts b/src/onboarding/onboarding-welcome.ts index 0ec5700f98..5bfab27cde 100644 --- a/src/onboarding/onboarding-welcome.ts +++ b/src/onboarding/onboarding-welcome.ts @@ -22,7 +22,7 @@ class OnboardingWelcome extends LitElement {

${this.localize("ui.panel.page-onboarding.welcome.header")}

${this.localize("ui.panel.page-onboarding.intro")}

- + ${this.localize("ui.panel.page-onboarding.welcome.start")} @@ -94,6 +94,7 @@ class OnboardingWelcome extends LitElement { } .start { margin: 32px 0; + width: 100%; } ha-divider { --ha-divider-width: calc(100% + 64px); diff --git a/src/panels/calendar/confirm-event-dialog-box.ts b/src/panels/calendar/confirm-event-dialog-box.ts index bea8dc0b05..4031b34904 100644 --- a/src/panels/calendar/confirm-event-dialog-box.ts +++ b/src/panels/calendar/confirm-event-dialog-box.ts @@ -47,7 +47,7 @@ class ConfirmEventDialogBox extends LitElement { slot="primaryAction" @click=${this._confirm} dialogInitialFocus - destructive + variant="danger" > ${this._params.confirmText} @@ -56,7 +56,7 @@ class ConfirmEventDialogBox extends LitElement { ${this._params.confirmFutureText} diff --git a/src/panels/calendar/dialog-calendar-event-detail.ts b/src/panels/calendar/dialog-calendar-event-detail.ts index 4644b74fa3..f46efaa6df 100644 --- a/src/panels/calendar/dialog-calendar-event-detail.ts +++ b/src/panels/calendar/dialog-calendar-event-detail.ts @@ -1,4 +1,3 @@ -import "@material/mwc-button"; import { mdiCalendarClock } from "@mdi/js"; import { toDate } from "date-fns-tz"; import { addDays, isSameDay } from "date-fns"; @@ -12,6 +11,7 @@ import { fireEvent } from "../../common/dom/fire_event"; import { isDate } from "../../common/string/is_date"; import "../../components/entity/state-info"; import "../../components/ha-alert"; +import "../../components/ha-button"; import "../../components/ha-date-input"; import { createCloseHeading } from "../../components/ha-dialog"; import "../../components/ha-time-input"; @@ -99,24 +99,25 @@ class DialogCalendarEventDetail extends LitElement {
${this._params.canDelete ? html` - ${this.hass.localize("ui.components.calendar.event.delete")} - + ` : ""} ${this._params.canEdit - ? html` ${this.hass.localize("ui.components.calendar.event.edit")} - ` + ` : ""} `; diff --git a/src/panels/calendar/dialog-calendar-event-editor.ts b/src/panels/calendar/dialog-calendar-event-editor.ts index b027028c91..797c61f462 100644 --- a/src/panels/calendar/dialog-calendar-event-editor.ts +++ b/src/panels/calendar/dialog-calendar-event-editor.ts @@ -1,4 +1,3 @@ -import "@material/mwc-button"; import { formatInTimeZone, toDate } from "date-fns-tz"; import { addDays, @@ -23,6 +22,7 @@ import "../../components/ha-date-input"; import { createCloseHeading } from "../../components/ha-dialog"; import "../../components/ha-formfield"; import "../../components/ha-switch"; +import "../../components/ha-button"; import "../../components/ha-textarea"; import "../../components/ha-textfield"; import "../../components/ha-time-input"; @@ -262,34 +262,34 @@ class DialogCalendarEventEditor extends LitElement {
${isCreate ? html` - ${this.hass.localize("ui.components.calendar.event.add")} - + ` : html` - ${this.hass.localize("ui.components.calendar.event.save")} - + ${this._params.canDelete ? html` - ${this.hass.localize( "ui.components.calendar.event.delete" )} - + ` : ""} `} diff --git a/src/panels/calendar/ha-full-calendar.ts b/src/panels/calendar/ha-full-calendar.ts index 17d83f1239..2ff82a94f9 100644 --- a/src/panels/calendar/ha-full-calendar.ts +++ b/src/panels/calendar/ha-full-calendar.ts @@ -5,7 +5,6 @@ import dayGridPlugin from "@fullcalendar/daygrid"; import interactionPlugin from "@fullcalendar/interaction"; import listPlugin from "@fullcalendar/list"; import { ResizeController } from "@lit-labs/observers/resize-controller"; -import "@material/mwc-button"; import { mdiPlus, mdiViewAgenda, @@ -26,6 +25,7 @@ import "../../components/ha-button-toggle-group"; import "../../components/ha-fab"; import "../../components/ha-icon-button-next"; import "../../components/ha-icon-button-prev"; +import "../../components/ha-button"; import type { Calendar as CalendarData, CalendarEvent, @@ -135,13 +135,14 @@ export class HAFullCalendar extends LitElement { ${!this.narrow ? html`
- ${this.hass.localize( "ui.components.calendar.today" - )}
- ${this.hass.localize( "ui.components.calendar.today" - )} ` : html` - + ${this.hass.localize("ui.common.cancel")} ${!this.narrow ? html` - ${this.hass.localize( "ui.panel.config.application_credentials.picker.remove_selected.button" - )} ` : html` @@ -349,7 +354,7 @@ export class HaConfigApplicationCredentials 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/config/areas/dialog-area-registry-detail.ts b/src/panels/config/areas/dialog-area-registry-detail.ts index a7c0ac55de..507f5cf7ac 100644 --- a/src/panels/config/areas/dialog-area-registry-detail.ts +++ b/src/panels/config/areas/dialog-area-registry-detail.ts @@ -258,19 +258,20 @@ class DialogAreaDetail extends LitElement { ${!isNew ? html` ${this.hass.localize("ui.common.delete")} ` : nothing}
- + ${this.hass.localize("ui.common.cancel")} ${entry ? this.hass.localize("ui.common.save") diff --git a/src/panels/config/areas/dialog-floor-registry-detail.ts b/src/panels/config/areas/dialog-floor-registry-detail.ts index 025117992e..3642df35fb 100644 --- a/src/panels/config/areas/dialog-floor-registry-detail.ts +++ b/src/panels/config/areas/dialog-floor-registry-detail.ts @@ -1,5 +1,3 @@ -import "@material/mwc-button"; - import { mdiTextureBox } from "@mdi/js"; import type { CSSResultGroup } from "lit"; import { css, html, LitElement, nothing } from "lit"; @@ -10,6 +8,7 @@ import { fireEvent } from "../../../common/dom/fire_event"; import "../../../components/chips/ha-chip-set"; import "../../../components/chips/ha-input-chip"; import "../../../components/ha-alert"; +import "../../../components/ha-button"; import "../../../components/ha-aliases-editor"; import { createCloseHeading } from "../../../components/ha-dialog"; import "../../../components/ha-icon-picker"; @@ -227,18 +226,22 @@ class DialogFloorDetail extends LitElement { >
- + ${this.hass.localize("ui.common.cancel")} - - + ${entry ? this.hass.localize("ui.common.save") : this.hass.localize("ui.common.create")} - + `; } diff --git a/src/panels/config/areas/ha-config-area-page.ts b/src/panels/config/areas/ha-config-area-page.ts index b8f4968817..6dcf75abde 100644 --- a/src/panels/config/areas/ha-config-area-page.ts +++ b/src/panels/config/areas/ha-config-area-page.ts @@ -1,5 +1,4 @@ import { consume } from "@lit/context"; -import "@material/mwc-button"; import { mdiDelete, mdiDotsVertical, mdiImagePlus, mdiPencil } from "@mdi/js"; import type { HassEntity } from "home-assistant-js-websocket/dist/types"; import type { CSSResultGroup } from "lit"; @@ -16,6 +15,7 @@ import { groupBy } from "../../../common/util/group-by"; import { afterNextRender } from "../../../common/util/render-status"; import "../../../components/ha-button-menu"; import "../../../components/ha-card"; +import "../../../components/ha-button"; import "../../../components/ha-icon-button"; import "../../../components/ha-icon-next"; import "../../../components/ha-list-item"; @@ -266,15 +266,15 @@ class HaConfigAreaPage extends LitElement { class="img-edit-btn" >
` - : html` - - `} + + ${this.hass.localize("ui.panel.config.areas.add_picture")} + `} ha-svg-icon { - margin-inline-start: 0; - margin-inline-end: 8px; - } `, ]; } diff --git a/src/panels/config/automation/action/ha-automation-action.ts b/src/panels/config/automation/action/ha-automation-action.ts index 678f829bcb..23b35c613d 100644 --- a/src/panels/config/automation/action/ha-automation-action.ts +++ b/src/panels/config/automation/action/ha-automation-action.ts @@ -108,23 +108,23 @@ export default class HaAutomationAction extends LitElement { )}
- + + ${this.hass.localize( + "ui.panel.config.automation.editor.actions.add" + )} - + + ${this.hass.localize( + "ui.panel.config.automation.editor.actions.add_building_block" + )}
diff --git a/src/panels/config/automation/automation-mode-dialog/dialog-automation-mode.ts b/src/panels/config/automation/automation-mode-dialog/dialog-automation-mode.ts index 8fcb7a5e75..f23e079687 100644 --- a/src/panels/config/automation/automation-mode-dialog/dialog-automation-mode.ts +++ b/src/panels/config/automation/automation-mode-dialog/dialog-automation-mode.ts @@ -1,5 +1,3 @@ -import "@material/mwc-button"; - import { mdiClose, mdiHelpCircle } from "@mdi/js"; import type { CSSResultGroup } from "lit"; import { LitElement, css, html, nothing } from "lit"; @@ -10,6 +8,7 @@ import "../../../../components/ha-icon-button"; import "../../../../components/ha-md-list-item"; import "../../../../components/ha-md-list"; import "../../../../components/ha-radio"; +import "../../../../components/ha-button"; import "../../../../components/ha-textfield"; import "../../../../components/ha-dialog"; @@ -158,12 +157,16 @@ class DialogAutomationMode extends LitElement implements HassDialog { ` : nothing} - + ${this.hass.localize("ui.common.cancel")} - - + + ${this.hass.localize("ui.panel.config.automation.editor.change_mode")} - + `; } diff --git a/src/panels/config/automation/automation-save-dialog/dialog-automation-save.ts b/src/panels/config/automation/automation-save-dialog/dialog-automation-save.ts index f901e428ce..4c595c67a8 100644 --- a/src/panels/config/automation/automation-save-dialog/dialog-automation-save.ts +++ b/src/panels/config/automation/automation-save-dialog/dialog-automation-save.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"; @@ -111,7 +110,8 @@ class DialogAutomationSave extends LitElement implements HassDialog { ${this.hass.localize("ui.common.dont_save")} @@ -280,16 +280,16 @@ class DialogAutomationSave extends LitElement implements HassDialog { ${this._renderInputs()} ${this._renderDiscard()}
- + ${this.hass.localize("ui.common.cancel")} - - + + ${this.hass.localize( this._params.config.alias && !this._params.onDiscard ? "ui.panel.config.automation.editor.rename" : "ui.panel.config.automation.editor.save" )} - +
`; @@ -572,9 +572,6 @@ ${dump(this._params.config)} display: block; margin-bottom: 16px; } - .destructive { - --mdc-theme-primary: var(--error-color); - } ha-suggest-with-ai-button { margin: 8px 16px; diff --git a/src/panels/config/automation/blueprint-automation-editor.ts b/src/panels/config/automation/blueprint-automation-editor.ts index e0ef3df62d..445ad1b412 100644 --- a/src/panels/config/automation/blueprint-automation-editor.ts +++ b/src/panels/config/automation/blueprint-automation-editor.ts @@ -1,8 +1,8 @@ -import "@material/mwc-button/mwc-button"; import type { HassEntity } from "home-assistant-js-websocket"; import { html, nothing } from "lit"; import { customElement, property } from "lit/decorators"; import "../../../components/ha-alert"; +import "../../../components/ha-button"; import "../../../components/ha-markdown"; import type { BlueprintAutomationConfig } from "../../../data/automation"; import { fetchBlueprints } from "../../../data/blueprint"; @@ -26,11 +26,16 @@ export class HaBlueprintAutomationEditor extends HaBlueprintGenericEditor { ${this.hass.localize( "ui.panel.config.automation.editor.disabled" )} - + ${this.hass.localize( "ui.panel.config.automation.editor.enable" )} - + ` : ""} diff --git a/src/panels/config/automation/condition/ha-automation-condition.ts b/src/panels/config/automation/condition/ha-automation-condition.ts index 46e18ab00d..094b82a92d 100644 --- a/src/panels/config/automation/condition/ha-automation-condition.ts +++ b/src/panels/config/automation/condition/ha-automation-condition.ts @@ -157,23 +157,23 @@ export default class HaAutomationCondition extends LitElement { )}
- + + ${this.hass.localize( + "ui.panel.config.automation.editor.conditions.add" + )} - + + ${this.hass.localize( + "ui.panel.config.automation.editor.conditions.add_building_block" + )}
diff --git a/src/panels/config/automation/ha-automation-editor.ts b/src/panels/config/automation/ha-automation-editor.ts index 691fbb4e82..f8141b2e32 100644 --- a/src/panels/config/automation/ha-automation-editor.ts +++ b/src/panels/config/automation/ha-automation-editor.ts @@ -1,5 +1,4 @@ import { consume } from "@lit/context"; -import "@material/mwc-button"; import { mdiCog, mdiContentDuplicate, @@ -31,6 +30,7 @@ import { promiseTimeout } from "../../../common/util/promise-timeout"; import { afterNextRender } from "../../../common/util/render-status"; import "../../../components/ha-button-menu"; import "../../../components/ha-fab"; +import "../../../components/ha-button"; import "../../../components/ha-fade-in"; import "../../../components/ha-icon"; import "../../../components/ha-icon-button"; @@ -214,11 +214,16 @@ export class HaAutomationEditor extends PreventUnsavedMixin( > ${this._config?.id && !this.narrow ? html` - + ${this.hass.localize( "ui.panel.config.automation.editor.show_trace" )} - + ` : ""} @@ -427,11 +432,11 @@ export class HaAutomationEditor extends PreventUnsavedMixin( "ui.panel.config.automation.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")}
` @@ -440,11 +445,17 @@ export class HaAutomationEditor extends PreventUnsavedMixin( >${this.hass.localize( "ui.panel.config.automation.editor.read_only" )} - + ${this.hass.localize( "ui.panel.config.automation.editor.migrate" )} - + ` : nothing} ${this._mode === "gui" @@ -487,11 +498,16 @@ export class HaAutomationEditor extends PreventUnsavedMixin( ${this.hass.localize( "ui.panel.config.automation.editor.disabled" )} - + ${this.hass.localize( "ui.panel.config.automation.editor.enable" )} - + ` : ""} diff --git a/src/panels/config/automation/ha-automation-picker.ts b/src/panels/config/automation/ha-automation-picker.ts index 633c882040..fd103962e9 100644 --- a/src/panels/config/automation/ha-automation-picker.ts +++ b/src/panels/config/automation/ha-automation-picker.ts @@ -9,6 +9,7 @@ import { mdiHelpCircle, mdiInformationOutline, mdiMenuDown, + mdiOpenInNew, mdiPlay, mdiPlus, mdiRobotHappy, @@ -804,18 +805,19 @@ class HaAutomationPicker extends SubscribeMixin(LitElement) { { user: this.hass.user?.name || "Alice" } )}

- - - ${this.hass.localize("ui.panel.config.common.learn_more")} - - + ${this.hass.localize("ui.panel.config.common.learn_more")} + + ` : nothing } @@ -1454,6 +1456,9 @@ ${rejected --mdc-icon-size: 80px; max-width: 500px; } + .empty ha-button { + --mdc-icon-size: 24px; + } .empty h1 { font-size: var(--ha-font-size-3xl); } diff --git a/src/panels/config/automation/ha-automation-trace.ts b/src/panels/config/automation/ha-automation-trace.ts index 4544d97887..d8573a3d29 100644 --- a/src/panels/config/automation/ha-automation-trace.ts +++ b/src/panels/config/automation/ha-automation-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 { computeRTL } from "../../../common/util/compute_rtl"; +import "../../../components/ha-button"; import "../../../components/ha-button-menu"; import "../../../components/ha-icon-button"; import "../../../components/ha-list-item"; @@ -99,19 +100,19 @@ export class HaAutomationTrace extends LitElement { ${!this.narrow && stateObj?.attributes.id ? html` - - - ${this.hass.localize( - "ui.panel.config.automation.trace.edit_automation" - )} - - + ${this.hass.localize( + "ui.panel.config.automation.trace.edit_automation" + )} + ` : ""} diff --git a/src/panels/config/automation/manual-automation-editor.ts b/src/panels/config/automation/manual-automation-editor.ts index 3d69ee8752..d7f5b24eef 100644 --- a/src/panels/config/automation/manual-automation-editor.ts +++ b/src/panels/config/automation/manual-automation-editor.ts @@ -1,10 +1,9 @@ -import "@material/mwc-button/mwc-button"; import { mdiHelpCircle } from "@mdi/js"; import type { HassEntity } from "home-assistant-js-websocket"; +import { load } from "js-yaml"; import type { CSSResultGroup, PropertyValues } from "lit"; import { css, html, LitElement, nothing } from "lit"; import { customElement, property, state } from "lit/decorators"; -import { load } from "js-yaml"; import { any, array, @@ -16,7 +15,14 @@ import { union, } from "superstruct"; import { ensureArray } from "../../../common/array/ensure-array"; +import { canOverrideAlphanumericInput } from "../../../common/dom/can-override-input"; import { fireEvent } from "../../../common/dom/fire_event"; +import { constructUrlCurrentPath } from "../../../common/url/construct-url"; +import { + extractSearchParam, + removeSearchParam, +} from "../../../common/url/search-params"; +import "../../../components/ha-button"; import "../../../components/ha-card"; import "../../../components/ha-icon-button"; import "../../../components/ha-markdown"; @@ -35,20 +41,14 @@ import { getActionType, type Action } from "../../../data/script"; import { haStyle } from "../../../resources/styles"; import type { HomeAssistant } from "../../../types"; import { documentationUrl } from "../../../util/documentation-url"; +import { showToast } from "../../../util/toast"; import "./action/ha-automation-action"; +import type HaAutomationAction from "./action/ha-automation-action"; import "./condition/ha-automation-condition"; +import type HaAutomationCondition from "./condition/ha-automation-condition"; +import { showPasteReplaceDialog } from "./paste-replace-dialog/show-dialog-paste-replace"; import "./trigger/ha-automation-trigger"; import type HaAutomationTrigger from "./trigger/ha-automation-trigger"; -import type HaAutomationAction from "./action/ha-automation-action"; -import type HaAutomationCondition from "./condition/ha-automation-condition"; -import { - extractSearchParam, - removeSearchParam, -} from "../../../common/url/search-params"; -import { constructUrlCurrentPath } from "../../../common/url/construct-url"; -import { canOverrideAlphanumericInput } from "../../../common/dom/can-override-input"; -import { showToast } from "../../../util/toast"; -import { showPasteReplaceDialog } from "./paste-replace-dialog/show-dialog-paste-replace"; const baseConfigStruct = object({ alias: optional(string()), @@ -130,11 +130,16 @@ export class HaManualAutomationEditor extends LitElement { ${this.hass.localize( "ui.panel.config.automation.editor.disabled" )} - + ${this.hass.localize( "ui.panel.config.automation.editor.enable" )} - + ` : nothing} diff --git a/src/panels/config/automation/trigger/ha-automation-trigger.ts b/src/panels/config/automation/trigger/ha-automation-trigger.ts index 7e7fefd79e..d2dfd95f75 100644 --- a/src/panels/config/automation/trigger/ha-automation-trigger.ts +++ b/src/panels/config/automation/trigger/ha-automation-trigger.ts @@ -109,14 +109,13 @@ export default class HaAutomationTrigger extends LitElement { )}
- + ${this.hass.localize( + "ui.panel.config.automation.editor.triggers.add" + )} +
diff --git a/src/panels/config/automation/trigger/types/ha-automation-trigger-conversation.ts b/src/panels/config/automation/trigger/types/ha-automation-trigger-conversation.ts index 4317f48007..f7211ee5d2 100644 --- a/src/panels/config/automation/trigger/types/ha-automation-trigger-conversation.ts +++ b/src/panels/config/automation/trigger/types/ha-automation-trigger-conversation.ts @@ -155,11 +155,6 @@ export class HaConversationTrigger .option { margin-top: 4px; } - mwc-button { - margin-left: 8px; - margin-inline-start: 8px; - margin-inline-end: initial; - } ha-textfield { display: block; margin-bottom: 8px; diff --git a/src/panels/config/backup/components/config/ha-backup-config-encryption-key.ts b/src/panels/config/backup/components/config/ha-backup-config-encryption-key.ts index f554a04230..2bb8b2174e 100644 --- a/src/panels/config/backup/components/config/ha-backup-config-encryption-key.ts +++ b/src/panels/config/backup/components/config/ha-backup-config-encryption-key.ts @@ -36,8 +36,13 @@ class HaBackupConfigEncryptionKey extends LitElement { "ui.panel.config.backup.encryption_key.download_emergency_kit_description" )} - - + + ${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/dialogs/dialog-restore-backup.ts b/src/panels/config/backup/dialogs/dialog-restore-backup.ts index e923678b4d..7b8d6bd1c4 100644 --- a/src/panels/config/backup/dialogs/dialog-restore-backup.ts +++ b/src/panels/config/backup/dialogs/dialog-restore-backup.ts @@ -230,7 +230,7 @@ class DialogRestoreBackup extends LitElement implements HassDialog { ${this.hass.localize("ui.common.cancel")} - + ${this.hass.localize( "ui.panel.config.backup.dialogs.restore.actions.restore" )} diff --git a/src/panels/config/backup/ha-config-backup-location.ts b/src/panels/config/backup/ha-config-backup-location.ts index 5debf93ae5..c9f848372c 100644 --- a/src/panels/config/backup/ha-config-backup-location.ts +++ b/src/panels/config/backup/ha-config-backup-location.ts @@ -189,7 +189,7 @@ class HaConfigBackupDetails extends LitElement { ${this.hass.localize( "ui.panel.config.backup.location.encryption.encryption_turn_off" diff --git a/src/panels/config/backup/ha-config-backup-settings.ts b/src/panels/config/backup/ha-config-backup-settings.ts index 1659777828..733df1146d 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/blueprint/blueprint-generic-editor.ts b/src/panels/config/blueprint/blueprint-generic-editor.ts index 844b6f5abb..c960dc06a1 100644 --- a/src/panels/config/blueprint/blueprint-generic-editor.ts +++ b/src/panels/config/blueprint/blueprint-generic-editor.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"; diff --git a/src/panels/config/blueprint/dialog-import-blueprint.ts b/src/panels/config/blueprint/dialog-import-blueprint.ts index bbf300c7be..495cfbcf00 100644 --- a/src/panels/config/blueprint/dialog-import-blueprint.ts +++ b/src/panels/config/blueprint/dialog-import-blueprint.ts @@ -1,16 +1,16 @@ -import "@material/mwc-button"; -import { mdiOpenInNew, mdiClose } from "@mdi/js"; +import { mdiClose, mdiOpenInNew } from "@mdi/js"; 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-spinner"; -import "../../../components/ha-expansion-panel"; -import "../../../components/ha-markdown"; import "../../../components/ha-alert"; -import "../../../components/ha-textfield"; +import "../../../components/ha-button"; +import "../../../components/ha-code-editor"; import "../../../components/ha-dialog"; import "../../../components/ha-dialog-header"; -import "../../../components/ha-code-editor"; +import "../../../components/ha-expansion-panel"; +import "../../../components/ha-markdown"; +import "../../../components/ha-spinner"; +import "../../../components/ha-textfield"; import type { HaTextField } from "../../../components/ha-textfield"; import type { BlueprintImportResult } from "../../../data/blueprint"; import { importBlueprint, saveBlueprint } from "../../../data/blueprint"; @@ -137,7 +137,9 @@ class DialogImportBlueprint extends LitElement { "ui.panel.config.blueprint.add.import_introduction" )}

- - + + `}
- ${this.hass.localize("ui.common.cancel")} - + ${!this._result ? html` - - ${this._importing - ? html`` - : ""} ${this.hass.localize( "ui.panel.config.blueprint.add.import_btn" )} - + ` : html` - - ${this._saving - ? html`` - : ""} ${this._result.exists ? this.hass.localize( "ui.panel.config.blueprint.add.save_btn_override" @@ -205,7 +200,7 @@ class DialogImportBlueprint extends LitElement { : this.hass.localize( "ui.panel.config.blueprint.add.save_btn" )} - + `} `; diff --git a/src/panels/config/blueprint/ha-blueprint-overview.ts b/src/panels/config/blueprint/ha-blueprint-overview.ts index 6ac304a956..ac1befec81 100644 --- a/src/panels/config/blueprint/ha-blueprint-overview.ts +++ b/src/panels/config/blueprint/ha-blueprint-overview.ts @@ -4,6 +4,7 @@ import { mdiDownload, mdiEye, mdiHelpCircle, + mdiOpenInNew, mdiPlus, mdiShareVariant, } from "@mdi/js"; @@ -11,10 +12,12 @@ import type { CSSResultGroup, PropertyValues, TemplateResult } from "lit"; import { LitElement, html } from "lit"; import { customElement, property, state } from "lit/decorators"; import memoizeOne from "memoize-one"; +import { storage } from "../../../common/decorators/storage"; import type { HASSDomEvent } from "../../../common/dom/fire_event"; import { fireEvent } from "../../../common/dom/fire_event"; import { computeStateName } from "../../../common/entity/compute_state_name"; import { navigate } from "../../../common/navigate"; +import type { LocalizeFunc } from "../../../common/translations/localize"; import { extractSearchParam } from "../../../common/url/search-params"; import type { DataTableColumnContainer, @@ -47,12 +50,10 @@ import { import "../../../layouts/hass-tabs-subpage-data-table"; import { haStyle } from "../../../resources/styles"; import type { HomeAssistant, Route } from "../../../types"; -import type { LocalizeFunc } from "../../../common/translations/localize"; import { documentationUrl } from "../../../util/documentation-url"; import { showToast } from "../../../util/toast"; import { configSections } from "../ha-panel-config"; import { showAddBlueprintDialog } from "./show-dialog-import-blueprint"; -import { storage } from "../../../common/decorators/storage"; type BlueprintMetaDataPath = BlueprintMetaData & { path: string; @@ -298,17 +299,18 @@ class HaBlueprintOverview extends LitElement { style="width: 100%; text-align: center;" role="cell" > - - ${this.hass.localize( - "ui.panel.config.blueprint.overview.discover_more" - )} - + ${this.hass.localize( + "ui.panel.config.blueprint.overview.discover_more" + )} + + `} .initialGroupColumn=${this._activeGrouping} .initialCollapsedGroups=${this._activeCollapsed} diff --git a/src/panels/config/category/dialog-assign-category.ts b/src/panels/config/category/dialog-assign-category.ts index 28767f79b3..4fab1582db 100644 --- a/src/panels/config/category/dialog-assign-category.ts +++ b/src/panels/config/category/dialog-assign-category.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-icon-picker"; import "../../../components/ha-settings-row"; import "../../../components/ha-textfield"; +import "../../../components/ha-button"; import { updateEntityRegistryEntry } from "../../../data/entity_registry"; import { haStyleDialog } from "../../../resources/styles"; import type { HomeAssistant } from "../../../types"; @@ -70,16 +70,20 @@ class DialogAssignCategory extends LitElement { > - + ${this.hass.localize("ui.common.cancel")} - - + ${this.hass.localize("ui.common.save")} - + `; } diff --git a/src/panels/config/category/dialog-category-registry-detail.ts b/src/panels/config/category/dialog-category-registry-detail.ts index b6c88faa19..d1c6c2e072 100644 --- a/src/panels/config/category/dialog-category-registry-detail.ts +++ b/src/panels/config/category/dialog-category-registry-detail.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"; @@ -7,6 +6,7 @@ import "../../../components/ha-alert"; import { createCloseHeading } from "../../../components/ha-dialog"; import "../../../components/ha-icon-picker"; import "../../../components/ha-settings-row"; +import "../../../components/ha-button"; import "../../../components/ha-textfield"; import type { CategoryRegistryEntry, @@ -96,18 +96,22 @@ class DialogCategoryDetail extends LitElement { > - + ${this.hass.localize("ui.common.cancel")} - - + ${entry ? this.hass.localize("ui.common.save") : this.hass.localize("ui.common.add")} - + `; } diff --git a/src/panels/config/cloud/account/cloud-account.ts b/src/panels/config/cloud/account/cloud-account.ts index dbbf4cb611..6dd24ba959 100644 --- a/src/panels/config/cloud/account/cloud-account.ts +++ b/src/panels/config/cloud/account/cloud-account.ts @@ -1,4 +1,3 @@ -import "@material/mwc-button"; import { mdiDeleteForever, mdiDotsVertical, mdiDownload } from "@mdi/js"; import { css, html, LitElement } from "lit"; import { customElement, property, state } from "lit/decorators"; @@ -6,6 +5,7 @@ import { formatDateTime } from "../../../../common/datetime/format_date_time"; import { fireEvent } from "../../../../common/dom/fire_event"; import { debounce } from "../../../../common/util/debounce"; import "../../../../components/ha-alert"; +import "../../../../components/ha-button"; import "../../../../components/ha-button-menu"; import "../../../../components/ha-card"; import "../../../../components/ha-list-item"; @@ -148,22 +148,25 @@ export class CloudAccount extends SubscribeMixin(LitElement) {
- - - ${this.hass.localize( - "ui.panel.config.cloud.account.manage_account" - )} - - - + ${this.hass.localize( + "ui.panel.config.cloud.account.manage_account" + )} + + ${this.hass.localize( "ui.panel.config.cloud.account.sign_out" )} - +
@@ -360,7 +363,7 @@ export class CloudAccount extends SubscribeMixin(LitElement) { flex-direction: row-reverse; justify-content: space-between; } - mwc-button { + ha-button { align-self: center; } .wrap { diff --git a/src/panels/config/cloud/account/cloud-tts-pref.ts b/src/panels/config/cloud/account/cloud-tts-pref.ts index 59370ae919..c52352a8f9 100644 --- a/src/panels/config/cloud/account/cloud-tts-pref.ts +++ b/src/panels/config/cloud/account/cloud-tts-pref.ts @@ -1,11 +1,10 @@ -import "@material/mwc-button"; - import { css, html, LitElement, nothing } from "lit"; import { mdiContentCopy } from "@mdi/js"; import { customElement, property, state } from "lit/decorators"; import memoizeOne from "memoize-one"; import { fireEvent } from "../../../../common/dom/fire_event"; import "../../../../components/ha-card"; +import "../../../../components/ha-button"; import "../../../../components/ha-language-picker"; import "../../../../components/ha-list-item"; import "../../../../components/ha-select"; @@ -127,9 +126,9 @@ export class CloudTTSPref extends LitElement { `}
- + ${this.hass.localize("ui.panel.config.cloud.account.tts.try")} - + `; diff --git a/src/panels/config/cloud/account/cloud-webhooks.ts b/src/panels/config/cloud/account/cloud-webhooks.ts index 045fa0a825..fddbcaa7ad 100644 --- a/src/panels/config/cloud/account/cloud-webhooks.ts +++ b/src/panels/config/cloud/account/cloud-webhooks.ts @@ -3,6 +3,7 @@ import { css, html, LitElement } from "lit"; import { customElement, property, state } from "lit/decorators"; import { isComponentLoaded } from "../../../../common/config/is_component_loaded"; import "../../../../components/ha-card"; +import "../../../../components/ha-button"; import "../../../../components/ha-spinner"; import "../../../../components/ha-settings-row"; import "../../../../components/ha-switch"; @@ -93,11 +94,15 @@ export class CloudWebhooks extends LitElement { ` : this._cloudHooks![entry.webhook_id] ? html` - + ${this.hass!.localize( "ui.panel.config.cloud.account.webhooks.manage" )} - + ` : html` `} diff --git a/src/panels/config/cloud/account/dialog-cloud-support-package.ts b/src/panels/config/cloud/account/dialog-cloud-support-package.ts index b45ebda259..7caab2260a 100644 --- a/src/panels/config/cloud/account/dialog-cloud-support-package.ts +++ b/src/panels/config/cloud/account/dialog-cloud-support-package.ts @@ -1,5 +1,3 @@ -import "@material/mwc-button"; - import { mdiClose } from "@mdi/js"; import { css, html, LitElement, nothing } from "lit"; import { customElement, property, query, state } from "lit/decorators"; 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..1d0ecbdb0e 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,25 @@ 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-already-connected/dialog-cloud-already-connected.ts b/src/panels/config/cloud/dialog-cloud-already-connected/dialog-cloud-already-connected.ts index a92d54da31..0295a9ffa2 100644 --- a/src/panels/config/cloud/dialog-cloud-already-connected/dialog-cloud-already-connected.ts +++ b/src/panels/config/cloud/dialog-cloud-already-connected/dialog-cloud-already-connected.ts @@ -1,17 +1,17 @@ +import { mdiEye, mdiEyeOff } from "@mdi/js"; import type { CSSResultGroup } from "lit"; import { css, html, LitElement, nothing } from "lit"; import { customElement, state } from "lit/decorators"; -import { mdiEye, mdiEyeOff } from "@mdi/js"; import { formatDateTime } from "../../../../common/datetime/format_date_time"; import { fireEvent } from "../../../../common/dom/fire_event"; import "../../../../components/ha-alert"; import "../../../../components/ha-button"; -import "../../../../components/ha-icon-button"; import { createCloseHeading } from "../../../../components/ha-dialog"; +import "../../../../components/ha-icon-button"; import { haStyleDialog } from "../../../../resources/styles"; import type { HomeAssistant } from "../../../../types"; -import type { CloudAlreadyConnectedParams as CloudAlreadyConnectedDialogParams } from "./show-dialog-cloud-already-connected"; import { obfuscateUrl } from "../../../../util/url"; +import type { CloudAlreadyConnectedParams as CloudAlreadyConnectedDialogParams } from "./show-dialog-cloud-already-connected"; @customElement("dialog-cloud-already-connected") class DialogCloudAlreadyConnected extends LitElement { @@ -131,7 +131,11 @@ class DialogCloudAlreadyConnected extends LitElement { )} - + ${this.hass!.localize("ui.common.cancel")} 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/cloud/login/cloud-login.ts b/src/panels/config/cloud/login/cloud-login.ts index 456f96b34b..89fd4812f7 100644 --- a/src/panels/config/cloud/login/cloud-login.ts +++ b/src/panels/config/cloud/login/cloud-login.ts @@ -105,6 +105,7 @@ export class CloudLogin extends LitElement {
@@ -113,7 +114,6 @@ export class CloudLogin extends LitElement { )} ${this.localize( diff --git a/src/panels/config/cloud/register/cloud-register.ts b/src/panels/config/cloud/register/cloud-register.ts index ac999a37b0..7648b11496 100644 --- a/src/panels/config/cloud/register/cloud-register.ts +++ b/src/panels/config/cloud/register/cloud-register.ts @@ -164,13 +164,6 @@ export class CloudRegister extends LitElement { >
- ${this.hass.localize( - "ui.panel.config.cloud.register.start_trial" - )}
diff --git a/src/panels/config/core/ha-config-analytics.ts b/src/panels/config/core/ha-config-analytics.ts index 6beac677d9..e3b20ed677 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/ha-config-section-general.ts b/src/panels/config/core/ha-config-section-general.ts index 0636f01a5a..412a0f3ab1 100644 --- a/src/panels/config/core/ha-config-section-general.ts +++ b/src/panels/config/core/ha-config-section-general.ts @@ -8,6 +8,7 @@ import "../../../components/buttons/ha-progress-button"; import type { HaProgressButton } from "../../../components/buttons/ha-progress-button"; import "../../../components/ha-alert"; import "../../../components/ha-card"; +import "../../../components/ha-button"; import "../../../components/ha-checkbox"; import type { HaCheckbox } from "../../../components/ha-checkbox"; import "../../../components/ha-country-picker"; @@ -256,8 +257,12 @@ class HaConfigSectionGeneral extends LitElement { "ui.panel.config.core.section.core.core_config.edit_location_description" )} - ${this.hass.localize("ui.common.edit")}${this.hass.localize("ui.common.edit")}
@@ -265,7 +270,7 @@ class HaConfigSectionGeneral extends LitElement { @click=${this._updateEntry} .disabled=${disabled} > - ${this.hass!.localize("ui.panel.config.zone.detail.update")} + ${this.hass!.localize("ui.common.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-detail/ha-device-entities-card.ts b/src/panels/config/devices/device-detail/ha-device-entities-card.ts index e16196b396..9c18ba7086 100644 --- a/src/panels/config/devices/device-detail/ha-device-entities-card.ts +++ b/src/panels/config/devices/device-detail/ha-device-entities-card.ts @@ -5,10 +5,11 @@ import { classMap } from "lit/directives/class-map"; import { until } from "lit/directives/until"; import { computeEntityName } from "../../../../common/entity/compute_entity_name"; import { stripPrefixFromEntityName } from "../../../../common/entity/strip_prefix_from_entity_name"; +import "../../../../components/ha-button"; import "../../../../components/ha-card"; import "../../../../components/ha-icon"; -import "../../../../components/ha-list-item"; import "../../../../components/ha-list"; +import "../../../../components/ha-list-item"; import type { ExtEntityRegistryEntry } from "../../../../data/entity_registry"; import { getExtendedEntityRegistryEntry } from "../../../../data/entity_registry"; import { entryIcon } from "../../../../data/icons"; @@ -125,11 +126,11 @@ export class HaDeviceEntitiesCard extends LitElement { ` : nothing}
- + ${this.hass.localize( "ui.panel.config.devices.entities.add_entities_lovelace" )} - +
`; @@ -300,6 +301,9 @@ export class HaDeviceEntitiesCard extends LitElement { height: 40px; --mdc-ripple-color: transparent; } + .card-actions { + padding: 4px 16px 4px 4px; + } `; } diff --git a/src/panels/config/devices/device-detail/integration-elements/mqtt/dialog-mqtt-device-debug-info.ts b/src/panels/config/devices/device-detail/integration-elements/mqtt/dialog-mqtt-device-debug-info.ts index 08fd1cd604..5a2c8cf498 100644 --- a/src/panels/config/devices/device-detail/integration-elements/mqtt/dialog-mqtt-device-debug-info.ts +++ b/src/panels/config/devices/device-detail/integration-elements/mqtt/dialog-mqtt-device-debug-info.ts @@ -1,4 +1,3 @@ -import "@material/mwc-button/mwc-button"; import type { CSSResultGroup, TemplateResult } from "lit"; import { css, html, LitElement, nothing } from "lit"; import { customElement, state } from "lit/decorators"; @@ -7,6 +6,7 @@ import { computeStateName } from "../../../../../../common/entity/compute_state_ import "../../../../../../components/ha-dialog"; import "../../../../../../components/ha-formfield"; import "../../../../../../components/ha-switch"; +import "../../../../../../components/ha-button"; import type { HaSwitch } from "../../../../../../components/ha-switch"; import type { MQTTDeviceDebugInfo } from "../../../../../../data/mqtt"; import { fetchMQTTDebugInfo } from "../../../../../../data/mqtt"; @@ -107,9 +107,9 @@ class DialogMQTTDeviceDebugInfo extends LitElement { )} `} - + ${this.hass!.localize("ui.common.close")} - + `; } 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 c062dc699f..2fb0eaea48 100644 --- a/src/panels/config/devices/ha-config-device-page.ts +++ b/src/panels/config/devices/ha-config-device-page.ts @@ -10,12 +10,12 @@ import { mdiPlusCircle, mdiRestore, } from "@mdi/js"; +import type { HassEntity } from "home-assistant-js-websocket"; import type { CSSResultGroup, PropertyValues, TemplateResult } from "lit"; import { LitElement, css, html, nothing } from "lit"; import { customElement, property, state } from "lit/decorators"; import { ifDefined } from "lit/directives/if-defined"; import memoizeOne from "memoize-one"; -import type { HassEntity } from "home-assistant-js-websocket"; import { isComponentLoaded } from "../../../common/config/is_component_loaded"; import { ASSIST_ENTITIES, SENSOR_ENTITIES } from "../../../common/const"; import { computeDeviceNameDisplay } from "../../../common/entity/compute_device_name"; @@ -27,6 +27,7 @@ import { stringCompare } from "../../../common/string/compare"; import { groupBy } from "../../../common/util/group-by"; import "../../../components/entity/ha-battery-icon"; import "../../../components/ha-alert"; +import "../../../components/ha-button"; import "../../../components/ha-button-menu"; import "../../../components/ha-icon-button"; import "../../../components/ha-icon-next"; @@ -405,9 +406,13 @@ export class HaConfigDevicePage extends LitElement { ${device.disabled_by === "user" ? html`
- + ${this.hass.localize("ui.common.enable")} - +
` : ""} @@ -760,39 +765,36 @@ export class HaConfigDevicePage extends LitElement { ? html`
- - - ${firstDeviceAction!.label} - ${firstDeviceAction!.icon - ? html` - - ` - : ""} - ${firstDeviceAction!.trailingIcon - ? html` - - ` - : ""} - - + ${firstDeviceAction!.label} + ${firstDeviceAction!.icon + ? html` + + ` + : nothing} + ${firstDeviceAction!.trailingIcon + ? html` + + ` + : nothing} +
${actions.length @@ -1620,6 +1622,7 @@ export class HaConfigDevicePage extends LitElement { display: flex; justify-content: space-between; align-items: center; + padding: 4px 16px 4px 4px; } `, ]; diff --git a/src/panels/config/energy/components/ha-energy-battery-settings.ts b/src/panels/config/energy/components/ha-energy-battery-settings.ts index 16e358a7ad..92dd4582e5 100644 --- a/src/panels/config/energy/components/ha-energy-battery-settings.ts +++ b/src/panels/config/energy/components/ha-energy-battery-settings.ts @@ -1,10 +1,11 @@ -import "@material/mwc-button/mwc-button"; -import { mdiBatteryHigh, mdiDelete, mdiPencil } from "@mdi/js"; +import { mdiBatteryHigh, mdiDelete, mdiPencil, mdiPlus } from "@mdi/js"; import type { CSSResultGroup, 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 "../../../../components/ha-svg-icon"; import "../../../../components/ha-icon-button"; import "../../../../components/ha-settings-row"; import type { @@ -132,10 +133,15 @@ export class EnergyBatterySettings extends LitElement { })}
- ${this.hass.localize( + + + ${this.hass.localize( "ui.panel.config.energy.battery.add_battery_system" - )}
diff --git a/src/panels/config/energy/components/ha-energy-device-settings.ts b/src/panels/config/energy/components/ha-energy-device-settings.ts index 11eb58d42f..058ee06c38 100644 --- a/src/panels/config/energy/components/ha-energy-device-settings.ts +++ b/src/panels/config/energy/components/ha-energy-device-settings.ts @@ -1,11 +1,11 @@ -import "@material/mwc-button/mwc-button"; -import { mdiDelete, mdiDevices, mdiDrag, mdiPencil } from "@mdi/js"; +import { mdiDelete, mdiDevices, mdiDrag, mdiPencil, mdiPlus } from "@mdi/js"; import type { CSSResultGroup, TemplateResult } from "lit"; import { css, html, LitElement } from "lit"; import { repeat } from "lit/directives/repeat"; import { customElement, property } 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-sortable"; import "../../../../components/ha-svg-icon"; @@ -117,10 +117,15 @@ export class EnergyDeviceSettings extends LitElement {
- + ${this.hass.localize( "ui.panel.config.energy.device_consumption.add_device" - )}
diff --git a/src/panels/config/energy/components/ha-energy-gas-settings.ts b/src/panels/config/energy/components/ha-energy-gas-settings.ts index e3be87f220..6c1510c663 100644 --- a/src/panels/config/energy/components/ha-energy-gas-settings.ts +++ b/src/panels/config/energy/components/ha-energy-gas-settings.ts @@ -1,9 +1,9 @@ -import "@material/mwc-button/mwc-button"; -import { mdiDelete, mdiFire, mdiPencil } from "@mdi/js"; +import { mdiDelete, mdiFire, mdiPencil, mdiPlus } from "@mdi/js"; import type { CSSResultGroup, TemplateResult } from "lit"; import { html, LitElement } from "lit"; import { customElement, property } from "lit/decorators"; import { fireEvent } from "../../../../common/dom/fire_event"; +import "../../../../components/ha-button"; import "../../../../components/ha-card"; import "../../../../components/ha-icon-button"; import type { @@ -120,10 +120,15 @@ export class EnergyGasSettings extends LitElement { })}
- + ${this.hass.localize( "ui.panel.config.energy.gas.add_gas_source" - )}
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..766aa08588 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/components/ha-energy-solar-settings.ts b/src/panels/config/energy/components/ha-energy-solar-settings.ts index 9a01fa4962..0977857fc5 100644 --- a/src/panels/config/energy/components/ha-energy-solar-settings.ts +++ b/src/panels/config/energy/components/ha-energy-solar-settings.ts @@ -1,10 +1,10 @@ -import "@material/mwc-button/mwc-button"; -import { mdiDelete, mdiPencil, mdiSolarPower } from "@mdi/js"; +import { mdiDelete, mdiPencil, mdiPlus, mdiSolarPower } from "@mdi/js"; import type { CSSResultGroup, TemplateResult } from "lit"; import { 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 "../../../../components/ha-icon-button"; import type { EnergyInfo, @@ -132,11 +132,16 @@ export class EnergySolarSettings extends LitElement { ? html`
- + + ${this.hass.localize( "ui.panel.config.energy.solar.add_solar_production" )} - +
` : ""} diff --git a/src/panels/config/energy/components/ha-energy-water-settings.ts b/src/panels/config/energy/components/ha-energy-water-settings.ts index ddb1bb911c..8cbbe018f8 100644 --- a/src/panels/config/energy/components/ha-energy-water-settings.ts +++ b/src/panels/config/energy/components/ha-energy-water-settings.ts @@ -1,10 +1,10 @@ -import "@material/mwc-button/mwc-button"; -import { mdiDelete, mdiWater, mdiPencil } from "@mdi/js"; +import { mdiDelete, mdiWater, mdiPencil, mdiPlus } from "@mdi/js"; import type { CSSResultGroup, TemplateResult } from "lit"; import { 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 "../../../../components/ha-icon-button"; import type { EnergyPreferences, @@ -121,10 +121,15 @@ export class EnergyWaterSettings extends LitElement { })}
- + ${this.hass.localize( "ui.panel.config.energy.water.add_water_source" - )}
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-gas-settings.ts b/src/panels/config/energy/dialogs/dialog-energy-gas-settings.ts index 7cbaf1eb3d..0dfc85cc60 100644 --- a/src/panels/config/energy/dialogs/dialog-energy-gas-settings.ts +++ b/src/panels/config/energy/dialogs/dialog-energy-gas-settings.ts @@ -1,4 +1,3 @@ -import "@material/mwc-button/mwc-button"; import { mdiFire } from "@mdi/js"; import type { CSSResultGroup } from "lit"; import { css, html, LitElement, nothing } from "lit"; @@ -9,6 +8,7 @@ import "../../../../components/entity/ha-statistic-picker"; import "../../../../components/ha-dialog"; import "../../../../components/ha-formfield"; import "../../../../components/ha-radio"; +import "../../../../components/ha-button"; import type { HaRadio } from "../../../../components/ha-radio"; import "../../../../components/ha-textfield"; import type { GasSourceTypeEnergyPreference } from "../../../../data/energy"; @@ -247,16 +247,20 @@ export class DialogEnergyGasSettings ` : ""} - + ${this.hass.localize("ui.common.cancel")} - - + ${this.hass.localize("ui.common.save")} - + `; } diff --git a/src/panels/config/energy/dialogs/dialog-energy-grid-flow-settings.ts b/src/panels/config/energy/dialogs/dialog-energy-grid-flow-settings.ts index dedc4ffb9a..d0fddbc8ba 100644 --- a/src/panels/config/energy/dialogs/dialog-energy-grid-flow-settings.ts +++ b/src/panels/config/energy/dialogs/dialog-energy-grid-flow-settings.ts @@ -1,4 +1,3 @@ -import "@material/mwc-button/mwc-button"; import { mdiTransmissionTower } 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"; @@ -280,10 +280,14 @@ export class DialogEnergyGridFlowSettings ` : ""} - + ${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..0a091ad26a 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/entities/editor-tabs/settings/entity-settings-helper-tab.ts b/src/panels/config/entities/editor-tabs/settings/entity-settings-helper-tab.ts index fff779c4e9..8e71a1db84 100644 --- a/src/panels/config/entities/editor-tabs/settings/entity-settings-helper-tab.ts +++ b/src/panels/config/entities/editor-tabs/settings/entity-settings-helper-tab.ts @@ -22,6 +22,7 @@ import "../../../helpers/forms/ha-schedule-form"; import "../../../helpers/forms/ha-timer-form"; import "../../../voice-assistants/entity-voice-settings"; import "../../entity-registry-settings-editor"; +import "../../../../../components/ha-button"; import type { EntityRegistrySettingsEditor } from "../../entity-registry-settings-editor"; @customElement("entity-settings-helper-tab") @@ -97,20 +98,21 @@ export class EntitySettingsHelperTab extends LitElement { >
- ${this.hass.localize("ui.dialogs.entity_registry.editor.delete")} - - + ${this.hass.localize("ui.dialogs.entity_registry.editor.update")} - +
`; } diff --git a/src/panels/config/entities/entity-registry-settings-editor.ts b/src/panels/config/entities/entity-registry-settings-editor.ts index 42f0078d0a..34e4140819 100644 --- a/src/panels/config/entities/entity-registry-settings-editor.ts +++ b/src/panels/config/entities/entity-registry-settings-editor.ts @@ -1,4 +1,3 @@ -import "@material/mwc-button/mwc-button"; import { mdiContentCopy, mdiRestore } from "@mdi/js"; import type { HassEntity } from "home-assistant-js-websocket"; import type { CSSResultGroup, PropertyValues } from "lit"; @@ -14,6 +13,7 @@ import { computeObjectId } from "../../../common/entity/compute_object_id"; import { supportsFeature } from "../../../common/entity/supports-feature"; import { formatNumber } from "../../../common/number/format_number"; import { stringCompare } from "../../../common/string/compare"; +import { autoCaseNoun } from "../../../common/translations/auto_case_noun"; import type { LocalizeFunc, LocalizeKeys, @@ -24,13 +24,13 @@ import "../../../components/ha-area-picker"; import "../../../components/ha-icon"; import "../../../components/ha-icon-button-next"; import "../../../components/ha-icon-picker"; +import "../../../components/ha-labels-picker"; import "../../../components/ha-list-item"; import "../../../components/ha-radio"; import "../../../components/ha-select"; import "../../../components/ha-settings-row"; import "../../../components/ha-state-icon"; import "../../../components/ha-switch"; -import "../../../components/ha-labels-picker"; import type { HaSwitch } from "../../../components/ha-switch"; import "../../../components/ha-textfield"; import { @@ -91,7 +91,6 @@ import { haStyle } from "../../../resources/styles"; import type { HomeAssistant } from "../../../types"; import { showToast } from "../../../util/toast"; import { showDeviceRegistryDetailDialog } from "../devices/device-registry-detail/show-dialog-device-registry-detail"; -import { autoCaseNoun } from "../../../common/translations/auto_case_noun"; const OVERRIDE_DEVICE_CLASSES = { cover: [ @@ -1552,9 +1551,6 @@ export class EntityRegistrySettingsEditor extends LitElement { li[divider] { border-bottom-color: var(--divider-color); } - ha-alert mwc-button { - width: max-content; - } .menu-item { border-radius: 4px; margin-top: 3px; diff --git a/src/panels/config/entities/entity-registry-settings.ts b/src/panels/config/entities/entity-registry-settings.ts index 89871ba7ac..8f4b55672a 100644 --- a/src/panels/config/entities/entity-registry-settings.ts +++ b/src/panels/config/entities/entity-registry-settings.ts @@ -1,11 +1,10 @@ -import "@material/mwc-button/mwc-button"; - import type { HassEntity } from "home-assistant-js-websocket"; import type { CSSResultGroup, PropertyValues } from "lit"; import { css, html, LitElement } from "lit"; import { customElement, property, query, state } from "lit/decorators"; import { fireEvent } from "../../../common/dom/fire_event"; import "../../../components/ha-alert"; +import "../../../components/ha-button"; import type { ConfigEntry } from "../../../data/config_entries"; import { deleteConfigEntry, @@ -29,8 +28,6 @@ import { showDeviceRegistryDetailDialog } from "../devices/device-registry-detai import "./entity-registry-settings-editor"; import type { EntityRegistrySettingsEditor } from "./entity-registry-settings-editor"; -const invalidDomainUpdate = false; - @customElement("entity-registry-settings") export class EntityRegistrySettings extends SubscribeMixin(LitElement) { @property({ attribute: false }) public hass!: HomeAssistant; @@ -88,27 +85,31 @@ export class EntityRegistrySettings extends SubscribeMixin(LitElement) { ${device?.disabled_by ? html`${this.hass!.localize( "ui.dialogs.entity_registry.editor.device_disabled" - )} ${this.hass!.localize( "ui.dialogs.entity_registry.editor.open_device_settings" )} - ` + ` : this.entry.disabled_by ? html`${this.hass!.localize( "ui.dialogs.entity_registry.editor.entity_disabled" )}${["user", "integration"].includes( this.entry.disabled_by! ) - ? html` ${this.hass!.localize( "ui.dialogs.entity_registry.editor.enable_entity" - )}` : ""}` : this.hass!.localize( @@ -130,20 +131,18 @@ export class EntityRegistrySettings extends SubscribeMixin(LitElement) { >
- ${this.hass.localize("ui.dialogs.entity_registry.editor.delete")} - - + + ${this.hass.localize("ui.dialogs.entity_registry.editor.update")} - +
`; } @@ -250,7 +249,7 @@ export class EntityRegistrySettings extends SubscribeMixin(LitElement) { .buttons { box-sizing: border-box; display: flex; - padding: 8px 16px 8px 24px; + padding: 8px; justify-content: space-between; padding-bottom: max(var(--safe-area-inset-bottom), 8px); background-color: var(--mdc-theme-surface, #fff); @@ -258,7 +257,7 @@ export class EntityRegistrySettings extends SubscribeMixin(LitElement) { position: sticky; bottom: 0px; } - ha-alert mwc-button { + ha-alert ha-button { width: max-content; } `, diff --git a/src/panels/config/entities/ha-config-entities.ts b/src/panels/config/entities/ha-config-entities.ts index 106a6fb8f3..e47984cd0a 100644 --- a/src/panels/config/entities/ha-config-entities.ts +++ b/src/panels/config/entities/ha-config-entities.ts @@ -1582,7 +1582,6 @@ ${rejected .header-btns { display: flex; } - .header-btns > mwc-button, .header-btns > ha-icon-button { margin: 8px; } diff --git a/src/panels/config/hardware/ha-config-hardware.ts b/src/panels/config/hardware/ha-config-hardware.ts index 0f5547723f..5d92b28d42 100644 --- a/src/panels/config/hardware/ha-config-hardware.ts +++ b/src/panels/config/hardware/ha-config-hardware.ts @@ -8,9 +8,9 @@ import memoizeOne from "memoize-one"; import { isComponentLoaded } from "../../../common/config/is_component_loaded"; import { round } from "../../../common/number/round"; import { blankBeforePercent } from "../../../common/translations/blank_before_percent"; -import "../../../components/buttons/ha-progress-button"; import "../../../components/chart/ha-chart-base"; import "../../../components/ha-alert"; +import "../../../components/ha-button"; import "../../../components/ha-card"; import "../../../components/ha-icon-button"; import "../../../components/ha-icon-next"; @@ -311,23 +311,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 +349,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/helpers/dialog-helper-detail.ts b/src/panels/config/helpers/dialog-helper-detail.ts index f60ca0b624..8e8e77f552 100644 --- a/src/panels/config/helpers/dialog-helper-detail.ts +++ b/src/panels/config/helpers/dialog-helper-detail.ts @@ -1,4 +1,3 @@ -import "@material/mwc-button/mwc-button"; import { mdiAlertOutline } from "@mdi/js"; import type { CSSResultGroup, TemplateResult } from "lit"; import { css, html, LitElement, nothing } from "lit"; @@ -12,6 +11,7 @@ import { stopPropagation } from "../../../common/dom/stop_propagation"; import { stringCompare } from "../../../common/string/compare"; import { createCloseHeading } from "../../../components/ha-dialog"; import "../../../components/ha-list"; +import "../../../components/ha-button"; import "../../../components/ha-list-item"; import "../../../components/ha-spinner"; import "../../../components/ha-svg-icon"; @@ -161,22 +161,23 @@ export class DialogHelperDetail extends LitElement { new: true, })} - ${this.hass!.localize("ui.panel.config.helpers.dialog.create")} - + ${this._params?.domain ? nothing - : html` ${this.hass!.localize("ui.common.back")} - `} + `} `; } else if (this._loading || this._helperFlows === undefined) { content = html``; diff --git a/src/panels/config/helpers/forms/ha-input_select-form.ts b/src/panels/config/helpers/forms/ha-input_select-form.ts index 554ff7d6df..19d8b77928 100644 --- a/src/panels/config/helpers/forms/ha-input_select-form.ts +++ b/src/panels/config/helpers/forms/ha-input_select-form.ts @@ -235,11 +235,6 @@ class HaInputSelectForm extends LitElement { cursor: default; background-color: var(--card-background-color); } - mwc-button { - margin-left: 8px; - margin-inline-start: 8px; - margin-inline-end: initial; - } ha-textfield { display: block; margin-bottom: 8px; diff --git a/src/panels/config/integrations/dialog-add-integration.ts b/src/panels/config/integrations/dialog-add-integration.ts index 5161016631..dec044c453 100644 --- a/src/panels/config/integrations/dialog-add-integration.ts +++ b/src/panels/config/integrations/dialog-add-integration.ts @@ -1,5 +1,3 @@ -import "@material/mwc-button"; - import type { IFuseOptions } from "fuse.js"; import Fuse from "fuse.js"; import type { HassConfig } from "home-assistant-js-websocket"; 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-flow-card.ts b/src/panels/config/integrations/ha-config-flow-card.ts index 499e6770a1..e717f81bd2 100644 --- a/src/panels/config/integrations/ha-config-flow-card.ts +++ b/src/panels/config/integrations/ha-config-flow-card.ts @@ -4,6 +4,9 @@ import { LitElement, css, html } from "lit"; import { customElement, property } from "lit/decorators"; import { classMap } from "lit/directives/class-map"; import { fireEvent } from "../../../common/dom/fire_event"; +import "../../../components/ha-button"; +import "../../../components/ha-button-menu"; +import "../../../components/ha-list-item"; import { ATTENTION_SOURCES, DISCOVERY_SOURCES, @@ -17,9 +20,6 @@ import type { HomeAssistant } from "../../../types"; import { documentationUrl } from "../../../util/documentation-url"; import type { DataEntryFlowProgressExtended } from "./ha-config-integrations"; import "./ha-integration-action-card"; -import "../../../components/ha-button-menu"; -import "../../../components/ha-button"; -import "../../../components/ha-list-item"; @customElement("ha-config-flow-card") export class HaConfigFlowCard extends LitElement { @@ -41,24 +41,25 @@ export class HaConfigFlowCard extends LitElement { .domain=${this.flow.handler} .label=${this.flow.localized_title} > + ${DISCOVERY_SOURCES.includes(this.flow.context.source) && + this.flow.context.unique_id + ? html`${this.hass.localize( + "ui.panel.config.integrations.ignore.ignore" + )}` + : ""} + ${this.hass.localize( attention ? "ui.panel.config.integrations.reconfigure" : "ui.common.add" )} - > - ${DISCOVERY_SOURCES.includes(this.flow.context.source) && - this.flow.context.unique_id - ? html`` - : ""} + ${this.flow.context.configuration_url || this.manifest ? html` ${canAddDevice ? html` - + ${this.hass.localize( "ui.panel.config.integrations.integration_page.add_device" )} @@ -531,8 +531,7 @@ class HaConfigIntegrationPage extends SubscribeMixin(LitElement) { ` : nothing} ${this._manifest?.integration_type @@ -546,13 +545,12 @@ class HaConfigIntegrationPage extends SubscribeMixin(LitElement) { ${Array.from(supportedSubentryTypes).map( (flowType) => html` - + ${this.hass.localize( `component.${this.domain}.config_subentries.${flowType}.initiate_flow.user` )} @@ -592,11 +592,13 @@ class HaConfigIntegrationPage extends SubscribeMixin(LitElement) { ${flow.localized_title} + > + ${this.hass.localize("ui.common.add")} + ` )} @@ -630,9 +632,9 @@ class HaConfigIntegrationPage extends SubscribeMixin(LitElement) { > ${this.hass.localize( `ui.panel.config.integrations.${ attention ? "reconfigure" : "configure" @@ -1055,15 +1057,9 @@ class HaConfigIntegrationPage extends SubscribeMixin(LitElement) { .discovered { --md-list-container-color: rgba(var(--rgb-success-color), 0.2); } - .discovered ha-button { - --mdc-theme-primary: var(--success-color); - } .attention { --md-list-container-color: rgba(var(--rgb-warning-color), 0.2); } - .attention ha-button { - --mdc-theme-primary: var(--warning-color); - } ha-md-list-item { --md-list-item-top-space: 4px; --md-list-item-bottom-space: 4px; diff --git a/src/panels/config/integrations/ha-config-integrations-dashboard.ts b/src/panels/config/integrations/ha-config-integrations-dashboard.ts index f3a8e1eb4a..016592e2a7 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"; @@ -485,12 +486,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} @@ -601,13 +605,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 @@ -630,13 +637,19 @@ class HaConfigIntegrationsDashboard extends KeyboardShortcutMixin( "ui.panel.config.integrations.no_integrations" )}

- + + ${this.hass.localize( "ui.panel.config.integrations.add_integration" )} - > + ` : ""} @@ -1038,7 +1051,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/ha-integration-card.ts b/src/panels/config/integrations/ha-integration-card.ts index 82d30ee3c1..6bd63ca2cc 100644 --- a/src/panels/config/integrations/ha-integration-card.ts +++ b/src/panels/config/integrations/ha-integration-card.ts @@ -4,6 +4,7 @@ import { LitElement, css, html, nothing } from "lit"; import { customElement, property } from "lit/decorators"; import { classMap } from "lit/directives/class-map"; import memoizeOne from "memoize-one"; +import { PROTOCOL_INTEGRATIONS } from "../../../common/integrations/protocolIntegrationPicked"; import { computeRTL } from "../../../common/util/compute_rtl"; import "../../../components/ha-button"; import "../../../components/ha-card"; @@ -23,7 +24,6 @@ import { haStyle } from "../../../resources/styles"; import type { HomeAssistant } from "../../../types"; import type { ConfigEntryExtended } from "./ha-config-integrations"; import "./ha-integration-header"; -import { PROTOCOL_INTEGRATIONS } from "../../../common/integrations/protocolIntegrationPicked"; @customElement("ha-integration-card") export class HaIntegrationCard extends LitElement { @@ -120,7 +120,7 @@ export class HaIntegrationCard extends LitElement { ? `/config/devices/device/${devices[0].id}` : `/config/devices/dashboard?historyBack=1&domain=${this.domain}`} > - + ${this.hass.localize( `ui.panel.config.integrations.config_entry.${ services ? "services" : "devices" @@ -133,7 +133,7 @@ export class HaIntegrationCard extends LitElement { ? html` - + ${this.hass.localize( `ui.panel.config.integrations.config_entry.entities`, { count: entitiesCount } @@ -144,7 +144,7 @@ export class HaIntegrationCard extends LitElement { ? html` - + ${this.hass.localize( `ui.panel.config.integrations.config_entry.entries`, { diff --git a/src/panels/config/integrations/integration-panels/bluetooth/bluetooth-config-dashboard.ts b/src/panels/config/integrations/integration-panels/bluetooth/bluetooth-config-dashboard.ts index 4b9fe01df5..8bdc125cab 100644 --- a/src/panels/config/integrations/integration-panels/bluetooth/bluetooth-config-dashboard.ts +++ b/src/panels/config/integrations/integration-panels/bluetooth/bluetooth-config-dashboard.ts @@ -99,20 +99,20 @@ export class BluetoothConfigDashboard extends LitElement {

- - ${this.hass.localize( - "ui.panel.config.bluetooth.advertisement_monitor" - )} - - - ${this.hass.localize( - "ui.panel.config.bluetooth.visualization" - )} - + + ${this.hass.localize("ui.panel.config.bluetooth.visualization")} +
- - ${this.hass.localize( - "ui.panel.config.bluetooth.connection_monitor" - )} - + ${this.hass.localize( + "ui.panel.config.bluetooth.connection_monitor" + )} +
@@ -217,7 +218,7 @@ export class BluetoothConfigDashboard extends LitElement { } .card-actions { display: flex; - justify-content: space-between; + justify-content: flex-end; } `, ]; diff --git a/src/panels/config/integrations/integration-panels/bluetooth/dialog-bluetooth-device-info.ts b/src/panels/config/integrations/integration-panels/bluetooth/dialog-bluetooth-device-info.ts index 71ee7224c2..91796067de 100644 --- a/src/panels/config/integrations/integration-panels/bluetooth/dialog-bluetooth-device-info.ts +++ b/src/panels/config/integrations/integration-panels/bluetooth/dialog-bluetooth-device-info.ts @@ -2,13 +2,13 @@ import type { TemplateResult } from "lit"; import { html, LitElement, nothing } from "lit"; import { customElement, property, state } from "lit/decorators"; import { fireEvent } from "../../../../../common/dom/fire_event"; -import type { HassDialog } from "../../../../../dialogs/make-dialog-manager"; -import { createCloseHeading } from "../../../../../components/ha-dialog"; -import type { HomeAssistant } from "../../../../../types"; -import type { BluetoothDeviceInfoDialogParams } from "./show-dialog-bluetooth-device-info"; -import "../../../../../components/ha-button"; -import { showToast } from "../../../../../util/toast"; import { copyToClipboard } from "../../../../../common/util/copy-clipboard"; +import "../../../../../components/ha-button"; +import { createCloseHeading } from "../../../../../components/ha-dialog"; +import type { HassDialog } from "../../../../../dialogs/make-dialog-manager"; +import type { HomeAssistant } from "../../../../../types"; +import { showToast } from "../../../../../util/toast"; +import type { BluetoothDeviceInfoDialogParams } from "./show-dialog-bluetooth-device-info"; @customElement("dialog-bluetooth-device-info") class DialogBluetoothDeviceInfo extends LitElement implements HassDialog { @@ -117,7 +117,10 @@ class DialogBluetoothDeviceInfo extends LitElement implements HassDialog { - ${this.hass.localize( "ui.panel.config.bluetooth.copy_to_clipboard" )} - + ${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/mqtt/mqtt-subscribe-card.ts b/src/panels/config/integrations/integration-panels/mqtt/mqtt-subscribe-card.ts index 32026565cb..55e6382f31 100644 --- a/src/panels/config/integrations/integration-panels/mqtt/mqtt-subscribe-card.ts +++ b/src/panels/config/integrations/integration-panels/mqtt/mqtt-subscribe-card.ts @@ -1,9 +1,9 @@ -import "@material/mwc-button"; import type { TemplateResult } from "lit"; import { css, html, LitElement } from "lit"; import { customElement, property, state } from "lit/decorators"; import { formatTime } from "../../../../../common/datetime/format_time"; import "../../../../../components/ha-card"; +import "../../../../../components/ha-button"; import "../../../../../components/ha-select"; import "../../../../../components/ha-textfield"; import type { MQTTMessage } from "../../../../../data/mqtt"; @@ -100,7 +100,9 @@ class MqttSubscribeCard extends LitElement { (qos) => html`${qos}` )} - +
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/zeroconf/dialog-zeroconf-discovery-info.ts b/src/panels/config/integrations/integration-panels/zeroconf/dialog-zeroconf-discovery-info.ts index 9af8a21eb5..8fb1a985c1 100644 --- a/src/panels/config/integrations/integration-panels/zeroconf/dialog-zeroconf-discovery-info.ts +++ b/src/panels/config/integrations/integration-panels/zeroconf/dialog-zeroconf-discovery-info.ts @@ -2,13 +2,13 @@ import type { TemplateResult } from "lit"; import { html, LitElement, nothing } from "lit"; import { customElement, property, state } from "lit/decorators"; import { fireEvent } from "../../../../../common/dom/fire_event"; -import type { HassDialog } from "../../../../../dialogs/make-dialog-manager"; -import { createCloseHeading } from "../../../../../components/ha-dialog"; -import type { HomeAssistant } from "../../../../../types"; -import type { ZeroconfDiscoveryInfoDialogParams } from "./show-dialog-zeroconf-discovery-info"; -import "../../../../../components/ha-button"; -import { showToast } from "../../../../../util/toast"; import { copyToClipboard } from "../../../../../common/util/copy-clipboard"; +import "../../../../../components/ha-button"; +import { createCloseHeading } from "../../../../../components/ha-dialog"; +import type { HassDialog } from "../../../../../dialogs/make-dialog-manager"; +import type { HomeAssistant } from "../../../../../types"; +import { showToast } from "../../../../../util/toast"; +import type { ZeroconfDiscoveryInfoDialogParams } from "./show-dialog-zeroconf-discovery-info"; @customElement("dialog-zeroconf-device-info") class DialogZeroconfDiscoveryInfo extends LitElement implements HassDialog { @@ -95,7 +95,10 @@ class DialogZeroconfDiscoveryInfo extends LitElement implements HassDialog { - ${this.hass.localize( "ui.panel.config.zeroconf.copy_to_clipboard" )}

- ${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-add-group-page.ts b/src/panels/config/integrations/integration-panels/zha/zha-add-group-page.ts index ea9dc214ae..3a12f2789a 100644 --- a/src/panels/config/integrations/integration-panels/zha/zha-add-group-page.ts +++ b/src/panels/config/integrations/integration-panels/zha/zha-add-group-page.ts @@ -1,11 +1,10 @@ -import "@material/mwc-button"; import type { CSSResultGroup, PropertyValues } from "lit"; import { css, html, LitElement } from "lit"; import { customElement, property, state, query } 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-spinner"; +import "../../../../../components/ha-button"; import type { ZHADeviceEndpoint, ZHAGroup } from "../../../../../data/zha"; import { addGroup, fetchGroupableDevices } from "../../../../../data/zha"; import "../../../../../layouts/hass-subpage"; @@ -97,24 +96,17 @@ export class ZHAAddGroupPage extends LitElement {
- - ${this._processingAdd - ? html`` - : ""} ${this.hass!.localize( "ui.panel.config.zha.groups.create" - )}
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..fd90c1a1ac 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, @@ -13,6 +12,7 @@ import { css, html, LitElement, nothing } from "lit"; import { customElement, property, state } from "lit/decorators"; import "../../../../../components/buttons/ha-progress-button"; import "../../../../../components/ha-alert"; +import "../../../../../components/ha-button"; import "../../../../../components/ha-card"; import "../../../../../components/ha-fab"; import "../../../../../components/ha-form/ha-form"; @@ -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" )} - +
@@ -426,6 +427,11 @@ class ZHAConfigDashboard extends LitElement { max-width: 500px; } + ha-card .card-actions { + display: flex; + justify-content: flex-end; + } + .network-settings ha-settings-row { padding-left: 0; padding-right: 0; 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/zha/zha-groups-dashboard.ts b/src/panels/config/integrations/integration-panels/zha/zha-groups-dashboard.ts index bc4b9efa59..ddb91aaf91 100644 --- a/src/panels/config/integrations/integration-panels/zha/zha-groups-dashboard.ts +++ b/src/panels/config/integrations/integration-panels/zha/zha-groups-dashboard.ts @@ -1,4 +1,3 @@ -import "@material/mwc-button"; import { mdiPlus } from "@mdi/js"; import type { CSSResultGroup, PropertyValues, TemplateResult } from "lit"; import { css, html, LitElement } from "lit"; diff --git a/src/panels/config/integrations/integration-panels/zha/zha-network-visualization-page.ts b/src/panels/config/integrations/integration-panels/zha/zha-network-visualization-page.ts index 5a5481c837..d66293962f 100644 --- a/src/panels/config/integrations/integration-panels/zha/zha-network-visualization-page.ts +++ b/src/panels/config/integrations/integration-panels/zha/zha-network-visualization-page.ts @@ -1,4 +1,3 @@ -import "@material/mwc-button"; import { mdiRefresh } from "@mdi/js"; import type { CallbackDataParams, 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-update-firmware-node.ts b/src/panels/config/integrations/integration-panels/zwave_js/dialog-zwave_js-update-firmware-node.ts index 3076fcb32d..ca3d8a5d85 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 @@ -6,6 +6,7 @@ import { css, html, LitElement, nothing } from "lit"; import { customElement, property, state } from "lit/decorators"; import { fireEvent } from "../../../../../common/dom/fire_event"; import { computeDeviceNameDisplay } from "../../../../../common/entity/compute_device_name"; +import "../../../../../components/ha-button"; import { createCloseHeading } from "../../../../../components/ha-dialog"; import "../../../../../components/ha-file-upload"; import "../../../../../components/ha-form/ha-form"; @@ -36,7 +37,6 @@ import { } from "../../../../../dialogs/generic/show-dialog-box"; import { haStyleDialog } from "../../../../../resources/styles"; import type { HomeAssistant } from "../../../../../types"; -import "../../../../../components/ha-button"; import type { ZWaveJSUpdateFirmwareNodeDialogParams } from "./show-dialog-zwave_js-update-firmware-node"; const firmwareTargetSchema: HaFormSchema[] = [ @@ -161,9 +161,9 @@ class DialogZWaveJSUpdateFirmwareNode extends LitElement { ? nothing : html` ${this.hass.localize( "ui.panel.config.zwave_js.update_firmware.abort" diff --git a/src/panels/config/integrations/integration-panels/zwave_js/zwave_js-config-dashboard.ts b/src/panels/config/integrations/integration-panels/zwave_js/zwave_js-config-dashboard.ts index 085defbdfa..9a79a08dc7 100644 --- a/src/panels/config/integrations/integration-panels/zwave_js/zwave_js-config-dashboard.ts +++ b/src/panels/config/integrations/integration-panels/zwave_js/zwave_js-config-dashboard.ts @@ -207,29 +207,27 @@ class ZWaveJSConfigDashboard extends SubscribeMixin(LitElement) {
- - - ${this.hass.localize("ui.panel.config.devices.caption")} - - - + - - ${this.hass.localize("ui.panel.config.entities.caption")} - - + ${this.hass.localize("ui.panel.config.entities.caption")} + ${this._provisioningEntries?.length - ? html` - ${this.hass.localize( - "ui.panel.config.zwave_js.dashboard.provisioned_devices" - )} - ` + > + ${this.hass.localize( + "ui.panel.config.zwave_js.dashboard.provisioned_devices" + )} + ` : nothing}
@@ -410,6 +408,7 @@ class ZWaveJSConfigDashboard extends SubscribeMixin(LitElement) {
@@ -490,15 +490,19 @@ class ZWaveJSConfigDashboard extends SubscribeMixin(LitElement) { "ui.panel.config.zwave_js.dashboard.nvm_backup.restoring" )} ${this._restoreProgress}%` - : html` + : html` ${this.hass.localize( "ui.panel.config.zwave_js.dashboard.nvm_backup.download_backup" )}
${this.hass.localize( @@ -515,8 +519,9 @@ class ZWaveJSConfigDashboard extends SubscribeMixin(LitElement) { />
${this.hass.localize( "ui.panel.config.zwave_js.dashboard.nvm_backup.migrate" @@ -963,8 +968,8 @@ class ZWaveJSConfigDashboard extends SubscribeMixin(LitElement) { } .upload-button { - display: inline-block; position: relative; + display: flex; } .upload-button ha-button { diff --git a/src/panels/config/integrations/integration-panels/zwave_js/zwave_js-node-config.ts b/src/panels/config/integrations/integration-panels/zwave_js/zwave_js-node-config.ts index f7afb04bba..771abd7fab 100644 --- a/src/panels/config/integrations/integration-panels/zwave_js/zwave_js-node-config.ts +++ b/src/panels/config/integrations/integration-panels/zwave_js/zwave_js-node-config.ts @@ -1,5 +1,3 @@ -import "@material/mwc-button/mwc-button"; - import { mdiCheckCircle, mdiCircle, diff --git a/src/panels/config/integrations/integration-panels/zwave_js/zwave_js-node-installer.ts b/src/panels/config/integrations/integration-panels/zwave_js/zwave_js-node-installer.ts index 9cff05bae1..48950d4565 100644 --- a/src/panels/config/integrations/integration-panels/zwave_js/zwave_js-node-installer.ts +++ b/src/panels/config/integrations/integration-panels/zwave_js/zwave_js-node-installer.ts @@ -1,5 +1,3 @@ -import "@material/mwc-button/mwc-button"; - import type { CSSResultGroup, PropertyValues, TemplateResult } from "lit"; import { LitElement, css, html, nothing } from "lit"; import { customElement, property, state } from "lit/decorators"; diff --git a/src/panels/config/labels/dialog-label-detail.ts b/src/panels/config/labels/dialog-label-detail.ts index d511fb937f..916d99f45d 100644 --- a/src/panels/config/labels/dialog-label-detail.ts +++ b/src/panels/config/labels/dialog-label-detail.ts @@ -1,9 +1,9 @@ -import "@material/mwc-button"; 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-alert"; +import "../../../components/ha-button"; import "../../../components/ha-color-picker"; import { createCloseHeading } from "../../../components/ha-dialog"; import "../../../components/ha-icon-picker"; @@ -133,17 +133,18 @@ class DialogLabelDetail
${this._params.entry && this._params.removeEntry ? html` - ${this.hass!.localize("ui.panel.config.labels.detail.delete")} - + ` : nothing} - + `; } diff --git a/src/panels/config/logs/ha-config-logs.ts b/src/panels/config/logs/ha-config-logs.ts index a76522fced..03e2d62fdd 100644 --- a/src/panels/config/logs/ha-config-logs.ts +++ b/src/panels/config/logs/ha-config-logs.ts @@ -117,16 +117,11 @@ export class HaConfigLogs extends LitElement { ${isComponentLoaded(this.hass, "hassio") ? html` - + + ${this._logProviders.find( (p) => p.key === this._selectedLogProvider )!.name} - > - ${this._logProviders.map( (provider) => html` @@ -255,15 +250,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/logs/system-log-card.ts b/src/panels/config/logs/system-log-card.ts index 0cd7215010..6d163b89b5 100644 --- a/src/panels/config/logs/system-log-card.ts +++ b/src/panels/config/logs/system-log-card.ts @@ -6,7 +6,6 @@ import { isComponentLoaded } from "../../../common/config/is_component_loaded"; import { fireEvent } from "../../../common/dom/fire_event"; import type { LocalizeFunc } from "../../../common/translations/localize"; import "../../../components/buttons/ha-call-service-button"; -import "../../../components/buttons/ha-progress-button"; import "../../../components/ha-button-menu"; import "../../../components/ha-card"; import "../../../components/ha-icon-button"; diff --git a/src/panels/config/lovelace/dashboards/dialog-lovelace-dashboard-detail.ts b/src/panels/config/lovelace/dashboards/dialog-lovelace-dashboard-detail.ts index 633c430892..f633253d00 100644 --- a/src/panels/config/lovelace/dashboards/dialog-lovelace-dashboard-detail.ts +++ b/src/panels/config/lovelace/dashboards/dialog-lovelace-dashboard-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 { fireEvent } from "../../../../common/dom/fire_event"; import { slugify } from "../../../../common/string/slugify"; import { createCloseHeading } from "../../../../components/ha-dialog"; import "../../../../components/ha-form/ha-form"; +import "../../../../components/ha-button"; import type { SchemaUnion } from "../../../../components/ha-form/types"; import type { LovelaceDashboard, @@ -104,20 +104,22 @@ export class DialogLovelaceDashboardDetail extends LitElement { ? html` ${this._params.dashboard?.id ? html` - ${this.hass.localize( "ui.panel.config.lovelace.dashboards.detail.delete" )} - + ` : ""} - + ` : ""} - + `; } diff --git a/src/panels/config/lovelace/dashboards/ha-config-lovelace-dashboards.ts b/src/panels/config/lovelace/dashboards/ha-config-lovelace-dashboards.ts index 1dce7fa90f..4fa4da04c2 100644 --- a/src/panels/config/lovelace/dashboards/ha-config-lovelace-dashboards.ts +++ b/src/panels/config/lovelace/dashboards/ha-config-lovelace-dashboards.ts @@ -22,6 +22,7 @@ import type { } from "../../../../components/data-table/ha-data-table"; import "../../../../components/ha-fab"; import "../../../../components/ha-icon"; +import "../../../../components/ha-button"; import "../../../../components/ha-icon-button"; import "../../../../components/ha-md-button-menu"; import "../../../../components/ha-md-list-item"; @@ -237,12 +238,13 @@ export class HaConfigLovelaceDashboards extends LitElement { > ` : html` - ${this.hass.localize( "ui.panel.config.lovelace.dashboards.picker.open" - )} `, }; 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..b7ba8a3467 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..dcc2f89e1f 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/person/dialog-person-detail.ts b/src/panels/config/person/dialog-person-detail.ts index b75c1106f4..a3d6a9afcd 100644 --- a/src/panels/config/person/dialog-person-detail.ts +++ b/src/panels/config/person/dialog-person-detail.ts @@ -236,7 +236,8 @@ class DialogPersonDetail extends LitElement implements HassDialog { ? html` ` : nothing} + + ${this.hass!.localize("ui.common.cancel")} + ${this._params.entry - ? this.hass!.localize("ui.panel.config.person.detail.update") + ? this.hass!.localize("ui.common.save") : this.hass!.localize("ui.panel.config.person.detail.create")} diff --git a/src/panels/config/person/ha-config-person.ts b/src/panels/config/person/ha-config-person.ts index 57fa33ac89..f669c7c8ef 100644 --- a/src/panels/config/person/ha-config-person.ts +++ b/src/panels/config/person/ha-config-person.ts @@ -1,8 +1,8 @@ import { mdiPlus } from "@mdi/js"; - import { css, html, LitElement, nothing } from "lit"; import { customElement, property, state } from "lit/decorators"; import { stringCompare } from "../../../common/string/compare"; +import "../../../components/ha-button"; import "../../../components/ha-card"; import "../../../components/ha-fab"; import "../../../components/ha-list"; @@ -117,10 +117,15 @@ export class HaConfigPerson extends LitElement { ${hass.localize( "ui.panel.config.person.no_persons_created_yet" )} - + + ${hass.localize( "ui.panel.config.person.create_person" - )} ` diff --git a/src/panels/config/repairs/dialog-integration-startup.ts b/src/panels/config/repairs/dialog-integration-startup.ts index 62996283f5..95a4c17849 100644 --- a/src/panels/config/repairs/dialog-integration-startup.ts +++ b/src/panels/config/repairs/dialog-integration-startup.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"; diff --git a/src/panels/config/repairs/dialog-repairs-issue.ts b/src/panels/config/repairs/dialog-repairs-issue.ts index 179d3ac62a..2f8eae0db5 100644 --- a/src/panels/config/repairs/dialog-repairs-issue.ts +++ b/src/panels/config/repairs/dialog-repairs-issue.ts @@ -1,4 +1,4 @@ -import { mdiClose } from "@mdi/js"; +import { mdiClose, mdiOpenInNew } from "@mdi/js"; import type { CSSResultGroup } from "lit"; import { css, html, LitElement, nothing } from "lit"; import { customElement, property, state, query } from "lit/decorators"; @@ -8,6 +8,7 @@ import "../../../components/ha-alert"; import "../../../components/ha-md-dialog"; import type { HaMdDialog } from "../../../components/ha-md-dialog"; import "../../../components/ha-button"; +import "../../../components/ha-svg-icon"; import "../../../components/ha-dialog-header"; import "./dialog-repairs-issue-subtitle"; import "../../../components/ha-markdown"; @@ -122,14 +123,15 @@ class DialogRepairsIssue extends LitElement { : ""}
- + ${this._issue!.ignored ? this.hass!.localize("ui.panel.config.repairs.dialog.unignore") : this.hass!.localize("ui.panel.config.repairs.dialog.ignore")} ${this._issue.learn_more_url ? html` - - - ${this.hass!.localize( - "ui.panel.config.repairs.dialog.learn" - )} - - + ${this.hass!.localize("ui.panel.config.repairs.dialog.learn")} + + ` : ""}
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/scene/ha-scene-dashboard.ts b/src/panels/config/scene/ha-scene-dashboard.ts index de91a9f66d..8390a2891c 100644 --- a/src/panels/config/scene/ha-scene-dashboard.ts +++ b/src/panels/config/scene/ha-scene-dashboard.ts @@ -9,6 +9,7 @@ import { mdiHelpCircle, mdiInformationOutline, mdiMenuDown, + mdiOpenInNew, mdiPalette, mdiPencilOff, mdiPlay, @@ -780,15 +781,16 @@ class HaSceneDashboard extends SubscribeMixin(LitElement) {

${this.hass.localize("ui.panel.config.scene.picker.empty_text")}

- - - ${this.hass.localize("ui.panel.config.common.learn_more")} - - + ${this.hass.localize("ui.panel.config.common.learn_more")} + + ` : nothing} @@ -1201,6 +1203,9 @@ ${rejected --mdc-icon-size: 80px; max-width: 500px; } + .empty ha-button { + --mdc-icon-size: 24px; + } .empty h1 { font-size: var(--ha-font-size-3xl); } diff --git a/src/panels/config/scene/ha-scene-editor.ts b/src/panels/config/scene/ha-scene-editor.ts index f0d66cef4f..294456eff6 100644 --- a/src/panels/config/scene/ha-scene-editor.ts +++ b/src/panels/config/scene/ha-scene-editor.ts @@ -363,7 +363,11 @@ export class HaSceneEditor extends PreventUnsavedMixin( : mdiEye} > - + ${this.hass.localize( `ui.panel.config.scene.editor.${this._mode === "live" ? "switch_to_review_mode" : "live_edit"}` )} @@ -1260,10 +1264,6 @@ export class HaSceneEditor extends PreventUnsavedMixin( display: block; margin-bottom: 24px; } - ha-button { - white-space: nowrap; - --mdc-theme-primary: var(--primary-color); - } ha-fab.dirty { bottom: 0; } diff --git a/src/panels/config/script/blueprint-script-editor.ts b/src/panels/config/script/blueprint-script-editor.ts index 5689d74648..acf7b15de5 100644 --- a/src/panels/config/script/blueprint-script-editor.ts +++ b/src/panels/config/script/blueprint-script-editor.ts @@ -1,4 +1,3 @@ -import "@material/mwc-button/mwc-button"; import { html, nothing } from "lit"; import { customElement, property } from "lit/decorators"; import "../../../components/ha-markdown"; diff --git a/src/panels/config/script/ha-script-editor.ts b/src/panels/config/script/ha-script-editor.ts index af68900fde..d4de309046 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-fields.ts b/src/panels/config/script/ha-script-fields.ts index 08d30cb971..7e8ed93bc7 100644 --- a/src/panels/config/script/ha-script-fields.ts +++ b/src/panels/config/script/ha-script-fields.ts @@ -1,4 +1,3 @@ -import "@material/mwc-button"; import { mdiPlus } from "@mdi/js"; import type { PropertyValues } from "lit"; import { LitElement, css, html, nothing } from "lit"; @@ -47,14 +46,13 @@ export default class HaScriptFields extends LitElement { ` : nothing} - + + ${this.hass.localize("ui.panel.config.script.editor.field.add_field")} `; } diff --git a/src/panels/config/script/ha-script-picker.ts b/src/panels/config/script/ha-script-picker.ts index 1c54655e4d..46d6330f29 100644 --- a/src/panels/config/script/ha-script-picker.ts +++ b/src/panels/config/script/ha-script-picker.ts @@ -9,6 +9,7 @@ import { mdiHelpCircle, mdiInformationOutline, mdiMenuDown, + mdiOpenInNew, mdiPlay, mdiPlus, mdiScriptText, @@ -779,15 +780,16 @@ class HaScriptPicker extends SubscribeMixin(LitElement) { "ui.panel.config.script.picker.empty_text" )}

- - - ${this.hass.localize("ui.panel.config.common.learn_more")} - - + ${this.hass.localize("ui.panel.config.common.learn_more")} + + ` : nothing} ${!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/script/manual-script-editor.ts b/src/panels/config/script/manual-script-editor.ts index 2395e18b5b..f42ecb58aa 100644 --- a/src/panels/config/script/manual-script-editor.ts +++ b/src/panels/config/script/manual-script-editor.ts @@ -1,4 +1,3 @@ -import "@material/mwc-button/mwc-button"; import { mdiHelpCircle } from "@mdi/js"; import type { CSSResultGroup, PropertyValues } from "lit"; import { LitElement, css, html, nothing } from "lit"; 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 8548c3192e..598d13214f 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"; @@ -133,11 +134,14 @@ class HaConfigSectionStorage extends LitElement {
${this._hostInfo ? html`
- + ${this.hass.localize( "ui.panel.config.storage.datadisk.title" )} - +
` : nothing} @@ -163,14 +167,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" )} @@ -228,11 +233,11 @@ class HaConfigSectionStorage extends LitElement { `} ${this._mountsInfo !== null ? html`
- + ${this.hass.localize( "ui.panel.config.storage.network_mounts.add_title" )} - +
` : nothing} @@ -314,6 +319,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/tags/dialog-tag-detail.ts b/src/panels/config/tags/dialog-tag-detail.ts index d8448d6df8..a5613294f7 100644 --- a/src/panels/config/tags/dialog-tag-detail.ts +++ b/src/panels/config/tags/dialog-tag-detail.ts @@ -1,9 +1,9 @@ -import "@material/mwc-button"; 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-alert"; +import "../../../components/ha-button"; import { createCloseHeading } from "../../../components/ha-dialog"; import "../../../components/ha-qr-code"; import "../../../components/ha-switch"; @@ -134,17 +134,18 @@ class DialogTagDetail ${this._params.entry ? html` - ${this.hass!.localize("ui.panel.config.tag.detail.delete")} - + ` : nothing} - + ${this._params.openWrite && !this._params.entry - ? html`` + ` : ""} `; diff --git a/src/panels/config/users/dialog-add-user.ts b/src/panels/config/users/dialog-add-user.ts index 0e670498a8..831f96631e 100644 --- a/src/panels/config/users/dialog-add-user.ts +++ b/src/panels/config/users/dialog-add-user.ts @@ -190,24 +190,25 @@ export class DialogAddUser extends LitElement { ` : nothing} - ${this._loading - ? html` - - ` - : html` - - ${this.hass.localize("ui.panel.config.users.add_user.create")} - - `} + + + ${this.hass!.localize("ui.common.cancel")} + + + ${this.hass.localize("ui.panel.config.users.add_user.create")} + `; } 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/users/dialog-user-detail.ts b/src/panels/config/users/dialog-user-detail.ts index 3d5b079028..67374d2c73 100644 --- a/src/panels/config/users/dialog-user-detail.ts +++ b/src/panels/config/users/dialog-user-detail.ts @@ -219,28 +219,31 @@ class DialogUserDetail extends LitElement { : nothing} -
- - ${this.hass!.localize("ui.panel.config.users.editor.delete_user")} - -
- -
- - ${this.hass!.localize("ui.panel.config.users.editor.update_user")} - -
+ + ${this.hass!.localize("ui.panel.config.users.editor.delete_user")} + + + ${this.hass!.localize("ui.common.cancel")} + + + ${this.hass!.localize("ui.common.save")} + `; } diff --git a/src/panels/config/voice-assistants/assist-pref.ts b/src/panels/config/voice-assistants/assist-pref.ts index f6b14283be..4ce49e05b6 100644 --- a/src/panels/config/voice-assistants/assist-pref.ts +++ b/src/panels/config/voice-assistants/assist-pref.ts @@ -206,11 +206,16 @@ export class AssistPref extends LitElement { ` )} - + ${this.hass.localize( "ui.panel.config.voice_assistants.assistants.pipeline.add_assistant" )} - + @@ -230,30 +235,30 @@ export class AssistPref extends LitElement { >
- - - ${this.hass.localize( - "ui.panel.config.voice_assistants.assistants.pipeline.exposed_entities", - { - number: this.exposedEntities - ? this._exposedEntitiesCount(this.exposedEntities) - : 0, - } - )} - - + ${this.hass.localize( + "ui.panel.config.voice_assistants.assistants.pipeline.exposed_entities", + { + number: this.exposedEntities + ? this._exposedEntitiesCount(this.exposedEntities) + : 0, + } + )} + ${this._pipelineEntitiesCount > 0 ? html` - - - ${this.hass.localize( - "ui.panel.config.voice_assistants.assistants.pipeline.assist_devices", - { number: this._pipelineEntitiesCount } - )} - - + + ${this.hass.localize( + "ui.panel.config.voice_assistants.assistants.pipeline.assist_devices", + { number: this._pipelineEntitiesCount } + )} + ` : ""}
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-discover.ts b/src/panels/config/voice-assistants/cloud-discover.ts index 5ed735f805..13f323964f 100644 --- a/src/panels/config/voice-assistants/cloud-discover.ts +++ b/src/panels/config/voice-assistants/cloud-discover.ts @@ -81,31 +81,33 @@ export class CloudDiscover extends LitElement {
- + ${this.hass.localize( "ui.panel.config.voice_assistants.assistants.cloud.and_more" )} - - + +
${isComponentLoaded(this.hass, "cloud") ? html`
- - - ${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} diff --git a/src/panels/config/voice-assistants/cloud-google-pref.ts b/src/panels/config/voice-assistants/cloud-google-pref.ts index 9a91f585ae..a91bda61a9 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"; @@ -226,24 +226,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/dialog-expose-entity.ts b/src/panels/config/voice-assistants/dialog-expose-entity.ts index 05819a20ee..4e2c52d6b2 100644 --- a/src/panels/config/voice-assistants/dialog-expose-entity.ts +++ b/src/panels/config/voice-assistants/dialog-expose-entity.ts @@ -1,5 +1,4 @@ import "@lit-labs/virtualizer"; -import "@material/mwc-button"; import { mdiClose } from "@mdi/js"; import type { HassEntity } from "home-assistant-js-websocket"; import type { CSSResultGroup } from "lit"; @@ -12,6 +11,7 @@ import { computeStateName } from "../../../common/entity/compute_state_name"; import "../../../components/ha-check-list-item"; import "../../../components/search-input"; import "../../../components/ha-dialog"; +import "../../../components/ha-button"; import "../../../components/ha-dialog-header"; import "../../../components/ha-state-icon"; import "../../../components/ha-list"; @@ -95,7 +95,14 @@ class DialogExposeEntity extends LitElement { > - + ${this.hass!.localize("ui.common.cancel")} + + + `; } diff --git a/src/panels/config/voice-assistants/dialog-voice-settings.ts b/src/panels/config/voice-assistants/dialog-voice-settings.ts index 8113e155d7..9203f7a606 100644 --- a/src/panels/config/voice-assistants/dialog-voice-settings.ts +++ b/src/panels/config/voice-assistants/dialog-voice-settings.ts @@ -1,4 +1,3 @@ -import "@material/mwc-button/mwc-button"; import { mdiClose, mdiTuneVertical } from "@mdi/js"; import type { CSSResultGroup } from "lit"; import { css, html, LitElement, nothing } from "lit"; 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/config/zone/dialog-home-zone-detail.ts b/src/panels/config/zone/dialog-home-zone-detail.ts index d82eee00b6..9c962f3423 100644 --- a/src/panels/config/zone/dialog-home-zone-detail.ts +++ b/src/panels/config/zone/dialog-home-zone-detail.ts @@ -1,4 +1,3 @@ -import "@material/mwc-button"; import type { CSSResultGroup } from "lit"; import { css, html, LitElement, nothing } from "lit"; import { property, state } from "lit/decorators"; @@ -6,6 +5,7 @@ import memoizeOne from "memoize-one"; import { fireEvent } from "../../../common/dom/fire_event"; import { createCloseHeading } from "../../../components/ha-dialog"; import "../../../components/ha-form/ha-form"; +import "../../../components/ha-button"; import type { HomeZoneMutableParams } from "../../../data/zone"; import { haStyleDialog } from "../../../resources/styles"; import type { HomeAssistant } from "../../../types"; @@ -76,13 +76,20 @@ class DialogHomeZoneDetail extends LitElement { @value-changed=${this._valueChanged} >
- + ${this.hass!.localize("ui.common.cancel")} + + - ${this.hass!.localize("ui.panel.config.zone.detail.update")} - + ${this.hass!.localize("ui.common.save")} + `; } diff --git a/src/panels/config/zone/dialog-zone-detail.ts b/src/panels/config/zone/dialog-zone-detail.ts index 00e3698e1d..1e6cff1073 100644 --- a/src/panels/config/zone/dialog-zone-detail.ts +++ b/src/panels/config/zone/dialog-zone-detail.ts @@ -1,4 +1,3 @@ -import "@material/mwc-button"; import type { CSSResultGroup } from "lit"; 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 { addDistanceToCoord } from "../../../common/location/add_distance_to_coord"; import { createCloseHeading } from "../../../components/ha-dialog"; import "../../../components/ha-form/ha-form"; +import "../../../components/ha-button"; import type { SchemaUnion } from "../../../components/ha-form/types"; import type { ZoneMutableParams } from "../../../data/zone"; import { getZoneEditorInitData } from "../../../data/zone"; @@ -102,25 +102,33 @@ class DialogZoneDetail extends LitElement { ${this._params.entry ? html` - ${this.hass!.localize("ui.panel.config.zone.detail.delete")} - + ` : nothing} - + ${this.hass!.localize("ui.common.cancel")} + + ${this._params.entry - ? this.hass!.localize("ui.panel.config.zone.detail.update") + ? this.hass!.localize("ui.common.save") : this.hass!.localize("ui.panel.config.zone.detail.create")} - + `; } diff --git a/src/panels/config/zone/ha-config-zone.ts b/src/panels/config/zone/ha-config-zone.ts index fb733ddae4..5a88b4f32b 100644 --- a/src/panels/config/zone/ha-config-zone.ts +++ b/src/panels/config/zone/ha-config-zone.ts @@ -10,6 +10,7 @@ import { navigate } from "../../../common/navigate"; import { stringCompare } from "../../../common/string/compare"; import "../../../components/ha-card"; import "../../../components/ha-fab"; +import "../../../components/ha-button"; import "../../../components/ha-icon-button"; import "../../../components/ha-list"; import "../../../components/ha-list-item"; @@ -136,8 +137,8 @@ export class HaConfigZone extends SubscribeMixin(LitElement) {
${hass.localize("ui.panel.config.zone.no_zones_created_yet")}
- - ${hass.localize("ui.panel.config.zone.create_zone")} + ${hass.localize("ui.panel.config.zone.create_zone")}
` diff --git a/src/panels/developer-tools/action/developer-tools-action.ts b/src/panels/developer-tools/action/developer-tools-action.ts index d28f89c714..23760be263 100644 --- a/src/panels/developer-tools/action/developer-tools-action.ts +++ b/src/panels/developer-tools/action/developer-tools-action.ts @@ -170,7 +170,8 @@ class HaPanelDevAction extends LitElement {
- @@ -181,7 +182,7 @@ class HaPanelDevAction extends LitElement { : this.hass.localize( "ui.panel.developer-tools.tabs.actions.yaml_mode" )} - + ${!this._uiAvailable ? html`${this.hass.localize( @@ -213,7 +214,10 @@ class HaPanelDevAction extends LitElement { has-extra-actions .value=${this._response} > - ${this.hass.localize( "ui.panel.developer-tools.tabs.actions.copy_clipboard_template" )} ${this._yamlMode - ? html`${this.hass.localize( "ui.panel.developer-tools.tabs.actions.fill_example_data" - )}` : ""} diff --git a/src/panels/developer-tools/assist/developer-tools-assist.ts b/src/panels/developer-tools/assist/developer-tools-assist.ts index 7cf30d9905..b2ea1d322f 100644 --- a/src/panels/developer-tools/assist/developer-tools-assist.ts +++ b/src/panels/developer-tools/assist/developer-tools-assist.ts @@ -150,6 +150,7 @@ class HaPanelDevAssist extends SubscribeMixin(LitElement) {
@@ -163,7 +164,7 @@ class HaPanelDevAssist extends SubscribeMixin(LitElement) { ${this._results.length ? html`
- + ${this.hass.localize("ui.common.clear")} diff --git a/src/panels/developer-tools/event/developer-tools-event.ts b/src/panels/developer-tools/event/developer-tools-event.ts index a75ab05a85..920dbde4ac 100644 --- a/src/panels/developer-tools/event/developer-tools-event.ts +++ b/src/panels/developer-tools/event/developer-tools-event.ts @@ -79,7 +79,7 @@ class HaPanelDevEvent extends LitElement {
${this.hass.localize( "ui.panel.developer-tools.tabs.events.fire_event" @@ -171,7 +171,7 @@ class HaPanelDevEvent extends LitElement { max-width: 400px; } - mwc-button { + ha-button { margin-top: 8px; } diff --git a/src/panels/developer-tools/event/event-subscribe-card.ts b/src/panels/developer-tools/event/event-subscribe-card.ts index 32b2cb98d0..05fe111868 100644 --- a/src/panels/developer-tools/event/event-subscribe-card.ts +++ b/src/panels/developer-tools/event/event-subscribe-card.ts @@ -62,7 +62,7 @@ class EventSubscribeCard extends LitElement {
@@ -75,7 +75,7 @@ class EventSubscribeCard extends LitElement { )} 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/developer-tools/statistics/dialog-statistics-fix-units-changed.ts b/src/panels/developer-tools/statistics/dialog-statistics-fix-units-changed.ts index c5ab6b3d9f..e4ca0220d4 100644 --- a/src/panels/developer-tools/statistics/dialog-statistics-fix-units-changed.ts +++ b/src/panels/developer-tools/statistics/dialog-statistics-fix-units-changed.ts @@ -1,9 +1,9 @@ -import "@material/mwc-button/mwc-button"; import type { CSSResultGroup } from "lit"; import { html, LitElement, nothing } from "lit"; import { customElement, property, state } from "lit/decorators"; import { fireEvent } from "../../../common/dom/fire_event"; import "../../../components/ha-dialog"; +import "../../../components/ha-button"; import "../../../components/ha-formfield"; import "../../../components/ha-radio"; import { @@ -107,14 +107,18 @@ export class DialogStatisticsFixUnitsChanged extends LitElement { > - + + ${this.hass.localize("ui.common.close")} + + ${this.hass.localize( "ui.panel.developer-tools.tabs.statistics.fix_issue.fix" )} - - - ${this.hass.localize("ui.common.close")} - + `; } diff --git a/src/panels/developer-tools/statistics/dialog-statistics-fix.ts b/src/panels/developer-tools/statistics/dialog-statistics-fix.ts index 5a1a4e5e94..27e2c960f6 100644 --- a/src/panels/developer-tools/statistics/dialog-statistics-fix.ts +++ b/src/panels/developer-tools/statistics/dialog-statistics-fix.ts @@ -1,16 +1,16 @@ -import "@material/mwc-button/mwc-button"; import type { CSSResultGroup } from "lit"; import { html, LitElement, nothing } from "lit"; import { customElement, property, state } from "lit/decorators"; -import "../../../components/ha-spinner"; import { fireEvent } from "../../../common/dom/fire_event"; +import "../../../components/ha-button"; import "../../../components/ha-dialog"; +import "../../../components/ha-spinner"; import { clearStatistics, getStatisticLabel } from "../../../data/recorder"; import { haStyle, haStyleDialog } from "../../../resources/styles"; import type { HomeAssistant } from "../../../types"; import { documentationUrl } from "../../../util/documentation-url"; -import type { DialogStatisticsFixParams } from "./show-dialog-statistics-fix"; import { showAlertDialog } from "../../lovelace/custom-card-helpers"; +import type { DialogStatisticsFixParams } from "./show-dialog-statistics-fix"; @customElement("dialog-statistics-fix") export class DialogStatisticsFix extends LitElement { @@ -148,26 +148,25 @@ export class DialogStatisticsFix extends LitElement {

${issue.type !== "entity_not_recorded" - ? html` + ${this.hass.localize("ui.common.close")} + + - ${this._clearing - ? html`` - : nothing} ${this.hass.localize("ui.common.delete")} - - - ${this.hass.localize("ui.common.close")} - ` - : html` + ` + : html` ${this.hass.localize("ui.common.ok")} - `} + `} `; } diff --git a/src/panels/developer-tools/template/developer-tools-template.ts b/src/panels/developer-tools/template/developer-tools-template.ts index e43b12cdd7..5c876a186a 100644 --- a/src/panels/developer-tools/template/developer-tools-template.ts +++ b/src/panels/developer-tools/template/developer-tools-template.ts @@ -1,4 +1,3 @@ -import "@material/mwc-button/mwc-button"; import type { UnsubscribeFunc } from "home-assistant-js-websocket"; import type { CSSResultGroup } from "lit"; import { css, html, LitElement, nothing } from "lit"; @@ -7,6 +6,7 @@ import { classMap } from "lit/directives/class-map"; import { debounce } from "../../../common/util/debounce"; import "../../../components/ha-alert"; import "../../../components/ha-spinner"; +import "../../../components/ha-button"; import "../../../components/ha-code-editor"; import "../../../components/ha-card"; import type { RenderTemplateResult } from "../../../data/ws-templates"; @@ -149,14 +149,14 @@ class HaPanelDevTemplate extends LitElement { >
- + ${this.hass.localize( "ui.panel.developer-tools.tabs.templates.reset" )} - - + + ${this.hass.localize("ui.common.clear")} - +
diff --git a/src/panels/developer-tools/yaml_configuration/developer-yaml-config.ts b/src/panels/developer-tools/yaml_configuration/developer-yaml-config.ts index b74587916b..b2d70b2a93 100644 --- a/src/panels/developer-tools/yaml_configuration/developer-yaml-config.ts +++ b/src/panels/developer-tools/yaml_configuration/developer-yaml-config.ts @@ -1,16 +1,16 @@ -import "@material/mwc-button"; import type { CSSResultGroup, TemplateResult } from "lit"; import { css, html, LitElement, nothing } from "lit"; import { customElement, property, state } from "lit/decorators"; import { componentsWithService } from "../../../common/config/components_with_service"; +import { stringCompare } from "../../../common/string/compare"; import "../../../components/buttons/ha-call-service-button"; import "../../../components/ha-alert"; +import "../../../components/ha-button"; import "../../../components/ha-card"; import "../../../components/ha-spinner"; import type { CheckConfigResult } from "../../../data/core"; import { checkCoreConfig } from "../../../data/core"; import { domainToName } from "../../../data/integration"; -import { stringCompare } from "../../../common/string/compare"; import { showRestartDialog } from "../../../dialogs/restart/show-dialog-restart"; import { haStyle } from "../../../resources/styles"; import type { HomeAssistant, Route, TranslationDict } from "../../../types"; @@ -144,20 +144,21 @@ export class DeveloperYamlConfig extends LitElement { `}
- + ${this.hass.localize( "ui.panel.developer-tools.tabs.yaml.section.validation.check_config" )} - - + ${this.hass.localize( "ui.panel.developer-tools.tabs.yaml.section.server_management.restart" )} - +
`}
${this._step > 0 - ? html`${this.hass.localize("ui.panel.energy.setup.back")}${this.hass.localize("ui.panel.energy.setup.back")}` : html`
`} ${this._step < 4 - ? html`${this.hass.localize("ui.panel.energy.setup.next")}${this.hass.localize("ui.panel.energy.setup.next")}` - : html` + : html` ${this.hass.localize("ui.panel.energy.setup.done")} - `} + `}
`; } @@ -170,7 +170,7 @@ export class EnergySetupWizard extends LitElement implements LovelaceCard { max-width: 700px; margin: 0 auto; } - mwc-button { + ha-button { margin-top: 8px; } .buttons { diff --git a/src/panels/lovelace/cards/energy/hui-energy-compare-card.ts b/src/panels/lovelace/cards/energy/hui-energy-compare-card.ts index 359f388149..f71fddec29 100644 --- a/src/panels/lovelace/cards/energy/hui-energy-compare-card.ts +++ b/src/panels/lovelace/cards/energy/hui-energy-compare-card.ts @@ -1,7 +1,7 @@ import { differenceInDays, endOfDay } from "date-fns"; import type { UnsubscribeFunc } from "home-assistant-js-websocket"; import type { PropertyValues } from "lit"; -import { css, html, LitElement, nothing } from "lit"; +import { html, LitElement, nothing } from "lit"; import { customElement, property, state } from "lit/decorators"; import { formatDate } from "../../../../common/datetime/format_date"; import type { EnergyData } from "../../../../data/energy"; @@ -126,12 +126,6 @@ export class HuiEnergyCompareCard energyCollection.setCompare(false); energyCollection.refresh(); } - - static styles = css` - mwc-button { - width: max-content; - } - `; } declare global { 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 4cd05c99aa..6797a13635 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 { @@ -789,13 +789,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 fe21e26c71..5f89e76c35 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 { fireEvent } from "../../../common/dom/fire_event"; import { stateColorCss } from "../../../common/entity/state_color"; import { supportsFeature } from "../../../common/entity/supports-feature"; import "../../../components/chips/ha-assist-chip"; +import "../../../components/ha-button"; import "../../../components/ha-card"; import "../../../components/ha-state-icon"; import "../../../components/ha-textfield"; @@ -259,13 +260,15 @@ class HuiAlarmPanelCard extends LitElement implements LovelaceCard { : (["disarm"] as const) ).map( (stateAction) => html` - ${this._actionDisplay(stateAction)} - + ` )}
@@ -446,13 +449,9 @@ 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); - } `; } 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/cards/hui-recovery-mode-card.ts b/src/panels/lovelace/cards/hui-recovery-mode-card.ts index ed09372c20..46f0c9b5d0 100644 --- a/src/panels/lovelace/cards/hui-recovery-mode-card.ts +++ b/src/panels/lovelace/cards/hui-recovery-mode-card.ts @@ -1,4 +1,3 @@ -import "@material/mwc-button"; import type { TemplateResult } from "lit"; import { css, html, LitElement } from "lit"; import { customElement, property } from "lit/decorators"; diff --git a/src/panels/lovelace/cards/hui-starting-card.ts b/src/panels/lovelace/cards/hui-starting-card.ts index 6ae7f66286..3fdf0fb60c 100644 --- a/src/panels/lovelace/cards/hui-starting-card.ts +++ b/src/panels/lovelace/cards/hui-starting-card.ts @@ -1,4 +1,3 @@ -import "@material/mwc-button/mwc-button"; import { STATE_NOT_RUNNING } from "home-assistant-js-websocket"; import type { PropertyValues } from "lit"; import { css, html, LitElement, nothing } from "lit"; 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/components/hui-energy-period-selector.ts b/src/panels/lovelace/components/hui-energy-period-selector.ts index 22bf863e34..a3f3c48669 100644 --- a/src/panels/lovelace/components/hui-energy-period-selector.ts +++ b/src/panels/lovelace/components/hui-energy-period-selector.ts @@ -1,4 +1,3 @@ -import "@material/mwc-button/mwc-button"; import type { RequestSelectedDetail } from "@material/mwc-list/mwc-list-item"; import { mdiDotsVertical } from "@mdi/js"; import { @@ -34,6 +33,7 @@ import { } from "../../../common/datetime/format_date"; import { debounce } from "../../../common/util/debounce"; import "../../../components/ha-button-menu"; +import "../../../components/ha-button"; import "../../../components/ha-check-list-item"; import "../../../components/ha-date-range-picker"; import type { DateRangePickerRanges } from "../../../components/ha-date-range-picker"; @@ -205,11 +205,15 @@ export class HuiEnergyPeriodSelector extends SubscribeMixin(LitElement) {
${!this.narrow - ? html` + ? html` ${this.hass.localize( "ui.panel.lovelace.components.energy_period_selector.now" )} - ` + ` : nothing} @@ -478,17 +482,12 @@ export class HuiEnergyPeriodSelector extends SubscribeMixin(LitElement) { margin-inline-start: unset; margin-inline-end: initial; } - mwc-button { + ha-button { margin-left: 8px; margin-inline-start: 8px; margin-inline-end: initial; flex-shrink: 0; - --mdc-button-outline-color: currentColor; - --primary-color: currentColor; - --mdc-theme-primary: currentColor; - --mdc-theme-on-primary: currentColor; - --mdc-button-disabled-outline-color: var(--disabled-text-color); - --mdc-button-disabled-ink-color: var(--disabled-text-color); + --ha-button-theme-color: currentColor; } `; } 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/card-editor/hui-dialog-create-card.ts b/src/panels/lovelace/editor/card-editor/hui-dialog-create-card.ts index 46927da9c8..f99c35de48 100644 --- a/src/panels/lovelace/editor/card-editor/hui-dialog-create-card.ts +++ b/src/panels/lovelace/editor/card-editor/hui-dialog-create-card.ts @@ -6,6 +6,7 @@ import { cache } from "lit/directives/cache"; import { classMap } from "lit/directives/class-map"; import { ifDefined } from "lit/directives/if-defined"; import { fireEvent } from "../../../../common/dom/fire_event"; +import "../../../../components/ha-button"; import "../../../../components/ha-dialog"; import "../../../../components/ha-dialog-header"; import "../../../../components/sl-tab-group"; @@ -159,14 +160,14 @@ export class HuiCreateDialogCard )}
- + ${this.hass!.localize("ui.common.cancel")} - + ${this._selectedEntities.length ? html` - + ${this.hass!.localize("ui.common.continue")} - + ` : ""}
diff --git a/src/panels/lovelace/editor/card-editor/hui-dialog-delete-card.ts b/src/panels/lovelace/editor/card-editor/hui-dialog-delete-card.ts index 467e5bc33b..9c2ddc1777 100644 --- a/src/panels/lovelace/editor/card-editor/hui-dialog-delete-card.ts +++ b/src/panels/lovelace/editor/card-editor/hui-dialog-delete-card.ts @@ -7,6 +7,7 @@ import type { LovelaceCardConfig } from "../../../../data/lovelace/config/card"; import { haStyleDialog } from "../../../../resources/styles"; import type { HomeAssistant } from "../../../../types"; import "../../cards/hui-card"; +import "../../../../components/ha-button"; import type { DeleteCardDialogParams } from "./show-delete-card-dialog"; @customElement("hui-dialog-delete-card") @@ -55,16 +56,17 @@ export class HuiDialogDeleteCard extends LitElement { ` : ""} - ${this.hass!.localize("ui.common.cancel")} - - + + ${this.hass!.localize("ui.common.delete")} - + `; } diff --git a/src/panels/lovelace/editor/card-editor/hui-dialog-edit-card.ts b/src/panels/lovelace/editor/card-editor/hui-dialog-edit-card.ts index a72abfec65..c2f17fdc33 100644 --- a/src/panels/lovelace/editor/card-editor/hui-dialog-edit-card.ts +++ b/src/panels/lovelace/editor/card-editor/hui-dialog-edit-card.ts @@ -8,6 +8,7 @@ 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-button"; import "../../../../components/ha-dialog"; import "../../../../components/ha-dialog-header"; import "../../../../components/ha-icon-button"; @@ -223,39 +224,38 @@ export class HuiDialogEditCard ${this._cardConfig !== undefined ? html` - ${this.hass!.localize( !this._cardEditorEl || this._GUImode ? "ui.panel.lovelace.editor.edit_card.show_code_editor" : "ui.panel.lovelace.editor.edit_card.show_visual_editor" )} - + ` : ""}
- + ${this.hass!.localize("ui.common.cancel")} - + ${this._cardConfig !== undefined && this._dirty ? html` - - ${this._saving - ? html` - - ` - : this.hass!.localize("ui.common.save")} - + ${this.hass!.localize("ui.common.save")} + ` : ``}
@@ -502,6 +502,11 @@ export class HuiDialogEditCard color: inherit; text-decoration: none; } + + [slot="primaryAction"] { + gap: 8px; + display: flex; + } `, ]; } diff --git a/src/panels/lovelace/editor/card-editor/hui-dialog-suggest-card.ts b/src/panels/lovelace/editor/card-editor/hui-dialog-suggest-card.ts index 664eaf6f29..aa3c50e90c 100644 --- a/src/panels/lovelace/editor/card-editor/hui-dialog-suggest-card.ts +++ b/src/panels/lovelace/editor/card-editor/hui-dialog-suggest-card.ts @@ -3,10 +3,11 @@ import type { CSSResultGroup } from "lit"; 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-button"; import "../../../../components/ha-yaml-editor"; -import type { HaYamlEditor } from "../../../../components/ha-yaml-editor"; import "../../../../components/ha-spinner"; +import type { HaYamlEditor } from "../../../../components/ha-yaml-editor"; import type { LovelaceCardConfig } from "../../../../data/lovelace/config/card"; import type { LovelaceSectionConfig } from "../../../../data/lovelace/config/section"; import type { LovelaceConfig } from "../../../../data/lovelace/config/types"; @@ -14,11 +15,11 @@ import { isStrategyView } from "../../../../data/lovelace/config/view"; import { haStyleDialog } from "../../../../resources/styles"; import type { HomeAssistant } from "../../../../types"; import { showSaveSuccessToast } from "../../../../util/toast-saved-success"; +import "../../cards/hui-card"; import "../../sections/hui-section"; import { addCards, addSection } from "../config-util"; import type { LovelaceContainerPath } from "../lovelace-path"; import { parseLovelaceContainerPath } from "../lovelace-path"; -import "../../cards/hui-card"; import { showCreateCardDialog } from "./show-create-card-dialog"; import type { SuggestCardDialogParams } from "./show-suggest-card-dialog"; @@ -124,27 +125,32 @@ export class HuiDialogSuggestCard extends LitElement { ` : nothing} - ${this._params.yaml ? this.hass!.localize("ui.common.close") : this.hass!.localize("ui.common.cancel")} - + ${!this._params.yaml ? html` ${!(this._sectionConfig && this._viewSupportsSection) ? html` - + ${this.hass!.localize( "ui.panel.lovelace.editor.suggest_card.create_own" )} - + ` : nothing} - + ` : nothing} diff --git a/src/panels/lovelace/editor/conditions/ha-card-conditions-editor.ts b/src/panels/lovelace/editor/conditions/ha-card-conditions-editor.ts index 2f07ff3a02..e9480ade06 100644 --- a/src/panels/lovelace/editor/conditions/ha-card-conditions-editor.ts +++ b/src/panels/lovelace/editor/conditions/ha-card-conditions-editor.ts @@ -93,14 +93,11 @@ export class HaCardConditionsEditor extends LitElement { fixed @closed=${stopPropagation} > - + + ${this.hass.localize( "ui.panel.lovelace.editor.condition-editor.add" )} - > - ${UI_CONDITION.map( (condition) => html` diff --git a/src/panels/lovelace/editor/config-elements/hui-conditional-card-editor.ts b/src/panels/lovelace/editor/config-elements/hui-conditional-card-editor.ts index c2a78db0b3..862932c62b 100644 --- a/src/panels/lovelace/editor/config-elements/hui-conditional-card-editor.ts +++ b/src/panels/lovelace/editor/config-elements/hui-conditional-card-editor.ts @@ -115,10 +115,13 @@ export class HuiConditionalCardEditor .path=${mdiContentCopy} @click=${this._handleCopyCard} > - ${this.hass!.localize( "ui.panel.lovelace.editor.card.conditional.change_type" - )} - + ${this.hass!.localize("ui.common.delete")} - + ${this.hass!.localize("ui.common.cancel")} @@ -231,10 +240,6 @@ class DialogDashboardStrategyEditor extends LitElement { --dialog-content-padding: 8px; } } - - .danger { - --mdc-theme-primary: var(--error-color); - } `, ]; } diff --git a/src/panels/lovelace/editor/header-footer-editor/hui-dialog-create-headerfooter.ts b/src/panels/lovelace/editor/header-footer-editor/hui-dialog-create-headerfooter.ts index 1560ce05e8..95de539e64 100644 --- a/src/panels/lovelace/editor/header-footer-editor/hui-dialog-create-headerfooter.ts +++ b/src/panels/lovelace/editor/header-footer-editor/hui-dialog-create-headerfooter.ts @@ -1,8 +1,8 @@ -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 "../../../../components/ha-button"; import { createCloseHeading } from "../../../../components/ha-dialog"; import type { HassDialog } from "../../../../dialogs/make-dialog-manager"; import { haStyleDialog } from "../../../../resources/styles"; @@ -80,9 +80,9 @@ export class HuiCreateDialogHeaderFooter )}
- + ${this.hass!.localize("ui.common.cancel")} - +
`; 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/section-editor/hui-dialog-edit-section.ts b/src/panels/lovelace/editor/section-editor/hui-dialog-edit-section.ts index 06f2021406..65095672b6 100644 --- a/src/panels/lovelace/editor/section-editor/hui-dialog-edit-section.ts +++ b/src/panels/lovelace/editor/section-editor/hui-dialog-edit-section.ts @@ -187,7 +187,11 @@ export class HuiDialogEditSection : nothing} ${content} - + ${this.hass!.localize("ui.common.cancel")} 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/editor/view-editor/hui-dialog-edit-view.ts b/src/panels/lovelace/editor/view-editor/hui-dialog-edit-view.ts index 77eedca8a5..b314afc0fa 100644 --- a/src/panels/lovelace/editor/view-editor/hui-dialog-edit-view.ts +++ b/src/panels/lovelace/editor/view-editor/hui-dialog-edit-view.ts @@ -294,7 +294,8 @@ export class HuiDialogEditView extends LitElement { ${this._params.viewIndex !== undefined ? html` @@ -656,7 +657,7 @@ export class HuiDialogEditView extends LitElement { width: 100%; justify-content: center; } - ha-button.warning { + ha-button[slot="secondaryAction"] { margin-right: auto; margin-inline-end: auto; margin-inline-start: initial; 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 d79edc4abd..4f1b792b66 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 f7bb6b01ff..297d16bc66 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/entity-rows/hui-lock-entity-row.ts b/src/panels/lovelace/entity-rows/hui-lock-entity-row.ts index ab15001ea4..f8f5b7848f 100644 --- a/src/panels/lovelace/entity-rows/hui-lock-entity-row.ts +++ b/src/panels/lovelace/entity-rows/hui-lock-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"; @@ -7,6 +6,7 @@ import type { HomeAssistant } from "../../../types"; import { hasConfigOrEntityChanged } from "../common/has-changed"; import "../components/hui-generic-entity-row"; import { createEntityNotFoundWarning } from "../components/hui-warning"; +import "../../../components/ha-button"; import type { ConfirmableRowConfig, LovelaceRow } from "./types"; import { callProtectedLockService } from "../../../data/lock"; import { confirmAction } from "../common/confirm-action"; @@ -45,7 +45,9 @@ class HuiLockEntityRow extends LitElement implements LovelaceRow { return html` - + `; } 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/lovelace/entity-rows/hui-scene-entity-row.ts b/src/panels/lovelace/entity-rows/hui-scene-entity-row.ts index 15c25fd7df..8de8d6a0d5 100644 --- a/src/panels/lovelace/entity-rows/hui-scene-entity-row.ts +++ b/src/panels/lovelace/entity-rows/hui-scene-entity-row.ts @@ -1,8 +1,8 @@ -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 "../../../components/entity/ha-entity-toggle"; +import "../../../components/ha-button"; import { UNAVAILABLE } from "../../../data/entity"; import { activateScene } from "../../../data/scene"; import type { HomeAssistant } from "../../../types"; @@ -46,20 +46,22 @@ class HuiSceneEntityRow extends LitElement implements LovelaceRow { return html` - ${this._config.action_name || this.hass!.localize("ui.card.scene.activate")} - + `; } 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/lovelace/entity-rows/hui-script-entity-row.ts b/src/panels/lovelace/entity-rows/hui-script-entity-row.ts index 1a965fa44a..131b384b99 100644 --- a/src/panels/lovelace/entity-rows/hui-script-entity-row.ts +++ b/src/panels/lovelace/entity-rows/hui-script-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"; @@ -9,6 +8,7 @@ import type { HomeAssistant } from "../../../types"; import { hasConfigOrEntityChanged } from "../common/has-changed"; import "../components/hui-generic-entity-row"; import { createEntityNotFoundWarning } from "../components/hui-warning"; +import "../../../components/ha-button"; import type { ActionRowConfig, LovelaceRow } from "./types"; import { showMoreInfoDialog } from "../../../dialogs/more-info/show-ha-more-info-dialog"; import { confirmAction } from "../common/confirm-action"; @@ -48,7 +48,11 @@ class HuiScriptEntityRow extends LitElement implements LovelaceRow { return html` ${stateObj.state === "on" - ? html` + ? html` ${stateObj.attributes.mode !== "single" && stateObj.attributes.current && stateObj.attributes.current > 0 @@ -56,24 +60,26 @@ class HuiScriptEntityRow extends LitElement implements LovelaceRow { number: stateObj.attributes.current, }) : this.hass.localize("ui.card.script.cancel")} - ` + ` : ""} ${stateObj.state === "off" || stateObj.attributes.max - ? html` ${this._config.action_name || this.hass!.localize("ui.card.script.run")} - ` + ` : ""} `; } 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 1a08e2c8a4..a7b53f6c0e 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" - )}
+ > + ${this.hass!.localize("ui.panel.lovelace.menu.exit_edit_mode")} +
${name}
- ${this._config.action_name ? this._config.action_name - : this.hass!.localize("ui.card.service.run")}
`; @@ -99,7 +101,7 @@ export class HuiButtonRow extends LitElement implements LovelaceRow { overflow: hidden; text-overflow: ellipsis; } - mwc-button { + ha-button { margin-right: -0.57em; margin-inline-end: -0.57em; margin-inline-start: initial; diff --git a/src/panels/lovelace/special-rows/hui-cast-row.ts b/src/panels/lovelace/special-rows/hui-cast-row.ts index 27de92daff..efc4eee59c 100644 --- a/src/panels/lovelace/special-rows/hui-cast-row.ts +++ b/src/panels/lovelace/special-rows/hui-cast-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"; @@ -8,6 +7,7 @@ import { castSendShowLovelaceView, ensureConnectedCastSession, } from "../../../cast/receiver_messages"; +import "../../../components/ha-button"; import "../../../components/ha-icon"; import type { HomeAssistant } from "../../../types"; import type { CastConfig, LovelaceRow } from "../entity-rows/types"; @@ -61,14 +61,15 @@ class HuiCastRow extends LitElement implements LovelaceRow { : html`
- SHOW - +
`}
diff --git a/src/panels/media-browser/ha-bar-media-player.ts b/src/panels/media-browser/ha-bar-media-player.ts index 718616840c..22cc0c0997 100644 --- a/src/panels/media-browser/ha-bar-media-player.ts +++ b/src/panels/media-browser/ha-bar-media-player.ts @@ -20,13 +20,13 @@ import { computeStateDomain } from "../../common/entity/compute_state_domain"; import { computeStateName } from "../../common/entity/compute_state_name"; import { supportsFeature } from "../../common/entity/supports-feature"; import { debounce } from "../../common/util/debounce"; -import "../../components/ha-slider"; import "../../components/ha-button"; import "../../components/ha-button-menu"; -import "../../components/ha-spinner"; import "../../components/ha-domain-icon"; import "../../components/ha-icon-button"; import "../../components/ha-list-item"; +import "../../components/ha-slider"; +import "../../components/ha-spinner"; import "../../components/ha-state-icon"; import "../../components/ha-svg-icon"; import { UNAVAILABLE } from "../../data/entity"; @@ -322,22 +322,17 @@ export class BarMediaPlayer extends SubscribeMixin(LitElement) { ` : html` - - + + ${this._renderIcon(isBrowser, stateObj)} + ${this.narrow + ? nothing + : stateObj + ? computeStateName(stateObj) + : this.entityId} diff --git a/src/panels/media-browser/ha-panel-media-browser.ts b/src/panels/media-browser/ha-panel-media-browser.ts index fe2bc75187..c4f843b022 100644 --- a/src/panels/media-browser/ha-panel-media-browser.ts +++ b/src/panels/media-browser/ha-panel-media-browser.ts @@ -1,4 +1,3 @@ -import "@material/mwc-button"; import type { ActionDetail } from "@material/mwc-list"; import { mdiAlphaABoxOutline, diff --git a/src/panels/profile/dialog-ha-mfa-module-setup-flow.ts b/src/panels/profile/dialog-ha-mfa-module-setup-flow.ts index 4d10f8883d..3397bd60a2 100644 --- a/src/panels/profile/dialog-ha-mfa-module-setup-flow.ts +++ b/src/panels/profile/dialog-ha-mfa-module-setup-flow.ts @@ -1,11 +1,11 @@ -import "@material/mwc-button"; import type { CSSResultGroup } from "lit"; import { css, html, LitElement, nothing } from "lit"; import { customElement, property, state } from "lit/decorators"; -import "../../components/ha-spinner"; +import "../../components/ha-button"; import "../../components/ha-dialog"; import "../../components/ha-form/ha-form"; import "../../components/ha-markdown"; +import "../../components/ha-spinner"; import { autocompleteLoginFields } from "../../data/auth"; import type { DataEntryFlowStep, @@ -127,23 +127,30 @@ class HaMfaModuleSetupFlow extends LitElement { >` : ""}`} - ${["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-token-dialog.ts b/src/panels/profile/ha-long-lived-access-token-dialog.ts index 018325c284..69db923096 100644 --- a/src/panels/profile/ha-long-lived-access-token-dialog.ts +++ b/src/panels/profile/ha-long-lived-access-token-dialog.ts @@ -1,4 +1,3 @@ -import "@material/mwc-button"; import { mdiContentCopy } from "@mdi/js"; import type { CSSResultGroup, TemplateResult } 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 { createCloseHeading } from "../../components/ha-dialog"; import "../../components/ha-textfield"; +import "../../components/ha-button"; import "../../components/ha-icon-button"; import { haStyleDialog } from "../../resources/styles"; import type { HomeAssistant } from "../../types"; @@ -67,11 +67,15 @@ export class HaLongLivedAccessTokenDialog extends LitElement { ${this._qrCode ? this._qrCode : html` - + ${this.hass.localize( "ui.panel.profile.long_lived_access_tokens.generate_qr_code" )} - + `} 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-pick-theme-row.ts b/src/panels/profile/ha-pick-theme-row.ts index 3ec2abccd9..082f346781 100644 --- a/src/panels/profile/ha-pick-theme-row.ts +++ b/src/panels/profile/ha-pick-theme-row.ts @@ -1,5 +1,3 @@ -import "@material/mwc-button/mwc-button"; - import type { PropertyValues, TemplateResult } from "lit"; import { css, html, LitElement } from "lit"; import { customElement, property, state } from "lit/decorators"; @@ -8,6 +6,7 @@ import { fireEvent } from "../../common/dom/fire_event"; import "../../components/ha-formfield"; import "../../components/ha-list-item"; import "../../components/ha-radio"; +import "../../components/ha-button"; import type { HaRadio } from "../../components/ha-radio"; import "../../components/ha-select"; import "../../components/ha-settings-row"; @@ -148,9 +147,13 @@ export class HaPickThemeRow extends LitElement { @change=${this._handleColorChange} > ${themeSettings?.primaryColor || themeSettings?.accentColor - ? html` + ? html` ${this.hass.localize("ui.panel.profile.themes.reset")} - ` + ` : ""} ` : ""} diff --git a/src/panels/profile/ha-profile-section-general.ts b/src/panels/profile/ha-profile-section-general.ts index 46cbc1c268..dbd4272dca 100644 --- a/src/panels/profile/ha-profile-section-general.ts +++ b/src/panels/profile/ha-profile-section-general.ts @@ -1,10 +1,10 @@ -import "@material/mwc-button"; import type { UnsubscribeFunc } from "home-assistant-js-websocket"; import type { CSSResultGroup, TemplateResult } from "lit"; import { css, html, LitElement } from "lit"; import { customElement, property, state } from "lit/decorators"; import { fireEvent } from "../../common/dom/fire_event"; import { nextRender } from "../../common/util/render-status"; +import "../../components/ha-button"; import "../../components/ha-card"; import { isExternal } from "../../data/external"; import type { CoreFrontendUserData } 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.user!.is_admin ? html` diff --git a/src/panels/profile/ha-refresh-tokens-card.ts b/src/panels/profile/ha-refresh-tokens-card.ts index eba7a50837..1975feccc1 100644 --- a/src/panels/profile/ha-refresh-tokens-card.ts +++ b/src/panels/profile/ha-refresh-tokens-card.ts @@ -14,12 +14,13 @@ 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-button-menu"; import "../../components/ha-card"; import "../../components/ha-icon-button"; import "../../components/ha-label"; -import "../../components/ha-settings-row"; import "../../components/ha-list-item"; +import "../../components/ha-settings-row"; import { deleteAllRefreshTokens } from "../../data/auth"; import type { RefreshToken } from "../../data/refresh_token"; import { @@ -191,11 +192,16 @@ class HaRefreshTokens extends LitElement { : nothing}
- + ${this.hass.localize( "ui.panel.profile.refresh_tokens.delete_all_tokens" )} - +
`; 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/resources/polyfills/stateset.ts b/src/resources/polyfills/stateset.ts new file mode 100644 index 0000000000..88bacf6648 --- /dev/null +++ b/src/resources/polyfills/stateset.ts @@ -0,0 +1,57 @@ +// A small polyfill for CSSStateSet +export class StateSet extends Set { + private _el: Element; + + private _existing: null | Set = null; + + constructor(el: Element, existing: Set | null = null) { + super(); + this._el = el; + this._existing = existing; + } + + add(state: string) { + super.add(state); + const existing = this._existing; + if (existing) { + try { + existing.add(state); + } catch { + existing.add(`--${state}`); + } + } else { + this._el.setAttribute(`state-${state}`, ""); + } + return this; + } + + delete(state: string) { + super.delete(state); + const existing = this._existing; + if (existing) { + existing.delete(state); + existing.delete(`--${state}`); + } else { + this._el.removeAttribute(`state-${state}`); + } + return true; + } + + has(state: string) { + return super.has(state); + } + + clear() { + for (const state of this) this.delete(state); + } +} +const replaceSync = CSSStyleSheet.prototype.replaceSync; +Object.defineProperty(CSSStyleSheet.prototype, "replaceSync", { + value: function (text) { + text = text.replace( + /:state\(([^)]+)\)/g, + ":where(:state($1), :--$1, [state-$1])" + ); + replaceSync.call(this, text); + }, +}); diff --git a/src/resources/styles.ts b/src/resources/styles.ts index c279d44ced..d84a63ccbd 100644 --- a/src/resources/styles.ts +++ b/src/resources/styles.ts @@ -80,11 +80,6 @@ export const haStyle = css` color: var(--error-color); } - ha-button.warning, - mwc-button.warning { - --mdc-theme-primary: var(--error-color); - } - ${buttonLinkStyle} .card-actions a { @@ -172,10 +167,6 @@ export const haStyleDialog = css` --ha-dialog-border-radius: 0; } } - mwc-button.warning, - ha-button.warning { - --mdc-theme-primary: var(--error-color); - } .error { color: var(--error-color); } diff --git a/src/resources/theme/color/color.globals.ts b/src/resources/theme/color/color.globals.ts index 163129d34b..4745b922a0 100644 --- a/src/resources/theme/color/color.globals.ts +++ b/src/resources/theme/color/color.globals.ts @@ -17,6 +17,7 @@ export const colorStyles = css` /* main interface colors */ --primary-color: var(--color-primary-40); --dark-primary-color: #0288d1; + --darker-primary-color: #016194; --light-primary-color: #b3e5fc; --accent-color: #ff9800; --divider-color: rgba(0, 0, 0, 0.12); @@ -357,6 +358,11 @@ export const darkColorStyles = css` --map-filter: invert(0.9) hue-rotate(170deg) brightness(1.5) contrast(1.2) saturate(0.3); --disabled-color: #464646; + + --ha-button-primary-light-color: #4082a040; + --ha-button-warning-light-color: #917b54c1; + --ha-button-neutral-color: #d9dae0; + --ha-button-neutral-light-color: #6a7081; } `; export const colorVariables = extractVars(colorStyles); diff --git a/src/resources/theme/color/core.globals.ts b/src/resources/theme/color/core.globals.ts index 791a2cf968..afde639916 100644 --- a/src/resources/theme/color/core.globals.ts +++ b/src/resources/theme/color/core.globals.ts @@ -17,7 +17,7 @@ export const coreColorStyles = css` --color-primary-60: #37c8fd; --color-primary-70: #7bd4fb; --color-primary-80: #b9e6fc; - --color-primary-90: #b9e6fc; + --color-primary-90: #dff3fc; --color-primary-95: #eff9fe; /* neutral */ diff --git a/src/resources/theme/color/index.ts b/src/resources/theme/color/index.ts index c67135235b..45328cae9b 100644 --- a/src/resources/theme/color/index.ts +++ b/src/resources/theme/color/index.ts @@ -8,6 +8,7 @@ import { darkSemanticColorStyles, semanticColorStyles, } from "./semantic.globals"; +import { waColorStyles } from "./wa.globals"; export const darkColorVariables = { ...extractVars(darkColorStyles), @@ -17,10 +18,12 @@ export const darkColorVariables = { export const colorDerivedVariables = { ...extractDerivedVars(colorStyles), ...extractDerivedVars(semanticColorStyles), + ...extractDerivedVars(waColorStyles), }; export const colorStylesCollection = [ coreColorStyles.toString(), semanticColorStyles.toString(), colorStyles.toString(), + waColorStyles.toString(), ]; diff --git a/src/resources/theme/color/semantic.globals.ts b/src/resources/theme/color/semantic.globals.ts index f271901e89..74bcd4723e 100644 --- a/src/resources/theme/color/semantic.globals.ts +++ b/src/resources/theme/color/semantic.globals.ts @@ -263,7 +263,7 @@ export const darkSemanticColorStyles = css` /* on primary */ --color-on-primary-quiet: var(--color-primary-70); - --color-on-primary-normal: var(--color-primary-80); + --color-on-primary-normal: var(--color-primary-60); /* on neutral */ --color-on-neutral-quiet: var(--color-neutral-70); diff --git a/src/resources/theme/color/wa.globals.ts b/src/resources/theme/color/wa.globals.ts new file mode 100644 index 0000000000..5882b47341 --- /dev/null +++ b/src/resources/theme/color/wa.globals.ts @@ -0,0 +1,57 @@ +import { css } from "lit"; + +export const waColorStyles = css` + html { + --wa-color-brand-fill-loud: var(--color-fill-primary-loud-resting); + --wa-color-brand-fill-normal: var(--color-fill-primary-normal-resting); + --wa-color-brand-fill-quiet: var(--color-fill-primary-quiet-resting); + --wa-color-brand-border-loud: var(--color-border-loud); + --wa-color-brand-border-normal: var(--color-primary-50); + --wa-color-brand-border-quiet: var(--color-border-quiet); + --wa-color-brand-on-loud: var(--color-on-primary-loud); + --wa-color-brand-on-normal: var(--color-on-primary-normal); + --wa-color-brand-on-quiet: var(--color-on-primary-quiet); + + --wa-color-neutral-fill-loud: var(--color-fill-neutral-loud-resting); + --wa-color-neutral-fill-normal: var(--color-fill-neutral-normal-resting); + --wa-color-neutral-fill-quiet: var(--color-fill-neutral-quiet-resting); + --wa-color-neutral-border-loud: var(--color-border-neutral-loud); + --wa-color-neutral-border-normal: var(--color-border-neutral-normal); + --wa-color-neutral-border-quiet: var(--color-border-neutral-quiet); + --wa-color-neutral-on-loud: var(--color-on-neutral-loud); + --wa-color-neutral-on-normal: var(--color-on-neutral-normal); + --wa-color-neutral-on-quiet: var(--color-on-neutral-quiet); + + --wa-color-success-fill-loud: var(--color-fill-success-loud-resting); + --wa-color-success-fill-normal: var(--color-fill-success-normal-resting); + --wa-color-success-fill-quiet: var(--color-fill-success-quiet-resting); + --wa-color-success-border-loud: var(--color-border-success-loud); + --wa-color-success-border-normal: var(--color-border-success-normal); + --wa-color-success-border-quiet: var(--color-border-success-quiet); + --wa-color-success-on-loud: var(--color-on-success-loud); + --wa-color-success-on-normal: var(--color-on-success-normal); + --wa-color-success-on-quiet: var(--color-on-success-quiet); + + --wa-color-warning-fill-loud: var(--color-fill-warning-loud-resting); + --wa-color-warning-fill-normal: var(--color-fill-warning-normal-resting); + --wa-color-warning-fill-quiet: var(--color-fill-warning-quiet-resting); + --wa-color-warning-border-loud: var(--color-border-warning-loud); + --wa-color-warning-border-normal: var(--color-border-warning-normal); + --wa-color-warning-border-quiet: var(--color-border-warning-quiet); + --wa-color-warning-on-loud: var(--color-on-warning-loud); + --wa-color-warning-on-normal: var(--color-on-warning-normal); + --wa-color-warning-on-quiet: var(--color-on-warning-quiet); + + --wa-color-danger-fill-loud: var(--color-fill-danger-loud-resting); + --wa-color-danger-fill-normal: var(--color-fill-danger-normal-resting); + --wa-color-danger-fill-quiet: var(--color-fill-danger-quiet-resting); + --wa-color-danger-border-loud: var(--color-border-danger-loud); + --wa-color-danger-border-normal: var(--color-border-danger-normal); + --wa-color-danger-border-quiet: var(--color-border-danger-quiet); + --wa-color-danger-on-loud: var(--color-on-danger-loud); + --wa-color-danger-on-normal: var(--color-on-danger-normal); + --wa-color-danger-on-quiet: var(--color-on-danger-quiet); + + --wa-focus-ring-color: var(--color-neutral-60); + } +`; diff --git a/src/resources/theme/theme.ts b/src/resources/theme/theme.ts index 3890144d5d..e8e3cc1168 100644 --- a/src/resources/theme/theme.ts +++ b/src/resources/theme/theme.ts @@ -5,16 +5,19 @@ import { typographyDerivedVariables, typographyStyles, } from "./typography.globals"; +import { waMainDerivedVariables, waMainStyles } from "./wa.globals"; export const themeStyles = [ mainStyles.toString(), typographyStyles.toString(), ...colorStylesCollection, fontStyles.toString(), + waMainStyles.toString(), ].join(""); export const derivedStyles = { ...mainDerivedVariables, ...typographyDerivedVariables, ...colorDerivedVariables, + ...waMainDerivedVariables, }; diff --git a/src/resources/theme/wa.globals.ts b/src/resources/theme/wa.globals.ts new file mode 100644 index 0000000000..29a950ae23 --- /dev/null +++ b/src/resources/theme/wa.globals.ts @@ -0,0 +1,14 @@ +import { css } from "lit"; +import { extractDerivedVars } from "../../common/style/derived-css-vars"; + +export const waMainStyles = css` + html { + --wa-focus-ring-style: solid; + --wa-focus-ring-width: 2px; + --wa-focus-ring-offset: 2px; + --wa-focus-ring: var(--wa-focus-ring-style) var(--wa-focus-ring-width) + var(--wa-focus-ring-color); + } +`; + +export const waMainDerivedVariables = extractDerivedVars(waMainStyles); 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..624d3e9957 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 { 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")} `; @@ -37,18 +37,7 @@ class StateCardScene extends LitElement { } static get styles(): CSSResultGroup { - return [ - haStyle, - css` - mwc-button { - top: 3px; - height: 37px; - margin-right: -0.57em; - margin-inline-end: -0.57em; - margin-inline-start: initial; - } - `, - ]; + return [haStyle]; } } 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 87b55f098e..2ff169dbfe 100644 --- a/src/translations/en.json +++ b/src/translations/en.json @@ -9113,12 +9113,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!", diff --git a/yarn.lock b/yarn.lock index 7105e52dbd..1193500adb 100644 --- a/yarn.lock +++ b/yarn.lock @@ -41,6 +41,23 @@ __metadata: languageName: node linkType: hard +"@awesome.me/webawesome@npm:3.0.0-beta.3": + version: 3.0.0-beta.3 + resolution: "@awesome.me/webawesome@npm:3.0.0-beta.3" + dependencies: + "@ctrl/tinycolor": "npm:^4.1.0" + "@floating-ui/dom": "npm:^1.6.13" + "@shoelace-style/animations": "npm:^1.2.0" + "@shoelace-style/localize": "npm:^3.2.1" + composed-offset-position: "npm:^0.0.6" + lit: "npm:^3.2.1" + nanoid: "npm:^5.1.5" + qr-creator: "npm:^1.0.0" + style-observer: "npm:^0.0.7" + checksum: 10/d01adab1e415f015c255e99e5ab7962eac3299bfafe3d6feb7dca0e44452b5e64f05d5c8b212ac1c513c8a0e2a9bdbe8dd68ec8b9ec1c216acf6a689dcc6cfc1 + languageName: node + linkType: hard + "@babel/code-frame@npm:7.26.2": version: 7.26.2 resolution: "@babel/code-frame@npm:7.26.2" @@ -1651,7 +1668,7 @@ __metadata: languageName: node linkType: hard -"@floating-ui/dom@npm:^1.6.12": +"@floating-ui/dom@npm:^1.6.12, @floating-ui/dom@npm:^1.6.13": version: 1.7.2 resolution: "@floating-ui/dom@npm:1.7.2" dependencies: @@ -9323,6 +9340,7 @@ __metadata: version: 0.0.0-use.local resolution: "home-assistant-frontend@workspace:." dependencies: + "@awesome.me/webawesome": "npm:3.0.0-beta.3" "@babel/core": "npm:7.28.0" "@babel/helper-define-polyfill-provider": "npm:0.6.5" "@babel/plugin-transform-runtime": "npm:7.28.0" @@ -11516,6 +11534,15 @@ __metadata: languageName: node linkType: hard +"nanoid@npm:^5.1.5": + version: 5.1.5 + resolution: "nanoid@npm:5.1.5" + bin: + nanoid: bin/nanoid.js + checksum: 10/6de2d006b51c983be385ef7ee285f7f2a57bd96f8c0ca881c4111461644bd81fafc2544f8e07cb834ca0f3e0f3f676c1fe78052183f008b0809efe6e273119f5 + languageName: node + linkType: hard + "natural-compare@npm:^1.4.0": version: 1.4.0 resolution: "natural-compare@npm:1.4.0" @@ -13979,6 +14006,13 @@ __metadata: languageName: node linkType: hard +"style-observer@npm:^0.0.7": + version: 0.0.7 + resolution: "style-observer@npm:0.0.7" + checksum: 10/bb57f98bae4463c1e1b57234f8ffe72ec0de27fb08b032c1919910129c210aacd1ddd615432b9453d491e10d3b719cf6c2a68a97165ca55d6fc9b86c0fca37fb + languageName: node + linkType: hard + "superstruct@npm:2.0.2": version: 2.0.2 resolution: "superstruct@npm:2.0.2"