diff --git a/src/components/ha-code-editor.ts b/src/components/ha-code-editor.ts index be825c2b42..be3eb9d283 100644 --- a/src/components/ha-code-editor.ts +++ b/src/components/ha-code-editor.ts @@ -61,8 +61,8 @@ export class HaCodeEditor extends ReactiveElement { @property({ type: Boolean }) public error = false; - @property({ type: Boolean, attribute: "enable-fullscreen" }) - public enableFullscreen = true; + @property({ type: Boolean, attribute: "disable-fullscreen" }) + public disableFullscreen = false; @state() private _value = ""; @@ -179,7 +179,7 @@ export class HaCodeEditor extends ReactiveElement { if (changedProps.has("_isFullscreen")) { this.classList.toggle("fullscreen", this._isFullscreen); } - if (changedProps.has("enableFullscreen")) { + if (changedProps.has("disableFullscreen")) { this._updateFullscreenButton(); } } @@ -263,7 +263,7 @@ export class HaCodeEditor extends ReactiveElement { private _updateFullscreenButton() { const existingButton = this.renderRoot.querySelector(".fullscreen-button"); - if (!this.enableFullscreen) { + if (this.disableFullscreen) { // Remove button if it exists and fullscreen is disabled if (existingButton) { existingButton.remove(); @@ -317,7 +317,7 @@ export class HaCodeEditor extends ReactiveElement { e.preventDefault(); e.stopPropagation(); this._toggleFullscreen(); - } else if (e.key === "F11" && this.enableFullscreen) { + } else if (e.key === "F11" && !this.disableFullscreen) { e.preventDefault(); e.stopPropagation(); this._toggleFullscreen(); @@ -557,7 +557,7 @@ export class HaCodeEditor extends ReactiveElement { position: absolute; top: 8px; right: 8px; - z-index: 10; + z-index: 1; color: var(--secondary-text-color); background-color: var(--card-background-color); border-radius: 50%; @@ -589,17 +589,17 @@ export class HaCodeEditor extends ReactiveElement { right: 0 !important; bottom: 0 !important; z-index: 9999 !important; - background-color: var(--primary-background-color) !important; + background-color: var( + --code-editor-background-color, + var(--mdc-text-field-fill-color, whitesmoke) + ) !important; margin: 0 !important; - padding: 16px !important; - /* Respect iOS safe areas while accounting for header */ - padding-top: max(16px, env(safe-area-inset-top)) !important; - padding-left: max(16px, env(safe-area-inset-left)) !important; - padding-right: max(16px, env(safe-area-inset-right)) !important; - padding-bottom: max(16px, env(safe-area-inset-bottom)) !important; + padding-top: var(--safe-area-inset-top) !important; + padding-left: var(--safe-area-inset-left) !important; + padding-right: var(--safe-area-inset-right) !important; + padding-bottom: var(--safe-area-inset-bottom) !important; box-sizing: border-box !important; - display: flex !important; - flex-direction: column !important; + display: block !important; } :host(.fullscreen) .cm-editor { @@ -609,12 +609,8 @@ export class HaCodeEditor extends ReactiveElement { } :host(.fullscreen) .fullscreen-button { - position: fixed; - top: calc( - var(--header-height, 56px) + max(8px, env(safe-area-inset-top)) - ); - right: max(24px, calc(env(safe-area-inset-right) + 8px)); - z-index: 10000; + top: calc(var(--safe-area-inset-top, 0px) + 8px); + right: calc(var(--safe-area-inset-right, 0px) + 8px); } `; } diff --git a/src/components/ha-yaml-editor.ts b/src/components/ha-yaml-editor.ts index c2a95a4022..53a7e579c7 100644 --- a/src/components/ha-yaml-editor.ts +++ b/src/components/ha-yaml-editor.ts @@ -44,6 +44,9 @@ export class HaYamlEditor extends LitElement { @property({ attribute: "read-only", type: Boolean }) public readOnly = false; + @property({ type: Boolean, attribute: "disable-fullscreen" }) + public disableFullscreen = false; + @property({ type: Boolean }) public required = false; @property({ attribute: "copy-clipboard", type: Boolean }) @@ -110,6 +113,7 @@ export class HaYamlEditor extends LitElement { .hass=${this.hass} .value=${this._yaml} .readOnly=${this.readOnly} + .disableFullscreen=${this.disableFullscreen} mode="yaml" autocomplete-entities autocomplete-icons diff --git a/src/panels/config/automation/ha-automation-editor.ts b/src/panels/config/automation/ha-automation-editor.ts index 09913aec3c..691fbb4e82 100644 --- a/src/panels/config/automation/ha-automation-editor.ts +++ b/src/panels/config/automation/ha-automation-editor.ts @@ -502,6 +502,7 @@ export class HaAutomationEditor extends PreventUnsavedMixin( .readOnly=${this._readOnly} @value-changed=${this._yamlChanged} .showErrors=${false} + disable-fullscreen >` : nothing} diff --git a/src/panels/config/scene/ha-scene-editor.ts b/src/panels/config/scene/ha-scene-editor.ts index 66494fbf3e..f0d66cef4f 100644 --- a/src/panels/config/scene/ha-scene-editor.ts +++ b/src/panels/config/scene/ha-scene-editor.ts @@ -321,6 +321,7 @@ export class HaSceneEditor extends PreventUnsavedMixin( .defaultValue=${this._config} @value-changed=${this._yamlChanged} .showErrors=${false} + disable-fullscreen >`; } diff --git a/src/panels/config/script/ha-script-editor.ts b/src/panels/config/script/ha-script-editor.ts index 4eaffe3d45..af68900fde 100644 --- a/src/panels/config/script/ha-script-editor.ts +++ b/src/panels/config/script/ha-script-editor.ts @@ -440,6 +440,7 @@ export class HaScriptEditor extends SubscribeMixin( .hass=${this.hass} .defaultValue=${this._preprocessYaml()} .readOnly=${this._readOnly} + disable-fullscreen @value-changed=${this._yamlChanged} .showErrors=${false} >` diff --git a/src/panels/lovelace/hui-editor.ts b/src/panels/lovelace/hui-editor.ts index a7fd0c0216..1a08e2c8a4 100644 --- a/src/panels/lovelace/hui-editor.ts +++ b/src/panels/lovelace/hui-editor.ts @@ -89,6 +89,7 @@ class LovelaceFullConfigEditor extends LitElement { .hass=${this.hass} @value-changed=${this._yamlChanged} @editor-save=${this._handleSave} + disable-fullscreen dir="ltr" >