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.padding
import androidx.compose.foundation.layout.windowInsetsPadding import androidx.compose.foundation.layout.windowInsetsPadding
import androidx.compose.material.icons.Icons import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.automirrored.filled.MenuBook import androidx.compose.material.icons.outlined.DisplaySettings
import androidx.compose.material.icons.filled.DisplaySettings import androidx.compose.material.icons.outlined.Explore
import androidx.compose.material.icons.filled.Explore import androidx.compose.material.icons.outlined.LocalLibrary
import androidx.compose.material.icons.filled.Palette import androidx.compose.material.icons.outlined.Palette
import androidx.compose.material3.ExperimentalMaterial3Api import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.LargeTopAppBar import androidx.compose.material3.LargeTopAppBar
import androidx.compose.material3.MaterialTheme import androidx.compose.material3.MaterialTheme
@ -76,8 +76,8 @@ private fun SettingsScreen() {
item { item {
SettingsCategoryItem( SettingsCategoryItem(
icon = Icons.Default.DisplaySettings, icon = Icons.Outlined.DisplaySettings,
text = stringResource(id = R.string.general_settings), title = stringResource(id = R.string.general_settings),
description = stringResource(id = R.string.general_settings_desc) description = stringResource(id = R.string.general_settings_desc)
) { ) {
onNavigate { onNavigate {
@ -88,8 +88,8 @@ private fun SettingsScreen() {
item { item {
SettingsCategoryItem( SettingsCategoryItem(
icon = Icons.Default.Palette, icon = Icons.Outlined.Palette,
text = stringResource(id = R.string.appearance_settings), title = stringResource(id = R.string.appearance_settings),
description = stringResource(id = R.string.appearance_settings_desc) description = stringResource(id = R.string.appearance_settings_desc)
) { ) {
onNavigate { onNavigate {
@ -100,8 +100,8 @@ private fun SettingsScreen() {
item { item {
SettingsCategoryItem( SettingsCategoryItem(
icon = Icons.AutoMirrored.Filled.MenuBook, icon = Icons.Outlined.LocalLibrary,
text = stringResource(id = R.string.reader_settings), title = stringResource(id = R.string.reader_settings),
description = stringResource(id = R.string.reader_settings_desc) description = stringResource(id = R.string.reader_settings_desc)
) { ) {
onNavigate { onNavigate {
@ -112,8 +112,8 @@ private fun SettingsScreen() {
item { item {
SettingsCategoryItem( SettingsCategoryItem(
icon = Icons.Default.Explore, icon = Icons.Outlined.Explore,
text = stringResource(id = R.string.browse_settings), title = stringResource(id = R.string.browse_settings),
description = stringResource(id = R.string.browse_settings_desc) description = stringResource(id = R.string.browse_settings_desc)
) { ) {
onNavigate { 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.Arrangement
import androidx.compose.foundation.layout.Column import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxWidth import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size import androidx.compose.foundation.layout.size
import androidx.compose.foundation.layout.width
import androidx.compose.material3.Icon import androidx.compose.material3.Icon
import androidx.compose.material3.MaterialTheme import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Text import androidx.compose.material3.Text
import androidx.compose.runtime.Composable import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.graphics.vector.ImageVector import androidx.compose.ui.graphics.vector.ImageVector
import androidx.compose.ui.text.style.TextOverflow import androidx.compose.ui.text.style.TextOverflow
import androidx.compose.ui.unit.Dp import androidx.compose.ui.unit.Dp
@ -22,44 +21,50 @@ import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp 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 @Composable
fun SettingsCategoryItem( fun SettingsCategoryItem(
icon: ImageVector, icon: ImageVector,
text: String, title: String,
description: String, description: String,
verticalPadding: Dp = 16.dp, verticalPadding: Dp = 20.dp,
onClick: () -> Unit onClick: () -> Unit
) { ) {
Row( Row(
modifier = Modifier modifier = Modifier
.fillMaxWidth() .fillMaxWidth()
.clip(MaterialTheme.shapes.extraLarge)
.clickable { .clickable {
onClick() onClick()
} }
.padding(vertical = verticalPadding, horizontal = 18.dp), .padding(vertical = verticalPadding, horizontal = 24.dp),
verticalAlignment = Alignment.CenterVertically, verticalAlignment = Alignment.CenterVertically,
horizontalArrangement = Arrangement.Start horizontalArrangement = Arrangement.spacedBy(18.dp)
) { ) {
Icon( Icon(
imageVector = icon, imageVector = icon,
contentDescription = null, contentDescription = null,
modifier = Modifier.size(24.dp), modifier = Modifier.size(24.dp),
tint = MaterialTheme.colorScheme.primary tint = MaterialTheme.colorScheme.onSurfaceVariant
) )
Spacer(modifier = Modifier.width(18.dp))
Column { Column {
Text( Text(
text, text = title,
style = MaterialTheme.typography.bodyLarge, fontSize = 19.sp,
color = MaterialTheme.colorScheme.onSurface, color = MaterialTheme.colorScheme.onSurface,
fontSize = 18.sp,
maxLines = 1, maxLines = 1,
overflow = TextOverflow.Ellipsis overflow = TextOverflow.Ellipsis
) )
Text( Text(
description, text = description,
style = MaterialTheme.typography.bodyMedium, style = MaterialTheme.typography.bodyMedium,
color = MaterialTheme.colorScheme.onSurfaceVariant, color = MaterialTheme.colorScheme.onSurfaceVariant,
maxLines = 1, maxLines = 1,