diff --git a/cast/src/html/receiver.html.template b/cast/src/html/receiver.html.template index d326ce55ff..0cb9154fc9 100644 --- a/cast/src/html/receiver.html.template +++ b/cast/src/html/receiver.html.template @@ -7,7 +7,6 @@ <%= renderTemplate("../../../src/html/_style_base.html.template") %> diff --git a/cast/src/receiver/layout/hc-lovelace.ts b/cast/src/receiver/layout/hc-lovelace.ts index 0cf3d5121d..b84b052484 100644 --- a/cast/src/receiver/layout/hc-lovelace.ts +++ b/cast/src/receiver/layout/hc-lovelace.ts @@ -59,7 +59,8 @@ class HcLovelace extends LitElement { return html` - + + , "tooltipPosition" | "hasValue" | "getProps"> { top: string; @@ -61,8 +56,6 @@ export class HaChartBase extends LitElement { @property({ attribute: "external-hidden", type: Boolean }) public externalHidden = false; - @state() private _chartHeight?: number; - @state() private _legendHeight?: number; @state() private _tooltip?: Tooltip; @@ -96,36 +89,10 @@ export class HaChartBase extends LitElement { } } - public updateChart = ( - mode: - | "resize" - | "reset" - | "none" - | "hide" - | "show" - | "default" - | "active" - | undefined - ): void => { + public updateChart = (mode?: UpdateMode): void => { this.chart?.update(mode); }; - public resize = (options?: ChartResizeOptions): void => { - if (options?.aspectRatio && !options.height) { - options.height = Math.round( - (options.width ?? this.clientWidth) / options.aspectRatio - ); - } else if (options?.aspectRatio && !options.width) { - options.width = Math.round( - (options.height ?? this.clientHeight) * options.aspectRatio - ); - } - this.chart?.resize( - options?.width ?? this.clientWidth, - options?.height ?? this.clientHeight - ); - }; - protected firstUpdated() { this._setupChart(); this.data.datasets.forEach((dataset, index) => { @@ -267,96 +234,84 @@ export class HaChartBase extends LitElement { ` : ""}
-
+
- -
-
- ${isMac - ? this.hass.localize( - "ui.components.history_charts.zoom_hint_mac" - ) - : this.hass.localize("ui.components.history_charts.zoom_hint")} -
+
+ ${isMac + ? this.hass.localize("ui.components.history_charts.zoom_hint_mac") + : this.hass.localize("ui.components.history_charts.zoom_hint")}
- ${this._isZoomed && this.chartType !== "timeline" - ? html`` - : nothing} - ${this._tooltip - ? html`
-
${this._tooltip.title}
- ${this._tooltip.beforeBody - ? html`
- ${this._tooltip.beforeBody} -
` - : ""} -
-
    - ${this._tooltip.body.map( - (item, i) => - html`
  • -
    - ${item.lines.join("\n")} -
    • ` - )} -
-
- ${this._tooltip.footer.length - ? html`
- ${this._tooltip.footer.map((item) => html`${item}
`)} -
` - : ""} -
` - : ""}
+ ${this._isZoomed && this.chartType !== "timeline" + ? html`` + : nothing} + ${this._tooltip + ? html`
+
${this._tooltip.title}
+ ${this._tooltip.beforeBody + ? html`
+ ${this._tooltip.beforeBody} +
` + : ""} +
+
    + ${this._tooltip.body.map( + (item, i) => + html`
  • +
    + ${item.lines.join("\n")} +
    • ` + )} +
+
+ ${this._tooltip.footer.length + ? html`
+ ${this._tooltip.footer.map((item) => html`${item}
`)} +
` + : ""} +
` + : ""}
`; } @@ -471,11 +426,11 @@ export class HaChartBase extends LitElement { ...(this.plugins || []), { id: "resizeHook", - resize: (chart) => { - const change = chart.height - (this._chartHeight ?? 0); - if (!this._chartHeight || change > 12 || change < -12) { - // hysteresis to prevent infinite render loops - this._chartHeight = chart.height; + resize: (chart: Chart) => { + if (!this.height) { + // lock the height + // this removes empty space below the chart + this.height = chart.height; } }, legend: { @@ -486,6 +441,10 @@ export class HaChartBase extends LitElement { ]; } + private _getDefaultHeight() { + return this.clientWidth / 2; + } + private _handleChartScroll(ev: MouseEvent) { const modifier = isMac ? "metaKey" : "ctrlKey"; this._tooltip = undefined; @@ -573,11 +532,6 @@ export class HaChartBase extends LitElement { display: block; position: relative; } - .animation-container { - overflow: hidden; - height: 0; - transition: height 300ms cubic-bezier(0.4, 0, 0.2, 1); - } .chart-container { position: relative; } diff --git a/src/components/chart/state-history-chart-line.ts b/src/components/chart/state-history-chart-line.ts index e2113b7478..887952f3b3 100644 --- a/src/components/chart/state-history-chart-line.ts +++ b/src/components/chart/state-history-chart-line.ts @@ -1,7 +1,7 @@ import type { ChartData, ChartDataset, ChartOptions } from "chart.js"; import type { PropertyValues } from "lit"; import { html, LitElement } from "lit"; -import { property, query, state } from "lit/decorators"; +import { property, state } from "lit/decorators"; import { getGraphColorByIndex } from "../../common/color/colors"; import { fireEvent } from "../../common/dom/fire_event"; import { computeRTL } from "../../common/util/compute_rtl"; @@ -12,7 +12,6 @@ import { } from "../../common/number/format_number"; import type { LineChartEntity, LineChartState } from "../../data/history"; import type { HomeAssistant } from "../../types"; -import type { ChartResizeOptions, HaChartBase } from "./ha-chart-base"; import { MIN_TIME_BETWEEN_UPDATES } from "./ha-chart-base"; import { clickIsTouch } from "./click_is_touch"; @@ -67,12 +66,6 @@ export class StateHistoryChartLine extends LitElement { private _chartTime: Date = new Date(); - @query("ha-chart-base") private _chart?: HaChartBase; - - public resize = (options?: ChartResizeOptions): void => { - this._chart?.resize(options); - }; - protected render() { return html` { - this._chart?.resize(options); - }; - protected render() { return html` { - this._charts?.forEach( - (chart: StateHistoryChartLine | StateHistoryChartTimeline) => - chart.resize(options) - ); - }; - protected render() { if (!isComponentLoaded(this.hass, "history")) { return html`
diff --git a/src/components/chart/statistics-chart.ts b/src/components/chart/statistics-chart.ts index 2873df4d60..ff0dd5d0fe 100644 --- a/src/components/chart/statistics-chart.ts +++ b/src/components/chart/statistics-chart.ts @@ -6,7 +6,7 @@ import type { } from "chart.js"; import type { CSSResultGroup, PropertyValues, TemplateResult } from "lit"; import { css, html, LitElement } from "lit"; -import { customElement, property, state, query } from "lit/decorators"; +import { customElement, property, state } from "lit/decorators"; import memoizeOne from "memoize-one"; import { getGraphColorByIndex } from "../../common/color/colors"; import { isComponentLoaded } from "../../common/config/is_component_loaded"; @@ -30,11 +30,7 @@ import { } from "../../data/recorder"; import type { HomeAssistant } from "../../types"; import "./ha-chart-base"; -import type { - ChartResizeOptions, - ChartDatasetExtra, - HaChartBase, -} from "./ha-chart-base"; +import type { ChartDatasetExtra } from "./ha-chart-base"; import { clickIsTouch } from "./click_is_touch"; export const supportedStatTypeMap: Record = { @@ -98,14 +94,8 @@ export class StatisticsChart extends LitElement { @state() private _hiddenStats = new Set(); - @query("ha-chart-base") private _chart?: HaChartBase; - private _computedStyle?: CSSStyleDeclaration; - public resize = (options?: ChartResizeOptions): void => { - this._chart?.resize(options); - }; - protected shouldUpdate(changedProps: PropertyValues): boolean { return changedProps.size > 1 || !changedProps.has("hass"); } diff --git a/src/dialogs/generic/dialog-box.ts b/src/dialogs/generic/dialog-box.ts index 212c181c27..c24d6d11ea 100644 --- a/src/dialogs/generic/dialog-box.ts +++ b/src/dialogs/generic/dialog-box.ts @@ -27,7 +27,14 @@ class DialogBox extends LitElement { @query("ha-md-dialog") private _dialog?: HaMdDialog; + private _closePromise?: Promise; + + private _closeResolve?: () => void; + public async showDialog(params: DialogBoxParams): Promise { + if (this._closePromise) { + await this._closePromise; + } this._params = params; } @@ -132,21 +139,24 @@ class DialogBox extends LitElement { private _dismiss(): void { this._closeState = "canceled"; - this._closeDialog(); this._cancel(); + this._closeDialog(); } private _confirm(): void { this._closeState = "confirmed"; - this._closeDialog(); if (this._params!.confirm) { this._params!.confirm(this._textField?.value); } + this._closeDialog(); } private _closeDialog() { fireEvent(this, "dialog-closed", { dialog: this.localName }); this._dialog?.close(); + this._closePromise = new Promise((resolve) => { + this._closeResolve = resolve; + }); } private _dialogClosed() { @@ -156,6 +166,8 @@ class DialogBox extends LitElement { } this._closeState = undefined; this._params = undefined; + this._closeResolve?.(); + this._closeResolve = undefined; } static get styles(): CSSResultGroup { diff --git a/src/dialogs/make-dialog-manager.ts b/src/dialogs/make-dialog-manager.ts index 6a780e0189..1c0f954a14 100644 --- a/src/dialogs/make-dialog-manager.ts +++ b/src/dialogs/make-dialog-manager.ts @@ -104,6 +104,12 @@ export const showDialog = async ( addHistory ); } + const dialogIndex = OPEN_DIALOG_STACK.findIndex( + (state) => state.dialogTag === dialogTag + ); + if (dialogIndex !== -1) { + OPEN_DIALOG_STACK.splice(dialogIndex, 1); + } OPEN_DIALOG_STACK.push({ element, root, @@ -173,8 +179,10 @@ export const closeLastDialog = async () => { export const closeAllDialogs = async () => { for (let i = OPEN_DIALOG_STACK.length - 1; i >= 0; i--) { - // eslint-disable-next-line no-await-in-loop - const closed = await closeDialog(OPEN_DIALOG_STACK[i].dialogTag); + const closed = + !OPEN_DIALOG_STACK[i] || + // eslint-disable-next-line no-await-in-loop + (await closeDialog(OPEN_DIALOG_STACK[i].dialogTag)); if (!closed) { return false; } diff --git a/src/dialogs/more-info/ha-more-info-dialog.ts b/src/dialogs/more-info/ha-more-info-dialog.ts index 51d14f1cce..37ea6841f9 100644 --- a/src/dialogs/more-info/ha-more-info-dialog.ts +++ b/src/dialogs/more-info/ha-more-info-dialog.ts @@ -12,7 +12,7 @@ import { import type { HassEntity } from "home-assistant-js-websocket"; import type { PropertyValues } from "lit"; import { LitElement, css, html, nothing } from "lit"; -import { customElement, property, query, state } from "lit/decorators"; +import { customElement, property, state } from "lit/decorators"; import { cache } from "lit/directives/cache"; import { dynamicElement } from "../../common/dom/dynamic-element-directive"; import { fireEvent } from "../../common/dom/fire_event"; @@ -47,9 +47,7 @@ import { } from "./const"; import "./controls/more-info-default"; import "./ha-more-info-history-and-logbook"; -import type { MoreInfoHistoryAndLogbook } from "./ha-more-info-history-and-logbook"; import "./ha-more-info-info"; -import type { MoreInfoInfo } from "./ha-more-info-info"; import "./ha-more-info-settings"; import "./more-info-content"; @@ -98,9 +96,6 @@ export class MoreInfoDialog extends LitElement { @state() private _infoEditMode = false; - @query("ha-more-info-info, ha-more-info-history-and-logbook") - private _history?: MoreInfoInfo | MoreInfoHistoryAndLogbook; - public showDialog(params: MoreInfoDialogParams) { this._entityId = params.entityId; if (!this._entityId) { @@ -283,7 +278,6 @@ export class MoreInfoDialog extends LitElement { ; - @query("statistics-chart, state-history-charts") private _chart?: - | StateHistoryCharts - | StatisticsChart; - - public resize = (options?: ChartResizeOptions): void => { - if (this._chart) { - this._chart.resize(options); - } - }; - protected render() { if (!this.entityId) { return nothing; diff --git a/src/dialogs/more-info/ha-more-info-info.ts b/src/dialogs/more-info/ha-more-info-info.ts index efee44afbd..be4a09e4a0 100644 --- a/src/dialogs/more-info/ha-more-info-info.ts +++ b/src/dialogs/more-info/ha-more-info-info.ts @@ -1,8 +1,7 @@ import type { HassEntity } from "home-assistant-js-websocket"; import { css, html, LitElement, nothing } from "lit"; -import { customElement, property, query } from "lit/decorators"; +import { customElement, property } from "lit/decorators"; import { computeDomain } from "../../common/entity/compute_domain"; -import type { ChartResizeOptions } from "../../components/chart/ha-chart-base"; import type { ExtEntityRegistryEntry } from "../../data/entity_registry"; import type { HomeAssistant } from "../../types"; import { @@ -14,7 +13,6 @@ import { DOMAINS_WITH_MORE_INFO, } from "./const"; import "./ha-more-info-history"; -import type { MoreInfoHistory } from "./ha-more-info-history"; import "./ha-more-info-logbook"; import "./more-info-content"; @@ -28,13 +26,6 @@ export class MoreInfoInfo extends LitElement { @property({ attribute: false }) public editMode?: boolean; - @query("ha-more-info-history") - private _history?: MoreInfoHistory; - - public resize(options?: ChartResizeOptions) { - this._history?.resize(options); - } - protected render() { const entityId = this.entityId; const stateObj = this.hass.states[entityId] as HassEntity | undefined; diff --git a/src/panels/config/backup/components/config/ha-backup-config-data.ts b/src/panels/config/backup/components/config/ha-backup-config-data.ts index 7d48cb6906..23786dc258 100644 --- a/src/panels/config/backup/components/config/ha-backup-config-data.ts +++ b/src/panels/config/backup/components/config/ha-backup-config-data.ts @@ -209,7 +209,7 @@ class HaBackupConfigData extends LitElement { ${this.hass.localize( - "ui.panel.config.backup.data.history_description" + "ui.panel.config.backup.data.media_description" )} ((folder) => ({ label: this._localizeFolder(folder), @@ -145,9 +139,6 @@ export class HaBackupDataPicker extends LitElement { if (value.homeassistant_included) { homeassistant.push("config"); } - if (value.database_included) { - homeassistant.push("database"); - } const folders = value.folders; homeassistant.push(...folders); @@ -164,7 +155,9 @@ export class HaBackupDataPicker extends LitElement { (selectedItems: SelectedItems, data: BackupData): BackupData => ({ homeassistant_version: data.homeassistant_version, homeassistant_included: selectedItems.homeassistant.includes("config"), - database_included: selectedItems.homeassistant.includes("database"), + database_included: + data.database_included && + selectedItems.homeassistant.includes("config"), addons: data.addons.filter((addon) => selectedItems.addons.includes(addon.slug) ), diff --git a/src/panels/config/backup/dialogs/dialog-upload-backup.ts b/src/panels/config/backup/dialogs/dialog-upload-backup.ts index 09e5e5b5d6..09574357ab 100644 --- a/src/panels/config/backup/dialogs/dialog-upload-backup.ts +++ b/src/panels/config/backup/dialogs/dialog-upload-backup.ts @@ -109,7 +109,9 @@ export class DialogUploadBackup >
- Cancel + ${this.hass.localize("ui.common.cancel")} ${this.hass.localize( "ui.panel.config.backup.dialogs.upload.action" diff --git a/src/panels/lovelace/hui-root.ts b/src/panels/lovelace/hui-root.ts index 2ade6634cb..9b029ad025 100644 --- a/src/panels/lovelace/hui-root.ts +++ b/src/panels/lovelace/hui-root.ts @@ -474,7 +474,8 @@ class HUIRoot extends LitElement { id="view" @ll-rebuild=${this._debouncedConfigChanged} > - + +
`; diff --git a/src/panels/lovelace/views/hui-view-background.ts b/src/panels/lovelace/views/hui-view-background.ts index 5a065d2650..06b7439298 100644 --- a/src/panels/lovelace/views/hui-view-background.ts +++ b/src/panels/lovelace/views/hui-view-background.ts @@ -55,7 +55,7 @@ export class HUIViewBackground extends LitElement { const alignment = background.alignment ?? "center"; const size = background.size ?? "cover"; const repeat = background.repeat ?? "no-repeat"; - return `${alignment} / ${size} ${repeat} url('${background.image}')`; + return `${alignment} / ${size} ${repeat} url('${this.hass.hassUrl(background.image)}')`; } if (typeof background === "string") { return background; diff --git a/src/translations/en.json b/src/translations/en.json index 6c7587e163..d0742548db 100644 --- a/src/translations/en.json +++ b/src/translations/en.json @@ -2605,7 +2605,7 @@ "protected_not_encrypted": "Not encrypted" }, "restore": { - "title": "Selected what to restore", + "title": "Select what to restore", "action": "Restore" }, "locations": {