Skip to content

Commit 4a20f43

Browse files
MoustachauveAircoookie
Moustachauve
and
Aircoookie
authored
Search bar and palettes preview (wled#1637)
* Fix swipe behavior on firefox when clicking on palette selection input When clicking on the palette select element on firefox, it would often swipe to the next tab due to a bug in firefox: https://bugzilla.mozilla.org/show_bug.cgi?id=1410816 * Update UI .h files and remove console log * Fix indentation in requestJson * Add palette preview Add palette and effects search * Add palette preview Add palette and effects search * Add palette preview Add palette and effects search * Add palette preview Add palette and effects search * Fix error with background image * Add missing palettes * Add expiration to cached palette data * Remove extra console.log * bug fixes for palettes * Rename "Default" effect back to "Solid" * Fix scrolling issue when selecting an effect * Add sticky default and sticky selected item * Change checkboxes for radio button * build html .h files * Design Iteration 1 * Palette preview style changes * Add button for clearing search field * Use version ID for caching palette data rather than 24h expiration Co-authored-by: Aircoookie <[email protected]>
1 parent ba4c3e3 commit 4a20f43

File tree

6 files changed

+2880
-2224
lines changed

6 files changed

+2880
-2224
lines changed

‎.gitignore‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,9 +7,10 @@
77
/wled00/Release
88
/wled00/extLibs
99
/platformio_override.ini
10-
/wled00/my_config.h
10+
/wled00/my_config.h
1111
/build_output
1212
.DS_Store
1313
.gitignore
1414
.clang-format
1515
node_modules
16+
.idea

‎wled00/data/index.css‎

Lines changed: 132 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -166,6 +166,14 @@ button {
166166
color: var(--c-d);
167167
}
168168

169+
.search-cancel-icon {
170+
position: absolute;
171+
right: 8px;
172+
top: 9px;
173+
cursor: pointer;
174+
display: none;
175+
}
176+
169177
.flr {
170178
float: right;
171179
cursor: pointer;
@@ -215,7 +223,7 @@ button {
215223

216224
.top button {
217225
padding: var(--tbp);
218-
}
226+
}
219227

220228
.bot button {
221229
padding: var(--bbp);
@@ -299,7 +307,7 @@ button {
299307
top: -1px;
300308
z-index: 1;
301309
margin-top: 1px;
302-
width: 274px;
310+
width: 272px;
303311
margin: auto;
304312
border-radius: 25px;
305313
}
@@ -308,10 +316,6 @@ button {
308316
top: 28px;
309317
}
310318

311-
#staytop2 {
312-
top: 56px;
313-
}
314-
315319
#fxb0 {
316320
margin-bottom: 2px;
317321
filter: drop-shadow(0 0 1px #000);
@@ -548,6 +552,7 @@ input[type=range]:active + .sliderbubble {
548552
font-size: 19px;
549553
background-color: var(--c-3);
550554
color: var(--c-f);
555+
cursor: pointer;
551556
border: 0px solid white;
552557
border-radius: 25px;
553558
transition-duration: 0.5s;
@@ -668,8 +673,8 @@ input[type=number]:focus, input[type=text]:focus {
668673
background: var(--c-6);
669674
}
670675

671-
input[type=number]::-webkit-inner-spin-button,
672-
input[type=number]::-webkit-outer-spin-button {
676+
input[type=number]::-webkit-inner-spin-button,
677+
input[type=number]::-webkit-outer-spin-button {
673678
-webkit-appearance: none;
674679
}
675680

@@ -742,7 +747,7 @@ input[type=number]::-webkit-outer-spin-button {
742747
}
743748

744749
.pwr {
745-
color: var(--c-6);
750+
color: var(--c-6);
746751
transform: translate(2px, 3px);
747752
cursor: pointer;
748753
}
@@ -764,7 +769,7 @@ input[type=number]::-webkit-outer-spin-button {
764769
cursor: pointer;
765770
}
766771

767-
.check {
772+
.check, .radio {
768773
display: inline-block;
769774
position: relative;
770775
padding-bottom: 32px;
@@ -774,7 +779,7 @@ input[type=number]::-webkit-outer-spin-button {
774779
}
775780

776781
.schkl {
777-
padding: 2px 22px 0px 35px;
782+
padding: 2px 5px 0px 35px;
778783
margin: 0 0 0 2px;
779784
}
780785

@@ -784,15 +789,21 @@ input[type=number]::-webkit-outer-spin-button {
784789
margin-top: 8px;
785790
}
786791

787-
.check input {
792+
.fxchkl {
793+
position: absolute;
794+
top: 0px;
795+
left: 8px;
796+
}
797+
798+
.check input, .radio input {
788799
position: absolute;
789800
opacity: 0;
790801
cursor: pointer;
791802
height: 0;
792803
width: 0;
793804
}
794805

795-
.checkmark {
806+
.checkmark, .radiomark {
796807
position: absolute;
797808
bottom: 0;
798809
left: 0;
@@ -802,6 +813,13 @@ input[type=number]::-webkit-outer-spin-button {
802813
border-radius: 10px;
803814
}
804815

816+
.radiomark {
817+
height: 24px;
818+
width: 24px;
819+
border-radius: 50%;
820+
background-color: transparent;
821+
}
822+
805823
.schk {
806824
top: 0;
807825
}
@@ -828,13 +846,13 @@ input[type=number]::-webkit-outer-spin-button {
828846
background-color: var(--c-6);
829847
}
830848

831-
.checkmark:after {
849+
.checkmark:after, .radiomark:after {
832850
content: "";
833851
position: absolute;
834852
display: none;
835853
}
836854

837-
.check input:checked ~ .checkmark:after {
855+
.check input:checked ~ .checkmark:after, .radio input:checked ~ .radiomark:after {
838856
display: block;
839857
}
840858

@@ -850,6 +868,16 @@ input[type=number]::-webkit-outer-spin-button {
850868
transform: rotate(45deg);
851869
}
852870

871+
.radio .radiomark:after {
872+
width: 12px;
873+
height: 12px;
874+
top: 50%;
875+
left: 50%;
876+
margin: -6px;
877+
border-radius: 50%;
878+
background: var(--c-f);
879+
}
880+
853881
.h {
854882
font-size: 13px;
855883
text-align: center;
@@ -873,7 +901,93 @@ input[type=number]::-webkit-outer-spin-button {
873901
border-radius: 20px;
874902
text-align: left;
875903
transition: background-color 0.5s;
876-
filter: brightness(1);
904+
filter: brightness(1);
905+
}
906+
907+
.list {
908+
position: relative;
909+
transition: background-color 0.5s;
910+
margin: auto auto 10px;
911+
padding-bottom: 10px;
912+
width: 230px;
913+
}
914+
915+
.lstI {
916+
overflow: hidden;
917+
}
918+
919+
.fxbtn {
920+
margin: 20px auto;
921+
padding: 8px 0;
922+
}
923+
924+
.lstI:hover {
925+
background: var(--c-4);
926+
}
927+
928+
.lstI:last-child {
929+
border: none;
930+
}
931+
932+
.lstI.sticky, .lstI.selected {
933+
position: sticky;
934+
z-index: 1;
935+
}
936+
937+
#selectPalette .lstI.selected {
938+
top: 27px;
939+
bottom: -11px;
940+
}
941+
942+
#selectPalette .lstI.sticky {
943+
top: -11px;
944+
}
945+
946+
.lstI.selected {
947+
background: var(--c-5);
948+
top: 95px;
949+
bottom: -11px;
950+
}
951+
952+
.lstI.sticky {
953+
top: 57px;
954+
}
955+
956+
.lstIname {
957+
margin: 3px 0;
958+
white-space: nowrap;
959+
cursor: pointer;
960+
font-size: 19px;
961+
}
962+
963+
.lstIprev {
964+
width: 100%;
965+
height: 5px;
966+
margin: auto;
967+
position: absolute;
968+
bottom: 0px;
969+
left: 0px;
970+
}
971+
972+
input[type="text"].search {
973+
display: block;
974+
width: 230px;
975+
box-sizing: border-box;
976+
padding: 8px 8px 9px 38px;
977+
margin: 6px auto 0 auto;
978+
text-align: left;
979+
background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' stroke='white'><ellipse fill-opacity='0' stroke-width='10' cx='35' cy='35' id='svg_1' rx='25' ry='25' /><line stroke-width='10' x1='48.5' y1='70.75' x2='92.5' y2='70.75' transform='rotate(45, 70.5, 70.75)' /></svg>")
980+
no-repeat 10px 10px;
981+
background-size: 20px;
982+
background-color: var(--c-3);
983+
}
984+
985+
input[type="text"].search:focus {
986+
background-color: var(--c-4);
987+
}
988+
989+
input[type="text"].search:not(:placeholder-shown) {
990+
background-color: var(--c-5);
877991
}
878992

879993
.pres {
@@ -906,7 +1020,7 @@ input[type=number]::-webkit-outer-spin-button {
9061020
width: 6px;
9071021
}
9081022
::-webkit-scrollbar-track {
909-
background: transparent;
1023+
background: transparent;
9101024
}
9111025
::-webkit-scrollbar-thumb {
9121026
background: var(--c-sb);
@@ -947,4 +1061,4 @@ input[type=number]::-webkit-outer-spin-button {
9471061
#buttonPcm {
9481062
display: none;
9491063
}
950-
}
1064+
}

‎wled00/data/index.htm‎

Lines changed: 31 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -88,13 +88,33 @@
8888
<input id="hexc" type="text" class="noslide" onkeydown="hexEnter(this)" autocomplete="off" maxlength="8" />
8989
<button id="hexcnf" class="xxs btn" onclick="fromHex();"><i class="icons btna-icon">&#xe390;</i></button>
9090
</div>
91-
<p class="labels">Color palette</p>
92-
<div class="il">
91+
<p class="labels">
9392
<i class="icons sel-icon" onclick="tglHex()">&#xe2b3;</i>
94-
<select class="btn sel" id="selectPalette" onchange="setPalette()">
95-
<option>Default</option>
96-
<option>Error!</option>
97-
</select>
93+
Color palette
94+
</p>
95+
<div class="il">
96+
<div id="selectPalette" class="list">
97+
<div class="lstI" data-id="0">
98+
<label class="check schkl">
99+
&nbsp;
100+
<input type="radio" value="${palettes[i].id}" name="palette" onChange="setPalette()">
101+
<span class="checkmark schk"></span>
102+
</label>
103+
<div class="lstIcontent">
104+
<span class="lstIname">
105+
Default
106+
</span>
107+
</div>
108+
</div>
109+
<div class="lstI">
110+
<div class="lstIcontent">
111+
<span class="lstIname">
112+
Loading...
113+
</span>
114+
</div>
115+
</div>
116+
117+
</div>
98118
</div>
99119
</div>
100120

@@ -118,21 +138,17 @@
118138
</div>
119139
</div>
120140
<p class="labels">Effect mode</p>
121-
<div class="staytop" id="staytop2">
122-
<button class="btn" id="fxb0" onclick="setX(0);">Solid</button>
123-
</div>
124-
<div id="fxlist">
141+
<div id="fxlist" class="list">
125142
Loading...
126143
</div>
127-
<br>
128144
</div>
129-
145+
130146
<div id="Segments" class="tabcontent">
131147
<div id="segcont">
132148
Loading...
133149
</div>
134150
<div id="segutil">
135-
151+
136152
</div>
137153
<div id="segutil2">
138154
<button class="btn btn-s" id="rsbtn" onclick="rSegs()">Reset segments</button>
@@ -141,7 +157,7 @@
141157

142158
<div id="Favorites" class="tabcontent">
143159
<div id="putil">
144-
160+
145161
</div>
146162
<div id="pql">
147163

@@ -205,4 +221,4 @@
205221
<script src="rangetouch.js"></script>
206222
<script src="index.js"></script>
207223
</body>
208-
</html>
224+
</html>

0 commit comments

Comments
 (0)