mirror of
https://github.com/home-assistant/frontend.git
synced 2025-11-08 18:39:40 +00:00
c09ec54c76
This commit squashes the following development history: 1e78af3aa - Restore, moved to #26969 d672d9f44 - Restore 53ee5fbbc - Restore 16b4eb98e - Restore 8d8b13f50 - Restore 62e16619d - Apply changes from #27003 f5ee79a47 - Fix 60678689c - Fix 766ed6a25 - Fix f76bd4f7e - Fix fabs 1879fd0d9 - Fix ea3ee6de5 - Add safe areas to ha-hanel-custom aa3384b9a - Add missing c9a7f76dc - Fix 78351fd1f - Fix 59789d379 - Fix 1c7aabd34 - Remove eaf1373cf - Fix 8481a93d7 - Fix fe7df1f2f - Remove 69f244ff3 - Restore 2eb936b64 - Adjust b09350637 - Fix c0504bb7e - Clean b0773d73e - Fix 4caa4a43b - make sure narrow is passed 8885f6bf6 - Add safe areas to 2 pane fixed 62df70f63 - Clean a87e68d87 - FIx 5086be030 - Fix energy ac3478e54 - Fix 0f28098a6 - Restore b65ba3df9 - Restore b0e1ea6db - Restore 7bb78d1c7 - Fix 26c95df71 - Update 7369c79d3 - Remove b5f31dad6 - Fix 40cfc437d - Set top level padding instead of individual panels 83b49729f - Restore 25db15816 - Fix 8c9c39827 - Set top level app bar padding instead of individual panels b7a1b27c9 - Remove 1e9368705 - Device 1482502f9 - Integration page 98dc1bf56 - Fix 1c3de1376 - Add a08bee4d8 - Remove 0d462439b - Area subpage 4bfd60875 - Areas fix b5cbcdaf7 - Fix 9fb272074 - Add safe areas to script editor 7c3bc9433 - Add safe areas to scene editor 1cf1b999a - Fix mobile for automation editors 4413bd4b7 - Add safe areas to automation editor 2e6953327 - Add safe areas to blueprint editor 989776dd1 - Add config section padding 6692b7ccf - Fix header row 22337b5e2 - Fix calendar 414e058cd - Fix pane f09ae0e0c - Fix calendar fb5a984ee - Fix pane 1daee18c8 - Todo fab 6f52cb42b - Todo content 9b317c583 - Media browser 0f8ca248d - Fix history panel cd7843799 - Fix logbook b8d47ecf3 - Fix d15e9311d - Safe area: dashboard view container should only apply left safe area when in full view Summary of changes: - Add narrow property to top app bar components for conditional safe area padding - Update safe area inset calculations to use fallback values (0px) for better compatibility - Fix content height calculations to account for safe area insets - Apply safe area padding conditionally based on narrow state - Update FAB positioning to respect safe area insets - Ensure proper spacing and layout on mobile devices with notches/dynamic islands
57 lines
1.8 KiB
TypeScript
57 lines
1.8 KiB
TypeScript
import { TopAppBarFixedBase } from "@material/mwc-top-app-bar-fixed/mwc-top-app-bar-fixed-base";
|
|
import { styles } from "@material/mwc-top-app-bar/mwc-top-app-bar.css";
|
|
import { css } from "lit";
|
|
import { customElement, property } from "lit/decorators";
|
|
|
|
@customElement("ha-top-app-bar-fixed")
|
|
export class HaTopAppBarFixed extends TopAppBarFixedBase {
|
|
@property({ type: Boolean, reflect: true }) public narrow = false;
|
|
|
|
static override styles = [
|
|
styles,
|
|
css`
|
|
header {
|
|
padding-top: var(--safe-area-inset-top);
|
|
}
|
|
.mdc-top-app-bar__row {
|
|
height: var(--header-height);
|
|
border-bottom: var(--app-header-border-bottom);
|
|
}
|
|
.mdc-top-app-bar--fixed-adjust {
|
|
padding-top: calc(
|
|
var(--header-height, 0px) + var(--safe-area-inset-top, 0px)
|
|
);
|
|
padding-bottom: var(--safe-area-inset-bottom);
|
|
padding-right: var(--safe-area-inset-right);
|
|
}
|
|
:host([narrow]) .mdc-top-app-bar--fixed-adjust {
|
|
padding-left: var(--safe-area-inset-left);
|
|
}
|
|
.mdc-top-app-bar {
|
|
--mdc-typography-headline6-font-weight: var(--ha-font-weight-normal);
|
|
color: var(--app-header-text-color, var(--mdc-theme-on-primary, #fff));
|
|
background-color: var(
|
|
--app-header-background-color,
|
|
var(--mdc-theme-primary)
|
|
);
|
|
padding-top: var(--safe-area-inset-top);
|
|
padding-right: var(--safe-area-inset-right);
|
|
}
|
|
:host([narrow]) .mdc-top-app-bar {
|
|
padding-left: var(--safe-area-inset-left);
|
|
}
|
|
.mdc-top-app-bar__title {
|
|
font-size: var(--ha-font-size-xl);
|
|
padding-inline-start: 24px;
|
|
padding-inline-end: initial;
|
|
}
|
|
`,
|
|
];
|
|
}
|
|
|
|
declare global {
|
|
interface HTMLElementTagNameMap {
|
|
"ha-top-app-bar-fixed": HaTopAppBarFixed;
|
|
}
|
|
}
|