From 3e86ba122228115e6e59942f8083eac6302696c3 Mon Sep 17 00:00:00 2001
From: Andrey <andrey-git@users.noreply.github.com>
Date: Tue, 31 Oct 2017 02:48:30 +0200
Subject: [PATCH] Use dynamic-align on all dropdowns (#542)

* Use dynamic-align on all dropdowns

* Replace tab with spaces
---
 panels/config/core/ha-config-core.html           |  7 +++----
 panels/config/core/ha-config-section-themes.html |  2 +-
 panels/config/zwave/ha-config-zwave.html         | 14 ++++++--------
 panels/config/zwave/zwave-groups.html            |  4 ++--
 panels/config/zwave/zwave-node-config.html       |  6 +++---
 panels/config/zwave/zwave-usercodes.html         |  2 +-
 panels/config/zwave/zwave-values.html            |  3 +--
 src/more-infos/more-info-climate.html            |  6 +++---
 src/more-infos/more-info-fan.html                |  2 +-
 src/more-infos/more-info-light.html              |  2 +-
 src/more-infos/more-info-media_player.html       |  2 +-
 src/more-infos/more-info-vacuum.html             |  2 +-
 src/resources/ha-style.html                      |  6 ++++++
 13 files changed, 30 insertions(+), 28 deletions(-)

diff --git a/panels/config/core/ha-config-core.html b/panels/config/core/ha-config-core.html
index 1ecbe6f446..eaca5c4786 100644
--- a/panels/config/core/ha-config-core.html
+++ b/panels/config/core/ha-config-core.html
@@ -1,9 +1,9 @@
 <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-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="./ha-config-section-core.html">
 <!-- <link rel="import" href="./ha-config-section-group.html"> -->
 <link rel="import" href="./ha-config-section-hassbian.html">
@@ -15,7 +15,6 @@
     <style include="iron-flex ha-style">
       .content {
         padding-bottom: 32px;
-        transform: translate(0);
       }
 
       .border {
diff --git a/panels/config/core/ha-config-section-themes.html b/panels/config/core/ha-config-section-themes.html
index 35aa4c4b25..6191cb8e25 100644
--- a/panels/config/core/ha-config-section-themes.html
+++ b/panels/config/core/ha-config-section-themes.html
@@ -17,7 +17,7 @@
 
       <paper-card>
         <div class='card-content'>
-          <paper-dropdown-menu label='Theme' vertical-align='bottom'>
+          <paper-dropdown-menu label='Theme' dynamic-align>
             <paper-listbox
               slot="dropdown-content"
               selected='{{selectedTheme}}'
diff --git a/panels/config/zwave/ha-config-zwave.html b/panels/config/zwave/ha-config-zwave.html
index 4c4046d7c8..146ac65128 100644
--- a/panels/config/zwave/ha-config-zwave.html
+++ b/panels/config/zwave/ha-config-zwave.html
@@ -105,13 +105,11 @@
 
         <paper-card class="content">
           <div class='device-picker'>
-            <paper-dropdown-menu label="Nodes" class="flex">
-              <paper-listbox
-                slot="dropdown-content"
-                selected='{{selectedNode}}'>
-              <template is='dom-repeat' items='[[nodes]]' as='state'>
-                <paper-item>[[computeSelectCaption(state)]]</paper-item>
-              </template>
+            <paper-dropdown-menu dynamic-align label="Nodes" class="flex">
+              <paper-listbox slot="dropdown-content" selected='{{selectedNode}}'>
+                <template is='dom-repeat' items='[[nodes]]' as='state'>
+                  <paper-item>[[computeSelectCaption(state)]]</paper-item>
+                </template>
               </paper-listbox>
             </paper-dropdown-menu>
           </div>
@@ -198,7 +196,7 @@
            </div>
 
            <div class='device-picker'>
-            <paper-dropdown-menu label="Entities of this node" class="flex">
+            <paper-dropdown-menu label="Entities of this node" dynamic-align class="flex">
               <paper-listbox
                 slot="dropdown-content"
                 selected='{{selectedEntity}}'>
diff --git a/panels/config/zwave/zwave-groups.html b/panels/config/zwave/zwave-groups.html
index 3a48e004ef..351ac8f4d4 100644
--- a/panels/config/zwave/zwave-groups.html
+++ b/panels/config/zwave/zwave-groups.html
@@ -36,7 +36,7 @@
     <paper-card class="content" heading='Node group associations'>
       <!--TODO make api for getting groups and members-->
       <div class='device-picker'>
-        <paper-dropdown-menu label="Group" class='flex'>
+        <paper-dropdown-menu label="Group" dynamic-align class='flex'>
           <paper-listbox
               slot="dropdown-content"
               selected='{{selectedGroup}}'>
@@ -48,7 +48,7 @@
       </div>
       <template is='dom-if' if='[[computeIsGroupSelected(selectedGroup)]]'>
         <div class='device-picker'>
-          <paper-dropdown-menu label="Node to control" class='flex'>
+          <paper-dropdown-menu label="Node to control" dynamic-align class='flex'>
             <paper-listbox
                 slot="dropdown-content"
                 selected='{{selectedTargetNode}}'>
diff --git a/panels/config/zwave/zwave-node-config.html b/panels/config/zwave/zwave-node-config.html
index 731b90cf41..f76d0dadb9 100644
--- a/panels/config/zwave/zwave-node-config.html
+++ b/panels/config/zwave/zwave-node-config.html
@@ -53,7 +53,7 @@
           </div>
         </template>
         <div class='device-picker'>
-        <paper-dropdown-menu label="Config parameter" class='flex'>
+        <paper-dropdown-menu label="Config parameter" dynamic-align class='flex'>
           <paper-listbox
             slot="dropdown-content"
             selected='{{selectedConfigParameter}}'>
@@ -65,7 +65,7 @@
         </div>
         <template is='dom-if' if="[[isConfigParameterSelected(selectedConfigParameter, 'List')]]">
           <div class='device-picker'>
-            <paper-dropdown-menu label="Config value" class='flex' placeholder='{{loadedConfigValue}}'>
+            <paper-dropdown-menu label="Config value" dynamic-align class='flex' placeholder='{{loadedConfigValue}}'>
               <paper-listbox
                 slot="dropdown-content"
                 selected='{{selectedConfigValue}}'>
@@ -90,7 +90,7 @@
         </template>
         <template is='dom-if' if="[[isConfigParameterSelected(selectedConfigParameter, 'Bool Button')]]">
           <div class='device-picker'>
-            <paper-dropdown-menu label="Config value" class='flex' placeholder='{{loadedConfigValue}}'>
+            <paper-dropdown-menu label="Config value" class='flex' dynamic-align placeholder='{{loadedConfigValue}}'>
               <paper-listbox
                 slot="dropdown-content"
                 selected='{{selectedConfigValue}}'>
diff --git a/panels/config/zwave/zwave-usercodes.html b/panels/config/zwave/zwave-usercodes.html
index 8d40b2b3e4..cef1aa6a7c 100644
--- a/panels/config/zwave/zwave-usercodes.html
+++ b/panels/config/zwave/zwave-usercodes.html
@@ -31,7 +31,7 @@
       <div class='content'>
         <paper-card heading='Node user codes'>
           <div class='device-picker'>
-          <paper-dropdown-menu label="Code slot" class='flex'>
+          <paper-dropdown-menu label="Code slot" dynamic-align class='flex'>
             <paper-listbox
               slot="dropdown-content"
               selected='{{selectedUserCode}}'>
diff --git a/panels/config/zwave/zwave-values.html b/panels/config/zwave/zwave-values.html
index a5c7a2f1f6..2855305419 100644
--- a/panels/config/zwave/zwave-values.html
+++ b/panels/config/zwave/zwave-values.html
@@ -35,7 +35,7 @@
     <div class='content'>
       <paper-card heading='Node Values'>
         <div class='device-picker'>
-        <paper-dropdown-menu label="Value" class='flex'>
+        <paper-dropdown-menu label="Value" dynamic-align class='flex'>
           <paper-listbox
             slot="dropdown-content"
             selected='{{selectedValue}}'>
@@ -159,4 +159,3 @@ class ZwaveValues extends Polymer.Element {
 
 customElements.define(ZwaveValues.is, ZwaveValues);
 </script>
-
diff --git a/src/more-infos/more-info-climate.html b/src/more-infos/more-info-climate.html
index 5ac7658c5b..4f5930dc64 100644
--- a/src/more-infos/more-info-climate.html
+++ b/src/more-infos/more-info-climate.html
@@ -124,7 +124,7 @@
 
       <div class='container-operation_list'>
         <div class='controls'>
-          <paper-dropdown-menu label-float label='Operation'>
+          <paper-dropdown-menu label-float dynamic-align label='Operation'>
             <paper-listbox slot="dropdown-content" selected="{{operationIndex}}">
               <template is='dom-repeat'
                         items='[[stateObj.attributes.operation_list]]'>
@@ -136,7 +136,7 @@
       </div>
 
       <div class='container-fan_list'>
-        <paper-dropdown-menu label-float label='Fan Mode'>
+        <paper-dropdown-menu label-float dynamic-align label='Fan Mode'>
           <paper-listbox slot="dropdown-content" selected="{{fanIndex}}">
             <template is='dom-repeat'
                       items='[[stateObj.attributes.fan_list]]'>
@@ -147,7 +147,7 @@
       </div>
 
       <div class='container-swing_list'>
-        <paper-dropdown-menu label-float label='Swing Mode'>
+        <paper-dropdown-menu label-float dynamic-align label='Swing Mode'>
           <paper-listbox slot="dropdown-content" selected="{{swingIndex}}">
             <template is='dom-repeat'
                       items='[[stateObj.attributes.swing_list]]'>
diff --git a/src/more-infos/more-info-fan.html b/src/more-infos/more-info-fan.html
index 1d4d0d0345..b0535286ba 100644
--- a/src/more-infos/more-info-fan.html
+++ b/src/more-infos/more-info-fan.html
@@ -35,7 +35,7 @@
     <div class$='[[computeClassNames(stateObj)]]'>
 
       <div class="container-speed_list">
-        <paper-dropdown-menu label-float label='Speed'>
+        <paper-dropdown-menu label-float dynamic-align label='Speed'>
           <paper-listbox slot="dropdown-content" selected='{{speedIndex}}'>
             <template is='dom-repeat'
                       items='[[stateObj.attributes.speed_list]]'>
diff --git a/src/more-infos/more-info-light.html b/src/more-infos/more-info-light.html
index d7a6b722eb..a5f7637e01 100644
--- a/src/more-infos/more-info-light.html
+++ b/src/more-infos/more-info-light.html
@@ -57,7 +57,7 @@
     <div class$='[[computeClassNames(stateObj)]]'>
 
       <div class='effect_list'>
-        <paper-dropdown-menu label-float label='Effect'>
+        <paper-dropdown-menu label-float dynamic-align label='Effect'>
           <paper-listbox slot="dropdown-content" selected="{{effectIndex}}">
             <template is='dom-repeat'
                       items='[[stateObj.attributes.effect_list]]'>
diff --git a/src/more-infos/more-info-media_player.html b/src/more-infos/more-info-media_player.html
index aef72836b8..007ae23930 100644
--- a/src/more-infos/more-info-media_player.html
+++ b/src/more-infos/more-info-media_player.html
@@ -98,7 +98,7 @@
       <div class='controls layout horizontal justified'
            hidden$='[[computeHideSelectSource(isOff, supportsSelectSource)]]'>
         <iron-icon class="source-input" icon="mdi:login-variant"></iron-icon>
-        <paper-dropdown-menu class="flex source-input" label-float label='Source'>
+        <paper-dropdown-menu class="flex source-input" dynamic-align label-float label='Source'>
           <paper-listbox slot="dropdown-content" selected="{{sourceIndex}}">
             <template is='dom-repeat' items='[[stateObj.attributes.source_list]]'>
               <paper-item>[[item]]</paper-item>
diff --git a/src/more-infos/more-info-vacuum.html b/src/more-infos/more-info-vacuum.html
index 6cba3877ec..d020fca881 100644
--- a/src/more-infos/more-info-vacuum.html
+++ b/src/more-infos/more-info-vacuum.html
@@ -67,7 +67,7 @@
 
     <div hidden$='[[!supportsFanSpeed(stateObj)]]'>
       <div class='horizontal justified layout'>
-        <paper-dropdown-menu label-float label='Fan speed'>
+        <paper-dropdown-menu label-float dynamic-align label='Fan speed'>
           <paper-listbox slot="dropdown-content" selected='{{fanSpeedIndex}}'>
             <template is='dom-repeat'
                       items='[[stateObj.attributes.fan_speed_list]]'>
diff --git a/src/resources/ha-style.html b/src/resources/ha-style.html
index 88e5c36e6a..cdbea1ad23 100644
--- a/src/resources/ha-style.html
+++ b/src/resources/ha-style.html
@@ -99,6 +99,12 @@
         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);
       }