mirror of
https://github.com/home-assistant/frontend.git
synced 2025-07-10 19:06:36 +00:00
Fix color picker sometimes not visible
This commit is contained in:
parent
4a85f5fa63
commit
eab7940b4d
@ -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);
|
||||||
|
},
|
||||||
});
|
});
|
||||||
|
@ -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>
|
||||||
|
Loading…
x
Reference in New Issue
Block a user