From c2cca01b3b104b95a8b4407532aaab3821677a98 Mon Sep 17 00:00:00 2001 From: Arnau Mora Date: Tue, 25 Jun 2024 11:56:58 +0200 Subject: [PATCH] Moved intro composables together Signed-off-by: Arnau Mora Gras --- .../davdroid/ui/composable/ButtonWithIcon.kt | 63 --------- .../ui/composable/PositionIndicator.kt | 85 ------------ .../bitfire/davdroid/ui/intro/IntroScreen.kt | 131 +++++++++++++++++- 3 files changed, 129 insertions(+), 150 deletions(-) delete mode 100644 app/src/main/kotlin/at/bitfire/davdroid/ui/composable/ButtonWithIcon.kt delete mode 100644 app/src/main/kotlin/at/bitfire/davdroid/ui/composable/PositionIndicator.kt diff --git a/app/src/main/kotlin/at/bitfire/davdroid/ui/composable/ButtonWithIcon.kt b/app/src/main/kotlin/at/bitfire/davdroid/ui/composable/ButtonWithIcon.kt deleted file mode 100644 index 0cc33ba9..00000000 --- a/app/src/main/kotlin/at/bitfire/davdroid/ui/composable/ButtonWithIcon.kt +++ /dev/null @@ -1,63 +0,0 @@ -package at.bitfire.davdroid.ui.composable - -import androidx.compose.animation.AnimatedContent -import androidx.compose.foundation.layout.aspectRatio -import androidx.compose.foundation.layout.padding -import androidx.compose.foundation.layout.size -import androidx.compose.foundation.shape.CircleShape -import androidx.compose.material.icons.Icons -import androidx.compose.material.icons.automirrored.filled.ArrowForward -import androidx.compose.material3.Icon -import androidx.compose.material3.MaterialTheme -import androidx.compose.material3.Surface -import androidx.compose.material3.contentColorFor -import androidx.compose.runtime.Composable -import androidx.compose.ui.Modifier -import androidx.compose.ui.graphics.Color -import androidx.compose.ui.graphics.vector.ImageVector -import androidx.compose.ui.tooling.preview.Preview -import androidx.compose.ui.unit.Dp -import androidx.compose.ui.unit.dp -import at.bitfire.davdroid.ui.AppTheme - -@Composable -fun ButtonWithIcon( - icon: ImageVector, - contentDescription: String?, - modifier: Modifier = Modifier, - size: Dp = 56.dp, - color: Color = MaterialTheme.colorScheme.tertiary, - onClick: () -> Unit -) { - Surface( - color = color, - contentColor = contentColorFor(backgroundColor = color), - modifier = modifier - .size(size) - .aspectRatio(1f), - onClick = onClick, - shape = CircleShape - ) { - AnimatedContent( - targetState = icon, - label = "Button Icon" - ) { - Icon( - imageVector = it, - contentDescription = contentDescription, - modifier = Modifier.padding(12.dp) - ) - } - } -} - -@Preview -@Composable -fun ButtonWithIcon_Preview() { - AppTheme { - ButtonWithIcon( - icon = Icons.AutoMirrored.Filled.ArrowForward, - contentDescription = null - ) { } - } -} diff --git a/app/src/main/kotlin/at/bitfire/davdroid/ui/composable/PositionIndicator.kt b/app/src/main/kotlin/at/bitfire/davdroid/ui/composable/PositionIndicator.kt deleted file mode 100644 index cecce1de..00000000 --- a/app/src/main/kotlin/at/bitfire/davdroid/ui/composable/PositionIndicator.kt +++ /dev/null @@ -1,85 +0,0 @@ -package at.bitfire.davdroid.ui.composable - -import androidx.compose.animation.core.animateFloatAsState -import androidx.compose.foundation.Canvas -import androidx.compose.foundation.clickable -import androidx.compose.foundation.layout.height -import androidx.compose.foundation.layout.width -import androidx.compose.material3.MaterialTheme -import androidx.compose.material3.contentColorFor -import androidx.compose.runtime.Composable -import androidx.compose.runtime.getValue -import androidx.compose.runtime.mutableIntStateOf -import androidx.compose.runtime.remember -import androidx.compose.runtime.setValue -import androidx.compose.ui.Modifier -import androidx.compose.ui.geometry.Offset -import androidx.compose.ui.graphics.Color -import androidx.compose.ui.graphics.drawscope.translate -import androidx.compose.ui.tooling.preview.Preview -import androidx.compose.ui.unit.dp - -@Composable -fun PositionIndicator( - index: Int, - max: Int, - modifier: Modifier = Modifier, - selectedIndicatorColor: Color = MaterialTheme.colorScheme.tertiary, - unselectedIndicatorColor: Color = contentColorFor(selectedIndicatorColor), - indicatorSize: Float = 20f, - indicatorPadding: Float = 20f -) { - val selectedPosition by animateFloatAsState( - targetValue = index.toFloat(), - label = "position" - ) - - Canvas(modifier = modifier) { - // idx * indicatorSize * 2 + idx * indicatorPadding + indicatorSize - // idx * (indicatorSize * 2 + indicatorPadding) + indicatorSize - val padding = indicatorSize * 2 + indicatorPadding - - val totalWidth = indicatorSize * 2 * max + indicatorPadding * (max - 1) - translate( - left = size.width / 2 - totalWidth / 2 - ) { - for (idx in 0 until max) { - drawCircle( - color = unselectedIndicatorColor, - radius = indicatorSize, - center = Offset( - x = idx * padding + indicatorSize, - y = size.height / 2 - ) - ) - } - - drawCircle( - color = selectedIndicatorColor, - radius = indicatorSize, - center = Offset( - x = selectedPosition * padding + indicatorSize, - y = size.height / 2 - ) - ) - } - } -} - -@Preview( - showBackground = true, - backgroundColor = 0xff000000 -) -@Composable -fun PositionIndicator_Preview() { - var index by remember { mutableIntStateOf(0) } - - PositionIndicator( - index = index, - max = 5, - modifier = Modifier - .width(200.dp) - .height(50.dp) - .clickable { if (index == 4) index = 0 else index++ } - ) -} diff --git a/app/src/main/kotlin/at/bitfire/davdroid/ui/intro/IntroScreen.kt b/app/src/main/kotlin/at/bitfire/davdroid/ui/intro/IntroScreen.kt index 00139a19..0828039f 100644 --- a/app/src/main/kotlin/at/bitfire/davdroid/ui/intro/IntroScreen.kt +++ b/app/src/main/kotlin/at/bitfire/davdroid/ui/intro/IntroScreen.kt @@ -1,32 +1,50 @@ package at.bitfire.davdroid.ui.intro +import androidx.compose.animation.AnimatedContent +import androidx.compose.animation.core.animateFloatAsState +import androidx.compose.foundation.Canvas import androidx.compose.foundation.ExperimentalFoundationApi import androidx.compose.foundation.background +import androidx.compose.foundation.clickable import androidx.compose.foundation.layout.Box import androidx.compose.foundation.layout.Column +import androidx.compose.foundation.layout.aspectRatio 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.size +import androidx.compose.foundation.layout.width import androidx.compose.foundation.pager.HorizontalPager import androidx.compose.foundation.pager.PagerState import androidx.compose.foundation.pager.rememberPagerState +import androidx.compose.foundation.shape.CircleShape import androidx.compose.material.icons.Icons import androidx.compose.material.icons.automirrored.filled.ArrowForward import androidx.compose.material.icons.filled.Check +import androidx.compose.material3.Icon import androidx.compose.material3.MaterialTheme +import androidx.compose.material3.Surface +import androidx.compose.material3.contentColorFor import androidx.compose.runtime.Composable +import androidx.compose.runtime.getValue +import androidx.compose.runtime.mutableIntStateOf +import androidx.compose.runtime.remember import androidx.compose.runtime.rememberCoroutineScope +import androidx.compose.runtime.setValue import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier +import androidx.compose.ui.geometry.Offset +import androidx.compose.ui.graphics.Color +import androidx.compose.ui.graphics.drawscope.translate +import androidx.compose.ui.graphics.vector.ImageVector import androidx.compose.ui.res.stringResource import androidx.compose.ui.tooling.preview.Preview +import androidx.compose.ui.unit.Dp import androidx.compose.ui.unit.dp import at.bitfire.davdroid.R import at.bitfire.davdroid.ui.AppTheme -import at.bitfire.davdroid.ui.composable.ButtonWithIcon -import at.bitfire.davdroid.ui.composable.PositionIndicator import kotlinx.coroutines.launch @Composable @@ -126,3 +144,112 @@ fun IntroScreen_Preview() { ) } } + + +@Composable +fun PositionIndicator( + index: Int, + max: Int, + modifier: Modifier = Modifier, + selectedIndicatorColor: Color = MaterialTheme.colorScheme.tertiary, + unselectedIndicatorColor: Color = contentColorFor(selectedIndicatorColor), + indicatorSize: Float = 20f, + indicatorPadding: Float = 20f +) { + val selectedPosition by animateFloatAsState( + targetValue = index.toFloat(), + label = "position" + ) + + Canvas(modifier = modifier) { + // idx * indicatorSize * 2 + idx * indicatorPadding + indicatorSize + // idx * (indicatorSize * 2 + indicatorPadding) + indicatorSize + val padding = indicatorSize * 2 + indicatorPadding + + val totalWidth = indicatorSize * 2 * max + indicatorPadding * (max - 1) + translate( + left = size.width / 2 - totalWidth / 2 + ) { + for (idx in 0 until max) { + drawCircle( + color = unselectedIndicatorColor, + radius = indicatorSize, + center = Offset( + x = idx * padding + indicatorSize, + y = size.height / 2 + ) + ) + } + + drawCircle( + color = selectedIndicatorColor, + radius = indicatorSize, + center = Offset( + x = selectedPosition * padding + indicatorSize, + y = size.height / 2 + ) + ) + } + } +} + +@Preview( + showBackground = true, + backgroundColor = 0xff000000 +) +@Composable +fun PositionIndicator_Preview() { + var index by remember { mutableIntStateOf(0) } + + PositionIndicator( + index = index, + max = 5, + modifier = Modifier + .width(200.dp) + .height(50.dp) + .clickable { if (index == 4) index = 0 else index++ } + ) +} + + +@Composable +fun ButtonWithIcon( + icon: ImageVector, + contentDescription: String?, + modifier: Modifier = Modifier, + size: Dp = 56.dp, + color: Color = MaterialTheme.colorScheme.tertiary, + onClick: () -> Unit +) { + Surface( + color = color, + contentColor = contentColorFor(backgroundColor = color), + modifier = modifier + .size(size) + .aspectRatio(1f), + onClick = onClick, + shape = CircleShape + ) { + AnimatedContent( + targetState = icon, + label = "Button Icon" + ) { + Icon( + imageVector = it, + contentDescription = contentDescription, + modifier = Modifier.padding(12.dp) + ) + } + } +} + +@Preview +@Composable +fun ButtonWithIcon_Preview() { + AppTheme { + ButtonWithIcon( + icon = Icons.AutoMirrored.Filled.ArrowForward, + contentDescription = null + ) { } + } +}