diff --git a/app/src/main/java/com/moscow/tudee/presentation/screen/onboarding/OnboardingScreen.kt b/app/src/main/java/com/moscow/tudee/presentation/screen/onboarding/OnboardingScreen.kt index 7c1e8463..28d20cd6 100644 --- a/app/src/main/java/com/moscow/tudee/presentation/screen/onboarding/OnboardingScreen.kt +++ b/app/src/main/java/com/moscow/tudee/presentation/screen/onboarding/OnboardingScreen.kt @@ -2,13 +2,15 @@ package com.moscow.tudee.presentation.screen.onboarding import androidx.compose.foundation.Image import androidx.compose.foundation.background +import androidx.compose.foundation.clickable import androidx.compose.foundation.isSystemInDarkTheme import androidx.compose.foundation.layout.Box import androidx.compose.foundation.layout.Column import androidx.compose.foundation.layout.fillMaxSize +import androidx.compose.foundation.layout.navigationBarsPadding import androidx.compose.foundation.layout.padding +import androidx.compose.foundation.layout.statusBarsPadding import androidx.compose.foundation.pager.rememberPagerState -import androidx.compose.material3.TextButton import androidx.compose.runtime.Composable import androidx.compose.runtime.getValue import androidx.compose.runtime.rememberCoroutineScope @@ -42,56 +44,57 @@ fun OnboardingScreen( val pages = provideOnboardingPages() - val pagerState = rememberPagerState(pageCount = { pages.size }) + val pagerState = rememberPagerState(initialPage = 0, pageCount = { pages.size }) - Box( + Box( + modifier = Modifier + .fillMaxSize() + .statusBarsPadding() + .navigationBarsPadding() + ) { + Column( modifier = Modifier .fillMaxSize() + .background(colors.surface) + .background(colors.overlay) ) { - Column( - modifier = Modifier - .fillMaxSize() - .background(colors.surface) - .background(colors.overlay) - ) { - if (pagerState.currentPage != pages.lastIndex) { - TextButton( - modifier = Modifier - .padding(top = 56.dp) - .align(Alignment.Start), - onClick = onFinish - ) { - TudeeText( - text = stringResource(R.string.skip), - style = Theme.textStyle.label.large, - color = colors.primary - ) + OnboardingPager( + pages = pages, + pagerState = pagerState, + onComplete = { + scope.launch { + viewModel.setOnboardingSeen(true) + onFinish() } } + ) + } - OnboardingPager( - pages = pages, - onComplete = { - scope.launch { - viewModel.setOnboardingSeen(true) - onFinish() - } - } - ) - } - Image( - painter = painterResource( - id = if (state.isSystemDark ?: isSystemInDarkTheme()) { - R.drawable.background_splash_dark - } else { - R.drawable.background_splash_light - } - ), - contentDescription = stringResource(R.string.splash_background), - contentScale = ContentScale.Crop, - modifier = Modifier.fillMaxSize() + Image( + painter = painterResource( + id = if (state.isSystemDark ?: isSystemInDarkTheme()) { + R.drawable.background_splash_dark + } else { + R.drawable.background_splash_light + } + ), + contentDescription = stringResource(R.string.splash_background), + contentScale = ContentScale.Crop, + modifier = Modifier.fillMaxSize() + ) + + if (pagerState.currentPage != pages.lastIndex) { + TudeeText( + text = stringResource(R.string.skip), + style = Theme.textStyle.label.large, + color = colors.primary, + modifier = Modifier + .padding(top = 16.dp, start = 16.dp) + .align(Alignment.TopStart) + .clickable(onClick = onFinish) ) } + } } @Preview diff --git a/app/src/main/java/com/moscow/tudee/presentation/screen/onboarding/components/DotsIndicator.kt b/app/src/main/java/com/moscow/tudee/presentation/screen/onboarding/components/DotsIndicator.kt index c1322e8a..e3f64fa2 100644 --- a/app/src/main/java/com/moscow/tudee/presentation/screen/onboarding/components/DotsIndicator.kt +++ b/app/src/main/java/com/moscow/tudee/presentation/screen/onboarding/components/DotsIndicator.kt @@ -7,7 +7,7 @@ import androidx.compose.foundation.layout.Row import androidx.compose.foundation.layout.fillMaxWidth import androidx.compose.foundation.layout.height import androidx.compose.foundation.layout.padding -import androidx.compose.foundation.shape.RoundedCornerShape +import androidx.compose.foundation.shape.CircleShape import androidx.compose.runtime.Composable import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier @@ -39,7 +39,7 @@ fun DotsIndicator( modifier = Modifier .weight(1f) .height(dotHeight) - .clip(RoundedCornerShape(100.dp)) + .clip(CircleShape) .background(if (index == selectedIndex) selectedColor else unSelectedColor) ) } diff --git a/app/src/main/java/com/moscow/tudee/presentation/screen/onboarding/components/OnboardingPager.kt b/app/src/main/java/com/moscow/tudee/presentation/screen/onboarding/components/OnboardingPager.kt index 1c3697e2..3d0db205 100644 --- a/app/src/main/java/com/moscow/tudee/presentation/screen/onboarding/components/OnboardingPager.kt +++ b/app/src/main/java/com/moscow/tudee/presentation/screen/onboarding/components/OnboardingPager.kt @@ -1,9 +1,12 @@ package com.moscow.tudee.presentation.screen.onboarding.components -import androidx.compose.foundation.layout.* import androidx.compose.foundation.layout.Arrangement +import androidx.compose.foundation.layout.Column +import androidx.compose.foundation.layout.Row +import androidx.compose.foundation.layout.fillMaxWidth +import androidx.compose.foundation.layout.padding import androidx.compose.foundation.pager.HorizontalPager -import androidx.compose.foundation.pager.rememberPagerState +import androidx.compose.foundation.pager.PagerState import androidx.compose.runtime.Composable import androidx.compose.runtime.rememberCoroutineScope import androidx.compose.ui.Alignment @@ -15,10 +18,10 @@ import kotlinx.coroutines.launch @Composable fun OnboardingPager( pages: List, + pagerState: PagerState, onComplete: () -> Unit ) { val scope = rememberCoroutineScope() - val pagerState = rememberPagerState(initialPage = 0) { pages.size } Column { HorizontalPager( @@ -29,6 +32,7 @@ fun OnboardingPager( page = pages[index], ) } + OnboardingItem( data = pages[pagerState.currentPage], onNext = { @@ -42,6 +46,7 @@ fun OnboardingPager( } } ) + Row( modifier = Modifier .fillMaxWidth()