Shuffle tooltips.
This commit is contained in:
parent
a3b0b8b3d0
commit
cd46d84dcb
@ -367,19 +367,11 @@ button {
|
|||||||
bottom: 5px;
|
bottom: 5px;
|
||||||
}
|
}
|
||||||
|
|
||||||
#fx {
|
|
||||||
/*height: calc(100% - 121px);*/
|
|
||||||
/*overflow-y: scroll;*/
|
|
||||||
/*padding-left: 6px;*/ /* compensate scroll bar */
|
|
||||||
}
|
|
||||||
|
|
||||||
#sliders {
|
#sliders {
|
||||||
width: 310px;
|
width: 310px;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
position: sticky;
|
position: sticky;
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
/*left: 50%;*/
|
|
||||||
/*transform: translateX(-50%);*/
|
|
||||||
}
|
}
|
||||||
|
|
||||||
#sliders .labels {
|
#sliders .labels {
|
||||||
@ -391,7 +383,7 @@ button {
|
|||||||
background: var(--c-2);
|
background: var(--c-2);
|
||||||
max-width: 310px;
|
max-width: 310px;
|
||||||
min-width: 280px;
|
min-width: 280px;
|
||||||
margin: 0 auto; /* add 5px; if you want some vertical space */
|
margin: 0 auto; /* add 5px; if you want some vertical space but looks ugly */
|
||||||
border-radius: 15px;
|
border-radius: 15px;
|
||||||
position: relative;
|
position: relative;
|
||||||
}
|
}
|
||||||
@ -417,12 +409,12 @@ button {
|
|||||||
opacity: 0;
|
opacity: 0;
|
||||||
transition: opacity 0.75s;
|
transition: opacity 0.75s;
|
||||||
}
|
}
|
||||||
|
/*
|
||||||
.slider.top .tooltiptext {
|
.slider.top .tooltiptext {
|
||||||
top: 100%;
|
top: 100%;
|
||||||
bottom: unset;
|
bottom: unset;
|
||||||
}
|
}
|
||||||
|
*/
|
||||||
/* Tooltip arrow */
|
/* Tooltip arrow */
|
||||||
.slider .tooltiptext::after {
|
.slider .tooltiptext::after {
|
||||||
content: "";
|
content: "";
|
||||||
@ -434,14 +426,14 @@ button {
|
|||||||
border-style: solid;
|
border-style: solid;
|
||||||
border-color: var(--c-5) transparent transparent transparent;
|
border-color: var(--c-5) transparent transparent transparent;
|
||||||
}
|
}
|
||||||
|
/*
|
||||||
.slider.top .tooltiptext::after {
|
.slider.top .tooltiptext::after {
|
||||||
bottom: 100%;
|
bottom: 100%;
|
||||||
left: 50%;
|
left: 50%;
|
||||||
top: unset;
|
top: unset;
|
||||||
border-color: transparent transparent var(--c-5) transparent;
|
border-color: transparent transparent var(--c-5) transparent;
|
||||||
}
|
}
|
||||||
|
*/
|
||||||
/* Show the tooltip text when you mouse over the tooltip container */
|
/* Show the tooltip text when you mouse over the tooltip container */
|
||||||
.slider:hover .tooltiptext {
|
.slider:hover .tooltiptext {
|
||||||
visibility: visible;
|
visibility: visible;
|
||||||
|
@ -1308,21 +1308,21 @@ function setSliderAndColorControl(idx, applyDef=false)
|
|||||||
else if (i==0) label.innerHTML = "Effect speed";
|
else if (i==0) label.innerHTML = "Effect speed";
|
||||||
else if (i==1) label.innerHTML = "Effect intensity";
|
else if (i==1) label.innerHTML = "Effect intensity";
|
||||||
else label.innerHTML = "Custom" + (i-1);
|
else label.innerHTML = "Custom" + (i-1);
|
||||||
if (sldCnt++===0) slider.classList.add("top");
|
sldCnt++;
|
||||||
|
//if (sldCnt++===0) slider.classList.add("top");
|
||||||
slider.classList.remove("hide");
|
slider.classList.remove("hide");
|
||||||
//slider.setAttribute('title',label.innerHTML);
|
//slider.setAttribute('title',label.innerHTML);
|
||||||
} else {
|
} else {
|
||||||
slider.classList.add("hide");
|
slider.classList.add("hide");
|
||||||
slider.classList.remove("top");
|
//slider.classList.remove("top");
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// set size of fx list
|
// set the bottom position of selected effect (sticky) as the top of sliders div
|
||||||
let topPosition = parseInt(getComputedStyle(gId("sliders")).height);
|
let top = parseInt(getComputedStyle(gId("sliders")).height);
|
||||||
//gId("fx").style.height = `calc(100% - ${topPosition}px)`;
|
/*if (sldCnt===1)*/ top += 28; // size of tooltip
|
||||||
//d.styleSheets[0].cssRules[195].style.bottom = topPosition + "px";
|
let sel = d.querySelector('#fxlist .selected');
|
||||||
let selElement = d.querySelector('#fxlist .selected');
|
if (sel) sel.style.bottom = top + "px"; // we will need to remove this when unselected (in setX())
|
||||||
selElement.style.bottom = topPosition + "px";
|
|
||||||
|
|
||||||
// set html color items on/off
|
// set html color items on/off
|
||||||
var cslLabel = '';
|
var cslLabel = '';
|
||||||
@ -2038,12 +2038,12 @@ function setPreset(i)
|
|||||||
{
|
{
|
||||||
var obj = {"ps":i};
|
var obj = {"ps":i};
|
||||||
if (pJson && pJson[i] && (!pJson[i].win || pJson[i].win.indexOf("Please") <= 0)) {
|
if (pJson && pJson[i] && (!pJson[i].win || pJson[i].win.indexOf("Please") <= 0)) {
|
||||||
|
// we will send complete preset content as to avoid delay introduced by
|
||||||
|
// async nature of applyPreset(). json.cpp has to decide wether to call applyPreset()
|
||||||
|
// or not (by looking at the JSON content, if "ps" only)
|
||||||
Object.assign(obj, pJson[i]);
|
Object.assign(obj, pJson[i]);
|
||||||
delete obj.ql; // no need for quick load
|
delete obj.ql; // no need for quick load
|
||||||
delete obj.n; // no need for name
|
delete obj.n; // no need for name
|
||||||
// obj.pt = i; // this will set preset ID but not force state update
|
|
||||||
// } else {
|
|
||||||
// obj.ps = i;
|
|
||||||
}
|
}
|
||||||
if (isPlaylist(i)) obj.on = true; // force on
|
if (isPlaylist(i)) obj.on = true; // force on
|
||||||
showToast("Loading preset " + pName(i) +" (" + i + ")");
|
showToast("Loading preset " + pName(i) +" (" + i + ")");
|
||||||
|
2843
wled00/html_ui.h
2843
wled00/html_ui.h
File diff suppressed because it is too large
Load Diff
@ -8,7 +8,7 @@
|
|||||||
*/
|
*/
|
||||||
|
|
||||||
// version code in format yymmddb (b = daily build)
|
// version code in format yymmddb (b = daily build)
|
||||||
#define VERSION 2206271
|
#define VERSION 2206281
|
||||||
|
|
||||||
//uncomment this if you have a "my_config.h" file you'd like to use
|
//uncomment this if you have a "my_config.h" file you'd like to use
|
||||||
//#define WLED_USE_MY_CONFIG
|
//#define WLED_USE_MY_CONFIG
|
||||||
|
Loading…
Reference in New Issue
Block a user