Skip to content

Commit d40d0bc

Browse files
rainxchzedrainxchzed
committed
Make search filters horizontally scrollable in SearchRoot
- Wrapped the language and sort filter rows in a `horizontalScroll` container to prevent overflow on small screens. - Adjusted spacing and alignment for filter groups within the new scrollable layout. - Organized the UI structure for `FilterChip` components and their respective labels for better readability.
1 parent a280b39 commit d40d0bc

1 file changed

Lines changed: 91 additions & 81 deletions

File tree

  • feature/search/presentation/src/commonMain/kotlin/zed/rainxch/search/presentation

‎feature/search/presentation/src/commonMain/kotlin/zed/rainxch/search/presentation/SearchRoot.kt‎

Lines changed: 91 additions & 81 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import androidx.compose.animation.fadeOut
66
import androidx.compose.animation.slideInVertically
77
import androidx.compose.animation.slideOutVertically
88
import androidx.compose.foundation.clickable
9+
import androidx.compose.foundation.horizontalScroll
910
import androidx.compose.foundation.layout.Arrangement
1011
import androidx.compose.foundation.layout.Box
1112
import androidx.compose.foundation.layout.Column
@@ -27,6 +28,7 @@ import androidx.compose.foundation.lazy.staggeredgrid.LazyVerticalStaggeredGrid
2728
import androidx.compose.foundation.lazy.staggeredgrid.StaggeredGridCells
2829
import androidx.compose.foundation.lazy.staggeredgrid.items
2930
import androidx.compose.foundation.lazy.staggeredgrid.rememberLazyStaggeredGridState
31+
import androidx.compose.foundation.rememberScrollState
3032
import androidx.compose.foundation.shape.CircleShape
3133
import androidx.compose.foundation.shape.RoundedCornerShape
3234
import androidx.compose.foundation.text.KeyboardActions
@@ -367,99 +369,107 @@ fun SearchScreen(
367369
}
368370
}
369371

370-
Row(
371-
modifier = Modifier.fillMaxWidth(),
372-
horizontalArrangement = Arrangement.spacedBy(6.dp),
373-
verticalAlignment = Alignment.CenterVertically
372+
Row (
373+
modifier = Modifier
374+
.fillMaxWidth()
375+
.horizontalScroll(rememberScrollState()),
376+
verticalAlignment = Alignment.CenterVertically,
377+
horizontalArrangement = Arrangement.spacedBy(12.dp)
374378
) {
375-
Text(
376-
text = stringResource(Res.string.language_label),
377-
style = MaterialTheme.typography.bodyMedium,
378-
color = MaterialTheme.colorScheme.onSurfaceVariant,
379-
fontWeight = FontWeight.Medium
380-
)
379+
Row(
380+
modifier = Modifier.fillMaxWidth(),
381+
horizontalArrangement = Arrangement.spacedBy(6.dp),
382+
verticalAlignment = Alignment.CenterVertically
383+
) {
384+
Text(
385+
text = stringResource(Res.string.language_label),
386+
style = MaterialTheme.typography.bodyMedium,
387+
color = MaterialTheme.colorScheme.onSurfaceVariant,
388+
fontWeight = FontWeight.Medium
389+
)
381390

382-
FilterChip(
383-
selected = state.selectedLanguage != ProgrammingLanguage.All,
384-
onClick = {
385-
onAction(SearchAction.OnToggleLanguageSheetVisibility)
386-
},
387-
label = {
388-
Row(
389-
verticalAlignment = Alignment.CenterVertically,
390-
horizontalArrangement = Arrangement.spacedBy(4.dp)
391+
FilterChip(
392+
selected = state.selectedLanguage != ProgrammingLanguage.All,
393+
onClick = {
394+
onAction(SearchAction.OnToggleLanguageSheetVisibility)
395+
},
396+
label = {
397+
Row(
398+
verticalAlignment = Alignment.CenterVertically,
399+
horizontalArrangement = Arrangement.spacedBy(4.dp)
400+
) {
401+
Text(
402+
text = stringResource(state.selectedLanguage.label()),
403+
style = MaterialTheme.typography.bodyMedium,
404+
fontWeight = FontWeight.Medium
405+
)
406+
Icon(
407+
imageVector = Icons.Outlined.KeyboardArrowDown,
408+
contentDescription = null,
409+
modifier = Modifier.size(18.dp)
410+
)
411+
}
412+
}
413+
)
414+
415+
if (state.selectedLanguage != ProgrammingLanguage.All) {
416+
IconButton(
417+
onClick = {
418+
onAction(SearchAction.OnLanguageSelected(ProgrammingLanguage.All))
419+
},
420+
modifier = Modifier.size(32.dp)
391421
) {
392-
Text(
393-
text = stringResource(state.selectedLanguage.label()),
394-
style = MaterialTheme.typography.bodyMedium,
395-
fontWeight = FontWeight.Medium
396-
)
397422
Icon(
398-
imageVector = Icons.Outlined.KeyboardArrowDown,
423+
imageVector = Icons.Default.Close,
399424
contentDescription = null,
400-
modifier = Modifier.size(18.dp)
425+
modifier = Modifier.size(18.dp),
426+
tint = MaterialTheme.colorScheme.onSurfaceVariant
401427
)
402428
}
403429
}
404-
)
405-
406-
if (state.selectedLanguage != ProgrammingLanguage.All) {
407-
IconButton(
408-
onClick = {
409-
onAction(SearchAction.OnLanguageSelected(ProgrammingLanguage.All))
410-
},
411-
modifier = Modifier.size(32.dp)
412-
) {
413-
Icon(
414-
imageVector = Icons.Default.Close,
415-
contentDescription = null,
416-
modifier = Modifier.size(18.dp),
417-
tint = MaterialTheme.colorScheme.onSurfaceVariant
418-
)
419-
}
420430
}
421-
}
422431

423-
Row(
424-
modifier = Modifier.fillMaxWidth(),
425-
horizontalArrangement = Arrangement.spacedBy(6.dp),
426-
verticalAlignment = Alignment.CenterVertically
427-
) {
428-
Text(
429-
text = stringResource(Res.string.sort_label),
430-
style = MaterialTheme.typography.bodyMedium,
431-
color = MaterialTheme.colorScheme.onSurfaceVariant,
432-
fontWeight = FontWeight.Medium
433-
)
432+
Row(
433+
modifier = Modifier.fillMaxWidth(),
434+
horizontalArrangement = Arrangement.spacedBy(6.dp),
435+
verticalAlignment = Alignment.CenterVertically
436+
) {
437+
Text(
438+
text = stringResource(Res.string.sort_label),
439+
style = MaterialTheme.typography.bodyMedium,
440+
color = MaterialTheme.colorScheme.onSurfaceVariant,
441+
fontWeight = FontWeight.Medium
442+
)
434443

435-
FilterChip(
436-
selected = state.selectedSortBy != SortBy.BestMatch,
437-
onClick = {
438-
onAction(SearchAction.OnToggleSortByDialogVisibility)
439-
},
440-
label = {
441-
Row(
442-
verticalAlignment = Alignment.CenterVertically,
443-
horizontalArrangement = Arrangement.spacedBy(4.dp)
444-
) {
445-
Icon(
446-
imageVector = Icons.AutoMirrored.Filled.Sort,
447-
contentDescription = null,
448-
modifier = Modifier.size(18.dp)
449-
)
450-
Text(
451-
text = stringResource(state.selectedSortBy.label()),
452-
style = MaterialTheme.typography.bodyMedium,
453-
fontWeight = FontWeight.Medium
454-
)
455-
Icon(
456-
imageVector = Icons.Outlined.KeyboardArrowDown,
457-
contentDescription = null,
458-
modifier = Modifier.size(18.dp)
459-
)
444+
FilterChip(
445+
selected = state.selectedSortBy != SortBy.BestMatch,
446+
onClick = {
447+
onAction(SearchAction.OnToggleSortByDialogVisibility)
448+
},
449+
label = {
450+
Row(
451+
verticalAlignment = Alignment.CenterVertically,
452+
horizontalArrangement = Arrangement.spacedBy(4.dp)
453+
) {
454+
Icon(
455+
imageVector = Icons.AutoMirrored.Filled.Sort,
456+
contentDescription = null,
457+
modifier = Modifier.size(18.dp)
458+
)
459+
Text(
460+
text = stringResource(state.selectedSortBy.label()),
461+
style = MaterialTheme.typography.bodyMedium,
462+
fontWeight = FontWeight.Medium
463+
)
464+
Icon(
465+
imageVector = Icons.Outlined.KeyboardArrowDown,
466+
contentDescription = null,
467+
modifier = Modifier.size(18.dp)
468+
)
469+
}
460470
}
461-
}
462-
)
471+
)
472+
}
463473
}
464474

465475
Spacer(Modifier.height(6.dp))

0 commit comments

Comments
 (0)