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

Fix color picker sometimes not visible

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

58
src/components/ha-color-picker.js
View File

@ -96,35 +96,35 @@ 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', () => {
let style;
if (!this.width || !this.height) {
style = getComputedStyle(this);
}
const width = this.width || parseInt(style.width, 10);
const height = this.height || parseInt(style.height, 10);
const colorGradient = this.context.createLinearGradient(0, 0, width, 0);
colorGradient.addColorStop(0, 'rgb(255,0,0)');
colorGradient.addColorStop(0.16, 'rgb(255,0,255)');
colorGradient.addColorStop(0.32, 'rgb(0,0,255)');
colorGradient.addColorStop(0.48, 'rgb(0,255,255)');
colorGradient.addColorStop(0.64, 'rgb(0,255,0)');
colorGradient.addColorStop(0.80, 'rgb(255,255,0)');
colorGradient.addColorStop(1, 'rgb(255,0,0)');
this.context.fillStyle = colorGradient;
this.context.fillRect(0, 0, width, height);
const bwGradient = this.context.createLinearGradient(0, 0, 0, height);
bwGradient.addColorStop(0, 'rgba(255,255,255,1)');
bwGradient.addColorStop(0.5, 'rgba(255,255,255,0)');
bwGradient.addColorStop(0.5, 'rgba(0,0,0,0)');
bwGradient.addColorStop(1, 'rgba(0,0,0,1)');
this.context.fillStyle = bwGradient;
this.context.fillRect(0, 0, width, height);
}, 100);
}, },
drawGradient() {
let style;
if (!this.width || !this.height) {
style = getComputedStyle(this);
}
const width = this.width || parseInt(style.width, 10);
const height = this.height || parseInt(style.height, 10);
const colorGradient = this.context.createLinearGradient(0, 0, width, 0);
colorGradient.addColorStop(0, 'rgb(255,0,0)');
colorGradient.addColorStop(0.16, 'rgb(255,0,255)');
colorGradient.addColorStop(0.32, 'rgb(0,0,255)');
colorGradient.addColorStop(0.48, 'rgb(0,255,255)');
colorGradient.addColorStop(0.64, 'rgb(0,255,0)');
colorGradient.addColorStop(0.80, 'rgb(255,255,0)');
colorGradient.addColorStop(1, 'rgb(255,0,0)');
this.context.fillStyle = colorGradient;
this.context.fillRect(0, 0, width, height);
const bwGradient = this.context.createLinearGradient(0, 0, 0, height);
bwGradient.addColorStop(0, 'rgba(255,255,255,1)');
bwGradient.addColorStop(0.5, 'rgba(255,255,255,0)');
bwGradient.addColorStop(0.5, 'rgba(0,0,0,0)');
bwGradient.addColorStop(1, 'rgba(0,0,0,1)');
this.context.fillStyle = bwGradient;
this.context.fillRect(0, 0, width, height);
},
}); });

13
src/more-infos/more-info-light.html
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>