diff --git a/app/src/main/java/com/aurora/store/compose/composable/Logo.kt b/app/src/main/java/com/aurora/store/compose/composable/Logo.kt new file mode 100644 index 000000000..a790eae2a --- /dev/null +++ b/app/src/main/java/com/aurora/store/compose/composable/Logo.kt @@ -0,0 +1,69 @@ +/* + * SPDX-FileCopyrightText: 2025 The Calyx Institute + * SPDX-License-Identifier: GPL-3.0-or-later + */ + +package com.aurora.store.compose.composable + +import androidx.compose.foundation.layout.Arrangement +import androidx.compose.foundation.layout.Column +import androidx.compose.foundation.layout.fillMaxSize +import androidx.compose.foundation.layout.requiredSize +import androidx.compose.foundation.shape.CircleShape +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.draw.clip +import androidx.compose.ui.layout.ContentScale +import androidx.compose.ui.platform.LocalContext +import androidx.compose.ui.res.dimensionResource +import androidx.compose.ui.res.stringResource +import androidx.compose.ui.text.style.TextOverflow +import androidx.compose.ui.tooling.preview.Preview +import coil3.compose.AsyncImage +import coil3.request.ImageRequest +import com.aurora.store.R +import com.aurora.store.compose.preview.PreviewTemplate + +/** + * Composable to show Aurora Store's logo + */ +@Composable +fun Logo(modifier: Modifier = Modifier) { + Column( + modifier = modifier.fillMaxSize(), + verticalArrangement = Arrangement.spacedBy( + dimensionResource(R.dimen.margin_small), + Alignment.CenterVertically + ), + horizontalAlignment = Alignment.CenterHorizontally + ) { + AsyncImage( + model = ImageRequest.Builder(LocalContext.current) + .data(R.mipmap.ic_launcher) + .build(), + contentDescription = null, + contentScale = ContentScale.Crop, + modifier = Modifier + .requiredSize(dimensionResource(R.dimen.icon_size_avatar)) + .clip(CircleShape) + ) + Text( + text = stringResource(R.string.app_name), + style = MaterialTheme.typography.titleLarge, + maxLines = 1, + overflow = TextOverflow.Ellipsis + ) + } + +} + +@Preview(showBackground = true) +@Composable +private fun LogoPreview() { + PreviewTemplate { + Logo() + } +} diff --git a/app/src/main/java/com/aurora/store/compose/ui/onboarding/OnboardingScreen.kt b/app/src/main/java/com/aurora/store/compose/ui/onboarding/OnboardingScreen.kt index 19392520b..345065396 100644 --- a/app/src/main/java/com/aurora/store/compose/ui/onboarding/OnboardingScreen.kt +++ b/app/src/main/java/com/aurora/store/compose/ui/onboarding/OnboardingScreen.kt @@ -32,6 +32,7 @@ import androidx.compose.ui.tooling.preview.Preview import androidx.hilt.lifecycle.viewmodel.compose.hiltViewModel import com.aurora.extensions.isWindowCompact import com.aurora.store.R +import com.aurora.store.compose.composable.Logo import com.aurora.store.compose.composable.PageIndicator import com.aurora.store.compose.preview.PreviewTemplate import com.aurora.store.compose.ui.onboarding.navigation.OnboardingPage @@ -54,7 +55,8 @@ fun OnboardingScreen(viewModel: OnboardingViewModel = hiltViewModel()) { @Composable private fun ScreenContent( pages: List = emptyList(), - onFinishOnboarding: () -> Unit = {} + onFinishOnboarding: () -> Unit = {}, + windowAdaptiveInfo: WindowAdaptiveInfo = currentWindowAdaptiveInfo() ) { val pagerState = rememberPagerState { pages.size } val coroutineScope = rememberCoroutineScope() @@ -64,7 +66,7 @@ private fun ScreenContent( } @Composable - fun SetupActions(windowAdaptiveInfo: WindowAdaptiveInfo = currentWindowAdaptiveInfo()) { + fun SetupActions() { val horizontalButtonPadding = when { windowAdaptiveInfo.isWindowCompact -> dimensionResource(R.dimen.padding_medium) else -> dimensionResource(R.dimen.padding_xlarge) @@ -77,7 +79,11 @@ private fun ScreenContent( vertical = dimensionResource(R.dimen.padding_medium), horizontal = horizontalButtonPadding ), - horizontalArrangement = Arrangement.spacedBy(dimensionResource(R.dimen.padding_medium)) + verticalAlignment = Alignment.CenterVertically, + horizontalArrangement = Arrangement.spacedBy( + dimensionResource(R.dimen.padding_medium), + Alignment.End + ) ) { val buttonWidthModifier = when { windowAdaptiveInfo.isWindowCompact -> Modifier.weight(1F) @@ -143,18 +149,29 @@ private fun ScreenContent( ) { paddingValues -> Column( modifier = Modifier - .padding(paddingValues) - .fillMaxSize(), - verticalArrangement = Arrangement.SpaceBetween + .fillMaxSize() + .padding(paddingValues), + verticalArrangement = Arrangement.Center, + horizontalAlignment = Alignment.CenterHorizontally ) { - HorizontalPager( + Row( modifier = Modifier.weight(1F), - state = pagerState, - verticalAlignment = Alignment.Top - ) { page -> - when (pages[page]) { - OnboardingPage.WELCOME -> WelcomePage() - OnboardingPage.PERMISSIONS -> PermissionsPage() + horizontalArrangement = Arrangement.Center, + verticalAlignment = Alignment.CenterVertically + ) { + if (!windowAdaptiveInfo.isWindowCompact) { + Logo(modifier = Modifier.weight(1F)) + } + + HorizontalPager( + modifier = Modifier.weight(1F), + state = pagerState, + verticalAlignment = Alignment.Top + ) { page -> + when (pages[page]) { + OnboardingPage.WELCOME -> WelcomePage() + OnboardingPage.PERMISSIONS -> PermissionsPage() + } } }