Mirror/betaflight-configurator
1
0
Fork 0
mirror of https://github.com/betaflight/betaflight-configurator.git synced 2025-07-19 22:35:17 +03:00
Code Issues Wiki Activity

Fix led color picker

Browse source
This commit is contained in:
IvoFPV 2019-09-28 12:51:33 +02:00
parent 074bb46f78
commit c0f7b174bc
3 changed files with 23 additions and 36 deletions
Download patch file Download diff file Expand all files Collapse all files

5
src/css/tabs/led_strip.css
View file

@ -239,13 +239,13 @@
display: inline-block; display: inline-block;
position: absolute; position: absolute;
z-index: 10000; z-index: 10000;
background: white; background: var(--boxBackground);
padding: 5px; padding: 5px;
margin: 10px;
border-color: #565656; border-color: #565656;
border-style: solid; border-style: solid;
border-radius: 6px; border-radius: 6px;
border-width: 2px; border-width: 2px;
width: 167px;
} }
.tab-led-strip .color-1 {background: white;} .tab-led-strip .color-1 {background: white;}
@ -346,7 +346,6 @@
position: relative; position: relative;
float: left; float: left;
width: 285px; width: 285px;
margin-right: 10px;
} }
.colorDefineSliderValue, .colorDefineSliderValue,

18
src/js/tabs/led_strip.js
View file

@ -265,22 +265,10 @@ TABS.led_strip.initialize = function (callback, scrollPosition) {
updateBulkCmd(); updateBulkCmd();
}); });
$('.colors').on('dblclick', 'button', function(e) { $('.colors').on('dblclick', 'button', function() {
$('.colorDefineSliders').css('left', $(this).position().left - $('.colorDefineSliders').width() / 2 + $(this).width());
var pp = $('.tab-led-strip').position(); $('.colorDefineSliders').css('top', $(this).position().top + 26);
var moveLeft = $('.tab-led-strip').position().left + ($('.colorDefineSliders').width() / 2);
var moveUp = $('.tab-led-strip').position().top + $('.colorDefineSliders').height() + 20;
$('.colorDefineSliders').css('left', e.pageX - e.offsetX - moveLeft);
$('.colorDefineSliders').css('top', e.pageY - e.offsetY - moveUp);
$('.colorDefineSliders').show(); $('.colorDefineSliders').show();
});
$('.colorDefineSliders').on({
mouseleave: function () {
$('.colorDefineSliders').hide();
}
}); });
$('.colors').children().on({ $('.colors').children().on({

36
src/tabs/led_strip.html
View file

@ -26,24 +26,6 @@
<div class="block"></div> <div class="block"></div>
<div class="block"></div> <div class="block"></div>
</div> </div>
<div class="colorDefineSliders">
<div class="" i18n="ledStripColorSetupTitle"/>
<div class="colorDefineSliderContainer">
<Label class="colorDefineSliderLabel" i18n="ledStripH"></Label>
<input class="sliderHSV" type="range" min="0" max="359" value="0">
<Label class="colorDefineSliderValue Hvalue">0</Label>
</div>
<div class="colorDefineSliderContainer">
<Label class="colorDefineSliderLabel" i18n="ledStripS"></Label>
<input class="sliderHSV" type="range" min="0" max="255" value="0">
<Label class="colorDefineSliderValue Svalue">0</Label>
</div>
<div class="colorDefineSliderContainer">
<Label class="colorDefineSliderLabel" i18n="ledStripV"></Label>
<input class="sliderHSV" type="range" min="0" max="255" value="0">
<Label class="colorDefineSliderValue Vvalue">0</Label>
</div>
</div>
<div class="controls"> <div class="controls">
<div class="wires-remaining"> <div class="wires-remaining">
<div></div> <div></div>
@ -158,6 +140,24 @@
</div> </div>
<div class="colors"> <div class="colors">
<div class="colorDefineSliders">
<div class="" i18n="ledStripColorSetupTitle"/>
<div class="colorDefineSliderContainer">
<Label class="colorDefineSliderLabel" i18n="ledStripH"></Label>
<input class="sliderHSV" type="range" min="0" max="359" value="0">
<Label class="colorDefineSliderValue Hvalue">0</Label>
</div>
<div class="colorDefineSliderContainer">
<Label class="colorDefineSliderLabel" i18n="ledStripS"></Label>
<input class="sliderHSV" type="range" min="0" max="255" value="0">
<Label class="colorDefineSliderValue Svalue">0</Label>
</div>
<div class="colorDefineSliderContainer">
<Label class="colorDefineSliderLabel" i18n="ledStripV"></Label>
<input class="sliderHSV" type="range" min="0" max="255" value="0">
<Label class="colorDefineSliderValue Vvalue">0</Label>
</div>
</div>
<button class="color-0" i18n_title="colorBlack">0</button> <button class="color-0" i18n_title="colorBlack">0</button>
<button class="color-1" i18n_title="colorWhite">1</button> <button class="color-1" i18n_title="colorWhite">1</button>
<button class="color-2" i18n_title="colorRed">2</button> <button class="color-2" i18n_title="colorRed">2</button>