lba.gitea/WLED
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Optimizing simple UI

Browse Source 
- no longer hiding brightness
- cleaner look
This commit is contained in:
Blaz Kristan 2022-01-06 22:21:38 +01:00
parent 7939904ee3
commit e1deb48121
4 changed files with 1223 additions and 1198 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

88
wled00/data/simple.css
View File

@ -102,7 +102,7 @@ button:hover {
.label { .label {
margin: 0; margin: 0;
padding: 8px 0 2px 0; padding: 6px 0 0;
} }
#namelabel { #namelabel {
@ -135,6 +135,7 @@ button:hover {
line-height: 1; line-height: 1;
display: inline-block; display: inline-block;
margin: -2px 0 4px 0; margin: -2px 0 4px 0;
text-shadow: -1px -1px 0 var(--c-3), 1px -1px 0 var(--c-3), -1px 1px 0 var(--c-3), 1px 1px 0 var(--c-3);
} }
.huge { .huge {
@ -378,8 +379,9 @@ img {
.sliderwrap { .sliderwrap {
height: 30px; height: 30px;
width: 225px; width: 250px;
position: relative; position: relative;
margin: 4px 0;
} }
#Colors .sliderwrap { #Colors .sliderwrap {
width: 260px; width: 260px;
@ -389,8 +391,8 @@ img {
.sliderdisplay { .sliderdisplay {
content:''; content:'';
position: absolute; position: absolute;
top: 13px; left: 8px; right: 8px; top: 10px; left: 8px; right: 8px;
height: 4px; height: 8px;
background: var(--c-4); background: var(--c-4);
border-radius: 16px; border-radius: 16px;
pointer-events: none; pointer-events: none;
@ -452,37 +454,53 @@ input[type=range]::-webkit-slider-runnable-track {
background: transparent; background: transparent;
} }
input[type=range]::-webkit-slider-thumb { input[type=range]::-webkit-slider-thumb {
height: 16px; border: 2px solid #000;
width: 16px; height: 20px;
width: 20px;
border-radius: 50%; border-radius: 50%;
background: var(--c-f); background: var(--c-f);
cursor: pointer; cursor: pointer;
-webkit-appearance: none; -webkit-appearance: none;
margin-top: 7px; margin-top: 4px;
} }
input[type=range]::-moz-range-track { input[type=range]::-moz-range-track {
width: 100%; width: 100%;
height: 30px; height: 30px;
background-color: rgba(0, 0, 0, 0); background-color: var(--c-0);
} }
input[type=range]::-moz-range-thumb { input[type=range]::-moz-range-thumb {
border: 0px solid rgba(0, 0, 0, 0); border: 2px solid var(--c-3);
height: 16px; height: 20px;
width: 16px; width: 20px;
border-radius: 50%; border-radius: 50%;
background: var(--c-f); background: var(--c-f);
transform: translateY(5px); transform: translateY(5px);
} }
#Colors input[type=range]::-webkit-slider-thumb { #Colors input[type=range]::-webkit-slider-thumb {
height: 18px;
width: 18px;
border: 2px solid #000; border: 2px solid #000;
margin-top: 5px;
} }
#Colors input[type=range]::-moz-range-thumb { #Colors input[type=range]::-moz-range-thumb {
border: 2px solid var(--c-1); border: 2px solid var(--c-1);
} }
#Presets .list {
max-height: 215px;
overflow-y: scroll;
overflow-x: hidden;
width: 280px;
margin: 0 0 0 20px;
-ms-overflow-style: none;
scrollbar-width: none; /* Firefox */
}
/* Hide scrollbar for Chrome, Safari and Opera */
#Presets .list::-webkit-scrollbar {
display: none;
}
#Segments .sliderwrap{
width: 225px;
}
#picker, #rgbwrap, #kwrap, #vwrap, #wwrap, #wbal { #picker, #rgbwrap, #kwrap, #vwrap, #wwrap, #wbal {
display: none; display: none;
} }
@ -530,6 +548,7 @@ input[type=range]::-moz-range-thumb {
width: 42px; width: 42px;
height: 42px; height: 42px;
margin: 4px; margin: 4px;
padding: 0;
} }
#fxBtn, #palBtn { #fxBtn, #palBtn {
@ -609,6 +628,7 @@ input[type=number]::-webkit-outer-spin-button {
width: 44px; width: 44px;
height: 44px; height: 44px;
margin: 5px; margin: 5px;
padding: 0;
} }
.xxs-w { .xxs-w {
@ -616,6 +636,7 @@ input[type=number]::-webkit-outer-spin-button {
margin: 2px; margin: 2px;
width: 50px; width: 50px;
height: 50px; height: 50px;
padding: 0;
} }
.qcs, .xxs { .qcs, .xxs {
@ -629,7 +650,6 @@ input[type=number]::-webkit-outer-spin-button {
.pwr { .pwr {
color: var(--c-6); color: var(--c-6);
/*transform: translate(2px, 3px);*/
cursor: pointer; cursor: pointer;
} }
@ -645,8 +665,8 @@ input[type=number]::-webkit-outer-spin-button {
} }
.schkl { .schkl {
padding: 2px 2px 2px 16px; width: 24px;
margin: 0; top: -2px;
} }
.check input, .radio input { .check input, .radio input {
@ -785,20 +805,17 @@ input[type=number]::-webkit-outer-spin-button {
position: absolute; position: absolute;
width: 284px; width: 284px;
z-index: 1; z-index: 1;
height: 266px; height: 260px;
overflow-y: scroll; overflow-y: scroll;
overflow-x: hidden; overflow-x: hidden;
padding: 0 18px; padding: 0 18px;
margin-top: 10px; margin-top: 10px;
-ms-overflow-style: none;
scrollbar-width: none; /* Firefox */
} }
/* Hide scrollbar for Chrome, Safari and Opera */
.fndIcn { /* needed for magnifier SVG, can be removed when magnifier is in Wicons font */ .dd-content::-webkit-scrollbar {
width: 24px; display: none;
height: 24px;
stroke: var(--c-e);
stroke-width: 3px;
fill-opacity: 0;
margin-top: 1px;
} }
.fnd { .fnd {
@ -809,39 +826,44 @@ input[type=number]::-webkit-outer-spin-button {
margin: 0 auto; margin: 0 auto;
} }
div.fnd div { .search-icon {
position: absolute; position: absolute;
top: 10px; top: 10px;
left: 13px; left: 13px;
pointer-events: none;
width: 24px;
height: 24px;
margin-top: -1px;
z-index: 1; z-index: 1;
} }
div.fnd span { .clear-icon {
position: absolute; position: absolute;
display: none; display: none;
top: 10px; top: 10px;
right: 13px; right: 13px;
cursor: pointer; cursor: pointer;
margin-top: -1px;
z-index: 1; z-index: 1;
} }
input[type="text"].fnd { input[type=text].fnd {
display: block; display: block;
width: 100%; width: 100%;
box-sizing: border-box; box-sizing: border-box;
padding: 8px 44px 8px 44px; padding: 8px 48px 8px 48px;
margin: 5px auto 0; margin: 5px auto 0;
text-align: left; text-align: left;
border-radius: 20px; border-radius: 25px;
background-color: var(--c-2); background-color: var(--c-2);
border: 1px solid var(--c-4); border: 1px solid var(--c-4);
} }
input[type="text"].fnd:focus { input[type=text].fnd:focus {
background-color: var(--c-4); background-color: var(--c-4);
} }
input[type="text"].fnd:not(:placeholder-shown), input[type="text"].fnd:hover { input[type=text].fnd:not(:placeholder-shown), input[type=text].fnd:hover {
background-color: var(--c-3); background-color: var(--c-3);
} }

82
wled00/data/simple.htm
View File

@ -61,7 +61,7 @@
<button id="buttonNodes" onclick="toggleNodes()"><i class="icons">&#xe22d;</i><p class="tab-label">Nodes</p></button></div> <button id="buttonNodes" onclick="toggleNodes()"><i class="icons">&#xe22d;</i><p class="tab-label">Nodes</p></button></div>
<button onclick="window.location.href='/settings';"><i class="icons">&#xe0a2;</i><p class="tab-label">Config</p></button> <button onclick="window.location.href='/settings';"><i class="icons">&#xe0a2;</i><p class="tab-label">Config</p></button>
<button id="buttonCP" onclick="tglCP()"><i class="icons">&#xe2b3;</i><p class="tab-label">Expand</p></button> <button id="buttonCP" onclick="tglCP()"><i class="icons">&#xe2b3;</i><p class="tab-label">Expand</p></button>
<button id="buttonBri" onclick="tglBri()"><i class="icons">&#xe2a6;</i><p class="tab-label">Brightness</p></button> <!--button id="buttonBri" onclick="tglBri()"><i class="icons">&#xe2a6;</i><p class="tab-label">Brightness</p></button-->
</div> </div>
<div id="briwrap"> <div id="briwrap">
<p class="label hd">Global brightness</p> <p class="label hd">Global brightness</p>
@ -79,43 +79,47 @@
<div class ="container"> <div class ="container">
<div class="tabcontent"> <div class="tabcontent">
<div id="qcs-w" class="center"> <div id="QuickLoad" class="center">
<div class="qcs" onclick="pC('#ff0000');" title="Red" style="background-color:#ff0000;"></div> <p class="label h">Quick Load</p>
<div class="qcs" onclick="pC('#ffa000');" title="Orange" style="background-color:#ffa000;"></div> <div id="pql"></div>
<div class="qcs" onclick="pC('#ffc800');" title="Yellow" style="background-color:#ffc800;"></div>
<div class="qcs" onclick="pC('#ffe0a0');" title="Warm White" style="background-color:#ffe0a0;"></div>
<div class="qcs" onclick="pC('#ffffff');" title="White" style="background-color:#ffffff;"></div>
<div class="qcs qcsb" onclick="pC('#000000');" title="Black" style="background-color:#000000;"></div><br>
<div class="qcs" onclick="pC('#ff00ff');" title="Pink" style="background-color:#ff00ff;"></div>
<div class="qcs" onclick="pC('#0000ff');" title="Blue" style="background-color:#0000ff;"></div>
<div class="qcs" onclick="pC('#00ffc8');" title="Cyan" style="background-color:#00ffc8;"></div>
<div class="qcs" onclick="pC('#08ff00');" title="Green" style="background-color:#08ff00;"></div>
<div class="qcs" onclick="pC('rnd');" title="Random" style="background:linear-gradient(to right, red, orange, yellow, green, blue, purple);transform: translateY(-11px);">R</div>
</div>
<div id="csl" class="center" style="display: none;">
<button class="xxs btn" onclick="selectSlot(0);">1</button>
<button class="xxs btn" onclick="selectSlot(1);">2</button>
<button class="xxs btn" onclick="selectSlot(2);">3</button>
</div> </div>
<div id="picker" class="center"></div> <div id="QCS" class="center">
<div id="Colors"> <p class="label h">Solid color</p>
<div id="qcs-w" class="center">
<div class="qcs" onclick="pC('#ff0000');" title="Red" style="background-color:#ff0000;"></div>
<div class="qcs" onclick="pC('#ffa000');" title="Orange" style="background-color:#ffa000;"></div>
<div class="qcs" onclick="pC('#ffc800');" title="Yellow" style="background-color:#ffc800;"></div>
<div class="qcs" onclick="pC('#ffe0a0');" title="Warm White" style="background-color:#ffe0a0;"></div>
<div class="qcs" onclick="pC('#ffffff');" title="White" style="background-color:#ffffff;"></div>
<div class="qcs qcsb" onclick="pC('#000000');" title="Black" style="background-color:#000000;"></div><br>
<div class="qcs" onclick="pC('#ff00ff');" title="Pink" style="background-color:#ff00ff;"></div>
<div class="qcs" onclick="pC('#0000ff');" title="Blue" style="background-color:#0000ff;"></div>
<div class="qcs" onclick="pC('#00ffc8');" title="Cyan" style="background-color:#00ffc8;"></div>
<div class="qcs" onclick="pC('#08ff00');" title="Green" style="background-color:#08ff00;"></div>
<div class="qcs" onclick="pC('rnd');" title="Random" style="background:linear-gradient(to right, red, orange, yellow, green, blue, purple);transform: translateY(-11px);">R</div>
</div>
</div>
<div id="picker" class="center"></div>
<div id="Colors" class="center">
<div id="vwrap"> <div id="vwrap">
<!--p class="labels hd">Value</p--> <!--p class="label h">Value</p-->
<div class="sliderwrap il"> <div class="sliderwrap il">
<input id="sliderV" class="noslide" oninput="fromV()" onchange="setColor(0)" max="100" min="0" type="range" value="100" step="any" /> <input id="sliderV" class="noslide" oninput="fromV()" onchange="setColor(0)" max="100" min="0" type="range" value="100" step="any" />
<div class="sliderdisplay"></div> <div class="sliderdisplay"></div>
</div><br> </div><br>
</div> </div>
<div id="kwrap"> <div id="kwrap">
<!--p class="labels hd">Temperature</p--> <!--p class="label h">Temperature</p-->
<div class="sliderwrap il"> <div class="sliderwrap il">
<input id="sliderK" class="noslide" oninput="fromK()" onchange="setColor(0)" max="10091" min="1900" type="range" value="6550" /> <input id="sliderK" class="noslide" oninput="fromK()" onchange="setColor(0)" max="10091" min="1900" type="range" value="6550" />
<div class="sliderdisplay"></div> <div class="sliderdisplay"></div>
</div> </div>
</div> </div>
<div id="rgbwrap" class="center"> <div id="rgbwrap" class="center">
<p class="label hd">RGB channels</p> <p class="label h">RGB channels</p>
<div id="rwrap" class="il"> <div id="rwrap" class="il">
<div class="sliderwrap il"> <div class="sliderwrap il">
<input id="sliderR" onchange="fromRgb()" max="255" min="0" type="range" value="128" /> <input id="sliderR" onchange="fromRgb()" max="255" min="0" type="range" value="128" />
@ -136,14 +140,14 @@
</div><br> </div><br>
</div> </div>
<div id="wwrap" class="center"> <div id="wwrap" class="center">
<p class="label hd">White channel</p> <p class="label h">White channel</p>
<div class="sliderwrap il"> <div class="sliderwrap il">
<input id="sliderW" onchange="setColor(0)" max="255" min="0" type="range" value="128" /> <input id="sliderW" onchange="setColor(0)" max="255" min="0" type="range" value="128" />
<div class="sliderdisplay"></div> <div class="sliderdisplay"></div>
</div> </div>
</div> </div>
<div id="wbal"> <div id="wbal">
<p class="labels hd">White balance</p> <p class="label h">White balance</p>
<div class="sliderwrap il"> <div class="sliderwrap il">
<input id="sliderA" onchange="setBalance(this.value)" max="255" min="0" type="range" value="128" /> <input id="sliderA" onchange="setBalance(this.value)" max="255" min="0" type="range" value="128" />
<div class="sliderdisplay"></div> <div class="sliderdisplay"></div>
@ -151,21 +155,25 @@
</div> </div>
</div> </div>
<div id="Slots" class="center">
<p class="label h">Color slots</p>
<div id="csl" class="center" style="display: none;">
<button class="xxs btn" onclick="selectSlot(0);">1</button>
<button class="xxs btn" onclick="selectSlot(1);">2</button>
<button class="xxs btn" onclick="selectSlot(2);">3</button>
</div>
</div>
<div id="Segments" class="center"> <div id="Segments" class="center">
<div id="segcont"></div> <div id="segcont"></div>
</div> </div>
<div id="QuickLoad" class="center"> <div id="Presets" class="center">
<p class="label h">Quick Load</p>
<div id="pql"></div>
</div>
<div id="Presets" class="center" style="display:none;">
<p class="label h">Presets</p> <p class="label h">Presets</p>
<div class="fnd"> <div class="fnd">
<input type="text" class="fnd" placeholder="Search" oninput="search(this,'pcont')" onfocus="search(this)" /> <input type="text" class="fnd" placeholder="Search" oninput="search(this,'pcont')" onfocus="search(this)" />
<span onclick="clean(this)" class="icons">&#xe38f;</span> <i class="icons clear-icon" onclick="clean(this);">&#xe38f;</i>
<div class="icons"><svg xmlns='http://www.w3.org/2000/svg' class='fndIcn'><circle cx='8' cy='8' r='6' /><line x1='12' y1='12' x2='24' y2='12' transform='rotate(45,12,12)' /></svg></div> <i class="icons search-icon">&#xe0a1;</i>
</div> </div>
<div id="pcont" class="list"></div> <div id="pcont" class="list"></div>
</div> </div>
@ -194,8 +202,8 @@
<div id="fxDropdown" class="dd-content"> <div id="fxDropdown" class="dd-content">
<div class="fnd"> <div class="fnd">
<input type="text" class="fnd" placeholder="Search" oninput="search(this,'fxlist')" onfocus="search(this)" /> <input type="text" class="fnd" placeholder="Search" oninput="search(this,'fxlist')" onfocus="search(this)" />
<span onclick="clean(this)" class="icons">&#xe38f;</span> <i class="icons clear-icon" onclick="clean(this);">&#xe38f;</i>
<div class="icons"><svg xmlns='http://www.w3.org/2000/svg' class='fndIcn'><circle cx='8' cy='8' r='6' /><line x1='12' y1='12' x2='24' y2='12' transform='rotate(45,12,12)' /></svg></div> <i class="icons search-icon">&#xe0a1;</i>
</div> </div>
<div id="fxlist" class="list"> <div id="fxlist" class="list">
<div class="lstI" data-id="0" onClick="setX(0)"><a href="#0" onClick="setX(0)">Solid</a></div> <div class="lstI" data-id="0" onClick="setX(0)"><a href="#0" onClick="setX(0)">Solid</a></div>
@ -204,8 +212,8 @@
<div id="palDropdown" class="dd-content"> <div id="palDropdown" class="dd-content">
<div class="fnd"> <div class="fnd">
<input type="text" class="fnd" placeholder="Search" oninput="search(this,'pallist')" onfocus="search(this)" /> <input type="text" class="fnd" placeholder="Search" oninput="search(this,'pallist')" onfocus="search(this)" />
<span onclick="clean(this)" class="icons">&#xe38f;</span> <i class="icons clear-icon" onclick="clean(this);">&#xe38f;</i>
<div class="icons"><svg xmlns='http://www.w3.org/2000/svg' class='fndIcn'><circle cx='8' cy='8' r='6' /><line x1='12' y1='12' x2='24' y2='12' transform='rotate(45,12,12)' /></svg></div> <i class="icons search-icon">&#xe0a1;</i>
</div> </div>
<div id="pallist" class="list"> <div id="pallist" class="list">
<div class="lstI" data-id="0" onClick="setPalette(0)"><a href="#0" onClick="setPalette(0)">Default</a><div class="lstIprev"></div></div> <div class="lstI" data-id="0" onClick="setPalette(0)"><a href="#0" onClick="setPalette(0)">Default</a><div class="lstIprev"></div></div>

14
wled00/data/simple.js
View File

@ -555,11 +555,11 @@ function populateSegments(s)
<output class="sliderbubble"></output> <output class="sliderbubble"></output>
</div>`; </div>`;
} }
if (gId('buttonBri').className !== 'active') tglBri(true); //if (gId('buttonBri').className !== 'active') tglBri(true);
} else { } else {
tglBri(false); //tglBri(false);
} }
gId('buttonBri').style.display = (segCount > 1) ? "block" : "none"; //gId('buttonBri').style.display = (segCount > 1) ? "block" : "none";
gId('segcont').innerHTML = cn; gId('segcont').innerHTML = cn;
for (var i = 0; i < segCount && i<4; i++) updateTrail(gId(`seg${i}bri`)); for (var i = 0; i < segCount && i<4; i++) updateTrail(gId(`seg${i}bri`));
} }
@ -1044,12 +1044,12 @@ function toggleNodes()
} }
function tglBri(b=null) function tglBri(b=null)
{ {/*
if (b===null) b = gId(`briwrap`).style.display === "block"; if (b===null) b = gId(`briwrap`).style.display === "block";
gId('briwrap').style.display = !b ? "block":"none"; gId('briwrap').style.display = !b ? "block":"none";
gId('buttonBri').className = !b ? "active":""; gId('buttonBri').className = !b ? "active":"";
size(); size();
} */}
function tglCP() function tglCP()
{ {
@ -1060,8 +1060,8 @@ function tglCP()
gId('rgbwrap').style.display = !p ? "block":"none"; gId('rgbwrap').style.display = !p ? "block":"none";
var csl = gId(`csl`).style.display === "block"; var csl = gId(`csl`).style.display === "block";
gId('csl').style.display = !csl ? "block":"none"; gId('csl').style.display = !csl ? "block":"none";
var ps = gId(`Presets`).style.display === "block"; //var ps = gId(`Presets`).style.display === "block";
gId('Presets').style.display = !ps ? "block":"none"; //gId('Presets').style.display = !ps ? "block":"none";
} }
function tglCs(i) function tglCs(i)

2237
wled00/html_simple.h
View File

File diff suppressed because it is too large Load Diff