jeans/frontend
jeans/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2025-07-15 13:26:34 +00:00
Code Issues Packages Projects Releases Wiki Activity

Climate range slider (#111)

Browse Source 
* Update paper-range-slider in Bower.json

* Revert "Update paper-range-slider in Bower.json"

This reverts commit 0c305bd2fec2c8d99b3aeb1ee3f2461df80dc87c.

* update paper-range-slider in bower.json

* Update styling for temp-slider and temp-range-slider

* Fix slider colors for production

* Moved class to parent container
This commit is contained in:
Justin Weberg 2016-10-02 16:41:08 -05:00 committed by Paulus Schoutsen
parent 0a4454c68f
commit 1a456dc098
3 changed files with 21 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
bower.json
View File

@ -18,6 +18,6 @@
"paper-scroll-header-panel": "~1.0.16", "paper-scroll-header-panel": "~1.0.16",
"app-layout": "~0.10.2", "app-layout": "~0.10.2",
"fecha": "~2.2.0", "fecha": "~2.2.0",
"paper-range-slider": "IftachSadeh/paper-range-slider#~0.1.1" "paper-range-slider": "IftachSadeh/paper-range-slider#~0.1.2"
} }
} }

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

@ -50,11 +50,20 @@
width: 100%; width: 100%;
} }
paper-range-slider { .heat {
width: 198px; --paper-slider-active-color: var(--paper-orange-400);
height: 2px; --paper-slider-secondary-color: var(--paper-green-400);
margin-bottom: 16px; }
--paper-range-slider-active-color: var(--primary-color);
.cool {
--paper-slider-active-color: var(--paper-green-400);
--paper-slider-secondary-color: var(--paper-blue-400);
}
#temp-range-slider {
--paper-range-slider-lower-color: var(--paper-orange-400);
--paper-range-slider-active-color: var(--paper-green-400);
--paper-range-slider-higher-color: var(--paper-blue-400);
--paper-range-slider-knob-color: var(--primary-color); --paper-range-slider-knob-color: var(--primary-color);
--paper-range-slider-pin-color: var(--primary-color); --paper-range-slider-pin-color: var(--primary-color);
} }
@ -70,12 +79,13 @@
<div class$='[[computeClassNames(stateObj)]]'> <div class$='[[computeClassNames(stateObj)]]'>
<div class='container-temperature'> <div class='container-temperature'>
<div class='single-row'> <div class$='single-row, [[stateObj.attributes.operation_mode]]'>
<div hidden$='[[computeTargetTempHidden(stateObj)]]'>Target Temperature</div> <div hidden$='[[computeTargetTempHidden(stateObj)]]'>Target Temperature</div>
<paper-slider <paper-slider
id="temp-slider" id='temp-slider'
min='[[stateObj.attributes.min_temp]]' min='[[stateObj.attributes.min_temp]]'
max='[[stateObj.attributes.max_temp]]' max='[[stateObj.attributes.max_temp]]'
secondary-progress='[[stateObj.attributes.max_temp]]'
pin pin
step='0.5' step='0.5'
value='[[stateObj.attributes.temperature]]' value='[[stateObj.attributes.temperature]]'
@ -83,7 +93,7 @@
on-change='targetTemperatureSliderChanged'> on-change='targetTemperatureSliderChanged'>
</paper-slider> </paper-slider>
<paper-range-slider <paper-range-slider
id="temp-range-slider" id='temp-range-slider'
min='[[stateObj.attributes.min_temp]]' min='[[stateObj.attributes.min_temp]]'
max='[[stateObj.attributes.max_temp]]' max='[[stateObj.attributes.max_temp]]'
pin pin

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

@ -39,6 +39,8 @@
/* for paper-slider */ /* for paper-slider */
--paper-green-400: #66bb6a; --paper-green-400: #66bb6a;
--paper-blue-400: #42a5f5;
--paper-orange-400: #ffa726;
/* opacity for dark text on a light background */ /* opacity for dark text on a light background */
--dark-divider-opacity: 0.12; --dark-divider-opacity: 0.12;