jeans/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2025-11-09 10:59:50 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fix automation editor safe area (#27292)

Browse Source
This commit is contained in:
Wendelin
2025-10-02 12:01:47 +02:00
committed by Bram Kragten
parent ac49fc7aba
commit 4dc6a37bad
6 changed files with 33 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
src/components/ha-resizable-bottom-sheet.ts
View File

@@ -1,6 +1,5 @@
import { css, html, LitElement } from "lit";
import { customElement, query, state } from "lit/decorators";
import { styleMap } from "lit/directives/style-map";
import { fireEvent } from "../common/dom/fire_event";
import { BOTTOM_SHEET_ANIMATION_DURATION_MS } from "./ha-bottom-sheet";
@@ -37,13 +36,14 @@ export class HaResizableBottomSheet extends LitElement {
return html`<dialog
open
@transitionend=${this._handleTransitionEnd}
style=${styleMap({
height: this._dialogViewportHeight
? `${this._dialogViewportHeight}vh`
: "auto",
maxHeight: `${this._dialogMaxViewpointHeight}vh`,
minHeight: `${this._dialogMinViewpointHeight}vh`,
})}
style=${`
--height: ${this._dialogViewportHeight}vh;
--height: ${this._dialogViewportHeight}dvh;
--max-height: ${this._dialogMaxViewpointHeight}vh;
--max-height: ${this._dialogMaxViewpointHeight}dvh;
--min-height: ${this._dialogMinViewpointHeight}vh;
--min-height: ${this._dialogMinViewpointHeight}dvh;
`}
>
<div class="handle-wrapper">
<div
@@ -213,9 +213,11 @@ export class HaResizableBottomSheet extends LitElement {
cursor: grabbing;
}
dialog {
height: auto;
max-height: 70vh;
min-height: 30vh;
height: var(--height, auto);
max-height: var(--max-height, 70vh);
max-height: var(--max-height, 70dvh);
min-height: var(--min-height, 30vh);
min-height: var(--min-height, 30dvh);
background-color: var(
--ha-bottom-sheet-surface-background,
var(--ha-dialog-surface-background, var(--mdc-theme-surface, #fff)),
@@ -254,7 +256,6 @@ export class HaResizableBottomSheet extends LitElement {
border-bottom-width: 0;
border-style: var(--ha-bottom-sheet-border-style);
border-color: var(--ha-bottom-sheet-border-color);
margin-bottom: var(--safe-area-inset-bottom);
margin-left: var(--safe-area-inset-left);
margin-right: var(--safe-area-inset-right);
}

12
src/layouts/hass-subpage.ts
View File

@@ -5,8 +5,8 @@ import { restoreScroll } from "../common/decorators/restore-scroll";
import { goBack } from "../common/navigate";
import "../components/ha-icon-button-arrow-prev";
import "../components/ha-menu-button";
import type { HomeAssistant } from "../types";
import { haStyleScrollbar } from "../resources/styles";
import type { HomeAssistant } from "../types";
@customElement("hass-subpage")
class HassSubpage extends LitElement {
@@ -154,9 +154,15 @@ class HassSubpage extends LitElement {
1px - var(--header-height, 0px) - var(
--safe-area-inset-top,
0px
) - var(--safe-area-inset-bottom, 0px)
) - var(
--hass-subpage-bottom-inset,
var(--safe-area-inset-bottom, 0px)
)
);
margin-bottom: var(
--hass-subpage-bottom-inset,
var(--safe-area-inset-bottom)
);
margin-bottom: var(--safe-area-inset-bottom);
margin-right: var(--safe-area-inset-right);
overflow-y: auto;
overflow: auto;

5
src/panels/config/automation/ha-automation-editor.ts
View File

@@ -74,8 +74,10 @@ import { showMoreInfoDialog } from "../../../dialogs/more-info/show-ha-more-info
import "../../../layouts/hass-subpage";
import { KeyboardShortcutMixin } from "../../../mixins/keyboard-shortcut-mixin";
import { PreventUnsavedMixin } from "../../../mixins/prevent-unsaved-mixin";
import { UndoRedoMixin } from "../../../mixins/undo-redo-mixin";
import { haStyle } from "../../../resources/styles";
import type { Entries, HomeAssistant, Route } from "../../../types";
import { isMac } from "../../../util/is_mac";
import { showToast } from "../../../util/toast";
import { showAssignCategoryDialog } from "../category/show-dialog-assign-category";
import "../ha-config-section";
@@ -87,8 +89,6 @@ import {
import "./blueprint-automation-editor";
import "./manual-automation-editor";
import type { HaManualAutomationEditor } from "./manual-automation-editor";
import { UndoRedoMixin } from "../../../mixins/undo-redo-mixin";
import { isMac } from "../../../util/is_mac";
declare global {
interface HTMLElementTagNameMap {
@@ -1257,6 +1257,7 @@ export class HaAutomationEditor extends UndoRedoMixin<
--ha-automation-editor-width,
1540px
);
--hass-subpage-bottom-inset: 0px;
}
ha-fade-in {
display: flex;

5
src/panels/config/automation/ha-automation-sidebar.ts
View File

@@ -292,9 +292,7 @@ export default class HaAutomationSidebar extends LitElement {
:host {
z-index: 6;
outline: none;
height: calc(
100% - var(--safe-area-inset-top) - var(--safe-area-inset-bottom)
);
height: calc(100% - var(--safe-area-inset-top, 0px));
--ha-card-border-radius: var(
--ha-dialog-border-radius,
var(--ha-border-radius-2xl)
@@ -304,7 +302,6 @@ export default class HaAutomationSidebar extends LitElement {
--ha-bottom-sheet-border-style: solid;
--ha-bottom-sheet-border-color: var(--primary-color);
margin-top: var(--safe-area-inset-top);
margin-bottom: var(--safe-area-inset-bottom);
}
@media all and (max-width: 870px) {

13
src/panels/config/automation/styles.ts
View File

@@ -145,24 +145,19 @@ export const manualEditorStyles = css`
.content {
padding-top: 24px;
padding-bottom: 72px;
padding-bottom: max(var(--safe-area-inset-bottom), 32px);
transition: padding-bottom 180ms ease-in-out;
}
.content.has-bottom-sheet {
padding-bottom: calc(90vh - 72px);
padding-bottom: calc(90vh - max(var(--safe-area-inset-bottom), 32px));
}
ha-automation-sidebar {
position: fixed;
top: calc(var(--header-height) + 16px);
height: calc(
-81px +
100dvh - var(--safe-area-inset-top, 0px) - var(
--safe-area-inset-bottom,
0px
)
);
height: calc(-81px + 100vh - var(--safe-area-inset-top, 0px));
height: calc(-81px + 100dvh - var(--safe-area-inset-top, 0px));
width: var(--sidebar-width);
display: block;
}

5
src/panels/config/script/ha-script-editor.ts
View File

@@ -65,8 +65,10 @@ import "../../../layouts/hass-subpage";
import { KeyboardShortcutMixin } from "../../../mixins/keyboard-shortcut-mixin";
import { PreventUnsavedMixin } from "../../../mixins/prevent-unsaved-mixin";
import { SubscribeMixin } from "../../../mixins/subscribe-mixin";
import { UndoRedoMixin } from "../../../mixins/undo-redo-mixin";
import { haStyle } from "../../../resources/styles";
import type { Entries, HomeAssistant, Route } from "../../../types";
import { isMac } from "../../../util/is_mac";
import { showToast } from "../../../util/toast";
import { showAutomationModeDialog } from "../automation/automation-mode-dialog/show-dialog-automation-mode";
import type { EntityRegistryUpdate } from "../automation/automation-save-dialog/show-dialog-automation-save";
@@ -75,8 +77,6 @@ import { showAssignCategoryDialog } from "../category/show-dialog-assign-categor
import "./blueprint-script-editor";
import "./manual-script-editor";
import type { HaManualScriptEditor } from "./manual-script-editor";
import { UndoRedoMixin } from "../../../mixins/undo-redo-mixin";
import { isMac } from "../../../util/is_mac";
const baseEditorMixins = SubscribeMixin(
PreventUnsavedMixin(KeyboardShortcutMixin(LitElement))
@@ -1165,6 +1165,7 @@ export class HaScriptEditor extends UndoRedoMixin<
--ha-automation-editor-width,
1540px
);
--hass-subpage-bottom-inset: 0px;
}
.yaml-mode {
height: 100%;