Atte149/book-story
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

🚀 Improve SettingsCategoryItem

Browse source 
* Larger font size
* Changed colors
* More padding
* Changed icons
* Rounded corners (visible when holding)
This commit is contained in:
Acclorite 2024-10-20 11:58:28 +03:00
parent c5538ea3d6
commit 98ad641b9b
2 changed files with 30 additions and 25 deletions
Download patch file Download diff file Expand all files Collapse all files

24
app/src/main/java/ua/acclorite/book_story/presentation/screens/settings/SettingsScreen.kt
View file

@ -8,10 +8,10 @@ import androidx.compose.foundation.layout.navigationBars
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.windowInsetsPadding
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.automirrored.filled.MenuBook
import androidx.compose.material.icons.filled.DisplaySettings
import androidx.compose.material.icons.filled.Explore
import androidx.compose.material.icons.filled.Palette
import androidx.compose.material.icons.outlined.DisplaySettings
import androidx.compose.material.icons.outlined.Explore
import androidx.compose.material.icons.outlined.LocalLibrary
import androidx.compose.material.icons.outlined.Palette
import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.LargeTopAppBar
import androidx.compose.material3.MaterialTheme
@ -76,8 +76,8 @@ private fun SettingsScreen() {
item {
SettingsCategoryItem(
icon = Icons.Default.DisplaySettings,
text = stringResource(id = R.string.general_settings),
icon = Icons.Outlined.DisplaySettings,
title = stringResource(id = R.string.general_settings),
description = stringResource(id = R.string.general_settings_desc)
) {
onNavigate {
@ -88,8 +88,8 @@ private fun SettingsScreen() {
item {
SettingsCategoryItem(
icon = Icons.Default.Palette,
text = stringResource(id = R.string.appearance_settings),
icon = Icons.Outlined.Palette,
title = stringResource(id = R.string.appearance_settings),
description = stringResource(id = R.string.appearance_settings_desc)
) {
onNavigate {
@ -100,8 +100,8 @@ private fun SettingsScreen() {
item {
SettingsCategoryItem(
icon = Icons.AutoMirrored.Filled.MenuBook,
text = stringResource(id = R.string.reader_settings),
icon = Icons.Outlined.LocalLibrary,
title = stringResource(id = R.string.reader_settings),
description = stringResource(id = R.string.reader_settings_desc)
) {
onNavigate {
@ -112,8 +112,8 @@ private fun SettingsScreen() {
item {
SettingsCategoryItem(
icon = Icons.Default.Explore,
text = stringResource(id = R.string.browse_settings),
icon = Icons.Outlined.Explore,
title = stringResource(id = R.string.browse_settings),
description = stringResource(id = R.string.browse_settings_desc)
) {
onNavigate {

31
app/src/main/java/ua/acclorite/book_story/presentation/screens/settings/components/SettingsCategoryItem.kt
View file

@ -4,17 +4,16 @@ import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.layout.width
import androidx.compose.material3.Icon
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
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.text.style.TextOverflow
import androidx.compose.ui.unit.Dp
@ -22,44 +21,50 @@ import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
/**
* Settings category item. It is used to represent the whole category.
* Settings category item.
* It is used to represent the whole category.
*
* @param icon Icon that represents category.
* @param title Title of the category.
* @param description Description of the category.
* @param verticalPadding Vertical item padding.
* @param onClick OnClick callback. Usually navigation action.
*/
@Composable
fun SettingsCategoryItem(
icon: ImageVector,
text: String,
title: String,
description: String,
verticalPadding: Dp = 16.dp,
verticalPadding: Dp = 20.dp,
onClick: () -> Unit
) {
Row(
modifier = Modifier
.fillMaxWidth()
.clip(MaterialTheme.shapes.extraLarge)
.clickable {
onClick()
}
.padding(vertical = verticalPadding, horizontal = 18.dp),
.padding(vertical = verticalPadding, horizontal = 24.dp),
verticalAlignment = Alignment.CenterVertically,
horizontalArrangement = Arrangement.Start
horizontalArrangement = Arrangement.spacedBy(18.dp)
) {
Icon(
imageVector = icon,
contentDescription = null,
modifier = Modifier.size(24.dp),
tint = MaterialTheme.colorScheme.primary
tint = MaterialTheme.colorScheme.onSurfaceVariant
)
Spacer(modifier = Modifier.width(18.dp))
Column {
Text(
text,
style = MaterialTheme.typography.bodyLarge,
text = title,
fontSize = 19.sp,
color = MaterialTheme.colorScheme.onSurface,
fontSize = 18.sp,
maxLines = 1,
overflow = TextOverflow.Ellipsis
)
Text(
description,
text = description,
style = MaterialTheme.typography.bodyMedium,
color = MaterialTheme.colorScheme.onSurfaceVariant,
maxLines = 1,