Skip to content

Commit

Permalink
Clone app-header-layout (#632)
Browse files Browse the repository at this point in the history
* Fix group more-info not updating

* Remove old observer

* Upgrade translate(0) hack
  • Loading branch information
andrey-git authored and balloob committed Nov 16, 2017
1 parent 8078158 commit 41e97a6
Show file tree
Hide file tree
Showing 6 changed files with 110 additions and 21 deletions.
8 changes: 5 additions & 3 deletions panels/config/core/ha-config-core.html
Original file line number Diff line number Diff line change
@@ -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"> -->
Expand All @@ -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
Expand Down Expand Up @@ -78,7 +80,7 @@
></ha-config-section-hassbian>
</template>
</div>
</app-header-layout>
</ha-app-layout>
</template>
</dom-module>

Expand Down
7 changes: 3 additions & 4 deletions panels/config/script/ha-script-editor.html
Original file line number Diff line number Diff line change
@@ -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">
Expand All @@ -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">

Expand Down Expand Up @@ -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
Expand All @@ -104,7 +103,7 @@
on-tap='saveScript'
></paper-fab>
</div>
</app-header-layout>
</ha-app-layout>

</template>
</dom-module>
Expand Down
8 changes: 4 additions & 4 deletions panels/config/zwave/ha-config-zwave.html
Original file line number Diff line number Diff line change
@@ -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">
Expand All @@ -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">
Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -172,7 +172,7 @@
service='print_node'
hidden$='[[!showHelp]]'
></ha-service-description>

<ha-call-service-button
hass='[[hass]]'
domain='zwave'
Expand Down Expand Up @@ -337,7 +337,7 @@
hass='[[hass]]'
></ozw-log>

</app-header-layout>
</ha-app-layout>
</template>
</dom-module>

Expand Down
93 changes: 93 additions & 0 deletions src/layouts/ha-app-layout.html
Original file line number Diff line number Diff line change
@@ -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>
9 changes: 5 additions & 4 deletions src/layouts/partial-cards.html
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand All @@ -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">
Expand All @@ -28,7 +29,7 @@
-moz-user-select: none;
}

app-header-layout {
ha-app-layout {
background-color: var(--secondary-background-color, #E5E5E5);
}

Expand All @@ -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>
Expand Down Expand Up @@ -127,7 +128,7 @@
</template>

</iron-pages>
</app-header-layout>
</ha-app-layout>
</template>

</dom-module>
Expand Down
6 changes: 0 additions & 6 deletions src/resources/ha-style.html
Original file line number Diff line number Diff line change
Expand Up @@ -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);
}
Expand Down

0 comments on commit 41e97a6

Please sign in to comment.