From 812584b5bb38131057ffcd282ea0d5733c82d919 Mon Sep 17 00:00:00 2001 From: Acclorite <140836141+Acclorite@users.noreply.github.com> Date: Thu, 31 Oct 2024 23:07:52 +0200 Subject: [PATCH] =?UTF-8?q?=F0=9F=9A=80=20Replace=20loading=20indicators?= =?UTF-8?q?=20with=20wavy=20loading=20indicators?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * Replaced CircularProgressIndicator with CircularWavyProgressIndicator --- .../CircularProgressIndicator.kt | 40 +++++++ .../screens/about/components/AboutItem.kt | 4 +- .../components/BookInfoStatisticSection.kt | 18 +-- .../adding_dialog/BrowseAddingDialog.kt | 6 +- .../screens/reader/ReaderScreen.kt | 2 +- .../reader/components/app_bar/ReaderTopBar.kt | 106 +++++++++--------- 6 files changed, 103 insertions(+), 73 deletions(-) create mode 100644 app/src/main/java/ua/acclorite/book_story/presentation/core/components/progress_indicator/CircularProgressIndicator.kt diff --git a/app/src/main/java/ua/acclorite/book_story/presentation/core/components/progress_indicator/CircularProgressIndicator.kt b/app/src/main/java/ua/acclorite/book_story/presentation/core/components/progress_indicator/CircularProgressIndicator.kt new file mode 100644 index 00000000..2aace59e --- /dev/null +++ b/app/src/main/java/ua/acclorite/book_story/presentation/core/components/progress_indicator/CircularProgressIndicator.kt @@ -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 + ) +} \ No newline at end of file diff --git a/app/src/main/java/ua/acclorite/book_story/presentation/screens/about/components/AboutItem.kt b/app/src/main/java/ua/acclorite/book_story/presentation/screens/about/components/AboutItem.kt index f28db66e..1c9a2b26 100644 --- a/app/src/main/java/ua/acclorite/book_story/presentation/screens/about/components/AboutItem.kt +++ b/app/src/main/java/ua/acclorite/book_story/presentation/screens/about/components/AboutItem.kt @@ -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) ) } diff --git a/app/src/main/java/ua/acclorite/book_story/presentation/screens/book_info/components/BookInfoStatisticSection.kt b/app/src/main/java/ua/acclorite/book_story/presentation/screens/book_info/components/BookInfoStatisticSection.kt index 00f1e281..3b07900d 100644 --- a/app/src/main/java/ua/acclorite/book_story/presentation/screens/book_info/components/BookInfoStatisticSection.kt +++ b/app/src/main/java/ua/acclorite/book_story/presentation/screens/book_info/components/BookInfoStatisticSection.kt @@ -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)) diff --git a/app/src/main/java/ua/acclorite/book_story/presentation/screens/browse/components/adding_dialog/BrowseAddingDialog.kt b/app/src/main/java/ua/acclorite/book_story/presentation/screens/browse/components/adding_dialog/BrowseAddingDialog.kt index cad8c71f..cc7e1702 100644 --- a/app/src/main/java/ua/acclorite/book_story/presentation/screens/browse/components/adding_dialog/BrowseAddingDialog.kt +++ b/app/src/main/java/ua/acclorite/book_story/presentation/screens/browse/components/adding_dialog/BrowseAddingDialog.kt @@ -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) diff --git a/app/src/main/java/ua/acclorite/book_story/presentation/screens/reader/ReaderScreen.kt b/app/src/main/java/ua/acclorite/book_story/presentation/screens/reader/ReaderScreen.kt index fb657169..7442ffaf 100644 --- a/app/src/main/java/ua/acclorite/book_story/presentation/screens/reader/ReaderScreen.kt +++ b/app/src/main/java/ua/acclorite/book_story/presentation/screens/reader/ReaderScreen.kt @@ -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 diff --git a/app/src/main/java/ua/acclorite/book_story/presentation/screens/reader/components/app_bar/ReaderTopBar.kt b/app/src/main/java/ua/acclorite/book_story/presentation/screens/reader/components/app_bar/ReaderTopBar.kt index 55a09be6..c7daaad6 100644 --- a/app/src/main/java/ua/acclorite/book_story/presentation/screens/reader/components/app_bar/ReaderTopBar.kt +++ b/app/src/main/java/ua/acclorite/book_story/presentation/screens/reader/components/app_bar/ReaderTopBar.kt @@ -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,58 +111,56 @@ fun ReaderTopBar() { } }, title = { - Column(verticalArrangement = Arrangement.Center) { - Text( - state.value.book.title, - fontFamily = FontFamily.Default, - fontWeight = FontWeight.Normal, - fontSize = 20.sp, - lineHeight = 20.sp, - color = MaterialTheme.colorScheme.onSurface, - overflow = TextOverflow.Ellipsis, - maxLines = 1, - modifier = Modifier - .padding(end = 8.dp) - .noRippleClickable( - enabled = !state.value.lockMenu, - onClick = { - onEvent( - ReaderEvent.OnGoBack( - context = context, - refreshList = { - onLibraryEvent(LibraryEvent.OnUpdateBook(it)) - onHistoryEvent(HistoryEvent.OnUpdateBook(it)) - }, - navigate = { - onNavigate { - navigate( - Screen.BookInfo( - bookId = state.value.book.id, - startUpdate = false - ), - useBackAnimation = true, - saveInBackStack = false - ) - } + Text( + text = state.value.book.title, + fontSize = 20.sp, + lineHeight = 20.sp, + color = MaterialTheme.colorScheme.onSurface, + overflow = TextOverflow.Ellipsis, + maxLines = 1, + modifier = Modifier + .padding(end = 8.dp) + .noRippleClickable( + enabled = !state.value.lockMenu, + onClick = { + onEvent( + ReaderEvent.OnGoBack( + context = context, + refreshList = { + onLibraryEvent(LibraryEvent.OnUpdateBook(it)) + onHistoryEvent(HistoryEvent.OnUpdateBook(it)) + }, + navigate = { + onNavigate { + navigate( + Screen.BookInfo( + bookId = state.value.book.id, + startUpdate = false + ), + useBackAnimation = true, + saveInBackStack = false + ) } - ) + } ) - } - ) - .then( - if (state.value.checkingForUpdate || state.value.updateFound) Modifier - else Modifier.basicMarquee(iterations = Int.MAX_VALUE) - ) - ) - Text( - state.value.currentChapter?.title - ?: context.getString(R.string.no_chapters), - color = MaterialTheme.colorScheme.onSurfaceVariant, - style = MaterialTheme.typography.bodyLarge, - maxLines = 1, - overflow = TextOverflow.Ellipsis - ) - } + ) + } + ) + .then( + if (state.value.checkingForUpdate || state.value.updateFound) Modifier + else Modifier.basicMarquee(iterations = Int.MAX_VALUE) + ) + ) + }, + subtitle = { + Text( + 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(