Another fix for app-header-layout (#738)

panels/config/automation/ha-automation-editor.html

@@ -1,5 +1,4 @@
 <link rel="import" href="../../../bower_components/polymer/polymer-element.html">
-<link rel="import" href="../../../bower_components/app-layout/app-header-layout/app-header-layout.html">
 <link rel="import" href="../../../bower_components/app-layout/app-header/app-header.html">
 <link rel="import" href="../../../bower_components/app-layout/app-toolbar/app-toolbar.html">
 <link rel="import" href="../../../bower_components/paper-card/paper-card.html">
@@ -19,6 +18,7 @@
 <link rel='import' href='../../../src/components/entity/ha-entity-picker.html'>
 <link rel='import' href='../../../src/components/ha-combo-box.html'>
 <link rel='import' href='../../../src/components/ha-service-picker.html'>
+<link rel='import' href='../../../src/layouts/ha-app-layout.html'>
 <link rel='import' href='../../../src/util/hass-mixins.html'>
 
 <link rel="import" href="../ha-config-section.html">
@@ -82,7 +82,7 @@
       }
     </style>
 
-    <app-header-layout has-scrolling-region>
+    <ha-app-layout has-scrolling-region>
       <app-header slot="header" fixed>
         <app-toolbar>
           <paper-icon-button
@@ -98,15 +98,15 @@
           <div class='errors'>[[errors]]</div>
         </template>
         <div id='root'></div>
-        <paper-fab
+      </div>
+      <paper-fab slot="fab"
         is-wide$='[[isWide]]'
         dirty$='[[dirty]]'
         icon='mdi:content-save'
         title='Save'
         on-tap='saveAutomation'
       ></paper-fab>
-      </div>
+    </ha-app-layout>
-    </app-header-layout>
 
   </template>
 </dom-module>

panels/config/automation/ha-automation-picker.html

@@ -1,5 +1,4 @@
 <link rel="import" href="../../../bower_components/polymer/polymer-element.html">
-<link rel="import" href="../../../bower_components/app-layout/app-header-layout/app-header-layout.html">
 <link rel="import" href="../../../bower_components/app-layout/app-header/app-header.html">
 <link rel="import" href="../../../bower_components/app-layout/app-toolbar/app-toolbar.html">
 <link rel="import" href="../../../bower_components/paper-card/paper-card.html">
@@ -8,6 +7,7 @@
 <link rel="import" href="../../../bower_components/paper-fab/paper-fab.html">
 <link rel="import" href="../../../bower_components/paper-icon-button/paper-icon-button.html">
 
+<link rel='import' href='../../../src/layouts/ha-app-layout.html'>
 <link rel='import' href='../../../src/util/hass-mixins.html'>
 
 <link rel="import" href="../ha-config-section.html">
@@ -44,7 +44,7 @@
       }
     </style>
 
-    <app-header-layout has-scrolling-region>
+    <ha-app-layout has-scrolling-region>
       <app-header slot="header" fixed>
         <app-toolbar>
           <paper-icon-button
@@ -82,13 +82,13 @@
         </paper-card>
       </ha-config-section>
 
-      <paper-fab
+      <paper-fab slot="fab"
         is-wide$='[[isWide]]'
         icon='mdi:plus'
         title='Add Automation'
         on-tap='addAutomation'
       ></paper-fab>
-    </app-header-layout>
+    </ha-app-layout>
 
   </template>
 </dom-module>

panels/config/script/ha-script-editor.html

@@ -91,20 +91,19 @@
           <div main-title>Script [[name]]</div>
         </app-toolbar>
       </app-header>
-
       <div class='content'>
         <template is='dom-if' if='[[errors]]'>
           <div class='errors'>[[errors]]</div>
         </template>
         <div id='root'></div>
-        <paper-fab
+      </div>
+      <paper-fab slot="fab"
         is-wide$='[[isWide]]'
         dirty$='[[dirty]]'
         icon='mdi:content-save'
         title='Save'
         on-tap='saveScript'
       ></paper-fab>
-      </div>
     </ha-app-layout>
 
   </template>

panels/config/script/ha-script-picker.html

@@ -1,5 +1,4 @@
 <link rel="import" href="../../../bower_components/polymer/polymer-element.html">
-<link rel="import" href="../../../bower_components/app-layout/app-header-layout/app-header-layout.html">
 <link rel="import" href="../../../bower_components/app-layout/app-header/app-header.html">
 <link rel="import" href="../../../bower_components/app-layout/app-toolbar/app-toolbar.html">
 <link rel="import" href="../../../bower_components/paper-card/paper-card.html">
@@ -8,6 +7,7 @@
 <link rel="import" href="../../../bower_components/paper-fab/paper-fab.html">
 <link rel="import" href="../../../bower_components/paper-icon-button/paper-icon-button.html">
 
+<link rel='import' href='../../../src/layouts/ha-app-layout.html'>
 <link rel='import' href='../../../src/util/hass-mixins.html'>
 
 <link rel="import" href="../ha-config-section.html">
@@ -40,7 +40,7 @@
       }
     </style>
 
-    <app-header-layout has-scrolling-region>
+    <ha-app-layout has-scrolling-region>
       <app-header slot="header" fixed>
         <app-toolbar>
           <paper-icon-button
@@ -78,13 +78,13 @@
         </paper-card>
       </ha-config-section>
 
-      <paper-fab
+      <paper-fab slot="fab"
         is-wide$='[[isWide]]'
         icon='mdi:plus'
         title='Add Script'
         on-tap='addScript'
       ></paper-fab>
-    </app-header-layout>
+    </ha-app-layout>
 
   </template>
 </dom-module>

src/layouts/ha-app-layout.html

@@ -30,58 +30,62 @@ transform: translate(0) is added.
         position: relative;
         z-index: 0;
       }
+
       #wrapper ::slotted([slot=header]) {
         @apply --layout-fixed-top;
         z-index: 1;
       }
+
       #wrapper.initializing ::slotted([slot=header]) {
         position: relative;
       }
+
       :host([has-scrolling-region]) {
         height: 100%;
       }
+
       :host([has-scrolling-region]) #wrapper ::slotted([slot=header]) {
         position: absolute;
       }
+
       :host([has-scrolling-region]) #wrapper.initializing ::slotted([slot=header]) {
         position: relative;
       }
+
       :host([has-scrolling-region]) #wrapper #contentContainer {
         @apply --layout-fit;
+        overflow-y: auto;
         -webkit-overflow-scrolling: touch;
       }
+
       :host([has-scrolling-region]) #wrapper.initializing #contentContainer {
         position: relative;
       }
+
       #contentContainer {
         /* Create a stacking context here so that all children appear below the header. */
         position: relative;
         z-index: 0;
-      }
-      .scroll-limiter {
         /* Using 'transform' will cause 'position: fixed' elements to behave like
            'position: absolute' relative to this element. */
         transform: translate(0);
       }
-      :host([has-scrolling-region]) .scroll-limiter {
+
-        overflow-y: auto;
-        height: 100%
-      }
       @media print {
-        :host([has-scrolling-region]) .scroll-limiter {
+        :host([has-scrolling-region]) #wrapper #contentContainer {
           overflow-y: visible;
         }
       }
+
     </style>
 
     <div id="wrapper" class="initializing">
       <slot id="headerSlot" name="header"></slot>
 
       <div id="contentContainer">
-        <div class="scroll-limiter">
         <slot></slot>
       </div>
-      </div>
+      <slot id="fab" name="fab"></slot>
     </div>
 
   </template>