Clone app-header-layout

panels/config/core/ha-config-core.html

@@ -1,8 +1,10 @@
 <link rel="import" href="../../../bower_components/polymer/polymer-element.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-icon-button/paper-icon-button.html">
 
 <link rel="import" href="../../../src/resources/ha-style.html">
-<link rel="import" href="../../../src/resources/panel-imports.html">
+<link rel='import' href='../../../src/layouts/ha-app-layout.html'>
 
 <link rel="import" href="./ha-config-section-core.html">
 <!-- <link rel="import" href="./ha-config-section-group.html"> -->
@@ -28,7 +30,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,7 +80,7 @@
           ></ha-config-section-hassbian>
         </template>
       </div>
-    </app-header-layout>
+    </ha-app-layout>
   </template>
 </dom-module>
 

panels/config/script/ha-script-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">
@@ -17,6 +16,7 @@
 <link rel="import" href="../../../bower_components/iron-autogrow-textarea/iron-autogrow-textarea.html">
 
 <link rel='import' href='../../../src/util/hass-mixins.html'>
+<link rel='import' href='../../../src/layouts/ha-app-layout.html'>
 
 <link rel="import" href="../ha-config-section.html">
 
@@ -79,8 +79,7 @@
         margin-bottom: 0;
       }
     </style>
-
-    <app-header-layout has-scrolling-region>
+    <ha-app-layout has-scrolling-region>
       <app-header slot="header" fixed>
         <app-toolbar>
           <paper-icon-button
@@ -104,7 +103,7 @@
           on-tap='saveScript'
         ></paper-fab>
       </div>
-    </app-header-layout>
+    </ha-app-layout>
 
   </template>
 </dom-module>

panels/config/zwave/ha-config-zwave.html

@@ -1,7 +1,6 @@
 <link rel="import" href="../../../bower_components/polymer/polymer-element.html">
 <link rel="import" href="../../../bower_components/paper-card/paper-card.html">
 <link rel="import" href="../../../src/components/ha-menu-button.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-icon-button/paper-icon-button.html">
@@ -12,6 +11,7 @@
 
 <link rel="import" href="../../../src/components/buttons/ha-call-service-button.html">
 <link rel="import" href="../../../src/components/ha-service-description.html">
+<link rel='import' href='../../../src/layouts/ha-app-layout.html'>
 <link rel="import" href="../../../src/resources/ha-style.html">
 
 <link rel="import" href="../ha-config-section.html">
@@ -71,7 +71,7 @@
         color: var(--primary-color);
       }
     </style>
-    <app-header-layout has-scrolling-region>
+    <ha-app-layout has-scrolling-region>
       <app-header slot="header" fixed>
         <app-toolbar>
           <paper-icon-button
@@ -172,7 +172,7 @@
               service='print_node'
               hidden$='[[!showHelp]]'
             ></ha-service-description>
-            
+
             <ha-call-service-button
               hass='[[hass]]'
               domain='zwave'
@@ -337,7 +337,7 @@
         hass='[[hass]]'
       ></ozw-log>
 
-     </app-header-layout>
+    </ha-app-layout>
   </template>
 </dom-module>
 

src/layouts/ha-app-layout.html

@@ -0,0 +1,93 @@
+<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">
+<!--
+@license
+Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
+This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
+The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
+The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
+Code distributed by Google as part of the polymer project is also
+subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
+-->
+
+<!--
+This code is copied from app-header-layout.
+'fullbleed' support is removed as Home Assisstant doesn't use it.
+transform: translate(0) is added.
+-->
+
+<dom-module id="ha-app-layout">
+  <template>
+    <style>
+      :host {
+        display: block;
+        /**
+         * Force app-header-layout to have its own stacking context so that its parent can
+         * control the stacking of it relative to other elements (e.g. app-drawer-layout).
+         * This could be done using `isolation: isolate`, but that's not well supported
+         * across browsers.
+         */
+        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;
+        -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;
+        /* Using 'transform' will cause 'position: fixed' elements to behave like
+           'position: absolute' relative to this element. */
+        transform: translate(0);
+        z-index: 0;
+      }
+      :host([has-scrolling-region]) .scroll-limiter {
+        overflow-y: auto;
+        height: 100%
+      }
+      @media print {
+        :host([has-scrolling-region]) .scroll-limiter {
+          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>
+    </div>
+
+  </template>
+</dom-module>
+
+<script>
+class HaAppLayout extends customElements.get('app-header-layout') {
+  static get is() { return 'ha-app-layout'; }
+}
+customElements.define(HaAppLayout.is, HaAppLayout);
+</script>

src/layouts/partial-cards.html

@@ -7,7 +7,6 @@
 <link rel="import" href="../../bower_components/paper-tabs/paper-tabs.html">
 <link rel="import" href="../../bower_components/paper-tabs/paper-tab.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-scroll-effects/effects/waterfall.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">
@@ -19,6 +18,8 @@
 <link rel="import" href="../components/ha-start-voice-button.html">
 <link rel="import" href="../components/ha-cards.html">
 
+<link rel="import" href="./ha-app-layout.html">
+
 <dom-module id="partial-cards">
   <template>
     <style include="iron-flex iron-positioning ha-style">
@@ -28,7 +29,7 @@
         -moz-user-select: none;
       }
 
-      app-header-layout {
+      ha-app-layout {
         background-color: var(--secondary-background-color, #E5E5E5);
       }
 
@@ -44,7 +45,7 @@
       data="{{routeData}}"
       active="{{routeMatch}}"
     ></app-route>
-    <app-header-layout has-scrolling-region id='layout'>
+    <ha-app-layout has-scrolling-region id='layout'>
       <app-header effects="waterfall" condenses fixed slot="header">
         <app-toolbar>
           <ha-menu-button narrow='[[narrow]]' show-menu='[[showMenu]]'></ha-menu-button>
@@ -127,7 +128,7 @@
         </template>
 
       </iron-pages>
-    </app-header-layout>
+    </ha-app-layout>
   </template>
 
 </dom-module>

src/resources/ha-style.html

@@ -99,12 +99,6 @@
         margin-left: 24px;
       }
 
-      app-header-layout > :not([slot]) {
-        /* app-header-layout creates a separate z-index stack for content.
-         * Using 'transform' will cause 'position: fixed' elements to reside
-         * in that stack too. */
-        transform: translate(0);
-      }
       h1 {
         @apply(--paper-font-title);
       }