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

🚀 Replace loading indicators with wavy loading indicators

Browse source 
* Replaced CircularProgressIndicator with CircularWavyProgressIndicator
This commit is contained in:
Acclorite 2024-10-31 23:07:52 +02:00
parent d0c0c9e133
commit 812584b5bb
6 changed files with 103 additions and 73 deletions
Download patch file Download diff file Expand all files Collapse all files

40
app/src/main/java/ua/acclorite/book_story/presentation/core/components/progress_indicator/CircularProgressIndicator.kt Normal file
View file

@ -0,0 +1,40 @@
package ua.acclorite.book_story.presentation.core.components.progress_indicator
import androidx.compose.material3.CircularWavyProgressIndicator
import androidx.compose.material3.ExperimentalMaterial3ExpressiveApi
import androidx.compose.material3.MaterialTheme
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.StrokeCap
import androidx.compose.ui.graphics.drawscope.Stroke
import androidx.compose.ui.platform.LocalDensity
import androidx.compose.ui.unit.Dp
import androidx.compose.ui.unit.dp
@OptIn(ExperimentalMaterial3ExpressiveApi::class)
@Composable
fun CircularProgressIndicator(
modifier: Modifier = Modifier,
color: Color = MaterialTheme.colorScheme.primary,
strokeWidth: Dp = 4.dp,
gapSize: Dp = 2.dp
) {
CircularWavyProgressIndicator(
modifier = modifier,
color = color,
stroke = Stroke(
width = with(LocalDensity.current) {
strokeWidth.toPx()
},
cap = StrokeCap.Round
),
trackStroke = Stroke(
width = with(LocalDensity.current) {
strokeWidth.toPx()
},
cap = StrokeCap.Round
),
gapSize = gapSize
)
}

4
app/src/main/java/ua/acclorite/book_story/presentation/screens/about/components/AboutItem.kt
View file

@ -10,18 +10,17 @@ 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.CircularProgressIndicator
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.graphics.StrokeCap
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
import ua.acclorite.book_story.presentation.ui.FadeTransitionPreservingSpace
/**
@ -80,7 +79,6 @@ fun AboutItem(
Spacer(modifier = Modifier.width(18.dp))
CircularProgressIndicator(
color = MaterialTheme.colorScheme.onSurfaceVariant,
strokeCap = StrokeCap.Round,
modifier = Modifier.size(28.dp)
)
}

18
app/src/main/java/ua/acclorite/book_story/presentation/screens/book_info/components/BookInfoStatisticSection.kt
View file

@ -5,7 +5,8 @@ import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.material3.LinearProgressIndicator
import androidx.compose.material3.ExperimentalMaterial3ExpressiveApi
import androidx.compose.material3.LinearWavyProgressIndicator
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
@ -13,7 +14,6 @@ import androidx.compose.runtime.derivedStateOf
import androidx.compose.runtime.getValue
import androidx.compose.runtime.remember
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.StrokeCap
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.text.style.TextOverflow
import androidx.compose.ui.unit.dp
@ -24,6 +24,7 @@ import ua.acclorite.book_story.presentation.screens.book_info.data.BookInfoViewM
/**
* Statistic section.
*/
@OptIn(ExperimentalMaterial3ExpressiveApi::class)
@Composable
fun BookInfoStatisticSection() {
val state = BookInfoViewModel.getState()
@ -49,16 +50,15 @@ fun BookInfoStatisticSection() {
color = MaterialTheme.colorScheme.onSurface,
style = MaterialTheme.typography.bodyLarge
)
Spacer(modifier = Modifier.height(6.dp))
LinearProgressIndicator(
progress = { state.value.book.progress.coerceAtLeast(0.01f) },
modifier = Modifier
.fillMaxWidth(),
color = MaterialTheme.colorScheme.primary,
LinearWavyProgressIndicator(
progress = { state.value.book.progress.coerceIn(0f, 1f) },
trackColor = MaterialTheme.colorScheme.secondaryContainer.copy(0.7f),
strokeCap = StrokeCap.Round,
modifier = Modifier.fillMaxWidth(),
amplitude = { 0.5f },
wavelength = 80.dp,
waveSpeed = 15.dp
)
Spacer(modifier = Modifier.height(6.dp))

6
app/src/main/java/ua/acclorite/book_story/presentation/screens/browse/components/adding_dialog/BrowseAddingDialog.kt
View file

@ -7,18 +7,16 @@ import androidx.compose.foundation.layout.size
import androidx.compose.foundation.lazy.items
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.AddChart
import androidx.compose.material3.CircularProgressIndicator
import androidx.compose.material3.MaterialTheme
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.StrokeCap
import androidx.compose.ui.platform.LocalContext
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.unit.dp
import ua.acclorite.book_story.R
import ua.acclorite.book_story.domain.model.NullableBook
import ua.acclorite.book_story.presentation.core.components.dialog.DialogWithLazyColumn
import ua.acclorite.book_story.presentation.core.components.progress_indicator.CircularProgressIndicator
import ua.acclorite.book_story.presentation.core.navigation.LocalNavigator
import ua.acclorite.book_story.presentation.core.util.showToast
import ua.acclorite.book_story.presentation.screens.browse.data.BrowseEvent
@ -76,8 +74,6 @@ fun BrowseAddingDialog() {
.padding(top = 16.dp)
) {
CircularProgressIndicator(
color = MaterialTheme.colorScheme.primary,
strokeCap = StrokeCap.Round,
modifier = Modifier
.align(Alignment.Center)
.size(36.dp)

2
app/src/main/java/ua/acclorite/book_story/presentation/screens/reader/ReaderScreen.kt
View file

@ -27,7 +27,6 @@ import androidx.compose.foundation.layout.systemBarsIgnoringVisibility
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.lazy.LazyListState
import androidx.compose.foundation.lazy.itemsIndexed
import androidx.compose.material3.CircularProgressIndicator
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Scaffold
import androidx.compose.runtime.Composable
@ -60,6 +59,7 @@ import ua.acclorite.book_story.domain.model.Chapter
import ua.acclorite.book_story.presentation.core.components.common.AnimatedVisibility
import ua.acclorite.book_story.presentation.core.components.common.SelectionContainer
import ua.acclorite.book_story.presentation.core.components.placeholder.ErrorPlaceholder
import ua.acclorite.book_story.presentation.core.components.progress_indicator.CircularProgressIndicator
import ua.acclorite.book_story.presentation.core.constants.Constants
import ua.acclorite.book_story.presentation.core.constants.provideFonts
import ua.acclorite.book_story.presentation.core.navigation.LocalNavigator

18
app/src/main/java/ua/acclorite/book_story/presentation/screens/reader/components/app_bar/ReaderTopBar.kt
View file

@ -7,7 +7,6 @@ import androidx.compose.animation.fadeOut
import androidx.compose.animation.shrinkHorizontally
import androidx.compose.foundation.background
import androidx.compose.foundation.basicMarquee
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxWidth
@ -18,8 +17,8 @@ import androidx.compose.material.icons.automirrored.outlined.ArrowBack
import androidx.compose.material.icons.filled.Settings
import androidx.compose.material.icons.rounded.Menu
import androidx.compose.material.icons.rounded.Upgrade
import androidx.compose.material3.CircularProgressIndicator
import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.ExperimentalMaterial3ExpressiveApi
import androidx.compose.material3.LinearProgressIndicator
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Text
@ -30,14 +29,13 @@ import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.platform.LocalContext
import androidx.compose.ui.text.font.FontFamily
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.text.style.TextOverflow
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import ua.acclorite.book_story.R
import ua.acclorite.book_story.presentation.core.components.common.AnimatedVisibility
import ua.acclorite.book_story.presentation.core.components.common.IconButton
import ua.acclorite.book_story.presentation.core.components.progress_indicator.CircularProgressIndicator
import ua.acclorite.book_story.presentation.core.navigation.LocalNavigator
import ua.acclorite.book_story.presentation.core.navigation.Screen
import ua.acclorite.book_story.presentation.core.util.noRippleClickable
@ -55,7 +53,7 @@ import ua.acclorite.book_story.presentation.ui.Colors
/**
* Reader top bar. Displays title of the book.
*/
@OptIn(ExperimentalMaterial3Api::class)
@OptIn(ExperimentalMaterial3Api::class, ExperimentalMaterial3ExpressiveApi::class)
@Composable
fun ReaderTopBar() {
val state = ReaderViewModel.getState()
@ -113,11 +111,8 @@ fun ReaderTopBar() {
}
},
title = {
Column(verticalArrangement = Arrangement.Center) {
Text(
state.value.book.title,
fontFamily = FontFamily.Default,
fontWeight = FontWeight.Normal,
text = state.value.book.title,
fontSize = 20.sp,
lineHeight = 20.sp,
color = MaterialTheme.colorScheme.onSurface,
@ -156,15 +151,16 @@ fun ReaderTopBar() {
else Modifier.basicMarquee(iterations = Int.MAX_VALUE)
)
)
},
subtitle = {
Text(
state.value.currentChapter?.title
text = state.value.currentChapter?.title
?: context.getString(R.string.no_chapters),
color = MaterialTheme.colorScheme.onSurfaceVariant,
style = MaterialTheme.typography.bodyLarge,
maxLines = 1,
overflow = TextOverflow.Ellipsis
)
}
},
actions = {
AnimatedVisibility(