diff --git a/src/components/ha-code-editor.ts b/src/components/ha-code-editor.ts index 9a9666d954..50ee7a143d 100644 --- a/src/components/ha-code-editor.ts +++ b/src/components/ha-code-editor.ts @@ -5,19 +5,19 @@ import type { CompletionResult, CompletionSource, } from "@codemirror/autocomplete"; -import { undo, undoDepth, redo, redoDepth } from "@codemirror/commands"; +import { redo, redoDepth, undo, undoDepth } from "@codemirror/commands"; import type { Extension, TransactionSpec } from "@codemirror/state"; import type { EditorView, KeyBinding, ViewUpdate } from "@codemirror/view"; import { - mdiArrowExpand, mdiArrowCollapse, + mdiArrowExpand, mdiContentCopy, - mdiUndo, mdiRedo, + mdiUndo, } from "@mdi/js"; import type { HassEntities } from "home-assistant-js-websocket"; import type { PropertyValues } from "lit"; -import { css, ReactiveElement, html, render } from "lit"; +import { css, html, ReactiveElement, render } from "lit"; import { customElement, property, state } from "lit/decorators"; import memoizeOne from "memoize-one"; import { fireEvent } from "../common/dom/fire_event"; @@ -395,6 +395,8 @@ export class HaCodeEditor extends ReactiveElement { // is disabled, or we have no toolbar, ensure we are not in fullscreen mode. this._isFullscreen = fullscreen && !this.disableFullscreen && this.hasToolbar; + + fireEvent(this, "fullscreen-changed", this._isFullscreen); // Return whether successfully in requested state return this._isFullscreen === fullscreen; } @@ -790,6 +792,12 @@ export class HaCodeEditor extends ReactiveElement { display: block !important; } + @media all and (max-width: 870px) { + :host(.fullscreen) { + top: 8px !important; + } + } + :host(.hasToolbar) .cm-editor { padding-top: var(--code-editor-toolbar-height); } @@ -834,4 +842,8 @@ declare global { interface HTMLElementTagNameMap { "ha-code-editor": HaCodeEditor; } + + interface HASSDomEvents { + "fullscreen-changed": boolean; + } } diff --git a/src/components/ha-resizable-bottom-sheet.ts b/src/components/ha-resizable-bottom-sheet.ts index 82f4864b8c..221996a639 100644 --- a/src/components/ha-resizable-bottom-sheet.ts +++ b/src/components/ha-resizable-bottom-sheet.ts @@ -1,9 +1,12 @@ -import { css, html, LitElement } from "lit"; -import { customElement, query, state } from "lit/decorators"; +import { css, html, LitElement, nothing } from "lit"; +import { customElement, property, 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"; +const MAX_VIEWPOINT_HEIGHT = 90; +const MIN_VIEWPOINT_HEIGHT = 20; + /** * A bottom sheet component that slides up from the bottom of the screen. * @@ -33,25 +36,32 @@ export class HaResizableBottomSheet extends LitElement { @state() private _dialogViewportHeight?: number; + @property({ type: Boolean, reflect: true }) + public fullscreen = false; + render() { return html` -
-
-
+ ${!this.fullscreen + ? html`
+
+
` + : nothing} `; } @@ -81,8 +91,8 @@ export class HaResizableBottomSheet extends LitElement { // - set max height to 90vh, so it opens at max 70vh but can be resized to 90vh this._dialogViewportHeight = (this._dialog.offsetHeight / window.innerHeight) * 100; - this._dialogMaxViewpointHeight = 90; - this._dialogMinViewpointHeight = 20; + this._dialogMaxViewpointHeight = MAX_VIEWPOINT_HEIGHT; + this._dialogMinViewpointHeight = MIN_VIEWPOINT_HEIGHT; } else { // after close animation is done close dialog element and fire closed event this._dialog.close(); @@ -153,10 +163,10 @@ export class HaResizableBottomSheet extends LitElement { // Calculate new size and clamp between 10vh and 90vh let newSize = this._initialSize + deltaVh; - newSize = Math.max(10, Math.min(90, newSize)); + newSize = Math.max(10, Math.min(MAX_VIEWPOINT_HEIGHT, newSize)); // on drag down and below 20vh - if (newSize < 20 && deltaY < 0) { + if (newSize < MIN_VIEWPOINT_HEIGHT && deltaY < 0) { this._endDrag(); this.closeSheet(); return; diff --git a/src/panels/config/automation/ha-automation-sidebar.ts b/src/panels/config/automation/ha-automation-sidebar.ts index 50b32097af..abcb13ad42 100644 --- a/src/panels/config/automation/ha-automation-sidebar.ts +++ b/src/panels/config/automation/ha-automation-sidebar.ts @@ -41,6 +41,8 @@ export default class HaAutomationSidebar extends LitElement { @state() private _resizing = false; + @state() private _fullscreen = false; + @query("ha-resizable-bottom-sheet") private _bottomSheetElement?: HaResizableBottomSheet; @@ -68,6 +70,7 @@ export default class HaAutomationSidebar extends LitElement { .sidebarKey=${this.sidebarKey} @toggle-yaml-mode=${this._toggleYamlMode} @close-sidebar=${this.triggerCloseSidebar} + @fullscreen-changed=${this._handleYamlEditorFullscreenChanged} > `; } @@ -84,6 +87,7 @@ export default class HaAutomationSidebar extends LitElement { .sidebarKey=${this.sidebarKey} @toggle-yaml-mode=${this._toggleYamlMode} @close-sidebar=${this.triggerCloseSidebar} + @fullscreen-changed=${this._handleYamlEditorFullscreenChanged} > `; } @@ -100,6 +104,7 @@ export default class HaAutomationSidebar extends LitElement { .sidebarKey=${this.sidebarKey} @toggle-yaml-mode=${this._toggleYamlMode} @close-sidebar=${this.triggerCloseSidebar} + @fullscreen-changed=${this._handleYamlEditorFullscreenChanged} > `; } @@ -129,6 +134,7 @@ export default class HaAutomationSidebar extends LitElement { .sidebarKey=${this.sidebarKey} @toggle-yaml-mode=${this._toggleYamlMode} @close-sidebar=${this.triggerCloseSidebar} + @fullscreen-changed=${this._handleYamlEditorFullscreenChanged} > `; } @@ -145,6 +151,7 @@ export default class HaAutomationSidebar extends LitElement { .sidebarKey=${this.sidebarKey} @toggle-yaml-mode=${this._toggleYamlMode} @close-sidebar=${this.triggerCloseSidebar} + @fullscreen-changed=${this._handleYamlEditorFullscreenChanged} > `; } @@ -159,7 +166,10 @@ export default class HaAutomationSidebar extends LitElement { if (this.narrow) { return html` - + ${this._renderContent()} `; @@ -288,6 +298,10 @@ export default class HaAutomationSidebar extends LitElement { document.removeEventListener("touchcancel", this._endResizing); } + private _handleYamlEditorFullscreenChanged(ev: CustomEvent) { + this._fullscreen = ev.detail; + } + static styles = css` :host { z-index: 6;