mirror of
https://github.com/home-assistant/frontend.git
synced 2025-07-24 01:36:49 +00:00
Use dynamic-align on all dropdowns (#542)
* Use dynamic-align on all dropdowns * Replace tab with spaces
This commit is contained in:
parent
7479aeceee
commit
3e86ba1222
@ -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 {
|
||||
|
@ -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}}'
|
||||
|
@ -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}}'>
|
||||
|
@ -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}}'>
|
||||
|
@ -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}}'>
|
||||
|
@ -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}}'>
|
||||
|
@ -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>
|
||||
|
||||
|
@ -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]]'>
|
||||
|
@ -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]]'>
|
||||
|
@ -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]]'>
|
||||
|
@ -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>
|
||||
|
@ -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]]'>
|
||||
|
@ -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);
|
||||
}
|
||||
|
Loading…
x
Reference in New Issue
Block a user