From 494a9f84750be9d2f2480952449fe93d75118578 Mon Sep 17 00:00:00 2001 From: Bram Kragten Date: Thu, 6 Apr 2023 18:28:17 +0200 Subject: [PATCH] 20230406.1 --- pyproject.toml | 2 +- src/panels/lovelace/hui-root.ts | 55 ++++++++++++------- src/panels/lovelace/views/hui-masonry-view.ts | 7 +-- src/panels/lovelace/views/hui-sidebar-view.ts | 7 +-- src/panels/lovelace/views/hui-view.ts | 5 +- 5 files changed, 43 insertions(+), 33 deletions(-) diff --git a/pyproject.toml b/pyproject.toml index fc9171c38e..2daef55922 100644 --- a/pyproject.toml +++ b/pyproject.toml @@ -4,7 +4,7 @@ build-backend = "setuptools.build_meta" [project] name = "home-assistant-frontend" -version = "20230406.0" +version = "20230406.1" license = {text = "Apache-2.0"} description = "The Home Assistant frontend" readme = "README.md" diff --git a/src/panels/lovelace/hui-root.ts b/src/panels/lovelace/hui-root.ts index b9cb5977f7..aa02a50a29 100644 --- a/src/panels/lovelace/hui-root.ts +++ b/src/panels/lovelace/hui-root.ts @@ -26,7 +26,13 @@ import { PropertyValues, TemplateResult, } from "lit"; -import { customElement, property, query, state } from "lit/decorators"; +import { + customElement, + eventOptions, + property, + query, + state, +} from "lit/decorators"; import { classMap } from "lit/directives/class-map"; import { ifDefined } from "lit/directives/if-defined"; import memoizeOne from "memoize-one"; @@ -87,7 +93,7 @@ class HUIRoot extends LitElement { @state() private _curView?: number | "hass-unused-entities"; - @query("#view", true) _viewRoot!: HTMLDivElement; + @query("#view", true) _view!: HTMLDivElement; private _viewCache?: { [viewId: string]: HUIView }; @@ -544,14 +550,19 @@ class HUIRoot extends LitElement { ` : ""} -
+
`; } - private _viewScrolled = (ev) => { + @eventOptions({ passive: true }) + private _viewScrolled(ev) { this.toggleAttribute("scrolled", ev.currentTarget.scrollTop !== 0); - }; + } private _isVisible = (view: LovelaceViewConfig) => Boolean( @@ -673,6 +684,10 @@ class HUIRoot extends LitElement { return this.lovelace!.editMode; } + private get _viewRoot(): HTMLDivElement { + return this.shadowRoot!.getElementById("view") as HTMLDivElement; + } + private get _showButtonMenu(): boolean { return ( (this.narrow && this._conversation(this.hass.config.components)) || @@ -859,6 +874,7 @@ class HUIRoot extends LitElement { const path = this.config.views[viewIndex].path || viewIndex; this._navigateToView(path); } + this._view.scrollTo(0, 0); } private _selectView(viewIndex: HUIRoot["_curView"], force: boolean): void { @@ -878,7 +894,6 @@ class HUIRoot extends LitElement { const root = this._viewRoot; if (root.lastChild) { - root.lastChild.removeEventListener("scroll", this._viewScrolled); root.removeChild(root.lastChild); } @@ -913,7 +928,6 @@ class HUIRoot extends LitElement { view.lovelace = this.lovelace; view.hass = this.hass; view.narrow = this.narrow; - view.addEventListener("scroll", this._viewScrolled, { passive: true }); const configBackground = viewConfig.background || this.config.background; @@ -922,7 +936,6 @@ class HUIRoot extends LitElement { } else { this.style.removeProperty("--lovelace-background"); } - this.removeAttribute("scrolled"); root.appendChild(view); // Recalculate to see if we need to adjust content area for tab bar @@ -1033,20 +1046,9 @@ class HUIRoot extends LitElement { mwc-button.warning:not([disabled]) { color: var(--error-color); } - hui-view { + #view { margin-top: calc(var(--header-height) + env(safe-area-inset-top)); height: calc(100vh - var(--header-height) - env(safe-area-inset-top)); - background: var( - --lovelace-background, - var(--primary-background-color) - ); - padding-left: env(safe-area-inset-left); - padding-right: env(safe-area-inset-right); - width: 100%; - padding-bottom: env(safe-area-inset-bottom); - display: block; - overflow: auto; - transform: translateZ(0); } /** * In edit mode we have the tab bar on a new line * @@ -1059,6 +1061,19 @@ class HUIRoot extends LitElement { var(--header-height) + 48px + env(safe-area-inset-top) ); } + hui-view { + padding-left: env(safe-area-inset-left); + padding-right: env(safe-area-inset-right); + background: var( + --lovelace-background, + var(--primary-background-color) + ); + overflow: auto; + width: 100%; + height: 100%; + transform: translateZ(0); + display: block; + } .hide-tab { display: none; } diff --git a/src/panels/lovelace/views/hui-masonry-view.ts b/src/panels/lovelace/views/hui-masonry-view.ts index 687d254af8..0ee9db908c 100644 --- a/src/panels/lovelace/views/hui-masonry-view.ts +++ b/src/panels/lovelace/views/hui-masonry-view.ts @@ -298,8 +298,7 @@ export class MasonryView extends LitElement implements LovelaceViewElement { :host { display: block; padding-top: 4px; - height: 100%; - box-sizing: border-box; + padding-bottom: env(safe-area-inset-bottom); } .badges { @@ -328,15 +327,13 @@ export class MasonryView extends LitElement implements LovelaceViewElement { } ha-fab { - position: sticky; - float: right; + position: absolute; right: calc(16px + env(safe-area-inset-right)); bottom: calc(16px + env(safe-area-inset-bottom)); z-index: 1; } ha-fab.rtl { - float: left; right: auto; left: calc(16px + env(safe-area-inset-left)); } diff --git a/src/panels/lovelace/views/hui-sidebar-view.ts b/src/panels/lovelace/views/hui-sidebar-view.ts index 38f3d871ff..1233c00c94 100644 --- a/src/panels/lovelace/views/hui-sidebar-view.ts +++ b/src/panels/lovelace/views/hui-sidebar-view.ts @@ -196,8 +196,7 @@ export class SideBarView extends LitElement implements LovelaceViewElement { :host { display: block; padding-top: 4px; - height: 100%; - box-sizing: border-box; + padding-bottom: env(safe-area-inset-bottom); } .container { @@ -236,15 +235,13 @@ export class SideBarView extends LitElement implements LovelaceViewElement { } ha-fab { - position: sticky; - float: right; + position: absolute; right: calc(16px + env(safe-area-inset-right)); bottom: calc(16px + env(safe-area-inset-bottom)); z-index: 1; } ha-fab.rtl { - float: left; right: auto; left: calc(16px + env(safe-area-inset-left)); } diff --git a/src/panels/lovelace/views/hui-view.ts b/src/panels/lovelace/views/hui-view.ts index 4d9c56a928..bcf440f328 100644 --- a/src/panels/lovelace/views/hui-view.ts +++ b/src/panels/lovelace/views/hui-view.ts @@ -161,8 +161,9 @@ export class HUIView extends ReactiveElement { | undefined; if ( - changedProperties.has("hass") && - (!oldHass || this.hass.themes !== oldHass.themes) + !oldHass || + this.hass.themes !== oldHass.themes || + this.hass.selectedTheme !== oldHass.selectedTheme ) { applyThemesOnElement(this, this.hass.themes, this._viewConfigTheme); }