mobile/davx5-ose
mobile/davx5-ose
1
0
Fork 0
mirror of https://github.com/bitfireAT/davx5-ose synced 2024-10-01 17:00:45 +00:00
Code Issues Packages Projects Releases Wiki Activity

Moved intro composables together

Browse source 
Signed-off-by: Arnau Mora Gras <arnyminerz@proton.me>
This commit is contained in:
Arnau Mora 2024-06-25 11:56:58 +02:00 committed by Ricki Hirner
parent 3027feb18d
commit c2cca01b3b
3 changed files with 129 additions and 150 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

63
app/src/main/kotlin/at/bitfire/davdroid/ui/composable/ButtonWithIcon.kt
View file

@ -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
) { }
}
}

85
app/src/main/kotlin/at/bitfire/davdroid/ui/composable/PositionIndicator.kt
View file

@ -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++ }
)
}

131
app/src/main/kotlin/at/bitfire/davdroid/ui/intro/IntroScreen.kt
View file

@ -1,32 +1,50 @@
package at.bitfire.davdroid.ui.intro 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.ExperimentalFoundationApi
import androidx.compose.foundation.background import androidx.compose.foundation.background
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.Box import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.aspectRatio
import androidx.compose.foundation.layout.fillMaxHeight import androidx.compose.foundation.layout.fillMaxHeight
import androidx.compose.foundation.layout.fillMaxSize import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding 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.HorizontalPager
import androidx.compose.foundation.pager.PagerState import androidx.compose.foundation.pager.PagerState
import androidx.compose.foundation.pager.rememberPagerState import androidx.compose.foundation.pager.rememberPagerState
import androidx.compose.foundation.shape.CircleShape
import androidx.compose.material.icons.Icons import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.automirrored.filled.ArrowForward import androidx.compose.material.icons.automirrored.filled.ArrowForward
import androidx.compose.material.icons.filled.Check import androidx.compose.material.icons.filled.Check
import androidx.compose.material3.Icon
import androidx.compose.material3.MaterialTheme import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Surface
import androidx.compose.material3.contentColorFor
import androidx.compose.runtime.Composable 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.rememberCoroutineScope
import androidx.compose.runtime.setValue
import androidx.compose.ui.Alignment import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier 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.res.stringResource
import androidx.compose.ui.tooling.preview.Preview import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.Dp
import androidx.compose.ui.unit.dp import androidx.compose.ui.unit.dp
import at.bitfire.davdroid.R import at.bitfire.davdroid.R
import at.bitfire.davdroid.ui.AppTheme import at.bitfire.davdroid.ui.AppTheme
import at.bitfire.davdroid.ui.composable.ButtonWithIcon
import at.bitfire.davdroid.ui.composable.PositionIndicator
import kotlinx.coroutines.launch import kotlinx.coroutines.launch
@Composable @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
) { }
}
}