jeans/frontend
jeans/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2025-07-27 19:26:36 +00:00
Code Issues Packages Projects Releases Wiki Activity

20231206.0 (#18925)

Browse Source
This commit is contained in:
Paul Bottein 2023-12-06 14:24:48 +01:00 committed by GitHub
commit fce4e5e382
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
17 changed files with 147 additions and 51 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@ -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",

2
pyproject.toml
View File

@ -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"

2
src/auth/ha-authorize.ts
View File

@ -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);
}
</style>
<ha-alert alert-type="error"
@ -93,6 +94,7 @@ export class HaAuthorize extends litLocalizeLiteMixin(LitElement) {
ha-alert {
display: block;
margin: 16px 0;
background-color: var(--primary-background-color, #fafafa);
}
p {
font-size: 14px;

67
src/components/ha-control-circular-slider.ts
View File

@ -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 });
}
});
}
}

12
src/components/media-player/dialog-media-player-browse.ts
View File

@ -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}
>
<ha-dialog-header show-border slot="heading">
${this._navigateIds.length > 1
@ -167,6 +169,10 @@ class DialogMediaPlayerBrowse extends LitElement {
`;
}
private _dialogOpened() {
this.classList.add("opened");
}
private async _handleMenuAction(ev: CustomEvent<ActionDetail>) {
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;
}
}

11
src/dialogs/more-info/controls/more-info-update.ts
View File

@ -103,8 +103,10 @@ class MoreInfoUpdate extends LitElement {
: ""}
${supportsFeature(this.stateObj!, UPDATE_SUPPORT_RELEASE_NOTES) &&
!this._error
? this._releaseNotes === undefined
? html`<ha-circular-progress indeterminate></ha-circular-progress>`
? !this._releaseNotes
? html`<div class="flex center">
<ha-circular-progress indeterminate></ha-circular-progress>
</div>`
: html`<hr />
<ha-faded>
<ha-markdown .content=${this._releaseNotes}></ha-markdown>
@ -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;

10
src/panels/config/integrations/dialog-add-integration.ts
View File

@ -449,7 +449,9 @@ class AddIntegrationDialog extends LitElement {
>
</lit-virtualizer>
</mwc-list>`
: html`<ha-circular-progress indeterminate></ha-circular-progress>`} `;
: html`<div class="flex center">
<ha-circular-progress indeterminate></ha-circular-progress>
</div>`} `;
}
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 {

2
src/panels/config/integrations/integration-panels/zha/zha-add-devices-page.ts
View File

@ -236,7 +236,7 @@ class ZHAAddDevicesPage extends LitElement {
color: var(--error-color);
}
ha-circular-progress {
padding: 20px;
margin: 20px;
}
.searching {
margin-top: 20px;

9
src/panels/lovelace/cards/hui-humidifier-card.ts
View File

@ -127,6 +127,7 @@ export class HuiHumidifierCard extends LitElement implements LovelaceCard {
<ha-card>
<p class="title">${name}</p>
<ha-state-control-humidifier-humidity
prevent-interaction-on-scroll
show-current
.hass=${this.hass}
.stateObj=${stateObj}
@ -168,11 +169,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 {
@ -180,7 +184,6 @@ export class HuiHumidifierCard extends LitElement implements LovelaceCard {
max-width: 344px; /* 12px + 12px + 320px */
padding: 0 12px 12px 12px;
box-sizing: border-box;
--interaction-margin: 0px;
}
.more-info {

2
src/panels/lovelace/cards/hui-starting-card.ts
View File

@ -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%;

9
src/panels/lovelace/cards/hui-thermostat-card.ts
View File

@ -119,6 +119,7 @@ export class HuiThermostatCard extends LitElement implements LovelaceCard {
<ha-card>
<p class="title">${name}</p>
<ha-state-control-climate-temperature
prevent-interaction-on-scroll
show-current
.hass=${this.hass}
.stateObj=${stateObj}
@ -160,11 +161,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 {
@ -172,7 +176,6 @@ export class HuiThermostatCard extends LitElement implements LovelaceCard {
max-width: 344px; /* 12px + 12px + 320px */
padding: 0 12px 12px 12px;
box-sizing: border-box;
--interaction-margin: 0px;
}
.more-info {

14
src/state-control/climate/ha-state-control-climate-humidity.ts
View File

@ -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";
@ -30,6 +29,9 @@ export class HaStateControlClimateHumidity extends LitElement {
@property({ attribute: "show-current", type: Boolean })
public showCurrent?: boolean;
@property({ type: Boolean, attribute: "prevent-interaction-on-scroll" })
public preventInteractionOnScroll?: boolean;
@state() private _targetHumidity?: number;
private _sizeController = createStateControlCircularSliderController(this);
@ -176,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 &&
@ -186,12 +188,13 @@ export class HaStateControlClimateHumidity extends LitElement {
) {
return html`
<div
class="container${classMap(containerSizeClass)}"
class="container${containerSizeClass}"
style=${styleMap({
"--state-color": stateColor,
})}
>
<ha-control-circular-slider
.preventInteractionOnScroll=${this.preventInteractionOnScroll}
.inactive=${!active}
.value=${this._targetHumidity}
.min=${this._min}
@ -214,8 +217,9 @@ export class HaStateControlClimateHumidity extends LitElement {
}
return html`
<div class="container${classMap(containerSizeClass)}">
<div class="container${containerSizeClass}">
<ha-control-circular-slider
.preventInteractionOnScroll=${this.preventInteractionOnScroll}
.current=${this.stateObj.attributes.current_humidity}
.min=${this._min}
.max=${this._max}

14
src/state-control/climate/ha-state-control-climate-temperature.ts
View File

@ -48,6 +48,9 @@ export class HaStateControlClimateTemperature extends LitElement {
@property({ attribute: "show-current", type: Boolean })
public showCurrent?: boolean;
@property({ type: Boolean, attribute: "prevent-interaction-on-scroll" })
public preventInteractionOnScroll?: boolean;
@state() private _targetTemperature: Partial<Record<Target, number>> = {};
@state() private _selectTargetTemperature: Target = "low";
@ -291,8 +294,8 @@ export class HaStateControlClimateTemperature extends LitElement {
}
const containerSizeClass = this._sizeController.value
? { [this._sizeController.value]: true }
: {};
? ` ${this._sizeController.value}`
: "";
if (
supportsTargetTemperature &&
@ -311,13 +314,14 @@ export class HaStateControlClimateTemperature extends LitElement {
return html`
<div
class="container${classMap(containerSizeClass)}"
class="container${containerSizeClass}"
style=${styleMap({
"--state-color": stateColor,
"--action-color": actionColor,
})}
>
<ha-control-circular-slider
.preventInteractionOnScroll=${this.preventInteractionOnScroll}
.inactive=${!active}
.mode=${sliderMode}
.value=${this._targetTemperature.value}
@ -349,7 +353,7 @@ export class HaStateControlClimateTemperature extends LitElement {
) {
return html`
<div
class="container${classMap(containerSizeClass)}"
class="container${containerSizeClass}"
style=${styleMap({
"--low-color": lowColor,
"--high-color": highColor,
@ -357,6 +361,7 @@ export class HaStateControlClimateTemperature extends LitElement {
})}
>
<ha-control-circular-slider
.preventInteractionOnScroll=${this.preventInteractionOnScroll}
.inactive=${!active}
dual
.low=${this._targetTemperature.low}
@ -412,6 +417,7 @@ export class HaStateControlClimateTemperature extends LitElement {
})}
>
<ha-control-circular-slider
.preventInteractionOnScroll=${this.preventInteractionOnScroll}
mode="full"
.current=${this.stateObj.attributes.current_temperature}
.min=${this._min}

14
src/state-control/humidifier/ha-state-control-humidifier-humidity.ts
View File

@ -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 { stateColorCss } from "../../common/entity/state_color";
@ -32,6 +31,9 @@ export class HaStateControlHumidifierHumidity extends LitElement {
@property({ attribute: "show-current", type: Boolean })
public showCurrent?: boolean = false;
@property({ type: Boolean, attribute: "prevent-interaction-on-scroll" })
public preventInteractionOnScroll?: boolean;
@state() private _targetHumidity?: number;
private _sizeController = createStateControlCircularSliderController(this);
@ -185,8 +187,8 @@ export class HaStateControlHumidifierHumidity extends LitElement {
const currentHumidity = this.stateObj.attributes.current_humidity;
const containerSizeClass = this._sizeController.value
? { [this._sizeController.value]: true }
: {};
? ` ${this._sizeController.value}`
: "";
if (targetHumidity != null && this.stateObj.state !== UNAVAILABLE) {
const inverted =
@ -195,13 +197,14 @@ export class HaStateControlHumidifierHumidity extends LitElement {
return html`
<div
class="container${classMap(containerSizeClass)}"
class="container${containerSizeClass}"
style=${styleMap({
"--state-color": stateColor,
"--action-color": actionColor,
})}
>
<ha-control-circular-slider
.preventInteractionOnScroll=${this.preventInteractionOnScroll}
.inactive=${!active}
.mode=${inverted ? "end" : "start"}
.value=${targetHumidity}
@ -226,12 +229,13 @@ export class HaStateControlHumidifierHumidity extends LitElement {
return html`
<div
class="container${classMap(containerSizeClass)}"
class="container${containerSizeClass}"
style=${styleMap({
"--action-color": actionColor,
})}
>
<ha-control-circular-slider
.preventInteractionOnScroll=${this.preventInteractionOnScroll}
.current=${currentHumidity}
.min=${this._min}
.max=${this._max}

4
src/state-control/state-control-circular-slider-style.ts
View File

@ -121,10 +121,6 @@ export const stateControlCircularSliderStyle = css`
ha-control-circular-slider {
width: 100%;
--control-circular-slider-color: var(--state-color, var(--disabled-color));
--control-circular-slider-interaction-margin: var(
--interaction-margin,
12px
);
}
ha-control-circular-slider::after {
display: block;

14
src/state-control/water_heater/ha-state-control-water_heater-temperature.ts
View File

@ -1,7 +1,6 @@
import { mdiMinus, mdiPlus } 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 { UNIT_F } from "../../common/const";
import { stateActive } from "../../common/entity/state_active";
@ -33,6 +32,9 @@ export class HaStateControlWaterHeaterTemperature extends LitElement {
@property({ attribute: "show-current", type: Boolean })
public showCurrent?: boolean;
@property({ type: Boolean, attribute: "prevent-interaction-on-scroll" })
public preventInteractionOnScroll?: boolean;
@state() private _targetTemperature?: number;
private _sizeController = createStateControlCircularSliderController(this);
@ -181,8 +183,8 @@ export class HaStateControlWaterHeaterTemperature extends LitElement {
const active = stateActive(this.stateObj);
const containerSizeClass = this._sizeController.value
? { [this._sizeController.value]: true }
: {};
? ` ${this._sizeController.value}`
: "";
if (
supportsTargetTemperature &&
@ -191,12 +193,13 @@ export class HaStateControlWaterHeaterTemperature extends LitElement {
) {
return html`
<div
class="container${classMap(containerSizeClass)}"
class="container${containerSizeClass}"
style=${styleMap({
"--state-color": stateColor,
})}
>
<ha-control-circular-slider
.preventInteractionOnScroll=${this.preventInteractionOnScroll}
.inactive=${!active}
.value=${this._targetTemperature}
.min=${this._min}
@ -221,12 +224,13 @@ export class HaStateControlWaterHeaterTemperature extends LitElement {
return html`
<div
class="container${classMap(containerSizeClass)}"
class="container${containerSizeClass}"
style=${styleMap({
"--state-color": stateColor,
})}
>
<ha-control-circular-slider
.preventInteractionOnScroll=${this.preventInteractionOnScroll}
mode="full"
.current=${this.stateObj.attributes.current_temperature}
.min=${this._min}

10
yarn.lock
View File

@ -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"