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

🚀 Update UI of About Screen

Browse source 
* Material3 Style
This commit is contained in:
Acclorite 2025-02-05 12:20:07 +02:00
parent 85e4159249
commit 6e497a7d67
5 changed files with 166 additions and 170 deletions
Download patch file Download diff file Expand all files Collapse all files

41
app/src/main/java/ua/acclorite/book_story/presentation/about/AboutBadgeItem.kt
View file

@ -6,38 +6,47 @@
package ua.acclorite.book_story.presentation.about
import androidx.compose.foundation.background
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.material3.Icon
import androidx.compose.material3.MaterialTheme
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.unit.dp
import ua.acclorite.book_story.domain.about.Badge
import ua.acclorite.book_story.presentation.core.components.common.IconButton
@Composable
fun AboutBadgeItem(
badge: Badge,
onClick: () -> Unit
) {
Box(
modifier = Modifier
.clip(MaterialTheme.shapes.large)
.background(MaterialTheme.colorScheme.surfaceContainer)
.clickable { onClick() }
.padding(14.dp)
) {
if (badge.imageVector == null && badge.drawable != null) {
IconButton(
Icon(
modifier = Modifier.size(22.dp),
icon = badge.drawable,
contentDescription = badge.contentDescription,
disableOnClick = false,
color = MaterialTheme.colorScheme.primary
) {
onClick()
}
painter = painterResource(id = badge.drawable),
contentDescription = stringResource(id = badge.contentDescription),
tint = MaterialTheme.colorScheme.primary
)
} else if (badge.imageVector != null && badge.drawable == null) {
IconButton(
Icon(
modifier = Modifier.size(22.dp),
icon = badge.imageVector,
contentDescription = badge.contentDescription,
disableOnClick = false,
color = MaterialTheme.colorScheme.primary
) {
onClick()
imageVector = badge.imageVector,
contentDescription = stringResource(id = badge.contentDescription),
tint = MaterialTheme.colorScheme.primary
)
}
}
}

13
app/src/main/java/ua/acclorite/book_story/presentation/about/AboutBadges.kt
View file

@ -7,16 +7,13 @@
package ua.acclorite.book_story.presentation.about
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.lazy.LazyRow
import androidx.compose.foundation.lazy.items
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.platform.LocalContext
import androidx.compose.ui.unit.dp
import ua.acclorite.book_story.R
import ua.acclorite.book_story.presentation.core.constants.Constants
import ua.acclorite.book_story.presentation.core.constants.provideAboutBadges
@ -29,15 +26,10 @@ fun AboutBadges(
) {
val context = LocalContext.current
Box(
modifier = Modifier.fillMaxWidth(),
contentAlignment = Alignment.Center
) {
LazyRow(
Modifier
.padding(18.dp),
modifier = Modifier.fillMaxWidth(),
verticalAlignment = Alignment.CenterVertically,
horizontalArrangement = Arrangement.spacedBy(13.dp)
horizontalArrangement = Arrangement.SpaceBetween
) {
items(
Constants.provideAboutBadges(),
@ -64,5 +56,4 @@ fun AboutBadges(
}
}
}
}
}

8
app/src/main/java/ua/acclorite/book_story/presentation/about/AboutItem.kt
View file

@ -8,6 +8,7 @@ package ua.acclorite.book_story.presentation.about
import androidx.compose.animation.core.EaseInOut
import androidx.compose.animation.core.tween
import androidx.compose.foundation.background
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
@ -21,9 +22,9 @@ 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.text.AnnotatedString
import androidx.compose.ui.text.style.TextOverflow
import androidx.compose.ui.unit.Dp
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import ua.acclorite.book_story.presentation.core.components.progress_indicator.CircularProgressIndicator
@ -34,7 +35,6 @@ fun AboutItem(
modifier: Modifier = Modifier,
title: String,
description: AnnotatedString?,
verticalPadding: Dp = 12.dp,
showLoading: Boolean = false,
isOnClickEnabled: Boolean = true,
onClick: () -> Unit = {}
@ -42,10 +42,12 @@ fun AboutItem(
Row(
modifier
.fillMaxWidth()
.clip(MaterialTheme.shapes.large)
.background(MaterialTheme.colorScheme.surfaceContainer)
.clickable(enabled = isOnClickEnabled) {
onClick()
}
.padding(horizontal = 18.dp, vertical = verticalPadding),
.padding(horizontal = 18.dp, vertical = 18.dp),
verticalAlignment = Alignment.CenterVertically
) {
Column(Modifier.weight(1f)) {

62
app/src/main/java/ua/acclorite/book_story/presentation/about/AboutLayout.kt
View file

@ -6,21 +6,25 @@
package ua.acclorite.book_story.presentation.about
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.PaddingValues
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.navigationBarsPadding
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.lazy.LazyListState
import androidx.compose.material3.HorizontalDivider
import androidx.compose.foundation.shape.CornerSize
import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.Icon
import androidx.compose.material3.MaterialTheme
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.platform.LocalContext
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.res.stringResource
@ -35,6 +39,7 @@ import ua.acclorite.book_story.presentation.core.constants.provideReleasesPage
import ua.acclorite.book_story.presentation.core.constants.provideTranslationPage
import ua.acclorite.book_story.ui.about.AboutEvent
@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun AboutLayout(
updateLoading: Boolean,
@ -46,16 +51,13 @@ fun AboutLayout(
navigateToCredits: () -> Unit
) {
val context = LocalContext.current
LazyColumnWithScrollbar(
Modifier
.fillMaxSize()
.padding(top = paddingValues.calculateTopPadding()),
state = listState
) {
item {
Spacer(modifier = Modifier.height(16.dp))
}
item {
Box(
modifier = Modifier.fillMaxWidth(),
@ -65,22 +67,32 @@ fun AboutLayout(
painterResource(id = R.drawable.app_icon),
contentDescription = stringResource(id = R.string.app_icon_content_desc),
modifier = Modifier
.padding(14.dp)
.size(120.dp),
tint = MaterialTheme.colorScheme.onSurfaceVariant
.padding(horizontal = 14.dp)
.padding(
top = 40.dp,
bottom = 50.dp
)
.size(180.dp),
tint = MaterialTheme.colorScheme.primary
)
}
}
item {
Spacer(modifier = Modifier.height(36.dp))
HorizontalDivider(
modifier = Modifier.fillMaxWidth(),
color = MaterialTheme.colorScheme.outlineVariant
Column(
modifier = Modifier
.fillMaxWidth()
.clip(
MaterialTheme.shapes.extraLarge.copy(
bottomStart = CornerSize(0),
bottomEnd = CornerSize(0)
)
}
item {
)
.background(MaterialTheme.colorScheme.surfaceContainerLow)
.padding(24.dp)
.navigationBarsPadding(),
verticalArrangement = Arrangement.spacedBy(12.dp)
) {
AboutItem(
title = stringResource(id = R.string.app_version_option),
description = buildAnnotatedString {
@ -101,9 +113,7 @@ fun AboutLayout(
)
)
}
}
item {
AboutItem(
title = stringResource(id = R.string.report_bug_option),
description = null
@ -115,10 +125,7 @@ fun AboutLayout(
)
)
}
}
item {
AboutItem(
title = stringResource(id = R.string.contributors_option),
description = null
@ -130,9 +137,7 @@ fun AboutLayout(
)
)
}
}
item {
AboutItem(
title = stringResource(id = R.string.whats_new_option),
description = null
@ -144,27 +149,21 @@ fun AboutLayout(
)
)
}
}
item {
AboutItem(
title = stringResource(id = R.string.licenses_option),
description = null
) {
navigateToLicenses()
}
}
item {
AboutItem(
title = stringResource(id = R.string.credits_option),
description = null
) {
navigateToCredits()
}
}
item {
AboutItem(
title = stringResource(id = R.string.help_translate_option),
description = null
@ -176,12 +175,11 @@ fun AboutLayout(
)
)
}
}
item {
AboutBadges(
navigateToBrowserPage = navigateToBrowserPage
)
}
}
}
}

6
app/src/main/java/ua/acclorite/book_story/presentation/about/AboutScaffold.kt
View file

@ -6,10 +6,7 @@
package ua.acclorite.book_story.presentation.about
import androidx.compose.foundation.layout.WindowInsets
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.navigationBars
import androidx.compose.foundation.layout.windowInsetsPadding
import androidx.compose.foundation.lazy.LazyListState
import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.MaterialTheme
@ -35,8 +32,7 @@ fun AboutScaffold(
Scaffold(
Modifier
.fillMaxSize()
.nestedScroll(scrollBehavior.nestedScrollConnection)
.windowInsetsPadding(WindowInsets.navigationBars),
.nestedScroll(scrollBehavior.nestedScrollConnection),
containerColor = MaterialTheme.colorScheme.surface,
topBar = {
AboutTopBar(