Use dynamic-align on all dropdowns (#542)

* Use dynamic-align on all dropdowns

* Replace tab with spaces
This commit is contained in:
Andrey 2017-10-31 02:48:30 +02:00 committed by Paulus Schoutsen
parent 7479aeceee
commit 3e86ba1222
13 changed files with 30 additions and 28 deletions

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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