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

Use fixed layout for automation sidebar to have scrollbar on the side (#26751)

Browse Source 
Co-authored-by: Wendelin <12148533+wendevlin@users.noreply.github.com>
This commit is contained in:
Paul Bottein
2025-08-29 14:19:13 +02:00
committed by GitHub
parent 0269540ee9
commit 1fd7c84583
7 changed files with 92 additions and 162 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
src/panels/config/automation/action/ha-automation-action.ts
View File

@@ -1,7 +1,7 @@
import { mdiDrag, mdiPlus } from "@mdi/js";
import deepClone from "deep-clone-simple";
import type { PropertyValues } from "lit";
import { LitElement, css, html, nothing } from "lit";
import { LitElement, html, nothing } from "lit";
import { customElement, property, queryAll, state } from "lit/decorators";
import { repeat } from "lit/directives/repeat";
import { storage } from "../../../../common/decorators/storage";
@@ -409,14 +409,7 @@ export default class HaAutomationAction extends LitElement {
this._rowSortSelected = undefined;
}
static styles = [
automationRowsStyles,
css`
:host([root]) .rows {
padding-right: 8px;
}
`,
];
static styles = automationRowsStyles;
}
declare global {

11
src/panels/config/automation/condition/ha-automation-condition.ts
View File

@@ -1,7 +1,7 @@
import { mdiDrag, mdiPlus } from "@mdi/js";
import deepClone from "deep-clone-simple";
import type { PropertyValues } from "lit";
import { css, html, LitElement, nothing } from "lit";
import { html, LitElement, nothing } from "lit";
import { customElement, property, queryAll, state } from "lit/decorators";
import { repeat } from "lit/directives/repeat";
import { storage } from "../../../../common/decorators/storage";
@@ -428,14 +428,7 @@ export default class HaAutomationCondition extends LitElement {
this._rowSortSelected = undefined;
}
static styles = [
automationRowsStyles,
css`
:host([root]) .rows {
padding-right: 8px;
}
`,
];
static styles = automationRowsStyles;
}
declare global {

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

@@ -1181,27 +1181,6 @@ export class HaAutomationEditor extends PreventUnsavedMixin(
display: block;
}
:not(.yaml-mode) > .alert-wrapper {
position: sticky;
top: -24px;
margin-top: -24px;
z-index: 1;
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
pointer-events: none;
}
:not(.yaml-mode) > .alert-wrapper ha-alert {
background-color: var(--card-background-color);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
border-radius: var(--ha-border-radius-sm);
margin-bottom: 0;
pointer-events: auto;
}
manual-automation-editor {
max-width: 1540px;
padding: 0 12px;

19
src/panels/config/automation/manual-automation-editor.ts
View File

@@ -23,7 +23,6 @@ import {
extractSearchParam,
removeSearchParam,
} from "../../../common/url/search-params";
import { computeRTL } from "../../../common/util/compute_rtl";
import "../../../components/ha-button";
import "../../../components/ha-fab";
import "../../../components/ha-icon-button";
@@ -93,9 +92,6 @@ export class HaManualAutomationEditor extends LitElement {
@state() private _sidebarConfig?: SidebarConfig;
@query(".content")
private _contentElement?: HTMLDivElement;
@query("ha-automation-sidebar") private _sidebarElement?: HaAutomationSidebar;
private _previousConfig?: ManualAutomationConfig;
@@ -260,8 +256,7 @@ export class HaManualAutomationEditor extends LitElement {
return html`
<div
class=${classMap({
"split-view": true,
"sidebar-hidden": !this._sidebarConfig,
"has-sidebar": this._sidebarConfig && !this.narrow,
})}
>
<div class="content-wrapper">
@@ -269,6 +264,7 @@ export class HaManualAutomationEditor extends LitElement {
<slot name="alerts"></slot>
${this._renderContent()}
</div>
<div class="fab-positioner">
<ha-fab
slot="fab"
class=${this.dirty ? "dirty" : ""}
@@ -280,13 +276,11 @@ export class HaManualAutomationEditor extends LitElement {
<ha-svg-icon slot="icon" .path=${mdiContentSave}></ha-svg-icon>
</ha-fab>
</div>
</div>
<div class="sidebar-positioner">
<ha-automation-sidebar
tabindex="-1"
class=${classMap({
sidebar: true,
overlay: !this.isWide && !this.narrow,
rtl: computeRTL(this.hass),
})}
class=${classMap({ hidden: !this._sidebarConfig })}
.isWide=${this.isWide}
.hass=${this.hass}
.narrow=${this.narrow}
@@ -295,6 +289,7 @@ export class HaManualAutomationEditor extends LitElement {
.disabled=${this.disabled}
></ha-automation-sidebar>
</div>
</div>
`;
}
@@ -344,8 +339,6 @@ export class HaManualAutomationEditor extends LitElement {
private _handleCloseSidebar() {
this._sidebarConfig = undefined;
// fix content shift when bottom rows are scrolled into view
this._contentElement?.scrollIntoView();
}
private _triggerChanged(ev: CustomEvent): void {

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

@@ -69,7 +69,7 @@ export const indentStyle = css`
.selector-row,
:host([indent]) ha-form {
margin-left: 12px;
padding: 12px 20px 16px 16px;
padding: 12px 0 16px 16px;
border-left: 2px solid var(--ha-color-border-neutral-quiet);
border-bottom: 2px solid var(--ha-color-border-neutral-quiet);
border-radius: 0;
@@ -108,77 +108,59 @@ export const saveFabStyles = css`
export const manualEditorStyles = css`
:host {
display: block;
--sidebar-width: 0;
--sidebar-gap: 0;
}
.split-view {
.has-sidebar {
--sidebar-width: min(35vw, 500px);
--sidebar-gap: 16px;
}
.fab-positioner {
display: flex;
flex-direction: row;
height: 100%;
position: relative;
gap: 16px;
justify-content: flex-end;
}
.split-view.sidebar-hidden {
gap: 0;
.fab-positioner ha-fab {
position: fixed;
right: unset;
left: unset;
bottom: calc(-80px - var(--safe-area-inset-bottom));
transition: bottom 0.3s;
}
.fab-positioner ha-fab.dirty {
bottom: 16px;
}
.content-wrapper {
position: relative;
flex: 6;
padding-right: calc(var(--sidebar-width) + var(--sidebar-gap));
padding-inline-end: calc(var(--sidebar-width) + var(--sidebar-gap));
padding-inline-start: 0;
}
.content {
padding: 32px 16px 64px 0;
height: calc(100vh - 153px);
height: calc(100dvh - 153px);
overflow-y: auto;
overflow-x: hidden;
padding-top: 24px;
padding-bottom: 72px;
}
.sidebar {
padding: 12px 0;
flex: 4;
height: calc(100vh - 81px);
height: calc(100dvh - 81px);
width: 40%;
}
.split-view.sidebar-hidden .sidebar {
border-color: transparent;
border-width: 0;
overflow: hidden;
flex: 0;
visibility: hidden;
}
.sidebar.overlay {
ha-automation-sidebar {
position: fixed;
bottom: 8px;
right: 8px;
height: calc(100% - 70px);
padding: 0;
z-index: 5;
box-shadow: -8px 0 16px rgba(0, 0, 0, 0.2);
top: calc(var(--header-height) + 16px);
height: calc(-81px + 100dvh);
width: var(--sidebar-width);
display: block;
}
.sidebar.overlay.rtl {
right: unset;
left: 8px;
ha-automation-sidebar.hidden {
display: none;
}
@media all and (max-width: 870px) {
.split-view {
gap: 0;
}
.sidebar {
height: 0;
width: 0;
flex: 0;
}
.sidebar-positioner {
display: flex;
justify-content: flex-end;
}
.split-view.sidebar-hidden .sidebar.overlay {
width: 0;
}
.description {
margin: 0;
}
@@ -189,9 +171,6 @@ export const manualEditorStyles = css`
export const automationRowsStyles = css`
.rows {
padding: 16px 0 16px 16px;
margin: -16px;
margin-right: -20px;
display: flex;
flex-direction: column;
gap: 16px;

11
src/panels/config/automation/trigger/ha-automation-trigger.ts
View File

@@ -1,7 +1,7 @@
import { mdiDrag, mdiPlus } from "@mdi/js";
import deepClone from "deep-clone-simple";
import type { PropertyValues } from "lit";
import { css, html, LitElement, nothing } from "lit";
import { html, LitElement, nothing } from "lit";
import { customElement, property, state } from "lit/decorators";
import { repeat } from "lit/directives/repeat";
import { storage } from "../../../../common/decorators/storage";
@@ -368,14 +368,7 @@ export default class HaAutomationTrigger extends LitElement {
this._rowSortSelected = undefined;
}
static styles = [
automationRowsStyles,
css`
:host([root]) .rows {
padding-right: 8px;
}
`,
];
static styles = automationRowsStyles;
}
declare global {

16
src/panels/config/script/manual-script-editor.ts
View File

@@ -22,7 +22,6 @@ import {
extractSearchParam,
removeSearchParam,
} from "../../../common/url/search-params";
import { computeRTL } from "../../../common/util/compute_rtl";
import "../../../components/ha-icon-button";
import "../../../components/ha-markdown";
import type { SidebarConfig } from "../../../data/automation";
@@ -199,8 +198,7 @@ export class HaManualScriptEditor extends LitElement {
return html`
<div
class=${classMap({
"split-view": true,
"sidebar-hidden": !this._sidebarConfig,
"has-sidebar": this._sidebarConfig && !this.narrow,
})}
>
<div class="content-wrapper">
@@ -208,6 +206,8 @@ export class HaManualScriptEditor extends LitElement {
<slot name="alerts"></slot>
${this._renderContent()}
</div>
<div class="fab-positioner">
<div class="fab-positioner">
<ha-fab
slot="fab"
class=${this.dirty ? "dirty" : ""}
@@ -219,13 +219,12 @@ export class HaManualScriptEditor extends LitElement {
<ha-svg-icon slot="icon" .path=${mdiContentSave}></ha-svg-icon>
</ha-fab>
</div>
</div>
</div>
<div class="sidebar-positioner">
<ha-automation-sidebar
tabindex="-1"
class=${classMap({
sidebar: true,
overlay: !this.isWide,
rtl: computeRTL(this.hass),
})}
class=${classMap({ hidden: !this._sidebarConfig })}
.narrow=${this.narrow}
.isWide=${this.isWide}
.hass=${this.hass}
@@ -234,6 +233,7 @@ export class HaManualScriptEditor extends LitElement {
.disabled=${this.disabled}
></ha-automation-sidebar>
</div>
</div>
`;
}