From 41e97a6f83a7e7eb7ea533ac16d7fa36df64c88c Mon Sep 17 00:00:00 2001
From: Andrey <andrey-git@users.noreply.github.com>
Date: Thu, 16 Nov 2017 03:12:09 +0200
Subject: [PATCH] Clone app-header-layout (#632)

* Fix group more-info not updating

* Remove old observer

* Upgrade translate(0) hack
---
 panels/config/core/ha-config-core.html     |  8 +-
 panels/config/script/ha-script-editor.html |  7 +-
 panels/config/zwave/ha-config-zwave.html   |  8 +-
 src/layouts/ha-app-layout.html             | 93 ++++++++++++++++++++++
 src/layouts/partial-cards.html             |  9 ++-
 src/resources/ha-style.html                |  6 --
 6 files changed, 110 insertions(+), 21 deletions(-)
 create mode 100644 src/layouts/ha-app-layout.html

diff --git a/panels/config/core/ha-config-core.html b/panels/config/core/ha-config-core.html
index eaca5c4786..fe11006250 100644
--- a/panels/config/core/ha-config-core.html
+++ b/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>
 
diff --git a/panels/config/script/ha-script-editor.html b/panels/config/script/ha-script-editor.html
index 59be66b6f0..fadfbbfa7d 100644
--- a/panels/config/script/ha-script-editor.html
+++ b/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>
diff --git a/panels/config/zwave/ha-config-zwave.html b/panels/config/zwave/ha-config-zwave.html
index cfe87b711c..e0bcbe4d40 100644
--- a/panels/config/zwave/ha-config-zwave.html
+++ b/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>
 
diff --git a/src/layouts/ha-app-layout.html b/src/layouts/ha-app-layout.html
new file mode 100644
index 0000000000..28bea8f08f
--- /dev/null
+++ b/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>
diff --git a/src/layouts/partial-cards.html b/src/layouts/partial-cards.html
index 95e603fb75..a032c5feb8 100644
--- a/src/layouts/partial-cards.html
+++ b/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>
diff --git a/src/resources/ha-style.html b/src/resources/ha-style.html
index cdbea1ad23..88e5c36e6a 100644
--- a/src/resources/ha-style.html
+++ b/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);
       }