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