From 0f5320c6fbcbdc4ea7447a31d1c8a5f889af773b Mon Sep 17 00:00:00 2001 From: Bram Kragten Date: Wed, 29 Mar 2023 12:17:42 +0200 Subject: [PATCH] Drop polymer from authorize and onboarding entrypoint (#15760) * Drop polymer from authorize and onboarding entrypoint * Update ha-icon.ts * dedupe --- .../addon-view/config/hassio-addon-audio.ts | 3 - hassio/src/backups/hassio-backups.ts | 4 +- .../dialog-hassio-repositories.ts | 6 +- package.json | 4 +- src/auth/ha-pick-auth-provider.ts | 38 ++-- .../data-table/ha-data-table-icon.ts | 4 +- src/components/entity/state-info.ts | 6 +- src/components/ha-analytics.ts | 6 +- src/components/ha-help-tooltip.ts | 6 +- src/components/ha-icon-overflow-menu.ts | 9 +- src/components/ha-icon.ts | 4 +- src/components/ha-network.ts | 2 +- src/components/ha-settings-row.ts | 40 +++- src/components/ha-target-picker.ts | 12 +- .../media-player/ha-media-player-browse.ts | 6 +- src/dialogs/config-flow/step-flow-form.ts | 2 +- .../persistent-notification-item.ts | 6 +- src/layouts/hass-tabs-subpage-data-table.ts | 2 +- .../config/areas/ha-config-area-page.ts | 8 +- .../config/automation/ha-automation-picker.ts | 6 +- src/panels/config/backup/ha-config-backup.ts | 2 +- .../config/blueprint/ha-blueprint-overview.ts | 2 +- .../config/devices/ha-config-device-page.ts | 10 +- .../devices/ha-config-devices-dashboard.ts | 6 +- .../config/entities/ha-config-entities.ts | 22 +- .../config/helpers/dialog-helper-detail.ts | 7 +- .../config/helpers/ha-config-helpers.ts | 6 +- .../integrations/ha-integration-card.ts | 10 +- .../integrations/ha-integration-header.ts | 8 +- .../integrations/ha-integration-list-item.ts | 12 +- .../config/logs/dialog-system-log-detail.ts | 2 +- .../ha-config-lovelace-dashboards.ts | 6 +- src/panels/config/scene/ha-scene-dashboard.ts | 6 +- src/panels/config/users/dialog-user-detail.ts | 10 +- src/panels/config/zone/ha-config-zone.ts | 6 +- .../hui-energy-carbon-consumed-gauge-card.ts | 10 +- .../hui-energy-grid-neutrality-gauge-card.ts | 10 +- .../hui-energy-solar-consumed-gauge-card.ts | 10 +- src/panels/profile/ha-mfa-modules-card.ts | 15 +- src/panels/profile/ha-refresh-tokens-card.ts | 8 +- src/resources/ha-style.ts | 209 +++++++++++++++++- yarn.lock | 29 ++- 42 files changed, 407 insertions(+), 173 deletions(-) diff --git a/hassio/src/addon-view/config/hassio-addon-audio.ts b/hassio/src/addon-view/config/hassio-addon-audio.ts index 63a93314cf..c36d93b210 100644 --- a/hassio/src/addon-view/config/hassio-addon-audio.ts +++ b/hassio/src/addon-view/config/hassio-addon-audio.ts @@ -114,9 +114,6 @@ class HassioAddonAudio extends LitElement { ha-card { display: block; } - paper-item { - width: 450px; - } .card-actions { text-align: right; } diff --git a/hassio/src/backups/hassio-backups.ts b/hassio/src/backups/hassio-backups.ts index bca0160b64..eedfad61e2 100644 --- a/hassio/src/backups/hassio-backups.ts +++ b/hassio/src/backups/hassio-backups.ts @@ -248,9 +248,9 @@ export class HassioBackups extends LitElement { class="warning" @click=${this._deleteSelected} > - + ${this.supervisor.localize("backup.delete_selected")} - + `} ` diff --git a/hassio/src/dialogs/repositories/dialog-hassio-repositories.ts b/hassio/src/dialogs/repositories/dialog-hassio-repositories.ts index dec2f33cf2..a97cb0907d 100644 --- a/hassio/src/dialogs/repositories/dialog-hassio-repositories.ts +++ b/hassio/src/dialogs/repositories/dialog-hassio-repositories.ts @@ -4,7 +4,7 @@ import "@polymer/paper-input/paper-input"; import type { PaperInputElement } from "@polymer/paper-input/paper-input"; import "@polymer/paper-item/paper-item"; import "@polymer/paper-item/paper-item-body"; -import "@polymer/paper-tooltip/paper-tooltip"; +import "@lrnwebcomponents/simple-tooltip/simple-tooltip"; import { css, CSSResultGroup, html, LitElement, nothing } from "lit"; import { customElement, property, query, state } from "lit/decorators"; import memoizeOne from "memoize-one"; @@ -128,7 +128,7 @@ class HassioRepositoriesDialog extends LitElement { @click=${this._removeRepository} > - + ` diff --git a/package.json b/package.json index 1e193fe6d7..1c654cdb25 100644 --- a/package.json +++ b/package.json @@ -48,6 +48,7 @@ "@lit-labs/context": "0.2.0", "@lit-labs/motion": "1.0.3", "@lit-labs/virtualizer": "1.0.1", + "@lrnwebcomponents/simple-tooltip": "4.1.0", "@material/chips": "=14.0.0-canary.53b3cad2f.0", "@material/data-table": "=14.0.0-canary.53b3cad2f.0", "@material/mwc-button": "0.27.0", @@ -77,17 +78,14 @@ "@mdi/svg": "7.2.96", "@polymer/app-layout": "3.1.0", "@polymer/iron-flex-layout": "3.0.1", - "@polymer/iron-icon": "3.0.1", "@polymer/iron-input": "3.0.1", "@polymer/iron-resizable-behavior": "3.0.1", "@polymer/paper-input": "3.2.1", "@polymer/paper-item": "3.0.1", "@polymer/paper-listbox": "3.0.1", "@polymer/paper-slider": "3.0.1", - "@polymer/paper-styles": "3.0.1", "@polymer/paper-tabs": "3.1.0", "@polymer/paper-toast": "3.0.1", - "@polymer/paper-tooltip": "3.0.1", "@polymer/polymer": "3.5.1", "@thomasloven/round-slider": "0.6.0", "@vaadin/combo-box": "23.3.9", diff --git a/src/auth/ha-pick-auth-provider.ts b/src/auth/ha-pick-auth-provider.ts index 5d9b480030..c1b53f83c0 100644 --- a/src/auth/ha-pick-auth-provider.ts +++ b/src/auth/ha-pick-auth-provider.ts @@ -1,9 +1,9 @@ -import "@polymer/paper-item/paper-item"; -import "@polymer/paper-item/paper-item-body"; +import "@material/mwc-list"; import { css, html, LitElement } from "lit"; import { customElement, property } from "lit/decorators"; import { fireEvent } from "../common/dom/fire_event"; import "../components/ha-icon-next"; +import "../components/ha-list-item"; import { AuthProvider } from "../data/auth"; import { litLocalizeLiteMixin } from "../mixins/lit-localize-lite-mixin"; @@ -20,18 +20,21 @@ export class HaPickAuthProvider extends litLocalizeLiteMixin(LitElement) { protected render() { return html`

${this.localize("ui.panel.page-authorize.pick_auth_provider")}:

- ${this.authProviders.map( - (provider) => html` - - ${provider.name} - - - ` - )} + + ${this.authProviders.map( + (provider) => html` + + ${provider.name} + + + ` + )} `; } @@ -40,11 +43,12 @@ export class HaPickAuthProvider extends litLocalizeLiteMixin(LitElement) { } static styles = css` - paper-item { - cursor: pointer; - } p { margin-top: 0; } + mwc-list { + margin: 0 -16px; + --mdc-list-side-padding: 16px; + } `; } diff --git a/src/components/data-table/ha-data-table-icon.ts b/src/components/data-table/ha-data-table-icon.ts index 597d702dc8..5e7cada2d5 100644 --- a/src/components/data-table/ha-data-table-icon.ts +++ b/src/components/data-table/ha-data-table-icon.ts @@ -48,8 +48,8 @@ class HaDataTableIcon extends LitElement { outline: none; font-size: 10px; line-height: 1; - background-color: var(--paper-tooltip-background, #616161); - color: var(--paper-tooltip-text-color, white); + background-color: var(--simple-tooltip-background, #616161); + color: var(--simple-tooltip-text-color, white); padding: 8px; border-radius: 2px; } diff --git a/src/components/entity/state-info.ts b/src/components/entity/state-info.ts index 7becc6c5b9..4b2e0b2cd5 100644 --- a/src/components/entity/state-info.ts +++ b/src/components/entity/state-info.ts @@ -1,4 +1,4 @@ -import "@polymer/paper-tooltip/paper-tooltip"; +import "@lrnwebcomponents/simple-tooltip/simple-tooltip"; import type { HassEntity } from "home-assistant-js-websocket"; import { css, CSSResultGroup, html, LitElement, nothing } from "lit"; import { customElement, property } from "lit/decorators"; @@ -45,7 +45,7 @@ class StateInfo extends LitElement { .datetime=${this.stateObj.last_changed} capitalize > - +
@@ -72,7 +72,7 @@ class StateInfo extends LitElement { >
- + ` : html`
`} `; diff --git a/src/components/ha-analytics.ts b/src/components/ha-analytics.ts index debacb9a97..9ea3540baa 100644 --- a/src/components/ha-analytics.ts +++ b/src/components/ha-analytics.ts @@ -1,4 +1,4 @@ -import "@polymer/paper-tooltip/paper-tooltip"; +import "@lrnwebcomponents/simple-tooltip/simple-tooltip"; import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit"; import { customElement, property } from "lit/decorators"; import { fireEvent } from "../common/dom/fire_event"; @@ -76,11 +76,11 @@ export class HaAnalytics extends LitElement { ${!baseEnabled ? html` - + ${this.hass.localize( `ui.panel.${this.translationKeyPanel}.analytics.need_base_enabled` )} - + ` : ""} diff --git a/src/components/ha-help-tooltip.ts b/src/components/ha-help-tooltip.ts index 1194f77b98..d8964b0044 100644 --- a/src/components/ha-help-tooltip.ts +++ b/src/components/ha-help-tooltip.ts @@ -1,5 +1,5 @@ import { mdiHelpCircle } from "@mdi/js"; -import "@polymer/paper-tooltip/paper-tooltip"; +import "@lrnwebcomponents/simple-tooltip/simple-tooltip"; import { css, html, LitElement, TemplateResult } from "lit"; import { customElement, property } from "lit/decorators"; import "./ha-svg-icon"; @@ -13,11 +13,11 @@ export class HaHelpTooltip extends LitElement { protected render(): TemplateResult { return html` - ${this.label}${this.label} `; } diff --git a/src/components/ha-icon-overflow-menu.ts b/src/components/ha-icon-overflow-menu.ts index 2ec0093232..4c4e94ea2b 100644 --- a/src/components/ha-icon-overflow-menu.ts +++ b/src/components/ha-icon-overflow-menu.ts @@ -1,6 +1,6 @@ import "@material/mwc-list/mwc-list-item"; import { mdiDotsVertical } from "@mdi/js"; -import "@polymer/paper-tooltip/paper-tooltip"; +import "@lrnwebcomponents/simple-tooltip/simple-tooltip"; import { css, html, LitElement, TemplateResult } from "lit"; import { customElement, property } from "lit/decorators"; import { classMap } from "lit/directives/class-map"; @@ -75,9 +75,12 @@ export class HaIconOverflowMenu extends LitElement { ? html`
` : html`
${item.tooltip - ? html` + ? html` ${item.tooltip} - ` + ` : ""} `; + return html` + `; } return html` - -
- +
+
`; @@ -34,10 +34,38 @@ export class HaSettingsRow extends LitElement { align-self: auto; align-items: center; } - paper-item-body { + .body { padding: 8px 16px 8px 0; + overflow: hidden; + display: var(--layout-vertical_-_display); + flex-direction: var(--layout-vertical_-_flex-direction); + justify-content: var(--layout-center-justified_-_justify-content); + flex: var(--layout-flex_-_flex); + flex-basis: var(--layout-flex_-_flex-basis); } - paper-item-body[two-line] { + .body[three-line] { + min-height: var(--paper-item-body-three-line-min-height, 88px); + } + .body > * { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + } + .body > .secondary { + font-family: var(--paper-font-body1_-_font-family); + -webkit-font-smoothing: var( + --paper-font-body1_-_-webkit-font-smoothing + ); + font-size: var(--paper-font-body1_-_font-size); + font-weight: var(--paper-font-body1_-_font-weight); + line-height: var(--paper-font-body1_-_line-height); + + color: var( + --paper-item-body-secondary-color, + var(--secondary-text-color) + ); + } + .body[two-line] { min-height: calc( var(--paper-item-body-two-line-min-height, 72px) - 16px ); diff --git a/src/components/ha-target-picker.ts b/src/components/ha-target-picker.ts index b9a674c3a2..e9975db128 100644 --- a/src/components/ha-target-picker.ts +++ b/src/components/ha-target-picker.ts @@ -9,7 +9,7 @@ import { mdiSofa, mdiUnfoldMoreVertical, } from "@mdi/js"; -import "@polymer/paper-tooltip/paper-tooltip"; +import "@lrnwebcomponents/simple-tooltip/simple-tooltip"; import { ComboBoxLightOpenedChangedEvent } from "@vaadin/combo-box/vaadin-combo-box-light"; import { HassEntity, HassServiceTarget } from "home-assistant-js-websocket"; import { css, CSSResultGroup, html, LitElement, unsafeCSS, nothing } from "lit"; @@ -248,10 +248,10 @@ export class HaTargetPicker extends LitElement { .type=${type} @click=${this._handleExpand} > - ${this.hass.localize( `ui.components.target-picker.expand_${type}` - )} `} @@ -266,10 +266,10 @@ export class HaTargetPicker extends LitElement { .type=${type} @click=${this._handleRemove} > - ${this.hass.localize( `ui.components.target-picker.remove_${type}` - )} @@ -670,7 +670,7 @@ export class HaTargetPicker extends LitElement { .mdc-chip:hover { z-index: 5; } - paper-tooltip.expand { + simple-tooltip.expand { min-width: 200px; } :host([disabled]) .mdc-chip { diff --git a/src/components/media-player/ha-media-player-browse.ts b/src/components/media-player/ha-media-player-browse.ts index 1cbd126b97..95006e0bda 100644 --- a/src/components/media-player/ha-media-player-browse.ts +++ b/src/components/media-player/ha-media-player-browse.ts @@ -5,7 +5,7 @@ import "@material/mwc-button/mwc-button"; import "@material/mwc-list/mwc-list"; import "@material/mwc-list/mwc-list-item"; import { mdiArrowUpRight, mdiPlay, mdiPlus } from "@mdi/js"; -import "@polymer/paper-tooltip/paper-tooltip"; +import "@lrnwebcomponents/simple-tooltip/simple-tooltip"; import { css, CSSResultGroup, @@ -600,8 +600,8 @@ export class HaMediaPlayerBrowse extends LitElement {
${child.title} - ${child.title}${child.title}
diff --git a/src/dialogs/config-flow/step-flow-form.ts b/src/dialogs/config-flow/step-flow-form.ts index d6f042bf9d..2c262626a2 100644 --- a/src/dialogs/config-flow/step-flow-form.ts +++ b/src/dialogs/config-flow/step-flow-form.ts @@ -1,5 +1,5 @@ import "@material/mwc-button"; -import "@polymer/paper-tooltip/paper-tooltip"; +import "@lrnwebcomponents/simple-tooltip/simple-tooltip"; import { css, CSSResultGroup, diff --git a/src/dialogs/notifications/persistent-notification-item.ts b/src/dialogs/notifications/persistent-notification-item.ts index fca3a395da..310a6b93b9 100644 --- a/src/dialogs/notifications/persistent-notification-item.ts +++ b/src/dialogs/notifications/persistent-notification-item.ts @@ -1,5 +1,5 @@ import "@material/mwc-button"; -import "@polymer/paper-tooltip/paper-tooltip"; +import "@lrnwebcomponents/simple-tooltip/simple-tooltip"; import { css, CSSResultGroup, html, LitElement, nothing } from "lit"; import { customElement, property } from "lit/decorators"; import { formatDateTime } from "../../common/datetime/format_date_time"; @@ -33,9 +33,9 @@ export class HuiPersistentNotificationItem extends LitElement { .datetime=${this.notification.created_at} capitalize > - + ${this._computeTooltip(this.hass, this.notification)} - + diff --git a/src/layouts/hass-tabs-subpage-data-table.ts b/src/layouts/hass-tabs-subpage-data-table.ts index 30a13c94c3..125adc1a81 100644 --- a/src/layouts/hass-tabs-subpage-data-table.ts +++ b/src/layouts/hass-tabs-subpage-data-table.ts @@ -1,5 +1,5 @@ import "@material/mwc-button/mwc-button"; -import "@polymer/paper-tooltip/paper-tooltip"; +import "@lrnwebcomponents/simple-tooltip/simple-tooltip"; import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit"; import { customElement, property, query } from "lit/decorators"; import { fireEvent } from "../common/dom/fire_event"; diff --git a/src/panels/config/areas/ha-config-area-page.ts b/src/panels/config/areas/ha-config-area-page.ts index e18a4350ba..4234fdd98d 100644 --- a/src/panels/config/areas/ha-config-area-page.ts +++ b/src/panels/config/areas/ha-config-area-page.ts @@ -553,9 +553,9 @@ class HaConfigAreaPage extends SubscribeMixin(LitElement) { ${!entityState.attributes.id ? html` - + ${this.hass.localize("ui.panel.config.devices.cant_edit")} - + ` : ""} `; @@ -577,9 +577,9 @@ class HaConfigAreaPage extends SubscribeMixin(LitElement) { ${!entityState.attributes.id ? html` - + ${this.hass.localize("ui.panel.config.devices.cant_edit")} - + ` : ""} `; diff --git a/src/panels/config/automation/ha-automation-picker.ts b/src/panels/config/automation/ha-automation-picker.ts index 9dff22d9ad..46473b7a09 100644 --- a/src/panels/config/automation/ha-automation-picker.ts +++ b/src/panels/config/automation/ha-automation-picker.ts @@ -10,7 +10,7 @@ import { mdiStopCircleOutline, mdiTransitConnection, } from "@mdi/js"; -import "@polymer/paper-tooltip/paper-tooltip"; +import "@lrnwebcomponents/simple-tooltip/simple-tooltip"; import { CSSResultGroup, html, LitElement, TemplateResult } from "lit"; import { customElement, property, state } from "lit/decorators"; import memoizeOne from "memoize-one"; @@ -159,11 +159,11 @@ class HaAutomationPicker extends LitElement { template: (disabled: boolean) => disabled ? html` - + ${this.hass.localize( "ui.panel.config.automation.picker.disabled" )} - + ${!entityState.attributes.id ? html` - + ${this.hass.localize( "ui.panel.config.devices.cant_edit" )} - + ` : ""} ` @@ -497,11 +497,11 @@ export class HaConfigDevicePage extends LitElement { ${!entityState.attributes.id ? html` - + ${this.hass.localize( "ui.panel.config.devices.cant_edit" )} - + ` : ""} diff --git a/src/panels/config/devices/ha-config-devices-dashboard.ts b/src/panels/config/devices/ha-config-devices-dashboard.ts index 582bd9e3ce..6f726df4df 100644 --- a/src/panels/config/devices/ha-config-devices-dashboard.ts +++ b/src/panels/config/devices/ha-config-devices-dashboard.ts @@ -1,6 +1,6 @@ import type { RequestSelectedDetail } from "@material/mwc-list/mwc-list-item"; import { mdiCancel, mdiFilterVariant, mdiPlus } from "@mdi/js"; -import "@polymer/paper-tooltip/paper-tooltip"; +import "@lrnwebcomponents/simple-tooltip/simple-tooltip"; import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit"; import { customElement, property, state } from "lit/decorators"; import memoizeOne from "memoize-one"; @@ -370,9 +370,9 @@ export class HaConfigDeviceDashboard extends LitElement { style="display:inline-block; position: relative;" > - + ${this.hass.localize("ui.panel.config.devices.disabled")} - + ` : "—", }; diff --git a/src/panels/config/entities/ha-config-entities.ts b/src/panels/config/entities/ha-config-entities.ts index 143222a893..3e81973892 100644 --- a/src/panels/config/entities/ha-config-entities.ts +++ b/src/panels/config/entities/ha-config-entities.ts @@ -10,7 +10,7 @@ import { mdiRestoreAlert, mdiUndo, } from "@mdi/js"; -import "@polymer/paper-tooltip/paper-tooltip"; +import "@lrnwebcomponents/simple-tooltip/simple-tooltip"; import { HassEntity, UnsubscribeFunc } from "home-assistant-js-websocket"; import { css, CSSResultGroup, html, LitElement, nothing } from "lit"; import { customElement, property, query, state } from "lit/decorators"; @@ -276,7 +276,7 @@ export class HaConfigEntities extends SubscribeMixin(LitElement) { ? mdiEyeOff : mdiPencilOff} > - + ${entity.restored ? this.hass.localize( "ui.panel.config.entities.picker.status.restored" @@ -296,7 +296,7 @@ export class HaConfigEntities extends SubscribeMixin(LitElement) { : this.hass.localize( "ui.panel.config.entities.picker.status.readonly" )} - + ` : "—", @@ -576,33 +576,33 @@ export class HaConfigEntities extends SubscribeMixin(LitElement) { .path=${mdiUndo} .label=${this.hass.localize("ui.common.enable")} > - + ${this.hass.localize( "ui.panel.config.entities.picker.enable_selected.button" )} - + - + ${this.hass.localize( "ui.panel.config.entities.picker.disable_selected.button" )} - + - + ${this.hass.localize( "ui.panel.config.entities.picker.hide_selected.button" )} - + - + ${this.hass.localize( "ui.panel.config.entities.picker.remove_selected.button" )} - + `} diff --git a/src/panels/config/helpers/dialog-helper-detail.ts b/src/panels/config/helpers/dialog-helper-detail.ts index 9d60baf078..7497b3d608 100644 --- a/src/panels/config/helpers/dialog-helper-detail.ts +++ b/src/panels/config/helpers/dialog-helper-detail.ts @@ -1,7 +1,6 @@ import "@material/mwc-button/mwc-button"; import { RequestSelectedDetail } from "@material/mwc-list/mwc-list-item-base"; -import "@polymer/paper-item/paper-icon-item"; -import "@polymer/paper-tooltip/paper-tooltip"; +import "@lrnwebcomponents/simple-tooltip/simple-tooltip"; import { css, CSSResultGroup, @@ -199,12 +198,12 @@ export class DialogHelperDetail extends LitElement { ${!isLoaded ? html` - ${this.hass.localize( "ui.dialogs.helper_settings.platform_not_loaded", "platform", domain - )} ` : ""} diff --git a/src/panels/config/helpers/ha-config-helpers.ts b/src/panels/config/helpers/ha-config-helpers.ts index f7138bfd97..41d5f03441 100644 --- a/src/panels/config/helpers/ha-config-helpers.ts +++ b/src/panels/config/helpers/ha-config-helpers.ts @@ -1,5 +1,5 @@ import { mdiPencilOff, mdiPlus } from "@mdi/js"; -import "@polymer/paper-tooltip/paper-tooltip"; +import "@lrnwebcomponents/simple-tooltip/simple-tooltip"; import { HassEntity, UnsubscribeFunc } from "home-assistant-js-websocket"; import { html, LitElement, PropertyValues, TemplateResult } from "lit"; import { customElement, property, state } from "lit/decorators"; @@ -139,11 +139,11 @@ export class HaConfigHelpers extends SubscribeMixin(LitElement) { style="display:inline-block; position: relative;" > - + ${this.hass.localize( "ui.panel.config.entities.picker.status.readonly" )} - + ` : ""} diff --git a/src/panels/config/integrations/ha-integration-card.ts b/src/panels/config/integrations/ha-integration-card.ts index a369f82157..efdfeac5c0 100644 --- a/src/panels/config/integrations/ha-integration-card.ts +++ b/src/panels/config/integrations/ha-integration-card.ts @@ -22,7 +22,7 @@ import { } from "@mdi/js"; import "@polymer/paper-item/paper-item"; import "@polymer/paper-listbox"; -import "@polymer/paper-tooltip/paper-tooltip"; +import "@lrnwebcomponents/simple-tooltip/simple-tooltip"; import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit"; import { customElement, property } from "lit/decorators"; import { classMap } from "lit/directives/class-map"; @@ -192,11 +192,11 @@ export class HaIntegrationCard extends LitElement { class="info" .path=${mdiProgressHelper} > + > ${this.hass.localize( `ui.panel.config.integrations.config_entry.state.setup_in_progress` )} - + ` : ""} ${ERROR_STATES.includes(item.state) @@ -207,11 +207,11 @@ export class HaIntegrationCard extends LitElement { ? mdiReloadAlert : mdiAlertCircle} > + > ${this.hass.localize( `ui.panel.config.integrations.config_entry.state.${item.state}` )} - + ` : ""} diff --git a/src/panels/config/integrations/ha-integration-header.ts b/src/panels/config/integrations/ha-integration-header.ts index 3ea5c63138..cbf5fa04b9 100644 --- a/src/panels/config/integrations/ha-integration-header.ts +++ b/src/panels/config/integrations/ha-integration-header.ts @@ -1,5 +1,5 @@ import { mdiBugPlay, mdiCloud, mdiPackageVariant, mdiSyncOff } from "@mdi/js"; -import "@polymer/paper-tooltip/paper-tooltip"; +import "@lrnwebcomponents/simple-tooltip/simple-tooltip"; import { css, html, LitElement, TemplateResult } from "lit"; import { customElement, property } from "lit/decorators"; import "../../../components/ha-svg-icon"; @@ -115,8 +115,8 @@ export class HaIntegrationHeader extends LitElement { ([icon, description]) => html` - ${description}${description} ` @@ -203,7 +203,7 @@ export class HaIntegrationHeader extends LitElement { height: 20px; margin: 4px; } - paper-tooltip { + simple-tooltip { white-space: nowrap; } `; diff --git a/src/panels/config/integrations/ha-integration-list-item.ts b/src/panels/config/integrations/ha-integration-list-item.ts index 3d3ea7d4d2..b288f6a62d 100644 --- a/src/panels/config/integrations/ha-integration-list-item.ts +++ b/src/panels/config/integrations/ha-integration-list-item.ts @@ -72,20 +72,20 @@ export class HaIntegrationListItem extends ListItemBase { ${this.integration.cloud ? html`${this.hass.localize( "ui.panel.config.integrations.config_entry.depends_on_cloud" - )}` : ""} ${!this.integration.is_built_in ? html`${this.hass.localize( "ui.panel.config.integrations.config_entry.provided_by_custom_integration" - )}` : ""} @@ -93,10 +93,10 @@ export class HaIntegrationListItem extends ListItemBase { !this.integration.integrations && !this.integration.iot_standards ? html`${this.hass.localize( "ui.panel.config.integrations.config_entry.yaml_only" - )} - + ${this.hass.localize( `ui.panel.config.lovelace.dashboards.default_dashboard` )} - + ` : ""} `; diff --git a/src/panels/config/scene/ha-scene-dashboard.ts b/src/panels/config/scene/ha-scene-dashboard.ts index 7146903b3c..a3a099c18a 100644 --- a/src/panels/config/scene/ha-scene-dashboard.ts +++ b/src/panels/config/scene/ha-scene-dashboard.ts @@ -7,7 +7,7 @@ import { mdiPlay, mdiPlus, } from "@mdi/js"; -import "@polymer/paper-tooltip/paper-tooltip"; +import "@lrnwebcomponents/simple-tooltip/simple-tooltip"; import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit"; import { customElement, property, state } from "lit/decorators"; import memoizeOne from "memoize-one"; @@ -131,11 +131,11 @@ class HaSceneDashboard extends LitElement { template: (_info, scene: any) => !scene.attributes.id ? html` - + ${this.hass.localize( "ui.panel.config.scene.picker.only_editable" )} - + ${user.system_generated ? html` - + ${this.hass.localize( "ui.panel.config.users.editor.system_generated_users_not_removable" )} - + ` : ""} ${!user.system_generated && this.hass.user?.is_owner @@ -196,11 +196,11 @@ class DialogUserDetail extends LitElement { ${user.system_generated ? html` - + ${this.hass.localize( "ui.panel.config.users.editor.system_generated_users_not_editable" )} - + ` : ""} diff --git a/src/panels/config/zone/ha-config-zone.ts b/src/panels/config/zone/ha-config-zone.ts index d46e313ff4..2e3c3b587a 100644 --- a/src/panels/config/zone/ha-config-zone.ts +++ b/src/panels/config/zone/ha-config-zone.ts @@ -2,7 +2,7 @@ import { mdiCog, mdiPencil, mdiPencilOff, mdiPlus } from "@mdi/js"; import "@polymer/paper-item/paper-icon-item"; import "@polymer/paper-item/paper-item-body"; import "@polymer/paper-listbox/paper-listbox"; -import "@polymer/paper-tooltip/paper-tooltip"; +import "@lrnwebcomponents/simple-tooltip/simple-tooltip"; import { HassEntity, UnsubscribeFunc } from "home-assistant-js-websocket"; import { css, @@ -200,11 +200,11 @@ export class HaConfigZone extends SubscribeMixin(LitElement) { > ${stateObject.entity_id !== "zone.home" ? html` - + ${hass.localize( "ui.panel.config.zone.configured_in_yaml" )} - + ` : ""} diff --git a/src/panels/lovelace/cards/energy/hui-energy-carbon-consumed-gauge-card.ts b/src/panels/lovelace/cards/energy/hui-energy-carbon-consumed-gauge-card.ts index 97541d5cc5..680dc43bda 100644 --- a/src/panels/lovelace/cards/energy/hui-energy-carbon-consumed-gauge-card.ts +++ b/src/panels/lovelace/cards/energy/hui-energy-carbon-consumed-gauge-card.ts @@ -1,5 +1,5 @@ import { mdiInformation } from "@mdi/js"; -import "@polymer/paper-tooltip"; +import "@lrnwebcomponents/simple-tooltip/simple-tooltip"; import { UnsubscribeFunc } from "home-assistant-js-websocket"; import { css, CSSResultGroup, html, LitElement, nothing } from "lit"; import { customElement, property, state } from "lit/decorators"; @@ -118,13 +118,13 @@ class HuiEnergyCarbonGaugeCard ${value !== undefined ? html` - + ${this.hass.localize( "ui.panel.lovelace.cards.energy.carbon_consumed_gauge.card_indicates_energy_used" )} - + span { + simple-tooltip > span { font-size: 12px; line-height: 12px; } - paper-tooltip { + simple-tooltip { width: 80%; max-width: 250px; top: 8px !important; diff --git a/src/panels/lovelace/cards/energy/hui-energy-grid-neutrality-gauge-card.ts b/src/panels/lovelace/cards/energy/hui-energy-grid-neutrality-gauge-card.ts index 73efe19f4a..6d49817e5d 100644 --- a/src/panels/lovelace/cards/energy/hui-energy-grid-neutrality-gauge-card.ts +++ b/src/panels/lovelace/cards/energy/hui-energy-grid-neutrality-gauge-card.ts @@ -1,5 +1,5 @@ import { mdiInformation } from "@mdi/js"; -import "@polymer/paper-tooltip"; +import "@lrnwebcomponents/simple-tooltip/simple-tooltip"; import { UnsubscribeFunc } from "home-assistant-js-websocket"; import { css, CSSResultGroup, html, LitElement, nothing } from "lit"; import { customElement, property, state } from "lit/decorators"; @@ -102,7 +102,7 @@ class HuiEnergyGridGaugeCard ${value !== undefined ? html` - + ${this.hass.localize( "ui.panel.lovelace.cards.energy.grid_neutrality_gauge.energy_dependency" @@ -112,7 +112,7 @@ class HuiEnergyGridGaugeCard "ui.panel.lovelace.cards.energy.grid_neutrality_gauge.color_explain" )} - + span { + simple-tooltip > span { font-size: 12px; line-height: 12px; } - paper-tooltip { + simple-tooltip { width: 80%; max-width: 250px; top: 8px !important; diff --git a/src/panels/lovelace/cards/energy/hui-energy-solar-consumed-gauge-card.ts b/src/panels/lovelace/cards/energy/hui-energy-solar-consumed-gauge-card.ts index b027d92b49..0365164fb7 100644 --- a/src/panels/lovelace/cards/energy/hui-energy-solar-consumed-gauge-card.ts +++ b/src/panels/lovelace/cards/energy/hui-energy-solar-consumed-gauge-card.ts @@ -1,5 +1,5 @@ import { mdiInformation } from "@mdi/js"; -import "@polymer/paper-tooltip"; +import "@lrnwebcomponents/simple-tooltip/simple-tooltip"; import { UnsubscribeFunc } from "home-assistant-js-websocket"; import { css, CSSResultGroup, html, LitElement, nothing } from "lit"; import { customElement, property, state } from "lit/decorators"; @@ -93,7 +93,7 @@ class HuiEnergySolarGaugeCard ${value !== undefined ? html` - + ${this.hass.localize( "ui.panel.lovelace.cards.energy.solar_consumed_gauge.card_indicates_solar_energy_used" @@ -103,7 +103,7 @@ class HuiEnergySolarGaugeCard "ui.panel.lovelace.cards.energy.solar_consumed_gauge.card_indicates_solar_energy_used_charge_home_bat" )} - + span { + simple-tooltip > span { font-size: 12px; line-height: 12px; } - paper-tooltip { + simple-tooltip { width: 80%; max-width: 250px; top: 8px !important; diff --git a/src/panels/profile/ha-mfa-modules-card.ts b/src/panels/profile/ha-mfa-modules-card.ts index 620f1f5ed1..c6fed2b149 100644 --- a/src/panels/profile/ha-mfa-modules-card.ts +++ b/src/panels/profile/ha-mfa-modules-card.ts @@ -1,6 +1,4 @@ import "@material/mwc-button"; -import "@polymer/paper-item/paper-item"; -import "@polymer/paper-item/paper-item-body"; import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit"; import { customElement, property } from "lit/decorators"; import { fireEvent } from "../../common/dom/fire_event"; @@ -19,11 +17,9 @@ class HaMfaModulesCard extends LitElement { return html` ${this.mfaModules.map( - (module) => html` - -
${module.name}
-
${module.id}
- + (module) => html` + ${module.name} + ${module.id} ${module.enabled ? html`${this.hass.localize( @@ -35,7 +31,7 @@ class HaMfaModulesCard extends LitElement { "ui.panel.profile.mfa.enable" )}`} - ` + ` )} `; @@ -46,6 +42,9 @@ class HaMfaModulesCard extends LitElement { mwc-button { margin-right: -0.57em; } + ha-list-item { + --mdc-list-item-meta-size: auto; + } `; } diff --git a/src/panels/profile/ha-refresh-tokens-card.ts b/src/panels/profile/ha-refresh-tokens-card.ts index 12f08d2bf0..b271002a63 100644 --- a/src/panels/profile/ha-refresh-tokens-card.ts +++ b/src/panels/profile/ha-refresh-tokens-card.ts @@ -1,5 +1,5 @@ import { mdiDelete } from "@mdi/js"; -import "@polymer/paper-tooltip/paper-tooltip"; +import "@lrnwebcomponents/simple-tooltip/simple-tooltip"; import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit"; import { customElement, property } from "lit/decorators"; import memoizeOne from "memoize-one"; @@ -86,11 +86,11 @@ class HaRefreshTokens extends LitElement {
${token.is_current - ? html` + ? html` ${this.hass.localize( "ui.panel.profile.refresh_tokens.current_token_tooltip" )} - ` + ` : ""} --material-caption-font-size: 0.75rem; --material-button-font-size: 0.875rem; + /* Paper shadow */ + --shadow-transition: { + transition: box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1); + }; + + --shadow-none: { + box-shadow: none; + }; + + /* from http://codepen.io/shyndman/pen/c5394ddf2e8b2a5c9185904b57421cdb */ + + --shadow-elevation-2dp: { + box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), + 0 1px 5px 0 rgba(0, 0, 0, 0.12), + 0 3px 1px -2px rgba(0, 0, 0, 0.2); + }; + + --shadow-elevation-3dp: { + box-shadow: 0 3px 4px 0 rgba(0, 0, 0, 0.14), + 0 1px 8px 0 rgba(0, 0, 0, 0.12), + 0 3px 3px -2px rgba(0, 0, 0, 0.4); + }; + + --shadow-elevation-4dp: { + box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), + 0 1px 10px 0 rgba(0, 0, 0, 0.12), + 0 2px 4px -1px rgba(0, 0, 0, 0.4); + }; + + --shadow-elevation-6dp: { + box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.14), + 0 1px 18px 0 rgba(0, 0, 0, 0.12), + 0 3px 5px -1px rgba(0, 0, 0, 0.4); + }; + + --shadow-elevation-8dp: { + box-shadow: 0 8px 10px 1px rgba(0, 0, 0, 0.14), + 0 3px 14px 2px rgba(0, 0, 0, 0.12), + 0 5px 5px -3px rgba(0, 0, 0, 0.4); + }; + + --shadow-elevation-12dp: { + box-shadow: 0 12px 16px 1px rgba(0, 0, 0, 0.14), + 0 4px 22px 3px rgba(0, 0, 0, 0.12), + 0 6px 7px -4px rgba(0, 0, 0, 0.4); + }; + + --shadow-elevation-16dp: { + box-shadow: 0 16px 24px 2px rgba(0, 0, 0, 0.14), + 0 6px 30px 5px rgba(0, 0, 0, 0.12), + 0 8px 10px -5px rgba(0, 0, 0, 0.4); + }; + + --shadow-elevation-24dp: { + box-shadow: 0 24px 38px 3px rgba(0, 0, 0, 0.14), + 0 9px 46px 8px rgba(0, 0, 0, 0.12), + 0 11px 15px -7px rgba(0, 0, 0, 0.4); + }; + + /* Paper typography Styles */ + --paper-font-common-base: { + font-family: 'Roboto', 'Noto', sans-serif; + -webkit-font-smoothing: antialiased; + }; + + --paper-font-common-code: { + font-family: 'Roboto Mono', 'Consolas', 'Menlo', monospace; + -webkit-font-smoothing: antialiased; + }; + + --paper-font-common-expensive-kerning: { + text-rendering: optimizeLegibility; + }; + + --paper-font-common-nowrap: { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + }; + + /* Material Font Styles */ + + --paper-font-display4: { + @apply --paper-font-common-base; + @apply --paper-font-common-nowrap; + + font-size: 112px; + font-weight: 300; + letter-spacing: -.044em; + line-height: 120px; + }; + + --paper-font-display3: { + @apply --paper-font-common-base; + @apply --paper-font-common-nowrap; + + font-size: 56px; + font-weight: 400; + letter-spacing: -.026em; + line-height: 60px; + }; + + --paper-font-display2: { + @apply --paper-font-common-base; + + font-size: 45px; + font-weight: 400; + letter-spacing: -.018em; + line-height: 48px; + }; + + --paper-font-display1: { + @apply --paper-font-common-base; + + font-size: 34px; + font-weight: 400; + letter-spacing: -.01em; + line-height: 40px; + }; + + --paper-font-headline: { + @apply --paper-font-common-base; + + font-size: 24px; + font-weight: 400; + letter-spacing: -.012em; + line-height: 32px; + }; + + --paper-font-title: { + @apply --paper-font-common-base; + @apply --paper-font-common-nowrap; + + font-size: 20px; + font-weight: 500; + line-height: 28px; + }; + + --paper-font-subhead: { + @apply --paper-font-common-base; + + font-size: 16px; + font-weight: 400; + line-height: 24px; + }; + + --paper-font-body2: { + @apply --paper-font-common-base; + + font-size: 14px; + font-weight: 500; + line-height: 24px; + }; + + --paper-font-body1: { + @apply --paper-font-common-base; + + font-size: 14px; + font-weight: 400; + line-height: 20px; + }; + + --paper-font-caption: { + @apply --paper-font-common-base; + @apply --paper-font-common-nowrap; + + font-size: 12px; + font-weight: 400; + letter-spacing: 0.011em; + line-height: 20px; + }; + + --paper-font-menu: { + @apply --paper-font-common-base; + @apply --paper-font-common-nowrap; + + font-size: 13px; + font-weight: 500; + line-height: 24px; + }; + + --paper-font-button: { + @apply --paper-font-common-base; + @apply --paper-font-common-nowrap; + + font-size: 14px; + font-weight: 500; + letter-spacing: 0.018em; + line-height: 24px; + text-transform: uppercase; + }; + + --paper-font-code2: { + @apply --paper-font-common-code; + + font-size: 14px; + font-weight: 700; + line-height: 20px; + }; + + --paper-font-code1: { + @apply --paper-font-common-code; + + font-size: 14px; + font-weight: 500; + line-height: 20px; + }; + ${Object.entries(derivedStyles) .map(([key, value]) => `--${key}: ${value};`) .join("")} diff --git a/yarn.lock b/yarn.lock index 4ad4067cd1..6c90d27245 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2001,6 +2001,15 @@ __metadata: languageName: node linkType: hard +"@lrnwebcomponents/simple-tooltip@npm:4.1.0": + version: 4.1.0 + resolution: "@lrnwebcomponents/simple-tooltip@npm:4.1.0" + dependencies: + lit: ^2.2.8 + checksum: 30af8e317fae1c04912ade8613b26bb6323164ddb5d6a01413a2e1555a637d34f88e6a079af16e912ed5f9b3990b9b7d98147a63fc1bdc5dde336fab8c32cbdc + languageName: node + linkType: hard + "@material/animation@npm:14.0.0-canary.53b3cad2f.0": version: 14.0.0-canary.53b3cad2f.0 resolution: "@material/animation@npm:14.0.0-canary.53b3cad2f.0" @@ -3397,7 +3406,7 @@ __metadata: languageName: node linkType: hard -"@polymer/iron-icon@npm:3.0.1, @polymer/iron-icon@npm:^3.0.0, @polymer/iron-icon@npm:^3.0.0-pre.26": +"@polymer/iron-icon@npm:^3.0.0, @polymer/iron-icon@npm:^3.0.0-pre.26": version: 3.0.1 resolution: "@polymer/iron-icon@npm:3.0.1" dependencies: @@ -3619,7 +3628,7 @@ __metadata: languageName: node linkType: hard -"@polymer/paper-styles@npm:3.0.1, @polymer/paper-styles@npm:^3.0.0-pre.26": +"@polymer/paper-styles@npm:^3.0.0-pre.26": version: 3.0.1 resolution: "@polymer/paper-styles@npm:3.0.1" dependencies: @@ -3660,16 +3669,6 @@ __metadata: languageName: node linkType: hard -"@polymer/paper-tooltip@npm:3.0.1": - version: 3.0.1 - resolution: "@polymer/paper-tooltip@npm:3.0.1" - dependencies: - "@polymer/paper-styles": ^3.0.0-pre.26 - "@polymer/polymer": ^3.0.0 - checksum: 74a4328527a80a42fde9fb35def7b711251b2b40fa25a0c3609ea393bd2901f987cf5c7c1119a5e7ca35d52fdd8a02d9bb857e37b6c07399c6a10a324ba1088e - languageName: node - linkType: hard - "@polymer/polymer@npm:3.5.1": version: 3.5.1 resolution: "@polymer/polymer@npm:3.5.1" @@ -9429,6 +9428,7 @@ __metadata: "@lit-labs/context": 0.2.0 "@lit-labs/motion": 1.0.3 "@lit-labs/virtualizer": 1.0.1 + "@lrnwebcomponents/simple-tooltip": 4.1.0 "@material/chips": =14.0.0-canary.53b3cad2f.0 "@material/data-table": =14.0.0-canary.53b3cad2f.0 "@material/mwc-button": 0.27.0 @@ -9461,17 +9461,14 @@ __metadata: "@open-wc/dev-server-hmr": 0.1.4 "@polymer/app-layout": 3.1.0 "@polymer/iron-flex-layout": 3.0.1 - "@polymer/iron-icon": 3.0.1 "@polymer/iron-input": 3.0.1 "@polymer/iron-resizable-behavior": 3.0.1 "@polymer/paper-input": 3.2.1 "@polymer/paper-item": 3.0.1 "@polymer/paper-listbox": 3.0.1 "@polymer/paper-slider": 3.0.1 - "@polymer/paper-styles": 3.0.1 "@polymer/paper-tabs": 3.1.0 "@polymer/paper-toast": 3.0.1 - "@polymer/paper-tooltip": 3.0.1 "@polymer/polymer": 3.5.1 "@rollup/plugin-babel": 6.0.3 "@rollup/plugin-commonjs": 24.0.1 @@ -11241,7 +11238,7 @@ __metadata: languageName: node linkType: hard -"lit@npm:2.7.0, lit@npm:^2.0.0, lit@npm:^2.0.0-rc.2, lit@npm:^2.2.1, lit@npm:^2.3.0, lit@npm:^2.5.0": +"lit@npm:2.7.0, lit@npm:^2.0.0, lit@npm:^2.0.0-rc.2, lit@npm:^2.2.1, lit@npm:^2.2.8, lit@npm:^2.3.0, lit@npm:^2.5.0": version: 2.7.0 resolution: "lit@npm:2.7.0" dependencies: