Skip to content

Commit 705126d

Browse files
bajrangCoderbajrangCoder
committed
fix
1 parent 140889d commit 705126d

File tree

2 files changed

+254
-16
lines changed

2 files changed

+254
-16
lines changed

‎src/components/searchbar/index.js‎

Lines changed: 29 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -117,18 +117,33 @@ function searchBar($list, setHide, onhideCb, searchFunction) {
117117
function buildSearchContent(result, val) {
118118
if (!val || !result.length) return result;
119119

120-
const groups = new Map();
120+
const groupedSections = [];
121+
const sectionIndexByLabel = new Map();
121122
let hasGroups = false;
122123

123124
result.forEach(($item) => {
124125
const label = $item.dataset.searchGroup;
125-
if (!label) return;
126-
hasGroups = true;
126+
if (!label) {
127+
groupedSections.push({
128+
items: [$item],
129+
type: "ungrouped",
130+
});
131+
return;
132+
}
127133

128-
if (!groups.has(label)) {
129-
groups.set(label, []);
134+
hasGroups = true;
135+
const existingSectionIndex = sectionIndexByLabel.get(label);
136+
if (existingSectionIndex !== undefined) {
137+
groupedSections[existingSectionIndex].items.push($item);
138+
return;
130139
}
131-
groups.get(label).push($item);
140+
141+
sectionIndexByLabel.set(label, groupedSections.length);
142+
groupedSections.push({
143+
items: [$item],
144+
label,
145+
type: "group",
146+
});
132147
});
133148

134149
if (!hasGroups) return result.map(cloneSearchItem);
@@ -142,12 +157,17 @@ function searchBar($list, setHide, onhideCb, searchFunction) {
142157
<div className="settings-search-summary">{countLabel}</div>,
143158
];
144159

145-
groups.forEach((items, label) => {
160+
groupedSections.forEach((section) => {
161+
if (section.type === "ungrouped") {
162+
content.push(...section.items.map(cloneSearchItem));
163+
return;
164+
}
165+
146166
content.push(
147167
<section className="settings-section settings-search-section">
148-
<div className="settings-section-label">{label}</div>
168+
<div className="settings-section-label">{section.label}</div>
149169
<div className="settings-section-card">
150-
{items.map(cloneSearchItem)}
170+
{section.items.map(cloneSearchItem)}
151171
</div>
152172
</section>,
153173
);

‎src/components/settingsPage.scss‎

Lines changed: 225 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -140,13 +140,238 @@ wc-page.main-settings-page {
140140
color: color-mix(in srgb, var(--secondary-text-color), transparent 40%);
141141
}
142142

143+
.settings-search-section .list-item {
144+
> .container {
145+
padding-right: 0.35rem;
146+
gap: 0.18rem;
147+
}
148+
149+
> .setting-tail {
150+
display: flex;
151+
align-items: center;
152+
justify-content: flex-end;
153+
flex-shrink: 0;
154+
min-height: 1.65rem;
155+
gap: 0.32rem;
156+
margin-left: 0.9rem;
157+
align-self: center;
158+
}
159+
160+
&.has-subtitle > .container {
161+
gap: 0.24rem;
162+
padding-top: 0.14rem;
163+
padding-right: 0.6rem;
164+
}
165+
166+
&.has-subtitle.has-tail-select > .container {
167+
padding-right: 0.95rem;
168+
}
169+
170+
&.compact > .container {
171+
align-self: center;
172+
justify-content: center;
173+
gap: 0;
174+
padding-top: 0;
175+
}
176+
177+
&.compact > .setting-tail {
178+
align-self: center;
179+
}
180+
}
181+
182+
.settings-search-section .setting-value-display {
183+
display: inline-flex;
184+
align-items: center;
185+
gap: 0.15rem;
186+
min-height: auto;
187+
padding: 0;
188+
border: none;
189+
border-radius: 0;
190+
background: transparent;
191+
color: var(--secondary-text-color);
192+
color: color-mix(in srgb, var(--secondary-text-color), transparent 18%);
193+
box-sizing: border-box;
194+
195+
&.is-select {
196+
min-width: clamp(6.75rem, 30vw, 8.5rem);
197+
max-width: min(45vw, 11.5rem);
198+
min-height: 2.35rem;
199+
padding: 0 0.8rem 0 0.95rem;
200+
gap: 0.55rem;
201+
justify-content: space-between;
202+
border: 1px solid var(--border-color);
203+
border: 1px solid color-mix(in srgb, var(--border-color), transparent 12%);
204+
border-radius: 0.56rem;
205+
background: color-mix(
206+
in srgb,
207+
var(--secondary-color),
208+
var(--popup-background-color) 42%
209+
);
210+
box-shadow:
211+
inset 0 0 0 1px color-mix(in srgb, var(--border-color), transparent 44%),
212+
0 1px 2px rgba(0, 0, 0, 0.12);
213+
}
214+
}
215+
216+
.settings-search-section .setting-trailing-value {
217+
font-size: 0.88rem;
218+
line-height: 1.2;
219+
color: inherit;
220+
text-transform: none;
221+
white-space: nowrap;
222+
223+
&.is-select {
224+
flex: 1;
225+
min-width: 0;
226+
overflow: hidden;
227+
text-overflow: ellipsis;
228+
font-size: 0.94rem;
229+
font-weight: 500;
230+
letter-spacing: -0.01em;
231+
color: color-mix(in srgb, var(--popup-text-color), transparent 14%);
232+
}
233+
}
234+
235+
.settings-search-section .setting-value-icon,
236+
.settings-search-section .settings-chevron,
237+
.main-settings-list .settings-chevron {
238+
display: flex;
239+
align-items: center;
240+
justify-content: center;
241+
color: var(--secondary-text-color);
242+
color: color-mix(in srgb, var(--secondary-text-color), transparent 40%);
243+
}
244+
245+
.settings-search-section .setting-value-icon {
246+
width: 1rem;
247+
min-width: 1rem;
248+
height: 1rem;
249+
font-size: 1rem;
250+
251+
.setting-value-display.is-select & {
252+
width: 0.95rem;
253+
min-width: 0.95rem;
254+
height: 0.95rem;
255+
font-size: 1rem;
256+
color: color-mix(in srgb, var(--secondary-text-color), transparent 22%);
257+
}
258+
}
259+
260+
.settings-search-section .settings-chevron,
261+
.main-settings-list .settings-chevron {
262+
width: 1.2rem;
263+
min-width: 1.2rem;
264+
height: 1.2rem;
265+
margin-left: 0.1rem;
266+
font-size: 1.1rem;
267+
line-height: 1;
268+
}
269+
270+
.settings-search-section .input-checkbox {
271+
display: inline-flex;
272+
align-items: center;
273+
justify-content: flex-end;
274+
line-height: 0;
275+
276+
span:last-child {
277+
display: none;
278+
}
279+
280+
.box {
281+
width: 2.8rem !important;
282+
height: 1.65rem !important;
283+
margin: 0;
284+
border: 1px solid var(--border-color);
285+
border: 1px solid color-mix(in srgb, var(--border-color), transparent 6%);
286+
border-radius: 999px;
287+
background: var(--popup-background-color);
288+
background: color-mix(
289+
in srgb,
290+
var(--secondary-color),
291+
var(--popup-background-color) 30%
292+
);
293+
transition:
294+
background-color 160ms ease,
295+
border-color 160ms ease,
296+
box-shadow 180ms ease;
297+
298+
&::after {
299+
width: 1.25rem;
300+
height: 1.25rem;
301+
margin: 0.14rem;
302+
border-radius: 999px;
303+
background: var(--popup-text-color);
304+
background: color-mix(
305+
in srgb,
306+
var(--popup-text-color),
307+
var(--popup-background-color) 18%
308+
);
309+
opacity: 1;
310+
box-shadow:
311+
0 0 0 1px color-mix(in srgb, var(--border-color), transparent 34%),
312+
0 1px 3px rgba(0, 0, 0, 0.22);
313+
transition:
314+
transform 180ms cubic-bezier(0.2, 0.9, 0.3, 1),
315+
background-color 160ms ease,
316+
box-shadow 180ms ease;
317+
}
318+
}
319+
320+
input:checked + .box {
321+
background: var(--button-background-color);
322+
border-color: color-mix(in srgb, var(--button-background-color), transparent 10%);
323+
box-shadow: inset 0 0 0 1px
324+
color-mix(in srgb, var(--button-background-color), transparent 12%);
325+
}
326+
327+
input:checked + .box::after {
328+
transform: translateX(1.12rem);
329+
background: var(--button-text-color);
330+
opacity: 1;
331+
box-shadow: 0 2px 8px color-mix(in srgb, var(--button-background-color), transparent 55%);
332+
}
333+
334+
input:not(:checked) + .box::after {
335+
opacity: 1;
336+
}
337+
}
338+
339+
.settings-search-section
340+
.list-item.has-tail-select:focus
341+
.setting-value-display.is-select,
342+
.settings-search-section
343+
.list-item.has-tail-select:active
344+
.setting-value-display.is-select {
345+
border-color: color-mix(in srgb, var(--active-color), transparent 48%);
346+
background: color-mix(
347+
in srgb,
348+
var(--popup-background-color),
349+
var(--active-color) 9%
350+
);
351+
}
352+
143353
@media screen and (min-width: 768px) {
144354
.main-settings-list {
145355
padding-left: 0.5rem;
146356
padding-right: 0.5rem;
147357
}
148358
}
149359

360+
@media screen and (max-width: 480px) {
361+
.settings-search-section .setting-trailing-value {
362+
max-width: 7rem;
363+
overflow: hidden;
364+
text-overflow: ellipsis;
365+
}
366+
367+
.settings-search-section .setting-value-display.is-select {
368+
min-width: 6.25rem;
369+
max-width: 9rem;
370+
padding-left: 0.85rem;
371+
padding-right: 0.7rem;
372+
}
373+
}
374+
150375
.icon {
151376
&:active,
152377
&.active {
@@ -311,13 +536,6 @@ wc-page.detail-settings-page {
311536
padding-right: 0.95rem;
312537
}
313538

314-
.detail-settings-list > .list-item.has-subtitle.has-tail-select > .setting-tail,
315-
.settings-section-card > .list-item.has-subtitle.has-tail-select > .setting-tail {
316-
align-self: flex-start;
317-
margin-top: 0.16rem;
318-
margin-left: 1.3rem;
319-
}
320-
321539
.detail-settings-list > .list-item.compact > .container,
322540
.settings-section-card > .list-item.compact > .container {
323541
align-self: center;

0 commit comments

Comments
 (0)