jeans/WLED
jeans/WLED
1
0
Fork 0
mirror of https://github.com/wled/WLED.git synced 2025-07-16 23:36:35 +00:00
Code Issues Packages Projects Releases Wiki Activity

Minor button CSS optimisations.

Browse Source
This commit is contained in:
Blaz Kristan 2021-08-15 22:05:36 +02:00
parent a8b59f5f59
commit 7ed65529df
4 changed files with 1928 additions and 1932 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
wled00/data/index.css
View File

@ -154,12 +154,10 @@ button {
.keytd { .keytd {
text-align: left; text-align: left;
padding-bottom: 8px;
} }
.valtd { .valtd {
text-align: right; text-align: right;
padding-bottom: 8px;
} }
.valtd i { .valtd i {
@ -435,8 +433,8 @@ button {
display: inline-block; display: inline-block;
} }
#kn td { #kv td {
padding-bottom: 12px; padding-bottom: 8px;
} }
#lv { #lv {
@ -591,10 +589,9 @@ input[type=range]::-moz-range-thumb {
background-color: var(--c-3); background-color: var(--c-3);
} }
.btn-s { .btn-s {
width: 276px; width: 100%;
margin: 0 0 10px; margin: 0 0 10px;
} }
.btn-i {}
.btn-icon { .btn-icon {
margin: -4px 4px 0 0; margin: -4px 4px 0 0;
vertical-align: middle; vertical-align: middle;

24
wled00/data/index.js
View File

@ -689,11 +689,11 @@ function populateSegments(s)
<tr> <tr>
<td><input class="noslide segn" id="seg${i}grp" type="number" min="1" max="255" value="${inst.grp}" oninput="updateLen(${i})"></td> <td><input class="noslide segn" id="seg${i}grp" type="number" min="1" max="255" value="${inst.grp}" oninput="updateLen(${i})"></td>
<td><input class="noslide segn" id="seg${i}spc" type="number" min="0" max="255" value="${inst.spc}" oninput="updateLen(${i})"></td> <td><input class="noslide segn" id="seg${i}spc" type="number" min="0" max="255" value="${inst.spc}" oninput="updateLen(${i})"></td>
<td><button class="btn btn-i btn-xs" onclick="setSeg(${i})"><i class="icons btn-icon" id="segc${i}">&#xe390;</i></button></td> <td><button class="btn btn-xs" onclick="setSeg(${i})"><i class="icons btn-icon" id="segc${i}">&#xe390;</i></button></td>
</tr> </tr>
</table> </table>
<div class="h bp" id="seg${i}len"></div> <div class="h bp" id="seg${i}len"></div>
<button class="btn btn-i btn-xs del" id="segd${i}" onclick="delSeg(${i})"><i class="icons btn-icon">&#xe037;</i></button> <button class="btn btn-xs del" id="segd${i}" onclick="delSeg(${i})"><i class="icons btn-icon">&#xe037;</i></button>
<label class="check revchkl"> <label class="check revchkl">
Reverse direction Reverse direction
<input type="checkbox" id="seg${i}rev" onchange="setRev(${i})" ${inst.rev ? "checked":""}> <input type="checkbox" id="seg${i}rev" onchange="setRev(${i})" ${inst.rev ? "checked":""}>
@ -751,7 +751,7 @@ function populateNodes(i,n)
for (var x=0;x<n.nodes.length;x++) { for (var x=0;x<n.nodes.length;x++) {
var o = n.nodes[x]; var o = n.nodes[x];
if (o.name) { if (o.name) {
var url = `<button class="btn tab" title="${o.ip}" onclick="location.assign('http://${o.ip}');">${bname(o)}</button>`; var url = `<button class="btn infobtn" title="${o.ip}" onclick="location.assign('http://${o.ip}');">${bname(o)}</button>`;
urows += inforow(url,`${btype(o.type)}<br><i>${o.vid==0?"N/A":o.vid}</i>`); urows += inforow(url,`${btype(o.type)}<br><i>${o.vid==0?"N/A":o.vid}</i>`);
nnodes++; nnodes++;
} }
@ -1337,7 +1337,7 @@ function makeSeg()
<tr> <tr>
<td><input class="noslide segn" id="seg${lowestUnused}s" type="number" min="0" max="${ledCount-1}" value="${ns}" oninput="updateLen(${lowestUnused})"></td> <td><input class="noslide segn" id="seg${lowestUnused}s" type="number" min="0" max="${ledCount-1}" value="${ns}" oninput="updateLen(${lowestUnused})"></td>
<td><input class="noslide segn" id="seg${lowestUnused}e" type="number" min="0" max="${ledCount-(cfg.comp.seglen?ns:0)}" value="${ledCount-(cfg.comp.seglen?ns:0)}" oninput="updateLen(${lowestUnused})"></td> <td><input class="noslide segn" id="seg${lowestUnused}e" type="number" min="0" max="${ledCount-(cfg.comp.seglen?ns:0)}" value="${ledCount-(cfg.comp.seglen?ns:0)}" oninput="updateLen(${lowestUnused})"></td>
<td><button class="btn btn-i btn-xs" onclick="setSeg(${lowestUnused});resetUtil();"><i class="icons bth-icon" id="segc${lowestUnused}">&#xe390;</i></button></td> <td><button class="btn btn-xs" onclick="setSeg(${lowestUnused});resetUtil();"><i class="icons bth-icon" id="segc${lowestUnused}">&#xe390;</i></button></td>
</tr> </tr>
</table> </table>
<div class="h" id="seg${lowestUnused}len">${ledCount - ns} LEDs</div> <div class="h" id="seg${lowestUnused}len">${ledCount - ns} LEDs</div>
@ -1349,7 +1349,7 @@ function makeSeg()
function resetUtil() function resetUtil()
{ {
gId('segutil').innerHTML = '<button class="btn btn-s btn-i" onclick="makeSeg()"><i class="icons btn-icon">&#xe18a;</i>Add segment</button>'; gId('segutil').innerHTML = '<button class="btn btn-s" onclick="makeSeg()"><i class="icons btn-icon">&#xe18a;</i>Add segment</button>';
for (var i=0; i<expanded.length; i++) if (expanded[i]) expand(i); // collapse all expanded elements for (var i=0; i<expanded.length; i++) if (expanded[i]) expand(i); // collapse all expanded elements
} }
@ -1460,7 +1460,7 @@ function makeP(i,pl) {
${plSelContent} ${plSelContent}
</select></div> </select></div>
</div> </div>
<div class="c"><button class="btn btn-i" onclick="testPl(${i}, this)"><i class='icons btn-icon'>&#xe139;</i>Test</button></div>`; <div class="c"><button class="btn btn-p" onclick="testPl(${i}, this)"><i class='icons btn-icon'>&#xe139;</i>Test</button></div>`;
} else } else
content = content =
`<label class="check revchkl"> `<label class="check revchkl">
@ -1493,8 +1493,8 @@ ${plSelContent}
</div> </div>
<div class="c">Save to ID <input class="noslide" id="p${i}id" type="number" oninput="checkUsed(${i})" max=250 min=1 value=${(i>0)?i:getLowestUnusedP()}></div> <div class="c">Save to ID <input class="noslide" id="p${i}id" type="number" oninput="checkUsed(${i})" max=250 min=1 value=${(i>0)?i:getLowestUnusedP()}></div>
<div class="c"> <div class="c">
<button class="btn btn-i btn-p" onclick="saveP(${i},${pl})"><i class="icons btn-icon">&#xe390;</i>Save</button> <button class="btn btn-p" onclick="saveP(${i},${pl})"><i class="icons btn-icon">&#xe390;</i>Save</button>
${(i>0)?'<button class="btn btn-i btn-p" id="p'+i+'del" onclick="delP('+i+')"><i class="icons btn-icon">&#xe037;</i>Delete':'<button class="btn btn-p" onclick="resetPUtil()">Cancel'}</button> ${(i>0)?'<button class="btn btn-p" id="p'+i+'del" onclick="delP('+i+')"><i class="icons btn-icon">&#xe037;</i>Delete':'<button class="btn btn-p" onclick="resetPUtil()">Cancel'}</button>
</div> </div>
<div class="pwarn ${(i>0)?"bp":""} c" id="p${i}warn"></div> <div class="pwarn ${(i>0)?"bp":""} c" id="p${i}warn"></div>
${(i>0)? ('<div class="h">ID ' +i+ '</div>'):""}`; ${(i>0)? ('<div class="h">ID ' +i+ '</div>'):""}`;
@ -1521,7 +1521,7 @@ function makePlEntry(p,i) {
${plSelContent} ${plSelContent}
</select> </select>
</td> </td>
<td class="c"><button class="btn btn-i btn-pl-add" onclick="addPl(${p},${i})"><i class="icons btn-icon">&#xe18a;</i></button></td> <td class="c"><button class="btn btn-pl-add" onclick="addPl(${p},${i})"><i class="icons btn-icon">&#xe18a;</i></button></td>
</tr> </tr>
<tr> <tr>
<td class="h">Duration</td> <td class="h">Duration</td>
@ -1531,7 +1531,7 @@ function makePlEntry(p,i) {
<tr> <tr>
<td class="c" width="40%"><input class="noslide segn" type="number" placeholder="Duration" max=6553.0 min=0.2 step=0.1 oninput="pleDur(${p},${i},this)" value="${plJson[p].dur[i]/10.0}">s</td> <td class="c" width="40%"><input class="noslide segn" type="number" placeholder="Duration" max=6553.0 min=0.2 step=0.1 oninput="pleDur(${p},${i},this)" value="${plJson[p].dur[i]/10.0}">s</td>
<td class="c" width="40%"><input class="noslide segn" type="number" placeholder="Transition" max=65.0 min=0.0 step=0.1 oninput="pleTr(${p},${i},this)" value="${plJson[p].transition[i]/10.0}">s</td> <td class="c" width="40%"><input class="noslide segn" type="number" placeholder="Transition" max=65.0 min=0.0 step=0.1 oninput="pleTr(${p},${i},this)" value="${plJson[p].transition[i]/10.0}">s</td>
<td class="c"><button class="btn btn-i btn-pl-del" onclick="delPl(${p},${i})"><i class="icons btn-icon">&#xe037;</i></button></div></td> <td class="c"><button class="btn btn-pl-del" onclick="delPl(${p},${i})"><i class="icons btn-icon">&#xe037;</i></button></div></td>
</tr> </tr>
</table> </table>
</div>`; </div>`;
@ -1555,8 +1555,8 @@ function makePlUtil()
function resetPUtil() function resetPUtil()
{ {
gId('putil').classList.add("staytop"); gId('putil').classList.add("staytop");
var cn = `<button class="btn btn-s btn-n" onclick="makePUtil()"><i class="icons btn-icon">&#xe18a;</i>New&nbsp;preset</button>`+ var cn = `<button class="btn btn-n" onclick="makePUtil()"><i class="icons btn-icon">&#xe18a;</i>New&nbsp;preset</button>`+
`<button class="btn btn-i btn-xs" onclick="makePlUtil()"><i class="icons btn-icon">&#xe139;</i></button>`; `<button class="btn btn-xs" onclick="makePlUtil()"><i class="icons btn-icon">&#xe139;</i></button>`;
gId('putil').innerHTML = cn; gId('putil').innerHTML = cn;
} }

3825
wled00/html_ui.h
View File

File diff suppressed because it is too large Load Diff

2
wled00/wled.h
View File

@ -8,7 +8,7 @@
*/ */
// version code in format yymmddb (b = daily build) // version code in format yymmddb (b = daily build)
#define VERSION 2108131 #define VERSION 2108151
//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