From 402965503f0e580fe18e87a31eda50a3ca30a957 Mon Sep 17 00:00:00 2001 From: FatttSnake Date: Mon, 26 Aug 2024 14:50:34 +0800 Subject: [PATCH] Refactor(Indicator): Optimize indicator --- .../toolbox/ui/about/LibrariesScreen.kt | 33 +---------- .../oxygen/toolbox/ui/component/Indicator.kt | 58 +++++++++++++++++++ .../toolbox/ui/settings/SettingsDialog.kt | 35 +---------- .../oxygen/toolbox/ui/star/ToolStarScreen.kt | 34 ++--------- .../oxygen/toolbox/ui/tools/ToolsScreen.kt | 34 ++--------- .../oxygen/toolbox/ui/view/ToolViewScreen.kt | 34 +---------- 6 files changed, 72 insertions(+), 156 deletions(-) create mode 100644 app/src/main/kotlin/top/fatweb/oxygen/toolbox/ui/component/Indicator.kt diff --git a/app/src/main/kotlin/top/fatweb/oxygen/toolbox/ui/about/LibrariesScreen.kt b/app/src/main/kotlin/top/fatweb/oxygen/toolbox/ui/about/LibrariesScreen.kt index 75ad3c9..2c5b5d7 100644 --- a/app/src/main/kotlin/top/fatweb/oxygen/toolbox/ui/about/LibrariesScreen.kt +++ b/app/src/main/kotlin/top/fatweb/oxygen/toolbox/ui/about/LibrariesScreen.kt @@ -3,11 +3,6 @@ package top.fatweb.oxygen.toolbox.ui.about import android.content.Intent import android.net.Uri import androidx.activity.compose.ReportDrawnWhen -import androidx.compose.animation.core.Ease -import androidx.compose.animation.core.animateFloat -import androidx.compose.animation.core.infiniteRepeatable -import androidx.compose.animation.core.rememberInfiniteTransition -import androidx.compose.animation.core.tween import androidx.compose.foundation.gestures.Orientation import androidx.compose.foundation.layout.Arrangement import androidx.compose.foundation.layout.Box @@ -24,7 +19,6 @@ import androidx.compose.foundation.layout.heightIn import androidx.compose.foundation.layout.only import androidx.compose.foundation.layout.padding import androidx.compose.foundation.layout.safeDrawing -import androidx.compose.foundation.layout.size import androidx.compose.foundation.layout.systemBars import androidx.compose.foundation.layout.widthIn import androidx.compose.foundation.layout.windowInsetsPadding @@ -35,7 +29,6 @@ import androidx.compose.foundation.rememberScrollState import androidx.compose.foundation.verticalScroll import androidx.compose.material3.AlertDialog import androidx.compose.material3.ExperimentalMaterial3Api -import androidx.compose.material3.Icon import androidx.compose.material3.MaterialTheme import androidx.compose.material3.Scaffold import androidx.compose.material3.Text @@ -50,7 +43,6 @@ import androidx.compose.runtime.setValue import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier import androidx.compose.ui.graphics.Color -import androidx.compose.ui.graphics.graphicsLayer import androidx.compose.ui.input.nestedscroll.nestedScroll import androidx.compose.ui.platform.LocalConfiguration import androidx.compose.ui.platform.LocalContext @@ -59,8 +51,8 @@ import androidx.compose.ui.unit.dp import androidx.hilt.navigation.compose.hiltViewModel import androidx.lifecycle.compose.collectAsStateWithLifecycle import top.fatweb.oxygen.toolbox.R -import top.fatweb.oxygen.toolbox.icon.Loading import top.fatweb.oxygen.toolbox.icon.OxygenIcons +import top.fatweb.oxygen.toolbox.ui.component.Indicator import top.fatweb.oxygen.toolbox.ui.component.OxygenTopAppBar import top.fatweb.oxygen.toolbox.ui.component.scrollbar.DraggableScrollbar import top.fatweb.oxygen.toolbox.ui.component.scrollbar.rememberDraggableScroller @@ -113,8 +105,6 @@ internal fun LibrariesScreen( val topAppBarScrollBehavior = if (canScroll) TopAppBarDefaults.enterAlwaysScrollBehavior() else TopAppBarDefaults.pinnedScrollBehavior() - val infiniteTransition = rememberInfiniteTransition(label = "infiniteTransition") - var activeSearch by remember { mutableStateOf(false) } var searchValue by remember { mutableStateOf("") } @@ -172,26 +162,7 @@ internal fun LibrariesScreen( Box(modifier = Modifier) { when (librariesScreenUiState) { LibrariesScreenUiState.Loading -> { - Column( - modifier = Modifier.fillMaxWidth(), - horizontalAlignment = Alignment.CenterHorizontally, - verticalArrangement = Arrangement.Center - ) { - val angle by infiniteTransition.animateFloat( - initialValue = 0F, - targetValue = 360F, - animationSpec = infiniteRepeatable( - animation = tween(durationMillis = 800, easing = Ease), - ), label = "angle" - ) - Icon( - modifier = Modifier - .size(32.dp) - .graphicsLayer { rotationZ = angle }, - imageVector = Loading, - contentDescription = "" - ) - } + Indicator() } LibrariesScreenUiState.Nothing -> { diff --git a/app/src/main/kotlin/top/fatweb/oxygen/toolbox/ui/component/Indicator.kt b/app/src/main/kotlin/top/fatweb/oxygen/toolbox/ui/component/Indicator.kt new file mode 100644 index 0000000..693b496 --- /dev/null +++ b/app/src/main/kotlin/top/fatweb/oxygen/toolbox/ui/component/Indicator.kt @@ -0,0 +1,58 @@ +package top.fatweb.oxygen.toolbox.ui.component + +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.fillMaxWidth +import androidx.compose.foundation.layout.size +import androidx.compose.foundation.shape.CircleShape +import androidx.compose.material3.CircularProgressIndicator +import androidx.compose.material3.LocalContentColor +import androidx.compose.material3.MaterialTheme +import androidx.compose.runtime.Composable +import androidx.compose.runtime.CompositionLocalProvider +import androidx.compose.ui.Alignment +import androidx.compose.ui.Modifier +import androidx.compose.ui.draw.shadow +import androidx.compose.ui.graphics.Color +import androidx.compose.ui.unit.dp + +@Composable +fun Indicator( + modifier: Modifier = Modifier, + containerColor: Color = MaterialTheme.colorScheme.surfaceContainerHigh, + contentColor: Color = MaterialTheme.colorScheme.onSurfaceVariant +) { + Column( + modifier = Modifier.fillMaxWidth(), + horizontalAlignment = Alignment.CenterHorizontally, + verticalArrangement = Arrangement.Center + ) { + CompositionLocalProvider(value = LocalContentColor provides contentColor) { + Box( + modifier = modifier + .size(SpinnerContainerSize) + .shadow( + elevation = Elevation, + shape = CircleShape, + clip = true + ) + .background(color = containerColor, shape = CircleShape) + ) { + CircularProgressIndicator( + modifier = Modifier + .align(Alignment.Center) + .size(SpinnerSize), + strokeWidth = StrokeWidth, + color = LocalContentColor.current + ) + } + } + } +} + +private val SpinnerContainerSize = 40.dp +private val Elevation = 3.dp +private val StrokeWidth = 2.5.dp +private val SpinnerSize = 16.dp diff --git a/app/src/main/kotlin/top/fatweb/oxygen/toolbox/ui/settings/SettingsDialog.kt b/app/src/main/kotlin/top/fatweb/oxygen/toolbox/ui/settings/SettingsDialog.kt index 931e632..75958d0 100644 --- a/app/src/main/kotlin/top/fatweb/oxygen/toolbox/ui/settings/SettingsDialog.kt +++ b/app/src/main/kotlin/top/fatweb/oxygen/toolbox/ui/settings/SettingsDialog.kt @@ -1,39 +1,27 @@ package top.fatweb.oxygen.toolbox.ui.settings import androidx.compose.animation.AnimatedVisibility -import androidx.compose.animation.core.Ease -import androidx.compose.animation.core.animateFloat -import androidx.compose.animation.core.infiniteRepeatable -import androidx.compose.animation.core.rememberInfiniteTransition -import androidx.compose.animation.core.tween -import androidx.compose.foundation.layout.Arrangement import androidx.compose.foundation.layout.Column import androidx.compose.foundation.layout.ColumnScope -import androidx.compose.foundation.layout.fillMaxWidth import androidx.compose.foundation.layout.heightIn import androidx.compose.foundation.layout.padding -import androidx.compose.foundation.layout.size import androidx.compose.foundation.layout.widthIn import androidx.compose.foundation.rememberScrollState import androidx.compose.foundation.verticalScroll import androidx.compose.material3.AlertDialog import androidx.compose.material3.HorizontalDivider -import androidx.compose.material3.Icon import androidx.compose.material3.MaterialTheme import androidx.compose.material3.Text import androidx.compose.material3.TextButton import androidx.compose.runtime.Composable import androidx.compose.runtime.getValue -import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier -import androidx.compose.ui.graphics.graphicsLayer import androidx.compose.ui.platform.LocalConfiguration import androidx.compose.ui.res.stringResource import androidx.compose.ui.unit.dp import androidx.hilt.navigation.compose.hiltViewModel import androidx.lifecycle.compose.collectAsStateWithLifecycle import top.fatweb.oxygen.toolbox.R -import top.fatweb.oxygen.toolbox.icon.Loading import top.fatweb.oxygen.toolbox.icon.OxygenIcons import top.fatweb.oxygen.toolbox.model.userdata.DarkThemeConfig import top.fatweb.oxygen.toolbox.model.userdata.LanguageConfig @@ -44,6 +32,7 @@ import top.fatweb.oxygen.toolbox.ui.component.DialogChooserRow import top.fatweb.oxygen.toolbox.ui.component.DialogClickerRow import top.fatweb.oxygen.toolbox.ui.component.DialogSectionGroup import top.fatweb.oxygen.toolbox.ui.component.DialogSectionTitle +import top.fatweb.oxygen.toolbox.ui.component.Indicator import top.fatweb.oxygen.toolbox.ui.theme.OxygenPreviews import top.fatweb.oxygen.toolbox.ui.theme.OxygenTheme import top.fatweb.oxygen.toolbox.ui.theme.supportsDynamicTheming @@ -86,7 +75,6 @@ fun SettingsDialog( onchangeUseDynamicColor: (useDynamicColor: Boolean) -> Unit ) { val configuration = LocalConfiguration.current - val infiniteTransition = rememberInfiniteTransition(label = "infiniteTransition") AlertDialog( modifier = modifier @@ -106,26 +94,7 @@ fun SettingsDialog( ) { when (settingsUiState) { SettingsUiState.Loading -> { - Column( - modifier = Modifier.fillMaxWidth(), - horizontalAlignment = Alignment.CenterHorizontally, - verticalArrangement = Arrangement.Center - ) { - val angle by infiniteTransition.animateFloat( - initialValue = 0F, - targetValue = 360F, - animationSpec = infiniteRepeatable( - animation = tween(800, easing = Ease), - ), label = "angle" - ) - Icon( - modifier = Modifier - .size(32.dp) - .graphicsLayer { rotationZ = angle }, - imageVector = Loading, - contentDescription = "" - ) - } + Indicator() } is SettingsUiState.Success -> { diff --git a/app/src/main/kotlin/top/fatweb/oxygen/toolbox/ui/star/ToolStarScreen.kt b/app/src/main/kotlin/top/fatweb/oxygen/toolbox/ui/star/ToolStarScreen.kt index c34ea57..0f360e2 100644 --- a/app/src/main/kotlin/top/fatweb/oxygen/toolbox/ui/star/ToolStarScreen.kt +++ b/app/src/main/kotlin/top/fatweb/oxygen/toolbox/ui/star/ToolStarScreen.kt @@ -1,11 +1,6 @@ package top.fatweb.oxygen.toolbox.ui.star import androidx.activity.compose.ReportDrawnWhen -import androidx.compose.animation.core.Ease -import androidx.compose.animation.core.animateFloat -import androidx.compose.animation.core.infiniteRepeatable -import androidx.compose.animation.core.rememberInfiniteTransition -import androidx.compose.animation.core.tween import androidx.compose.foundation.gestures.Orientation import androidx.compose.foundation.layout.Arrangement import androidx.compose.foundation.layout.Box @@ -15,11 +10,9 @@ import androidx.compose.foundation.layout.Spacer import androidx.compose.foundation.layout.WindowInsets import androidx.compose.foundation.layout.fillMaxHeight import androidx.compose.foundation.layout.fillMaxSize -import androidx.compose.foundation.layout.fillMaxWidth import androidx.compose.foundation.layout.height import androidx.compose.foundation.layout.padding import androidx.compose.foundation.layout.safeDrawing -import androidx.compose.foundation.layout.size import androidx.compose.foundation.layout.systemBars import androidx.compose.foundation.layout.windowInsetsBottomHeight import androidx.compose.foundation.layout.windowInsetsPadding @@ -29,9 +22,10 @@ import androidx.compose.foundation.lazy.staggeredgrid.StaggeredGridCells import androidx.compose.foundation.lazy.staggeredgrid.StaggeredGridItemSpan import androidx.compose.foundation.lazy.staggeredgrid.items import androidx.compose.foundation.lazy.staggeredgrid.rememberLazyStaggeredGridState +import androidx.compose.foundation.rememberScrollState +import androidx.compose.foundation.verticalScroll import androidx.compose.material3.ExperimentalMaterial3Api import androidx.compose.material3.HorizontalDivider -import androidx.compose.material3.Icon import androidx.compose.material3.ModalBottomSheet import androidx.compose.material3.Text import androidx.compose.runtime.Composable @@ -42,18 +36,17 @@ import androidx.compose.runtime.remember import androidx.compose.runtime.setValue import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier -import androidx.compose.ui.graphics.graphicsLayer import androidx.compose.ui.res.stringResource import androidx.compose.ui.unit.dp import androidx.hilt.navigation.compose.hiltViewModel import androidx.lifecycle.compose.collectAsStateWithLifecycle import top.fatweb.oxygen.toolbox.R -import top.fatweb.oxygen.toolbox.icon.Loading import top.fatweb.oxygen.toolbox.icon.OxygenIcons import top.fatweb.oxygen.toolbox.model.tool.ToolEntity import top.fatweb.oxygen.toolbox.ui.component.DialogClickerRow import top.fatweb.oxygen.toolbox.ui.component.DialogSectionGroup import top.fatweb.oxygen.toolbox.ui.component.DialogTitle +import top.fatweb.oxygen.toolbox.ui.component.Indicator import top.fatweb.oxygen.toolbox.ui.component.ToolCard import top.fatweb.oxygen.toolbox.ui.component.scrollbar.DraggableScrollbar import top.fatweb.oxygen.toolbox.ui.component.scrollbar.rememberDraggableScroller @@ -94,8 +87,6 @@ internal fun StarScreen( val state = rememberLazyStaggeredGridState() val scrollbarState = state.scrollbarState(itemsAvailable = itemsAvailable) - val infiniteTransition = rememberInfiniteTransition(label = "infiniteTransition") - var selectedTool by remember { mutableStateOf(null) } var isShowMenu by remember { mutableStateOf(true) } @@ -104,24 +95,7 @@ internal fun StarScreen( ) { when (starScreenUiState) { StarScreenUiState.Loading -> { - Column( - modifier = Modifier.fillMaxWidth(), - horizontalAlignment = Alignment.CenterHorizontally, - verticalArrangement = Arrangement.Center - ) { - val angle by infiniteTransition.animateFloat( - initialValue = 0F, targetValue = 360F, animationSpec = infiniteRepeatable( - animation = tween(800, easing = Ease) - ), label = "angle" - ) - Icon( - modifier = Modifier - .size(32.dp) - .graphicsLayer { rotationZ = angle }, - imageVector = Loading, - contentDescription = "" - ) - } + Indicator() } StarScreenUiState.Nothing -> { diff --git a/app/src/main/kotlin/top/fatweb/oxygen/toolbox/ui/tools/ToolsScreen.kt b/app/src/main/kotlin/top/fatweb/oxygen/toolbox/ui/tools/ToolsScreen.kt index e0c0296..a13a7c2 100644 --- a/app/src/main/kotlin/top/fatweb/oxygen/toolbox/ui/tools/ToolsScreen.kt +++ b/app/src/main/kotlin/top/fatweb/oxygen/toolbox/ui/tools/ToolsScreen.kt @@ -1,11 +1,6 @@ package top.fatweb.oxygen.toolbox.ui.tools import androidx.activity.compose.ReportDrawnWhen -import androidx.compose.animation.core.Ease -import androidx.compose.animation.core.animateFloat -import androidx.compose.animation.core.infiniteRepeatable -import androidx.compose.animation.core.rememberInfiniteTransition -import androidx.compose.animation.core.tween import androidx.compose.foundation.gestures.Orientation import androidx.compose.foundation.layout.Arrangement import androidx.compose.foundation.layout.Box @@ -15,11 +10,9 @@ import androidx.compose.foundation.layout.Spacer import androidx.compose.foundation.layout.WindowInsets import androidx.compose.foundation.layout.fillMaxHeight import androidx.compose.foundation.layout.fillMaxSize -import androidx.compose.foundation.layout.fillMaxWidth import androidx.compose.foundation.layout.height import androidx.compose.foundation.layout.padding import androidx.compose.foundation.layout.safeDrawing -import androidx.compose.foundation.layout.size import androidx.compose.foundation.layout.systemBars import androidx.compose.foundation.layout.windowInsetsBottomHeight import androidx.compose.foundation.layout.windowInsetsPadding @@ -29,9 +22,10 @@ import androidx.compose.foundation.lazy.staggeredgrid.StaggeredGridCells import androidx.compose.foundation.lazy.staggeredgrid.StaggeredGridItemSpan import androidx.compose.foundation.lazy.staggeredgrid.items import androidx.compose.foundation.lazy.staggeredgrid.rememberLazyStaggeredGridState +import androidx.compose.foundation.rememberScrollState +import androidx.compose.foundation.verticalScroll import androidx.compose.material3.ExperimentalMaterial3Api import androidx.compose.material3.HorizontalDivider -import androidx.compose.material3.Icon import androidx.compose.material3.ModalBottomSheet import androidx.compose.material3.Text import androidx.compose.material3.TextButton @@ -44,7 +38,6 @@ import androidx.compose.runtime.rememberCoroutineScope import androidx.compose.runtime.setValue import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier -import androidx.compose.ui.graphics.graphicsLayer import androidx.compose.ui.platform.LocalContext import androidx.compose.ui.res.stringResource import androidx.compose.ui.unit.dp @@ -52,12 +45,12 @@ import androidx.hilt.navigation.compose.hiltViewModel import androidx.lifecycle.compose.collectAsStateWithLifecycle import kotlinx.coroutines.launch import top.fatweb.oxygen.toolbox.R -import top.fatweb.oxygen.toolbox.icon.Loading import top.fatweb.oxygen.toolbox.icon.OxygenIcons import top.fatweb.oxygen.toolbox.model.tool.ToolEntity import top.fatweb.oxygen.toolbox.ui.component.DialogClickerRow import top.fatweb.oxygen.toolbox.ui.component.DialogSectionGroup import top.fatweb.oxygen.toolbox.ui.component.DialogTitle +import top.fatweb.oxygen.toolbox.ui.component.Indicator import top.fatweb.oxygen.toolbox.ui.component.ToolCard import top.fatweb.oxygen.toolbox.ui.component.scrollbar.DraggableScrollbar import top.fatweb.oxygen.toolbox.ui.component.scrollbar.rememberDraggableScroller @@ -113,8 +106,6 @@ internal fun ToolsScreen( val state = rememberLazyStaggeredGridState() val scrollbarState = state.scrollbarState(itemsAvailable = itemsAvailable) - val infiniteTransition = rememberInfiniteTransition(label = "infiniteTransition") - var selectedTool by remember { mutableStateOf(null) } var isShowMenu by remember { mutableStateOf(true) } @@ -124,24 +115,7 @@ internal fun ToolsScreen( when (toolsScreenUiState) { ToolsScreenUiState.Loading -> { - Column( - modifier = Modifier.fillMaxWidth(), - horizontalAlignment = Alignment.CenterHorizontally, - verticalArrangement = Arrangement.Center - ) { - val angle by infiniteTransition.animateFloat( - initialValue = 0F, targetValue = 360F, animationSpec = infiniteRepeatable( - animation = tween(durationMillis = 800, easing = Ease), - ), label = "angle" - ) - Icon( - modifier = Modifier - .size(32.dp) - .graphicsLayer { rotationZ = angle }, - imageVector = Loading, - contentDescription = "" - ) - } + Indicator() } ToolsScreenUiState.Nothing -> { diff --git a/app/src/main/kotlin/top/fatweb/oxygen/toolbox/ui/view/ToolViewScreen.kt b/app/src/main/kotlin/top/fatweb/oxygen/toolbox/ui/view/ToolViewScreen.kt index 7995818..dfb94ea 100644 --- a/app/src/main/kotlin/top/fatweb/oxygen/toolbox/ui/view/ToolViewScreen.kt +++ b/app/src/main/kotlin/top/fatweb/oxygen/toolbox/ui/view/ToolViewScreen.kt @@ -3,11 +3,6 @@ package top.fatweb.oxygen.toolbox.ui.view import android.annotation.SuppressLint import android.util.Log import android.webkit.ConsoleMessage -import androidx.compose.animation.core.Ease -import androidx.compose.animation.core.animateFloat -import androidx.compose.animation.core.infiniteRepeatable -import androidx.compose.animation.core.rememberInfiniteTransition -import androidx.compose.animation.core.tween import androidx.compose.foundation.layout.Arrangement import androidx.compose.foundation.layout.Column import androidx.compose.foundation.layout.WindowInsets @@ -19,10 +14,8 @@ import androidx.compose.foundation.layout.imePadding import androidx.compose.foundation.layout.only import androidx.compose.foundation.layout.padding import androidx.compose.foundation.layout.safeDrawing -import androidx.compose.foundation.layout.size import androidx.compose.foundation.layout.windowInsetsPadding import androidx.compose.material3.ExperimentalMaterial3Api -import androidx.compose.material3.Icon import androidx.compose.material3.Scaffold import androidx.compose.material3.Text import androidx.compose.material3.TopAppBarDefaults @@ -32,10 +25,8 @@ import androidx.compose.runtime.remember import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier import androidx.compose.ui.graphics.Color -import androidx.compose.ui.graphics.graphicsLayer import androidx.compose.ui.platform.LocalContext import androidx.compose.ui.res.stringResource -import androidx.compose.ui.unit.dp import androidx.hilt.navigation.compose.hiltViewModel import androidx.lifecycle.compose.collectAsStateWithLifecycle import com.kevinnzou.web.AccompanistWebChromeClient @@ -43,8 +34,8 @@ import com.kevinnzou.web.WebView import com.kevinnzou.web.rememberWebViewStateWithHTMLData import timber.log.Timber import top.fatweb.oxygen.toolbox.R -import top.fatweb.oxygen.toolbox.icon.Loading import top.fatweb.oxygen.toolbox.icon.OxygenIcons +import top.fatweb.oxygen.toolbox.ui.component.Indicator import top.fatweb.oxygen.toolbox.ui.component.OxygenTopAppBar import top.fatweb.oxygen.toolbox.util.NativeWebApi @@ -76,8 +67,6 @@ internal fun ToolViewScreen( ) { val context = LocalContext.current - val infiniteTransition = rememberInfiniteTransition(label = "infiniteTransition") - Scaffold( modifier = Modifier, containerColor = Color.Transparent, @@ -117,26 +106,7 @@ internal fun ToolViewScreen( ) when (toolViewUiState) { ToolViewUiState.Loading -> { - Column( - modifier = Modifier.fillMaxSize(), - horizontalAlignment = Alignment.CenterHorizontally, - verticalArrangement = Arrangement.Center - ) { - val angle by infiniteTransition.animateFloat( - initialValue = 0F, - targetValue = 360F, - animationSpec = infiniteRepeatable( - animation = tween(durationMillis = 800, easing = Ease), - ), label = "angle" - ) - Icon( - modifier = Modifier - .size(32.dp) - .graphicsLayer { rotationZ = angle }, - imageVector = Loading, - contentDescription = "" - ) - } + Indicator() } ToolViewUiState.Error -> {