Disable fullscreen editor for editors that are already fullscreen (#25959)

* Disabled fullscreen editor for editors that are already fullscreen

* Update ha-code-editor.ts

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" })
+  @property({ type: Boolean, attribute: "disable-fullscreen" })
-  public enableFullscreen = true;
+  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;
+      padding-top: var(--safe-area-inset-top) !important;
-      /* Respect iOS safe areas while accounting for header */
+      padding-left: var(--safe-area-inset-left) !important;
-      padding-top: max(16px, env(safe-area-inset-top)) !important;
+      padding-right: var(--safe-area-inset-right) !important;
-      padding-left: max(16px, env(safe-area-inset-left)) !important;
+      padding-bottom: var(--safe-area-inset-bottom) !important;
-      padding-right: max(16px, env(safe-area-inset-right)) !important;
-      padding-bottom: max(16px, env(safe-area-inset-bottom)) !important;
       box-sizing: border-box !important;
-      display: flex !important;
+      display: block !important;
-      flex-direction: column !important;
     }
 
     :host(.fullscreen) .cm-editor {
@@ -609,12 +609,8 @@ export class HaCodeEditor extends ReactiveElement {
     }
 
     :host(.fullscreen) .fullscreen-button {
-      position: fixed;
+      top: calc(var(--safe-area-inset-top, 0px) + 8px);
-      top: calc(
+      right: calc(var(--safe-area-inset-right, 0px) + 8px);
-        var(--header-height, 56px) + max(8px, env(safe-area-inset-top))
-      );
-      right: max(24px, calc(env(safe-area-inset-right) + 8px));
-      z-index: 10000;
     }
   `;
 }

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

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
                   ></ha-yaml-editor>`
               : nothing}
         </div>

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
     ></ha-yaml-editor>`;
   }
 

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}
                 ></ha-yaml-editor>`

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"
           >
           </ha-code-editor>