From 134e13005d05134b75a2507f4247ddfaaac27c15 Mon Sep 17 00:00:00 2001 From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com> Date: Tue, 5 Dec 2023 18:18:46 -0500 Subject: [PATCH 1/8] Update dependency eslint-config-prettier to v9.1.0 (#18909) --- package.json | 2 +- yarn.lock | 10 +++++----- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/package.json b/package.json index 9a3d97508a..2a2a12d83b 100644 --- a/package.json +++ b/package.json @@ -195,7 +195,7 @@ "eslint": "8.55.0", "eslint-config-airbnb-base": "15.0.0", "eslint-config-airbnb-typescript": "17.1.0", - "eslint-config-prettier": "9.0.0", + "eslint-config-prettier": "9.1.0", "eslint-import-resolver-webpack": "0.13.8", "eslint-plugin-disable": "2.0.3", "eslint-plugin-import": "2.29.0", diff --git a/yarn.lock b/yarn.lock index 8a35d15f7e..0bfea07630 100644 --- a/yarn.lock +++ b/yarn.lock @@ -7927,14 +7927,14 @@ __metadata: languageName: node linkType: hard -"eslint-config-prettier@npm:9.0.0": - version: 9.0.0 - resolution: "eslint-config-prettier@npm:9.0.0" +"eslint-config-prettier@npm:9.1.0": + version: 9.1.0 + resolution: "eslint-config-prettier@npm:9.1.0" peerDependencies: eslint: ">=7.0.0" bin: eslint-config-prettier: bin/cli.js - checksum: 276b0b5b5b19066962a9ff3a16a553bdad28e1c0a2ea33a1d75d65c0428bb7b37f6e85ac111ebefcc9bdefb544385856dbe6eaeda5279c639e5549c113d27dda + checksum: 411e3b3b1c7aa04e3e0f20d561271b3b909014956c4dba51c878bf1a23dbb8c800a3be235c46c4732c70827276e540b6eed4636d9b09b444fd0a8e07f0fcd830 languageName: node linkType: hard @@ -9712,7 +9712,7 @@ __metadata: eslint: "npm:8.55.0" eslint-config-airbnb-base: "npm:15.0.0" eslint-config-airbnb-typescript: "npm:17.1.0" - eslint-config-prettier: "npm:9.0.0" + eslint-config-prettier: "npm:9.1.0" eslint-import-resolver-webpack: "npm:0.13.8" eslint-plugin-disable: "npm:2.0.3" eslint-plugin-import: "npm:2.29.0" From ef3785ce9fbfd532088961ab8152196d76edc71d Mon Sep 17 00:00:00 2001 From: Paul Bottein Date: Wed, 6 Dec 2023 13:16:47 +0100 Subject: [PATCH 2/8] Fix particles over alert in login screen (#18923) --- src/auth/ha-authorize.ts | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/auth/ha-authorize.ts b/src/auth/ha-authorize.ts index 24ae1f190c..6af166f067 100644 --- a/src/auth/ha-authorize.ts +++ b/src/auth/ha-authorize.ts @@ -63,6 +63,7 @@ export class HaAuthorize extends litLocalizeLiteMixin(LitElement) { ha-authorize ha-alert { display: block; margin: 16px 0; + background-color: var(--primary-background-color, #fafafa); } Date: Wed, 6 Dec 2023 13:28:03 +0100 Subject: [PATCH 3/8] Add ellipsis to thermostat and humidifier card title (#18924) --- src/panels/lovelace/cards/hui-humidifier-card.ts | 7 +++++-- src/panels/lovelace/cards/hui-thermostat-card.ts | 7 +++++-- 2 files changed, 10 insertions(+), 4 deletions(-) diff --git a/src/panels/lovelace/cards/hui-humidifier-card.ts b/src/panels/lovelace/cards/hui-humidifier-card.ts index 54264b7908..da83b795a2 100644 --- a/src/panels/lovelace/cards/hui-humidifier-card.ts +++ b/src/panels/lovelace/cards/hui-humidifier-card.ts @@ -168,11 +168,14 @@ export class HuiHumidifierCard extends LitElement implements LovelaceCard { .title { width: 100%; font-size: 18px; - line-height: 24px; - padding: 12px 36px 16px 36px; + line-height: 36px; + padding: 8px 30px 8px 30px; margin: 0; text-align: center; box-sizing: border-box; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; } ha-state-control-humidifier-humidity { diff --git a/src/panels/lovelace/cards/hui-thermostat-card.ts b/src/panels/lovelace/cards/hui-thermostat-card.ts index d85613948c..1d64de90de 100644 --- a/src/panels/lovelace/cards/hui-thermostat-card.ts +++ b/src/panels/lovelace/cards/hui-thermostat-card.ts @@ -160,11 +160,14 @@ export class HuiThermostatCard extends LitElement implements LovelaceCard { .title { width: 100%; font-size: 18px; - line-height: 24px; - padding: 12px 36px 16px 36px; + line-height: 36px; + padding: 8px 30px 8px 30px; margin: 0; text-align: center; box-sizing: border-box; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; } ha-state-control-climate-temperature { From b4ab0fc10bfee92d36a4e495661ac2e20ba997b0 Mon Sep 17 00:00:00 2001 From: Paul Bottein Date: Wed, 6 Dec 2023 14:13:19 +0100 Subject: [PATCH 4/8] Reduce sensitivity of the circular slider on touch devices (#18921) --- src/components/ha-control-circular-slider.ts | 67 +++++++++++++++++-- .../lovelace/cards/hui-humidifier-card.ts | 2 +- .../lovelace/cards/hui-thermostat-card.ts | 2 +- .../ha-state-control-climate-humidity.ts | 5 ++ .../ha-state-control-climate-temperature.ts | 6 ++ .../ha-state-control-humidifier-humidity.ts | 5 ++ .../state-control-circular-slider-style.ts | 4 -- ...-state-control-water_heater-temperature.ts | 5 ++ 8 files changed, 86 insertions(+), 10 deletions(-) diff --git a/src/components/ha-control-circular-slider.ts b/src/components/ha-control-circular-slider.ts index 759e726197..2bdb3dc401 100644 --- a/src/components/ha-control-circular-slider.ts +++ b/src/components/ha-control-circular-slider.ts @@ -2,6 +2,7 @@ import { DIRECTION_ALL, Manager, Pan, + Press, Tap, TouchMouseInput, } from "@egjs/hammerjs"; @@ -108,6 +109,9 @@ export class HaControlCircularSlider extends LitElement { @property({ type: Number }) public max = 100; + @property({ type: Boolean, attribute: "prevent-interaction-on-scroll" }) + public preventInteractionOnScroll?: boolean; + @state() public _localValue?: number = this.value; @@ -246,16 +250,62 @@ export class HaControlCircularSlider extends LitElement { this._mc = new Manager(this._interaction, { inputClass: TouchMouseInput, }); + + const pressToActivate = + this.preventInteractionOnScroll && "ontouchstart" in window; + + // If press to activate is true, a 60ms press is required to activate the slider this._mc.add( - new Pan({ - direction: DIRECTION_ALL, - enable: true, - threshold: 0, + new Press({ + enable: pressToActivate, + pointers: 1, + time: 60, }) ); + const panRecognizer = new Pan({ + direction: DIRECTION_ALL, + enable: !pressToActivate, + threshold: 0, + }); + + this._mc.add(panRecognizer); + this._mc.add(new Tap({ event: "singletap" })); + this._mc.on("press", (e) => { + e.srcEvent.stopPropagation(); + e.srcEvent.preventDefault(); + if (this.disabled || this.readonly) return; + const percentage = this._getPercentageFromEvent(e); + const raw = this._percentageToValue(percentage); + this._activeSlider = this._findActiveSlider(raw); + const bounded = this._boundedValue(raw); + this._setActiveValue(bounded); + const stepped = this._steppedValue(bounded); + if (this._activeSlider) { + fireEvent(this, `${this._activeSlider}-changing`, { value: stepped }); + } + panRecognizer.set({ enable: true }); + }); + + this._mc.on("pressup", (e) => { + e.srcEvent.stopPropagation(); + e.srcEvent.preventDefault(); + const percentage = this._getPercentageFromEvent(e); + const raw = this._percentageToValue(percentage); + const bounded = this._boundedValue(raw); + const stepped = this._steppedValue(bounded); + this._setActiveValue(stepped); + if (this._activeSlider) { + fireEvent(this, `${this._activeSlider}-changing`, { + value: undefined, + }); + fireEvent(this, `${this._activeSlider}-changed`, { value: stepped }); + } + this._activeSlider = undefined; + }); + this._mc.on("pan", (e) => { e.srcEvent.stopPropagation(); e.srcEvent.preventDefault(); @@ -271,6 +321,9 @@ export class HaControlCircularSlider extends LitElement { this._mc.on("pancancel", () => { if (this.disabled || this.readonly) return; this._activeSlider = undefined; + if (pressToActivate) { + panRecognizer.set({ enable: false }); + } }); this._mc.on("panmove", (e) => { if (this.disabled || this.readonly) return; @@ -297,6 +350,9 @@ export class HaControlCircularSlider extends LitElement { fireEvent(this, `${this._activeSlider}-changed`, { value: stepped }); } this._activeSlider = undefined; + if (pressToActivate) { + panRecognizer.set({ enable: false }); + } }); this._mc.on("singletap", (e) => { if (this.disabled || this.readonly) return; @@ -315,6 +371,9 @@ export class HaControlCircularSlider extends LitElement { this._lastSlider = this._activeSlider; this.shadowRoot?.getElementById("#slider")?.focus(); this._activeSlider = undefined; + if (pressToActivate) { + panRecognizer.set({ enable: false }); + } }); } } diff --git a/src/panels/lovelace/cards/hui-humidifier-card.ts b/src/panels/lovelace/cards/hui-humidifier-card.ts index da83b795a2..445f02c935 100644 --- a/src/panels/lovelace/cards/hui-humidifier-card.ts +++ b/src/panels/lovelace/cards/hui-humidifier-card.ts @@ -127,6 +127,7 @@ export class HuiHumidifierCard extends LitElement implements LovelaceCard {

${name}

${name}

> = {}; @state() private _selectTargetTemperature: Target = "low"; @@ -318,6 +321,7 @@ export class HaStateControlClimateTemperature extends LitElement { })} > Date: Wed, 6 Dec 2023 14:14:14 +0100 Subject: [PATCH 5/8] Force media player browser dialog re-layout after open animation (#18910) --- .../media-player/dialog-media-player-browse.ts | 12 ++++++++++-- 1 file changed, 10 insertions(+), 2 deletions(-) diff --git a/src/components/media-player/dialog-media-player-browse.ts b/src/components/media-player/dialog-media-player-browse.ts index 47df56ca4c..fd8bdba673 100644 --- a/src/components/media-player/dialog-media-player-browse.ts +++ b/src/components/media-player/dialog-media-player-browse.ts @@ -58,6 +58,7 @@ class DialogMediaPlayerBrowse extends LitElement { this._navigateIds = undefined; this._currentItem = undefined; this._preferredLayout = "auto"; + this.classList.remove("opened"); fireEvent(this, "dialog-closed", { dialog: this.localName }); } @@ -79,6 +80,7 @@ class DialogMediaPlayerBrowse extends LitElement { ) : this._currentItem.title} @closed=${this.closeDialog} + @opened=${this._dialogOpened} > ${this._navigateIds.length > 1 @@ -167,6 +169,10 @@ class DialogMediaPlayerBrowse extends LitElement { `; } + private _dialogOpened() { + this.classList.add("opened"); + } + private async _handleMenuAction(ev: CustomEvent) { switch (ev.detail.index) { case 0: @@ -217,10 +223,13 @@ class DialogMediaPlayerBrowse extends LitElement { ha-media-player-browse { --media-browser-max-height: calc(100vh - 65px); - height: calc(100vh - 65px); direction: ltr; } + :host(.opened) ha-media-player-browse { + height: calc(100vh - 65px); + } + @media (min-width: 800px) { ha-dialog { --mdc-dialog-max-width: 800px; @@ -231,7 +240,6 @@ class DialogMediaPlayerBrowse extends LitElement { ha-media-player-browse { position: initial; --media-browser-max-height: 100vh - 137px; - height: 100vh - 137px; width: 700px; } } From 86726102fb13b78caa76ae92ee4902b18e6ea9b4 Mon Sep 17 00:00:00 2001 From: Bram Kragten Date: Wed, 6 Dec 2023 14:21:28 +0100 Subject: [PATCH 6/8] Fix issues with circular progress (#18920) --- src/dialogs/more-info/controls/more-info-update.ts | 11 +++++++---- .../config/integrations/dialog-add-integration.ts | 10 +++++++--- .../integration-panels/zha/zha-add-devices-page.ts | 2 +- src/panels/lovelace/cards/hui-starting-card.ts | 2 +- 4 files changed, 16 insertions(+), 9 deletions(-) diff --git a/src/dialogs/more-info/controls/more-info-update.ts b/src/dialogs/more-info/controls/more-info-update.ts index 9da33d5780..cb62294078 100644 --- a/src/dialogs/more-info/controls/more-info-update.ts +++ b/src/dialogs/more-info/controls/more-info-update.ts @@ -103,8 +103,10 @@ class MoreInfoUpdate extends LitElement { : ""} ${supportsFeature(this.stateObj!, UPDATE_SUPPORT_RELEASE_NOTES) && !this._error - ? this._releaseNotes === undefined - ? html`` + ? !this._releaseNotes + ? html`
+ +
` : html`
@@ -254,9 +256,10 @@ class MoreInfoUpdate extends LitElement { a { color: var(--primary-color); } - ha-circular-progress { - width: 100%; + .flex.center { + display: flex; justify-content: center; + align-items: center; } mwc-linear-progress { margin-bottom: -8px; diff --git a/src/panels/config/integrations/dialog-add-integration.ts b/src/panels/config/integrations/dialog-add-integration.ts index f2c70e90d6..14b1ed581c 100644 --- a/src/panels/config/integrations/dialog-add-integration.ts +++ b/src/panels/config/integrations/dialog-add-integration.ts @@ -449,7 +449,9 @@ class AddIntegrationDialog extends LitElement { > ` - : html``} `; + : html`
+ +
`} `; } private _keyFunction = (integration: IntegrationListItem) => @@ -682,10 +684,12 @@ class AddIntegrationDialog extends LitElement { p > a { color: var(--primary-color); } - ha-circular-progress { - width: 100%; + .flex.center { display: flex; justify-content: center; + align-items: center; + } + ha-circular-progress { margin: 24px 0; } mwc-list { 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 05095473fc..0201e8e4fc 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 @@ -236,7 +236,7 @@ class ZHAAddDevicesPage extends LitElement { color: var(--error-color); } ha-circular-progress { - padding: 20px; + margin: 20px; } .searching { margin-top: 20px; diff --git a/src/panels/lovelace/cards/hui-starting-card.ts b/src/panels/lovelace/cards/hui-starting-card.ts index 7fc85e5dd1..a5cd780a1e 100644 --- a/src/panels/lovelace/cards/hui-starting-card.ts +++ b/src/panels/lovelace/cards/hui-starting-card.ts @@ -59,7 +59,7 @@ export class HuiStartingCard extends LitElement implements LovelaceCard { height: calc(100vh - var(--header-height)); } ha-circular-progress { - padding-bottom: 20px; + margin-bottom: 20px; } .content { height: 100%; From e646528b86e2541a7ec3497e9156e68b66cb5396 Mon Sep 17 00:00:00 2001 From: Paul Bottein Date: Wed, 6 Dec 2023 14:22:32 +0100 Subject: [PATCH 7/8] Fix empty classmap in state control (#18922) * Fix empy classmap in state control * Don't use class map --- .../climate/ha-state-control-climate-humidity.ts | 9 ++++----- .../climate/ha-state-control-climate-temperature.ts | 8 ++++---- .../humidifier/ha-state-control-humidifier-humidity.ts | 9 ++++----- .../ha-state-control-water_heater-temperature.ts | 9 ++++----- 4 files changed, 16 insertions(+), 19 deletions(-) diff --git a/src/state-control/climate/ha-state-control-climate-humidity.ts b/src/state-control/climate/ha-state-control-climate-humidity.ts index 8246e13350..be27b7bdb6 100644 --- a/src/state-control/climate/ha-state-control-climate-humidity.ts +++ b/src/state-control/climate/ha-state-control-climate-humidity.ts @@ -1,7 +1,6 @@ import { mdiMinus, mdiPlus, mdiWaterPercent } from "@mdi/js"; import { CSSResultGroup, LitElement, PropertyValues, html } from "lit"; import { customElement, property, state } from "lit/decorators"; -import { classMap } from "lit/directives/class-map"; import { styleMap } from "lit/directives/style-map"; import { stateActive } from "../../common/entity/state_active"; import { domainStateColorProperties } from "../../common/entity/state_color"; @@ -179,8 +178,8 @@ export class HaStateControlClimateHumidity extends LitElement { const currentHumidity = this.stateObj.attributes.current_humidity; const containerSizeClass = this._sizeController.value - ? { [this._sizeController.value]: true } - : {}; + ? ` ${this._sizeController.value}` + : ""; if ( supportsTargetHumidity && @@ -189,7 +188,7 @@ export class HaStateControlClimateHumidity extends LitElement { ) { return html`
+
Date: Wed, 6 Dec 2023 14:23:09 +0100 Subject: [PATCH 8/8] Bumped version to 20231206.0 --- pyproject.toml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/pyproject.toml b/pyproject.toml index ef6f7a2408..72f8dec3af 100644 --- a/pyproject.toml +++ b/pyproject.toml @@ -4,7 +4,7 @@ build-backend = "setuptools.build_meta" [project] name = "home-assistant-frontend" -version = "20231205.0" +version = "20231206.0" license = {text = "Apache-2.0"} description = "The Home Assistant frontend" readme = "README.md"