Skip to content

Commit

Permalink
Add fixed background support in iOS and improve the way we set view b…
Browse files Browse the repository at this point in the history
…ackground
  • Loading branch information
piitaya committed Oct 25, 2024
1 parent 2b89882 commit 4c422aa
Show file tree
Hide file tree
Showing 6 changed files with 185 additions and 111 deletions.
52 changes: 19 additions & 33 deletions cast/src/receiver/layout/hc-lovelace.ts
Original file line number Diff line number Diff line change
@@ -1,10 +1,11 @@
import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
import { customElement, property, query } from "lit/decorators";
import { customElement, property } from "lit/decorators";
import { fireEvent } from "../../../../src/common/dom/fire_event";
import { LovelaceConfig } from "../../../../src/data/lovelace/config/types";
import { getPanelTitleFromUrlPath } from "../../../../src/data/panel";
import { Lovelace } from "../../../../src/panels/lovelace/types";
import "../../../../src/panels/lovelace/views/hui-view";
import "../../../../src/panels/lovelace/views/hui-view-container";
import { HomeAssistant } from "../../../../src/types";
import "./hc-launch-screen";

Expand All @@ -22,8 +23,6 @@ class HcLovelace extends LitElement {

@property() public urlPath: string | null = null;

@query("hui-view") private _huiView?: HTMLElement;

protected render(): TemplateResult {
const index = this._viewIndex;
if (index === undefined) {
Expand All @@ -47,12 +46,22 @@ class HcLovelace extends LitElement {
setEditMode: () => undefined,
showToast: () => undefined,
};

const viewConfig = this.lovelaceConfig.views[index];
const background = viewConfig.background || this.lovelaceConfig.background;

return html`
<hui-view
<hui-view-container
.hass=${this.hass}
.lovelace=${lovelace}
.index=${index}
></hui-view>
.background=${background}
.theme=${this.lovelaceConfig}
>
<hui-view
.hass=${this.hass}
.lovelace=${lovelace}
.index=${index}
></hui-view>
</hui-view-container>
`;
}

Expand Down Expand Up @@ -82,26 +91,6 @@ class HcLovelace extends LitElement {
}${viewTitle || ""}`
: undefined,
});

const configBackground =
this.lovelaceConfig.views[index].background ||
this.lovelaceConfig.background;

const backgroundStyle =
typeof configBackground === "string"
? configBackground
: configBackground?.image
? `center / cover no-repeat url('${configBackground.image}')`
: undefined;

if (backgroundStyle) {
this._huiView!.style.setProperty(
"--lovelace-background",
backgroundStyle
);
} else {
this._huiView!.style.removeProperty("--lovelace-background");
}
}
}
}
Expand All @@ -125,19 +114,16 @@ class HcLovelace extends LitElement {

static get styles(): CSSResultGroup {
return css`
:host {
hui-view-container {
position: relative;
min-height: 100vh;
height: 0;
display: flex;
flex-direction: column;
box-sizing: border-box;
background: var(--primary-background-color);
}
:host > * {
flex: 1;
}
hui-view {
background: var(--lovelace-background, var(--primary-background-color));
flex: 1;
}
`;
}
Expand Down
17 changes: 9 additions & 8 deletions src/panels/energy/ha-panel-energy.ts
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@ import { HomeAssistant } from "../../types";
import "../lovelace/components/hui-energy-period-selector";
import { Lovelace } from "../lovelace/types";
import "../lovelace/views/hui-view";
import "../lovelace/views/hui-view-container";
import { navigate } from "../../common/navigate";
import {
getEnergyDataCollection,
Expand Down Expand Up @@ -108,14 +109,18 @@ class PanelEnergy extends LitElement {
</hui-energy-period-selector>
</div>
</div>
<div id="view" @reload-energy-panel=${this._reloadView}>
<hui-view-container
.hass=${this.hass}
@reload-energy-panel=${this._reloadView}
>
<hui-view
.hass=${this.hass}
.narrow=${this.narrow}
.lovelace=${this._lovelace}
.index=${this._viewIndex}
></hui-view>
</div>
</hui-view-container>
`;
}

Expand Down Expand Up @@ -389,7 +394,7 @@ class PanelEnergy extends LitElement {
line-height: 20px;
flex-grow: 1;
}
#view {
hui-view-container {
position: relative;
display: flex;
padding-top: calc(var(--header-height) + env(safe-area-inset-top));
Expand All @@ -400,12 +405,8 @@ class PanelEnergy extends LitElement {
padding-inline-start: env(safe-area-inset-left);
padding-inline-end: env(safe-area-inset-right);
padding-bottom: env(safe-area-inset-bottom);
background: var(
--lovelace-background,
var(--primary-background-color)
);
}
#view > * {
hui-view {
flex: 1 1 100%;
max-width: 100%;
}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -167,7 +167,6 @@ export class HuiUnusedEntities extends LitElement {
static get styles(): CSSResultGroup {
return css`
:host {
background: var(--lovelace-background);
overflow: hidden;
}
.container {
Expand Down
39 changes: 15 additions & 24 deletions src/panels/lovelace/hui-root.ts
Original file line number Diff line number Diff line change
Expand Up @@ -62,6 +62,7 @@ import {
fetchDashboards,
updateDashboard,
} from "../../data/lovelace/dashboard";
import { getPanelTitle } from "../../data/panel";
import {
showAlertDialog,
showConfirmationDialog,
Expand All @@ -80,8 +81,8 @@ import { getLovelaceStrategy } from "./strategies/get-strategy";
import { isLegacyStrategyConfig } from "./strategies/legacy-strategy";
import type { Lovelace } from "./types";
import "./views/hui-view";
import "./views/hui-view-container";
import type { HUIView } from "./views/hui-view";
import { getPanelTitle } from "../../data/panel";

@customElement("hui-root")
class HUIRoot extends LitElement {
Expand Down Expand Up @@ -291,6 +292,8 @@ class HUIRoot extends LitElement {
? getPanelTitle(this.hass, this.panel)
: undefined;

const background = curViewConfig?.background || this.config.background;

return html`
<div
class=${classMap({
Expand Down Expand Up @@ -469,7 +472,14 @@ class HUIRoot extends LitElement {
`
: ""}
</div>
<div id="view" @ll-rebuild=${this._debouncedConfigChanged}></div>
<hui-view-container
.hass=${this.hass}
.background=${background}
.theme=${curViewConfig?.theme}
id="view"
@ll-rebuild=${this._debouncedConfigChanged}
>
</hui-view-container>
</div>
`;
}
Expand Down Expand Up @@ -937,21 +947,6 @@ class HUIRoot extends LitElement {
view.hass = this.hass;
view.narrow = this.narrow;

const configBackground = viewConfig.background || this.config.background;

const backgroundStyle =
typeof configBackground === "string"
? configBackground
: configBackground?.image
? `center / cover no-repeat url('${configBackground.image}')`
: undefined;

if (backgroundStyle) {
root.style.setProperty("--lovelace-background", backgroundStyle);
} else {
root.style.removeProperty("--lovelace-background");
}

root.appendChild(view);
}

Expand Down Expand Up @@ -1063,7 +1058,7 @@ class HUIRoot extends LitElement {
mwc-button.warning:not([disabled]) {
color: var(--error-color);
}
#view {
hui-view-container {
position: relative;
display: flex;
padding-top: calc(var(--header-height) + env(safe-area-inset-top));
Expand All @@ -1074,19 +1069,15 @@ class HUIRoot extends LitElement {
padding-inline-start: env(safe-area-inset-left);
padding-inline-end: env(safe-area-inset-right);
padding-bottom: env(safe-area-inset-bottom);
background: var(
--lovelace-background,
var(--primary-background-color)
);
}
#view > * {
hui-view-container > * {
flex: 1 1 100%;
max-width: 100%;
}
/**
* In edit mode we have the tab bar on a new line *
*/
.edit-mode #view {
.edit-mode hui-view-container {
padding-top: calc(
var(--header-height) + 48px + env(safe-area-inset-top)
);
Expand Down
142 changes: 142 additions & 0 deletions src/panels/lovelace/views/hui-view-container.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,142 @@
import { css, CSSResultGroup, html, LitElement, PropertyValues } from "lit";
import { customElement, property, state } from "lit/decorators";
import { applyThemesOnElement } from "../../../common/dom/apply_themes_on_element";
import { listenMediaQuery } from "../../../common/dom/media_query";
import type { LovelaceViewConfig } from "../../../data/lovelace/config/view";
import type { HomeAssistant } from "../../../types";

type BackgroundConfig = LovelaceViewConfig["background"];

@customElement("hui-view-container")
class HuiViewContainer extends LitElement {
@property({ attribute: false }) hass?: HomeAssistant;

@property({ attribute: false }) background?: BackgroundConfig;

@property({ attribute: false }) theme?: LovelaceViewConfig["theme"];

@state() themeBackground?: string;

private _unsubMediaQuery?: () => void;

public connectedCallback(): void {
super.connectedCallback();
this._setUpMediaQuery();
this._applyTheme();
}

public disconnectedCallback(): void {
super.disconnectedCallback();
this._clearmediaQuery();
}

private _clearmediaQuery() {
if (this._unsubMediaQuery) {
this._unsubMediaQuery();
this._unsubMediaQuery = undefined;
}
}

private _setUpMediaQuery() {
this._unsubMediaQuery = listenMediaQuery(
"(prefers-color-scheme: dark)",
this._applyTheme.bind(this)
);
}

private _isFixedBackground(background?: BackgroundConfig) {
if (typeof background === "string") {
return background.includes(" fixed");
}
return false;
}

private _computeBackgroundProperty(background?: BackgroundConfig) {
if (typeof background === "object") {
return `center / cover no-repeat url('${background.image}')`;
}
if (typeof background === "string") {
return background;
}
return null;
}

protected willUpdate(changedProperties: PropertyValues<this>) {
super.willUpdate(changedProperties);
if (changedProperties.has("hass") && this.hass) {
const oldHass = changedProperties.get("hass");
if (
!oldHass ||
this.hass.themes !== oldHass.themes ||
this.hass.selectedTheme !== oldHass.selectedTheme
) {
this._applyTheme();
return;
}
}

if (changedProperties.has("theme") || changedProperties.has("background")) {
this._applyTheme();
}
}

render() {
return html`<slot></slot>`;
}

private _applyTheme() {
if (this.hass) {
applyThemesOnElement(this, this.hass?.themes, this.theme);
}

const computedStyles = getComputedStyle(this);
const themeBackground = computedStyles.getPropertyValue(
"--lovelace-background"
);

const fixedBackground = this._isFixedBackground(
this.background || themeBackground
);
const viewBackground = this._computeBackgroundProperty(this.background);
this.toggleAttribute("fixed-background", fixedBackground);
this.style.setProperty("--view-background", viewBackground);
}

static get styles(): CSSResultGroup {
return css`
:host {
display: relative;
}
/* Fixed background hack for Safari iOS */
:host([fixed-background]) ::slotted(*):before {
display: block;
content: "";
z-index: -1;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
height: 100%;
width: 100%;
background: var(
--view-background,
var(--lovelace-background, var(--primary-background-color))
);
background-attachment: scroll !important;
}
:host(:not(fixed-background)) {
background: var(
--view-background,
var(--lovelace-background, var(--primary-background-color))
);
}
`;
}
}

declare global {
interface HTMLElementTagNameMap {
"hui-view-container": HuiViewContainer;
}
}
Loading

0 comments on commit 4c422aa

Please sign in to comment.