Added a way to open unit groups screen from units list screen

This commit is contained in:
Sad Ellie 2022-08-12 21:42:01 +03:00
parent e3c1c5376f
commit 9094d9b527
3 changed files with 67 additions and 20 deletions

View File

@ -123,6 +123,7 @@ fun UnittoApp(
currentUnit = mainViewModel.unitFrom,
navigateUp = { navController.navigateUp() },
selectAction = { mainViewModel.changeUnitFrom(it) },
navigateToSettingsActtion = { navController.navigate(UNIT_GROUPS_SCREEN) },
viewModel = secondViewModel
)
}

View File

@ -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
)
},

View File

@ -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<UnitGroup> = 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()
}
}