Fix color picker sometimes not visible

This commit is contained in:
Paulus Schoutsen 2016-02-21 20:16:00 -08:00
parent 4a85f5fa63
commit eab7940b4d
2 changed files with 33 additions and 38 deletions

View File

@ -96,8 +96,10 @@ export default new Polymer({
this.mouseMoveIsThrottled = true; this.mouseMoveIsThrottled = true;
this.canvas = this.children[0]; this.canvas = this.children[0];
this.context = this.canvas.getContext('2d'); this.context = this.canvas.getContext('2d');
this.drawGradient();
},
this.debounce('drawGradient', () => { drawGradient() {
let style; let style;
if (!this.width || !this.height) { if (!this.width || !this.height) {
style = getComputedStyle(this); style = getComputedStyle(this);
@ -124,7 +126,5 @@ export default new Polymer({
this.context.fillStyle = bwGradient; this.context.fillStyle = bwGradient;
this.context.fillRect(0, 0, width, height); this.context.fillRect(0, 0, width, height);
}, 100);
}, },
}); });

View File

@ -6,8 +6,6 @@
<dom-module id='more-info-light'> <dom-module id='more-info-light'>
<style> <style>
.brightness, .color_temp { .brightness, .color_temp {
margin-bottom: 8px;
max-height: 0px; max-height: 0px;
overflow: hidden; overflow: hidden;
transition: max-height .5s ease-in; transition: max-height .5s ease-in;
@ -15,20 +13,17 @@
ha-color-picker { ha-color-picker {
display: block; display: block;
max-width: 350px;
height: 200px;
margin: 0 auto; margin: 0 auto;
width: 250px;
max-height: 0px; max-height: 0px;
overflow: hidden; overflow: hidden;
transition: max-height .2s ease-in; transition: max-height .2s ease-in;
} }
.has-brightness .brightness { .has-brightness .brightness,
max-height: 40px;
}
.has-color_temp .color_temp { .has-color_temp .color_temp {
margin-bottom: 8px;
max-height: 40px; max-height: 40px;
} }
@ -53,7 +48,7 @@
</paper-slider> </paper-slider>
</div> </div>
<ha-color-picker on-colorselected='colorPicked' height='200'> <ha-color-picker on-colorselected='colorPicked' height='200' width='250'>
</ha-color-picker> </ha-color-picker>
</div> </div>
</template> </template>