jeans/frontend
jeans/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2025-07-24 09:46:36 +00:00
Code Issues Packages Projects Releases Wiki Activity

Road to polymer 2 pt 2 (#310)

Browse Source 
* Remove default-primary-color var

* Swap out paper-menu for paper-listbox
This commit is contained in:
Paulus Schoutsen 2017-06-18 19:30:18 -07:00 committed by GitHub
parent bb83687d93
commit 8b6db691ef
18 changed files with 65 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
bower.json
View File

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

1
panels/config/group/ha-form-group.html
View File

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

10
panels/history/ha-panel-history.html
View File

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

4
preact-src/script/script_action.js
View File

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

4
preact-src/trigger/trigger_row.js
View File

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

2
src/components/entity/ha-entity-toggle.html
View File

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

4
src/components/ha-label-badge.html
View File

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

12
src/components/ha-sidebar.html
View File

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

2
src/more-infos/more-info-automation.html
View File

@ -10,7 +10,7 @@
<template>
<style>
paper-button {
color: var(--default-primary-color);
color: var(--primary-color);
font-weight: 500;
top: 3px;
height: 37px;

18
src/more-infos/more-info-climate.html
View File

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

10
src/more-infos/more-info-fan.html
View File

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

10
src/more-infos/more-info-light.html
View File

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

10
src/more-infos/more-info-media_player.html
View File

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

5
src/resources/ha-style.html
View File

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

2
src/state-summary/state-card-configurator.html
View File

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

10
src/state-summary/state-card-input_select.html
View File

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

2
src/state-summary/state-card-scene.html
View File

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

2
src/state-summary/state-card-script.html
View File

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