feat: improve navigator bottom sheet design
* Added icons * Aligned to the left Co-authored-by: Edward205 <52004020+Edward205@users.noreply.github.com>
This commit is contained in:
parent
959a193e52
commit
7f234a0ba1
2 changed files with 30 additions and 15 deletions
|
|
@ -6,10 +6,13 @@
|
|||
|
||||
package ua.acclorite.book_story.ui.navigator
|
||||
|
||||
import androidx.compose.foundation.layout.Spacer
|
||||
import androidx.compose.foundation.layout.Arrangement
|
||||
import androidx.compose.foundation.layout.fillMaxWidth
|
||||
import androidx.compose.foundation.layout.height
|
||||
import androidx.compose.foundation.layout.padding
|
||||
import androidx.compose.foundation.lazy.LazyColumn
|
||||
import androidx.compose.material.icons.Icons
|
||||
import androidx.compose.material.icons.filled.Settings
|
||||
import androidx.compose.material.icons.outlined.Info
|
||||
import androidx.compose.runtime.Composable
|
||||
import androidx.compose.ui.Modifier
|
||||
import androidx.compose.ui.res.stringResource
|
||||
|
|
@ -32,25 +35,28 @@ fun NavigatorBottomSheet() {
|
|||
onDismissRequest = { navigatorBottomSheetChannel.trySend(false) },
|
||||
sheetGesturesEnabled = true
|
||||
) {
|
||||
LazyColumn(modifier = Modifier.fillMaxWidth()) {
|
||||
LazyColumn(
|
||||
modifier = Modifier
|
||||
.fillMaxWidth()
|
||||
.padding(bottom = 8.dp),
|
||||
verticalArrangement = Arrangement.spacedBy(8.dp)
|
||||
) {
|
||||
item {
|
||||
NavigatorBottomSheetItem(
|
||||
title = stringResource(id = R.string.about_screen),
|
||||
imageVector = Icons.Outlined.Info,
|
||||
primary = false,
|
||||
position = Position.TOP
|
||||
position = Position.SOLO
|
||||
) {
|
||||
navigator.push(AboutScreen)
|
||||
navigatorBottomSheetChannel.trySend(false)
|
||||
}
|
||||
}
|
||||
|
||||
item {
|
||||
Spacer(Modifier.height(18.dp))
|
||||
}
|
||||
|
||||
item {
|
||||
NavigatorBottomSheetItem(
|
||||
title = stringResource(id = R.string.settings_screen),
|
||||
imageVector = Icons.Default.Settings,
|
||||
primary = true,
|
||||
position = Position.SOLO
|
||||
) {
|
||||
|
|
@ -58,10 +64,6 @@ fun NavigatorBottomSheet() {
|
|||
navigatorBottomSheetChannel.trySend(false)
|
||||
}
|
||||
}
|
||||
|
||||
item {
|
||||
Spacer(modifier = Modifier.height(8.dp))
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -8,18 +8,22 @@ package ua.acclorite.book_story.ui.navigator
|
|||
|
||||
import androidx.compose.foundation.background
|
||||
import androidx.compose.foundation.clickable
|
||||
import androidx.compose.foundation.layout.Box
|
||||
import androidx.compose.foundation.layout.Arrangement
|
||||
import androidx.compose.foundation.layout.PaddingValues
|
||||
import androidx.compose.foundation.layout.Row
|
||||
import androidx.compose.foundation.layout.fillMaxWidth
|
||||
import androidx.compose.foundation.layout.padding
|
||||
import androidx.compose.foundation.layout.size
|
||||
import androidx.compose.foundation.shape.CornerSize
|
||||
import androidx.compose.foundation.shape.RoundedCornerShape
|
||||
import androidx.compose.material3.Icon
|
||||
import androidx.compose.material3.MaterialTheme
|
||||
import androidx.compose.runtime.Composable
|
||||
import androidx.compose.runtime.remember
|
||||
import androidx.compose.ui.Alignment
|
||||
import androidx.compose.ui.Modifier
|
||||
import androidx.compose.ui.draw.clip
|
||||
import androidx.compose.ui.graphics.vector.ImageVector
|
||||
import androidx.compose.ui.unit.dp
|
||||
import ua.acclorite.book_story.ui.common.components.common.StyledText
|
||||
import ua.acclorite.book_story.ui.common.model.Position
|
||||
|
|
@ -27,6 +31,7 @@ import ua.acclorite.book_story.ui.common.model.Position
|
|||
@Composable
|
||||
fun NavigatorBottomSheetItem(
|
||||
title: String,
|
||||
imageVector: ImageVector,
|
||||
primary: Boolean,
|
||||
position: Position,
|
||||
onClick: () -> Unit
|
||||
|
|
@ -58,7 +63,7 @@ fun NavigatorBottomSheetItem(
|
|||
}
|
||||
}
|
||||
|
||||
Box(
|
||||
Row(
|
||||
modifier = Modifier
|
||||
.padding(paddingValues)
|
||||
.fillMaxWidth()
|
||||
|
|
@ -72,8 +77,16 @@ fun NavigatorBottomSheetItem(
|
|||
onClick()
|
||||
}
|
||||
.padding(horizontal = 18.dp, vertical = 18.dp),
|
||||
contentAlignment = Alignment.Center
|
||||
verticalAlignment = Alignment.CenterVertically,
|
||||
horizontalArrangement = Arrangement.spacedBy(18.dp)
|
||||
) {
|
||||
Icon(
|
||||
imageVector = imageVector,
|
||||
contentDescription = null,
|
||||
modifier = Modifier.size(24.dp),
|
||||
tint = if (primary) MaterialTheme.colorScheme.onPrimaryContainer
|
||||
else MaterialTheme.colorScheme.onSurface
|
||||
)
|
||||
StyledText(
|
||||
text = title,
|
||||
style = MaterialTheme.typography.labelLarge.copy(
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue