diff --git a/app/src/main/java/com/sadellie/unitto/MainActivity.kt b/app/src/main/java/com/sadellie/unitto/MainActivity.kt index c6efa1b4..552a2c4c 100644 --- a/app/src/main/java/com/sadellie/unitto/MainActivity.kt +++ b/app/src/main/java/com/sadellie/unitto/MainActivity.kt @@ -123,6 +123,7 @@ fun UnittoApp( currentUnit = mainViewModel.unitFrom, navigateUp = { navController.navigateUp() }, selectAction = { mainViewModel.changeUnitFrom(it) }, + navigateToSettingsActtion = { navController.navigate(UNIT_GROUPS_SCREEN) }, viewModel = secondViewModel ) } diff --git a/app/src/main/java/com/sadellie/unitto/screens/second/SecondScreen.kt b/app/src/main/java/com/sadellie/unitto/screens/second/SecondScreen.kt index 7f5cce46..6f326d45 100644 --- a/app/src/main/java/com/sadellie/unitto/screens/second/SecondScreen.kt +++ b/app/src/main/java/com/sadellie/unitto/screens/second/SecondScreen.kt @@ -135,6 +135,7 @@ private fun BasicUnitListScreen( * * @param currentUnit Currently selected [AbstractUnit]. * @param navigateUp Action to navigate up. Called when user click back button. + * @param navigateToSettingsActtion Action to perform when clicking settings chip at the end. * @param selectAction Action to perform when user clicks on [UnitListItem]. * @param viewModel [SecondViewModel]. */ @@ -142,6 +143,7 @@ private fun BasicUnitListScreen( fun LeftSideScreen( currentUnit: AbstractUnit, navigateUp: () -> Unit, + navigateToSettingsActtion: () -> Unit, selectAction: (AbstractUnit) -> Unit, viewModel: SecondViewModel ) = BasicUnitListScreen( @@ -157,6 +159,7 @@ fun LeftSideScreen( viewModel.toggleSelectedChip(it) viewModel.loadUnitsToShow(true) }, + navigateToSettingsActtion = navigateToSettingsActtion, lazyListState = lazyListState ) }, diff --git a/app/src/main/java/com/sadellie/unitto/screens/second/components/ChipsRow.kt b/app/src/main/java/com/sadellie/unitto/screens/second/components/ChipsRow.kt index 432eb41b..1f8fc296 100644 --- a/app/src/main/java/com/sadellie/unitto/screens/second/components/ChipsRow.kt +++ b/app/src/main/java/com/sadellie/unitto/screens/second/components/ChipsRow.kt @@ -25,6 +25,7 @@ import androidx.compose.foundation.clickable import androidx.compose.foundation.layout.Arrangement import androidx.compose.foundation.layout.PaddingValues import androidx.compose.foundation.layout.Row +import androidx.compose.foundation.layout.RowScope import androidx.compose.foundation.layout.height import androidx.compose.foundation.layout.padding import androidx.compose.foundation.lazy.LazyListState @@ -33,6 +34,7 @@ import androidx.compose.foundation.lazy.items import androidx.compose.foundation.shape.RoundedCornerShape import androidx.compose.material.icons.Icons import androidx.compose.material.icons.filled.Check +import androidx.compose.material.icons.filled.Settings import androidx.compose.material3.Icon import androidx.compose.material3.MaterialTheme import androidx.compose.material3.Text @@ -53,6 +55,7 @@ import com.sadellie.unitto.data.units.UnitGroup * @param items All [UnitGroup]s * @param chosenUnitGroup Currently selected [UnitGroup] * @param selectAction Action to perform when a chip is clicked + * @param navigateToSettingsActtion Action to perform when clicking settings chip at the end * @param lazyListState Used for animated scroll when entering unit selection screen */ @Composable @@ -60,9 +63,9 @@ fun ChipsRow( items: List = ALL_UNIT_GROUPS, chosenUnitGroup: UnitGroup?, selectAction: (UnitGroup) -> Unit, + navigateToSettingsActtion: () -> Unit, lazyListState: LazyListState ) { - val chipShape = RoundedCornerShape(8.dp) LazyRow( modifier = Modifier.background(MaterialTheme.colorScheme.background), state = lazyListState, @@ -71,25 +74,9 @@ fun ChipsRow( ) { items(items, key = { it.name }) { item -> val isSelected: Boolean = item == chosenUnitGroup - Row( - modifier = Modifier - .height(32.dp) - .clip(chipShape) - .background( - if (isSelected) MaterialTheme.colorScheme.secondaryContainer else Color.Transparent - ) - // Remove border when selected - .border( - 1.dp, - if (isSelected) Color.Transparent else MaterialTheme.colorScheme.outline, - chipShape - ) - .clickable { selectAction(item) } - .padding( - start = 8.dp, - end = 16.dp - ), - verticalAlignment = Alignment.CenterVertically + UnittoFilterChip( + isSelected = isSelected, + selectAction = { selectAction(item) } ) { AnimatedVisibility(visible = isSelected) { Icon( @@ -106,5 +93,61 @@ fun ChipsRow( ) } } + + /** + * Usually this chip is placed at the start, but since we scroll to currently selected + * chip, user may never find it. There is higher chance that user will notice this chip when + * scrolling right (to the last one). + */ + item("settings") { + UnittoFilterChip( + isSelected = false, + selectAction = navigateToSettingsActtion, + paddingValues = PaddingValues(horizontal = 8.dp) + ) { + Icon( + modifier = Modifier.height(18.dp), + imageVector = Icons.Default.Settings, + contentDescription = stringResource(id = R.string.open_settings_description) + ) + } + } + } +} + +/** + * Basic chip implementation + * + * @param isSelected Chip state. + * @param selectAction Action to perform when clicking chip. + * @param paddingValues Padding values applied to Row. + * @param content Content of the list. Icon and/or label. + */ +@Composable +private fun UnittoFilterChip( + isSelected: Boolean, + selectAction: () -> Unit, + paddingValues: PaddingValues = PaddingValues(start = 8.dp, end = 16.dp), + content: @Composable RowScope.() -> Unit +) { + val chipShape = RoundedCornerShape(8.dp) + Row( + modifier = Modifier + .height(32.dp) + .clip(chipShape) + .background( + if (isSelected) MaterialTheme.colorScheme.secondaryContainer else Color.Transparent + ) + // Remove border when selected + .border( + 1.dp, + if (isSelected) Color.Transparent else MaterialTheme.colorScheme.outline, + chipShape + ) + .clickable { selectAction() } + .padding(paddingValues), + verticalAlignment = Alignment.CenterVertically + ) { + content() } }