jeans/frontend
jeans/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2025-07-18 23:06:40 +00:00
Code Issues Packages Projects Releases Wiki Activity

Clone app-header-layout (#632)

Browse Source 
* Fix group more-info not updating

* Remove old observer

* Upgrade translate(0) hack
This commit is contained in:
Andrey 2017-11-16 03:12:09 +02:00 committed by Paulus Schoutsen
parent 8078158a56
commit 41e97a6f83
6 changed files with 110 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
panels/config/core/ha-config-core.html
View File

@ -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>

7
panels/config/script/ha-script-editor.html
View File

@ -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>

8
panels/config/zwave/ha-config-zwave.html
View File

@ -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>

93
src/layouts/ha-app-layout.html Normal file
View File

@ -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
src/layouts/partial-cards.html
View File

@ -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>

6
src/resources/ha-style.html
View File

@ -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);
}