mirror of
https://github.com/home-assistant/frontend.git
synced 2025-07-26 02:36:37 +00:00
Road to polymer 2 pt 2 (#310)
* Remove default-primary-color var * Swap out paper-menu for paper-listbox
This commit is contained in:
parent
bb83687d93
commit
8b6db691ef
@ -35,7 +35,6 @@
|
|||||||
"paper-item": "PolymerElements/paper-item#^2.0.0",
|
"paper-item": "PolymerElements/paper-item#^2.0.0",
|
||||||
"paper-listbox": "PolymerElements/paper-listbox#^2.0.0",
|
"paper-listbox": "PolymerElements/paper-listbox#^2.0.0",
|
||||||
"paper-material": "PolymerElements/paper-material#^2.0.0",
|
"paper-material": "PolymerElements/paper-material#^2.0.0",
|
||||||
"paper-menu": "PolymerElements/paper-menu#^1.3.0",
|
|
||||||
"paper-menu-button": "PolymerElements/paper-menu-button#^2.0.0",
|
"paper-menu-button": "PolymerElements/paper-menu-button#^2.0.0",
|
||||||
"paper-progress": "PolymerElements/paper-progress#^2.0.1",
|
"paper-progress": "PolymerElements/paper-progress#^2.0.1",
|
||||||
"paper-radio-button": "PolymerElements/paper-radio-button#^2.0.0",
|
"paper-radio-button": "PolymerElements/paper-radio-button#^2.0.0",
|
||||||
|
@ -4,7 +4,6 @@
|
|||||||
<link rel="import" href="../../../bower_components/paper-menu-button/paper-menu-button.html">
|
<link rel="import" href="../../../bower_components/paper-menu-button/paper-menu-button.html">
|
||||||
<link rel="import" href="../../../bower_components/paper-radio-group/paper-radio-group.html">
|
<link rel="import" href="../../../bower_components/paper-radio-group/paper-radio-group.html">
|
||||||
<link rel="import" href="../../../bower_components/paper-radio-button/paper-radio-button.html">
|
<link rel="import" href="../../../bower_components/paper-radio-button/paper-radio-button.html">
|
||||||
<link rel="import" href="../../../bower_components/paper-menu/paper-menu.html">
|
|
||||||
<link rel="import" href="../../../bower_components/polymer-sortablejs/polymer-sortablejs.html">
|
<link rel="import" href="../../../bower_components/polymer-sortablejs/polymer-sortablejs.html">
|
||||||
|
|
||||||
<link rel="import" href="../../../src/components/entity/state-info.html">
|
<link rel="import" href="../../../src/components/entity/state-info.html">
|
||||||
|
@ -2,7 +2,7 @@
|
|||||||
<link rel="import" href="../../bower_components/paper-icon-button/paper-icon-button.html">
|
<link rel="import" href="../../bower_components/paper-icon-button/paper-icon-button.html">
|
||||||
<link rel="import" href="../../bower_components/paper-input/paper-input.html">
|
<link rel="import" href="../../bower_components/paper-input/paper-input.html">
|
||||||
<link rel="import" href="../../bower_components/paper-dropdown-menu/paper-dropdown-menu.html">
|
<link rel="import" href="../../bower_components/paper-dropdown-menu/paper-dropdown-menu.html">
|
||||||
<link rel="import" href="../../bower_components/paper-menu/paper-menu.html">
|
<link rel="import" href="../../bower_components/paper-listbox/paper-listbox.html">
|
||||||
<link rel="import" href="../../bower_components/paper-item/paper-item.html">
|
<link rel="import" href="../../bower_components/paper-item/paper-item.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-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-header/app-header.html">
|
||||||
@ -34,6 +34,10 @@
|
|||||||
paper-dropdown-menu {
|
paper-dropdown-menu {
|
||||||
max-width: 100px;
|
max-width: 100px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
paper-item {
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
<ha-state-history-data
|
<ha-state-history-data
|
||||||
@ -66,14 +70,14 @@
|
|||||||
label='Period'
|
label='Period'
|
||||||
disabled='[[isLoadingData]]'
|
disabled='[[isLoadingData]]'
|
||||||
>
|
>
|
||||||
<paper-menu
|
<paper-listbox
|
||||||
slot="dropdown-content"
|
slot="dropdown-content"
|
||||||
selected="{{_periodIndex}}"
|
selected="{{_periodIndex}}"
|
||||||
>
|
>
|
||||||
<paper-item>1 day</paper-item>
|
<paper-item>1 day</paper-item>
|
||||||
<paper-item>3 days</paper-item>
|
<paper-item>3 days</paper-item>
|
||||||
<paper-item>1 week</paper-item>
|
<paper-item>1 week</paper-item>
|
||||||
</paper-menu>
|
</paper-listbox>
|
||||||
</paper-dropdown-menu>
|
</paper-dropdown-menu>
|
||||||
</div>
|
</div>
|
||||||
<state-history-charts history-data="[[stateHistoryOutput]]"
|
<state-history-charts history-data="[[stateHistoryOutput]]"
|
||||||
|
@ -92,10 +92,10 @@ export default class Action extends Component {
|
|||||||
icon="mdi:dots-vertical"
|
icon="mdi:dots-vertical"
|
||||||
slot="dropdown-trigger"
|
slot="dropdown-trigger"
|
||||||
/>
|
/>
|
||||||
<paper-menu slot="dropdown-content">
|
<paper-listbox slot="dropdown-content">
|
||||||
<paper-item disabled>Duplicate</paper-item>
|
<paper-item disabled>Duplicate</paper-item>
|
||||||
<paper-item onTap={this.onDelete}>Delete</paper-item>
|
<paper-item onTap={this.onDelete}>Delete</paper-item>
|
||||||
</paper-menu>
|
</paper-listbox>
|
||||||
</paper-menu-button>
|
</paper-menu-button>
|
||||||
</div>
|
</div>
|
||||||
<div class='card-content'>{content}</div>
|
<div class='card-content'>{content}</div>
|
||||||
|
@ -90,10 +90,10 @@ export default class TriggerRow extends Component {
|
|||||||
icon="mdi:dots-vertical"
|
icon="mdi:dots-vertical"
|
||||||
slot="dropdown-trigger"
|
slot="dropdown-trigger"
|
||||||
/>
|
/>
|
||||||
<paper-menu slot="dropdown-content">
|
<paper-listbox slot="dropdown-content">
|
||||||
<paper-item disabled>Duplicate</paper-item>
|
<paper-item disabled>Duplicate</paper-item>
|
||||||
<paper-item onTap={this.onDelete}>Delete</paper-item>
|
<paper-item onTap={this.onDelete}>Delete</paper-item>
|
||||||
</paper-menu>
|
</paper-listbox>
|
||||||
</paper-menu-button>
|
</paper-menu-button>
|
||||||
</div>
|
</div>
|
||||||
<div class='card-content'>{content}</div>
|
<div class='card-content'>{content}</div>
|
||||||
|
@ -13,7 +13,7 @@
|
|||||||
transition: color .5s;
|
transition: color .5s;
|
||||||
}
|
}
|
||||||
paper-icon-button[state-active] {
|
paper-icon-button[state-active] {
|
||||||
color: var(--default-primary-color);
|
color: var(--primary-color);
|
||||||
}
|
}
|
||||||
paper-toggle-button {
|
paper-toggle-button {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
@ -19,7 +19,7 @@
|
|||||||
line-height: var(--ha-label-badge-size, 2.5em);
|
line-height: var(--ha-label-badge-size, 2.5em);
|
||||||
font-size: var(--ha-label-badge-font-size, 1.5em);
|
font-size: var(--ha-label-badge-font-size, 1.5em);
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
border: 0.1em solid var(--ha-label-badge-color, --default-primary-color);
|
border: 0.1em solid var(--ha-label-badge-color, --primary-color);
|
||||||
color: rgb(76, 76, 76);
|
color: rgb(76, 76, 76);
|
||||||
|
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
@ -47,7 +47,7 @@
|
|||||||
.label-badge .label span {
|
.label-badge .label span {
|
||||||
max-width: 80%;
|
max-width: 80%;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
background-color: var(--ha-label-badge-color, --default-primary-color);
|
background-color: var(--ha-label-badge-color, --primary-color);
|
||||||
color: white;
|
color: white;
|
||||||
border-radius: 1em;
|
border-radius: 1em;
|
||||||
padding: 4px 8px;
|
padding: 4px 8px;
|
||||||
|
@ -1,7 +1,7 @@
|
|||||||
<link rel='import' href='../../bower_components/polymer/polymer.html'>
|
<link rel='import' href='../../bower_components/polymer/polymer.html'>
|
||||||
<link rel="import" href="../../bower_components/iron-flex-layout/iron-flex-layout-classes.html">
|
<link rel="import" href="../../bower_components/iron-flex-layout/iron-flex-layout-classes.html">
|
||||||
<link rel='import' href='../../bower_components/iron-icon/iron-icon.html'>
|
<link rel='import' href='../../bower_components/iron-icon/iron-icon.html'>
|
||||||
<link rel='import' href='../../bower_components/paper-menu/paper-menu.html'>
|
<link rel='import' href='../../bower_components/paper-listbox/paper-listbox.html'>
|
||||||
<link rel='import' href='../../bower_components/paper-item/paper-item.html'>
|
<link rel='import' href='../../bower_components/paper-item/paper-item.html'>
|
||||||
<link rel='import' href='../../bower_components/paper-item/paper-icon-item.html'>
|
<link rel='import' href='../../bower_components/paper-item/paper-icon-item.html'>
|
||||||
<link rel='import' href='../../bower_components/paper-icon-button/paper-icon-button.html'>
|
<link rel='import' href='../../bower_components/paper-icon-button/paper-icon-button.html'>
|
||||||
@ -34,7 +34,7 @@
|
|||||||
background-color: var(--primary-background-color);
|
background-color: var(--primary-background-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
paper-menu {
|
paper-listbox {
|
||||||
padding-bottom: 0;
|
padding-bottom: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -49,14 +49,14 @@
|
|||||||
};
|
};
|
||||||
|
|
||||||
--paper-item-selected: {
|
--paper-item-selected: {
|
||||||
color: var(--default-primary-color);
|
color: var(--primary-color);
|
||||||
background-color: var(--paper-grey-200);
|
background-color: var(--paper-grey-200);
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
paper-icon-item.iron-selected {
|
paper-icon-item.iron-selected {
|
||||||
--paper-item-icon: {
|
--paper-item-icon: {
|
||||||
color: var(--default-primary-color);
|
color: var(--primary-color);
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
@ -99,7 +99,7 @@
|
|||||||
<paper-icon-button icon='mdi:chevron-left' hidden$='[[narrow]]' on-tap='toggleMenu'></paper-icon-button>
|
<paper-icon-button icon='mdi:chevron-left' hidden$='[[narrow]]' on-tap='toggleMenu'></paper-icon-button>
|
||||||
</app-toolbar>
|
</app-toolbar>
|
||||||
|
|
||||||
<paper-menu attr-for-selected='data-panel' selected='[[hass.currentPanel]]' on-iron-select='menuSelect'>
|
<paper-listbox attr-for-selected='data-panel' selected='[[hass.currentPanel]]' on-iron-select='menuSelect'>
|
||||||
<paper-icon-item on-tap='menuClicked' data-panel='states'>
|
<paper-icon-item on-tap='menuClicked' data-panel='states'>
|
||||||
<iron-icon slot="item-icon" icon='mdi:apps'></iron-icon>
|
<iron-icon slot="item-icon" icon='mdi:apps'></iron-icon>
|
||||||
<span class='item-text'>States</span>
|
<span class='item-text'>States</span>
|
||||||
@ -116,7 +116,7 @@
|
|||||||
<iron-icon slot="item-icon" icon='mdi:exit-to-app'></iron-icon>
|
<iron-icon slot="item-icon" icon='mdi:exit-to-app'></iron-icon>
|
||||||
<span class='item-text'>Log Out</span>
|
<span class='item-text'>Log Out</span>
|
||||||
</paper-icon-item>
|
</paper-icon-item>
|
||||||
</paper-menu>
|
</paper-listbox>
|
||||||
|
|
||||||
<div>
|
<div>
|
||||||
<template is='dom-if' if='[[pushSupported]]'>
|
<template is='dom-if' if='[[pushSupported]]'>
|
||||||
|
@ -10,7 +10,7 @@
|
|||||||
<template>
|
<template>
|
||||||
<style>
|
<style>
|
||||||
paper-button {
|
paper-button {
|
||||||
color: var(--default-primary-color);
|
color: var(--primary-color);
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
top: 3px;
|
top: 3px;
|
||||||
height: 37px;
|
height: 37px;
|
||||||
|
@ -3,7 +3,7 @@
|
|||||||
<link rel="import" href="../../bower_components/iron-flex-layout/iron-flex-layout-classes.html">
|
<link rel="import" href="../../bower_components/iron-flex-layout/iron-flex-layout-classes.html">
|
||||||
|
|
||||||
<link rel='import' href='../../bower_components/paper-slider/paper-slider.html'>
|
<link rel='import' href='../../bower_components/paper-slider/paper-slider.html'>
|
||||||
<link rel='import' href='../../bower_components/paper-menu/paper-menu.html'>
|
<link rel='import' href='../../bower_components/paper-listbox/paper-listbox.html'>
|
||||||
<link rel='import' href='../../bower_components/paper-item/paper-item.html'>
|
<link rel='import' href='../../bower_components/paper-item/paper-item.html'>
|
||||||
<link rel='import' href='../../bower_components/paper-dropdown-menu/paper-dropdown-menu.html'>
|
<link rel='import' href='../../bower_components/paper-dropdown-menu/paper-dropdown-menu.html'>
|
||||||
<link rel='import' href='../../bower_components/paper-toggle-button/paper-toggle-button.html'>
|
<link rel='import' href='../../bower_components/paper-toggle-button/paper-toggle-button.html'>
|
||||||
@ -51,6 +51,10 @@
|
|||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
paper-item {
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
paper-slider {
|
paper-slider {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
@ -119,35 +123,35 @@
|
|||||||
<div class='container-operation_list'>
|
<div class='container-operation_list'>
|
||||||
<div class='controls'>
|
<div class='controls'>
|
||||||
<paper-dropdown-menu label-float label='Operation'>
|
<paper-dropdown-menu label-float label='Operation'>
|
||||||
<paper-menu slot="dropdown-content" selected="{{operationIndex}}">
|
<paper-listbox slot="dropdown-content" selected="{{operationIndex}}">
|
||||||
<template is='dom-repeat'
|
<template is='dom-repeat'
|
||||||
items='[[stateObj.attributes.operation_list]]'>
|
items='[[stateObj.attributes.operation_list]]'>
|
||||||
<paper-item class="capitalize">[[item]]</paper-item>
|
<paper-item class="capitalize">[[item]]</paper-item>
|
||||||
</template>
|
</template>
|
||||||
</paper-menu>
|
</paper-listbox>
|
||||||
</paper-dropdown-menu>
|
</paper-dropdown-menu>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class='container-fan_list'>
|
<div class='container-fan_list'>
|
||||||
<paper-dropdown-menu label-float label='Fan Mode'>
|
<paper-dropdown-menu label-float label='Fan Mode'>
|
||||||
<paper-menu slot="dropdown-content" selected="{{fanIndex}}">
|
<paper-listbox slot="dropdown-content" selected="{{fanIndex}}">
|
||||||
<template is='dom-repeat'
|
<template is='dom-repeat'
|
||||||
items='[[stateObj.attributes.fan_list]]'>
|
items='[[stateObj.attributes.fan_list]]'>
|
||||||
<paper-item>[[item]]</paper-item>
|
<paper-item>[[item]]</paper-item>
|
||||||
</template>
|
</template>
|
||||||
</paper-menu>
|
</paper-listbox>
|
||||||
</paper-dropdown-menu>
|
</paper-dropdown-menu>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class='container-swing_list'>
|
<div class='container-swing_list'>
|
||||||
<paper-dropdown-menu label-float label='Swing Mode'>
|
<paper-dropdown-menu label-float label='Swing Mode'>
|
||||||
<paper-menu slot="dropdown-content" selected="{{swingIndex}}">
|
<paper-listbox slot="dropdown-content" selected="{{swingIndex}}">
|
||||||
<template is='dom-repeat'
|
<template is='dom-repeat'
|
||||||
items='[[stateObj.attributes.swing_list]]'>
|
items='[[stateObj.attributes.swing_list]]'>
|
||||||
<paper-item>[[item]]</paper-item>
|
<paper-item>[[item]]</paper-item>
|
||||||
</template>
|
</template>
|
||||||
</paper-menu>
|
</paper-listbox>
|
||||||
</paper-dropdown-menu>
|
</paper-dropdown-menu>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
@ -2,7 +2,7 @@
|
|||||||
|
|
||||||
<link rel='import' href='../../bower_components/iron-flex-layout/iron-flex-layout-classes.html'>
|
<link rel='import' href='../../bower_components/iron-flex-layout/iron-flex-layout-classes.html'>
|
||||||
<link rel='import' href='../../bower_components/paper-dropdown-menu/paper-dropdown-menu.html'>
|
<link rel='import' href='../../bower_components/paper-dropdown-menu/paper-dropdown-menu.html'>
|
||||||
<link rel='import' href='../../bower_components/paper-menu/paper-menu.html'>
|
<link rel='import' href='../../bower_components/paper-listbox/paper-listbox.html'>
|
||||||
<link rel='import' href='../../bower_components/paper-item/paper-item.html'>
|
<link rel='import' href='../../bower_components/paper-item/paper-item.html'>
|
||||||
<link rel='import' href='../../bower_components/paper-toggle-button/paper-toggle-button.html'>
|
<link rel='import' href='../../bower_components/paper-toggle-button/paper-toggle-button.html'>
|
||||||
<link rel='import' href='../../bower_components/paper-icon-button/paper-icon-button.html'>
|
<link rel='import' href='../../bower_components/paper-icon-button/paper-icon-button.html'>
|
||||||
@ -22,18 +22,22 @@
|
|||||||
.has-oscillating .container-oscillating {
|
.has-oscillating .container-oscillating {
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
paper-item {
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
<div class$='[[computeClassNames(stateObj)]]'>
|
<div class$='[[computeClassNames(stateObj)]]'>
|
||||||
|
|
||||||
<div class="container-speed_list">
|
<div class="container-speed_list">
|
||||||
<paper-dropdown-menu label-float label='Speed'>
|
<paper-dropdown-menu label-float label='Speed'>
|
||||||
<paper-menu slot="dropdown-content" selected='{{speedIndex}}'>
|
<paper-listbox slot="dropdown-content" selected='{{speedIndex}}'>
|
||||||
<template is='dom-repeat'
|
<template is='dom-repeat'
|
||||||
items='[[stateObj.attributes.speed_list]]'>
|
items='[[stateObj.attributes.speed_list]]'>
|
||||||
<paper-item>[[item]]</paper-item>
|
<paper-item>[[item]]</paper-item>
|
||||||
</template>
|
</template>
|
||||||
</paper-menu>
|
</paper-listbox>
|
||||||
</paper-dropdown-menu>
|
</paper-dropdown-menu>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
@ -2,7 +2,7 @@
|
|||||||
|
|
||||||
<link rel="import" href="../../bower_components/iron-flex-layout/iron-flex-layout-classes.html">
|
<link rel="import" href="../../bower_components/iron-flex-layout/iron-flex-layout-classes.html">
|
||||||
<link rel="import" href="../../bower_components/paper-dropdown-menu/paper-dropdown-menu.html">
|
<link rel="import" href="../../bower_components/paper-dropdown-menu/paper-dropdown-menu.html">
|
||||||
<link rel="import" href="../../bower_components/paper-menu/paper-menu.html">
|
<link rel="import" href="../../bower_components/paper-listbox/paper-listbox.html">
|
||||||
<link rel="import" href="../../bower_components/paper-item/paper-item.html">
|
<link rel="import" href="../../bower_components/paper-item/paper-item.html">
|
||||||
|
|
||||||
<link rel='import' href='../components/ha-labeled-slider.html'>
|
<link rel='import' href='../components/ha-labeled-slider.html'>
|
||||||
@ -46,18 +46,22 @@
|
|||||||
.has-rgb_color ha-color-picker {
|
.has-rgb_color ha-color-picker {
|
||||||
max-height: 200px;
|
max-height: 200px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
paper-item {
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
<div class$='[[computeClassNames(stateObj)]]'>
|
<div class$='[[computeClassNames(stateObj)]]'>
|
||||||
|
|
||||||
<div class='effect_list'>
|
<div class='effect_list'>
|
||||||
<paper-dropdown-menu label-float label='Effect'>
|
<paper-dropdown-menu label-float label='Effect'>
|
||||||
<paper-menu slot="dropdown-content" selected="{{effectIndex}}">
|
<paper-listbox slot="dropdown-content" selected="{{effectIndex}}">
|
||||||
<template is='dom-repeat'
|
<template is='dom-repeat'
|
||||||
items='[[stateObj.attributes.effect_list]]'>
|
items='[[stateObj.attributes.effect_list]]'>
|
||||||
<paper-item>[[item]]</paper-item>
|
<paper-item>[[item]]</paper-item>
|
||||||
</template>
|
</template>
|
||||||
</paper-menu>
|
</paper-listbox>
|
||||||
</paper-dropdown-menu>
|
</paper-dropdown-menu>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
@ -7,7 +7,7 @@
|
|||||||
<link rel='import' href='../../bower_components/paper-icon-button/paper-icon-button.html'>
|
<link rel='import' href='../../bower_components/paper-icon-button/paper-icon-button.html'>
|
||||||
<link rel='import' href='../../bower_components/paper-slider/paper-slider.html'>
|
<link rel='import' href='../../bower_components/paper-slider/paper-slider.html'>
|
||||||
<link rel='import' href='../../bower_components/paper-dropdown-menu/paper-dropdown-menu.html'>
|
<link rel='import' href='../../bower_components/paper-dropdown-menu/paper-dropdown-menu.html'>
|
||||||
<link rel='import' href='../../bower_components/paper-menu/paper-menu.html'>
|
<link rel='import' href='../../bower_components/paper-listbox/paper-listbox.html'>
|
||||||
<link rel='import' href='../../bower_components/paper-item/paper-item.html'>
|
<link rel='import' href='../../bower_components/paper-item/paper-item.html'>
|
||||||
|
|
||||||
<dom-module id='more-info-media_player'>
|
<dom-module id='more-info-media_player'>
|
||||||
@ -46,6 +46,10 @@
|
|||||||
[hidden] {
|
[hidden] {
|
||||||
display: none !important;
|
display: none !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
paper-item {
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
<div class$='[[computeClassNames(stateObj)]]'>
|
<div class$='[[computeClassNames(stateObj)]]'>
|
||||||
@ -93,11 +97,11 @@
|
|||||||
hidden$='[[computeHideSelectSource(isOff, supportsSelectSource)]]'>
|
hidden$='[[computeHideSelectSource(isOff, supportsSelectSource)]]'>
|
||||||
<iron-icon class="source-input" icon="mdi:login-variant"></iron-icon>
|
<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" label-float label='Source'>
|
||||||
<paper-menu slot="dropdown-content" selected="{{sourceIndex}}">
|
<paper-listbox slot="dropdown-content" selected="{{sourceIndex}}">
|
||||||
<template is='dom-repeat' items='[[stateObj.attributes.source_list]]'>
|
<template is='dom-repeat' items='[[stateObj.attributes.source_list]]'>
|
||||||
<paper-item>[[item]]</paper-item>
|
<paper-item>[[item]]</paper-item>
|
||||||
</template>
|
</template>
|
||||||
</paper-menu>
|
</paper-listbox>
|
||||||
</paper-dropdown-menu>
|
</paper-dropdown-menu>
|
||||||
</div>
|
</div>
|
||||||
<!-- TTS -->
|
<!-- TTS -->
|
||||||
|
@ -9,7 +9,6 @@
|
|||||||
--paper-grey-200: #eeeeee;
|
--paper-grey-200: #eeeeee;
|
||||||
|
|
||||||
--dark-primary-color: #0288D1;
|
--dark-primary-color: #0288D1;
|
||||||
--default-primary-color: #03A9F4;
|
|
||||||
--primary-color: #03A9F4;
|
--primary-color: #03A9F4;
|
||||||
--light-primary-color: #B3E5FC;
|
--light-primary-color: #B3E5FC;
|
||||||
--text-primary-color: #ffffff;
|
--text-primary-color: #ffffff;
|
||||||
@ -32,7 +31,7 @@
|
|||||||
--paper-slider-container-color: var(--divider-color);
|
--paper-slider-container-color: var(--divider-color);
|
||||||
|
|
||||||
--paper-card-background-color: #FFF;
|
--paper-card-background-color: #FFF;
|
||||||
--paper-menu-background-color: #FFF;
|
--paper-listbox-background-color: #FFF;
|
||||||
|
|
||||||
/* Taken from paper-styles/color.html */
|
/* Taken from paper-styles/color.html */
|
||||||
/* for paper-spinner */
|
/* for paper-spinner */
|
||||||
@ -88,7 +87,7 @@
|
|||||||
.card-actions > paper-button:not([disabled]),
|
.card-actions > paper-button:not([disabled]),
|
||||||
.card-actions > ha-call-api-button:not([disabled]),
|
.card-actions > ha-call-api-button:not([disabled]),
|
||||||
.card-actions > ha-call-service-button:not([disabled]) {
|
.card-actions > ha-call-service-button:not([disabled]) {
|
||||||
color: var(--default-primary-color);
|
color: var(--primary-color);
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -11,7 +11,7 @@
|
|||||||
<style is="custom-style" include="iron-flex iron-flex-alignment"></style>
|
<style is="custom-style" include="iron-flex iron-flex-alignment"></style>
|
||||||
<style>
|
<style>
|
||||||
paper-button {
|
paper-button {
|
||||||
color: var(--default-primary-color);
|
color: var(--primary-color);
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
top: 3px;
|
top: 3px;
|
||||||
height: 37px;
|
height: 37px;
|
||||||
|
@ -1,6 +1,6 @@
|
|||||||
<link rel="import" href="../../bower_components/polymer/polymer.html">
|
<link rel="import" href="../../bower_components/polymer/polymer.html">
|
||||||
<link rel="import" href="../../bower_components/paper-dropdown-menu/paper-dropdown-menu.html">
|
<link rel="import" href="../../bower_components/paper-dropdown-menu/paper-dropdown-menu.html">
|
||||||
<link rel='import' href='../../bower_components/paper-menu/paper-menu.html'>
|
<link rel='import' href='../../bower_components/paper-listbox/paper-listbox.html'>
|
||||||
<link rel='import' href='../../bower_components/paper-item/paper-item.html'>
|
<link rel='import' href='../../bower_components/paper-item/paper-item.html'>
|
||||||
|
|
||||||
<link rel="import" href="../components/entity/state-badge.html">
|
<link rel="import" href="../components/entity/state-badge.html">
|
||||||
@ -21,6 +21,10 @@
|
|||||||
display: block;
|
display: block;
|
||||||
margin-left: 53px;
|
margin-left: 53px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
paper-item {
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
<state-badge state-obj='[[stateObj]]'></state-badge>
|
<state-badge state-obj='[[stateObj]]'></state-badge>
|
||||||
@ -28,11 +32,11 @@
|
|||||||
on-tap='stopPropagation'
|
on-tap='stopPropagation'
|
||||||
selected-item-label='{{selectedOption}}'
|
selected-item-label='{{selectedOption}}'
|
||||||
label='[[computeStateName(stateObj)]]'>
|
label='[[computeStateName(stateObj)]]'>
|
||||||
<paper-menu slot="dropdown-content" selected="[[computeSelected(stateObj)]]">
|
<paper-listbox slot="dropdown-content" selected="[[computeSelected(stateObj)]]">
|
||||||
<template is='dom-repeat' items='[[stateObj.attributes.options]]'>
|
<template is='dom-repeat' items='[[stateObj.attributes.options]]'>
|
||||||
<paper-item>[[item]]</paper-item>
|
<paper-item>[[item]]</paper-item>
|
||||||
</template>
|
</template>
|
||||||
</paper-menu>
|
</paper-listbox>
|
||||||
</paper-dropdown-menu>
|
</paper-dropdown-menu>
|
||||||
</template>
|
</template>
|
||||||
</dom-module>
|
</dom-module>
|
||||||
|
@ -11,7 +11,7 @@
|
|||||||
<style is="custom-style" include="iron-flex iron-flex-alignment"></style>
|
<style is="custom-style" include="iron-flex iron-flex-alignment"></style>
|
||||||
<style>
|
<style>
|
||||||
paper-button {
|
paper-button {
|
||||||
color: var(--default-primary-color);
|
color: var(--primary-color);
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
top: 3px;
|
top: 3px;
|
||||||
height: 37px;
|
height: 37px;
|
||||||
|
@ -12,7 +12,7 @@
|
|||||||
<style is="custom-style" include="iron-flex iron-flex-alignment"></style>
|
<style is="custom-style" include="iron-flex iron-flex-alignment"></style>
|
||||||
<style>
|
<style>
|
||||||
paper-button {
|
paper-button {
|
||||||
color: var(--default-primary-color);
|
color: var(--primary-color);
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
top: 3px;
|
top: 3px;
|
||||||
height: 37px;
|
height: 37px;
|
||||||
|
Loading…
x
Reference in New Issue
Block a user