From 6dbccb696b2477f4751b65102fde3722a12c2056 Mon Sep 17 00:00:00 2001 From: Benoit Marty Date: Thu, 1 Jun 2023 10:05:12 +0200 Subject: [PATCH] Introduce pages in our design system. --- .idea/dictionaries/shared.xml | 1 + .../onboarding/impl/OnBoardingScreen.kt | 48 ++----- .../atomic/pages/OnBoardingPage.kt | 126 ++++++++++++++++++ .../src/main/res/drawable/onboarding_bg.png | Bin 4 files changed, 140 insertions(+), 35 deletions(-) create mode 100644 libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/atomic/pages/OnBoardingPage.kt rename {features/onboarding/impl => libraries/designsystem}/src/main/res/drawable/onboarding_bg.png (100%) diff --git a/.idea/dictionaries/shared.xml b/.idea/dictionaries/shared.xml index 216a8cbd20..1336863271 100644 --- a/.idea/dictionaries/shared.xml +++ b/.idea/dictionaries/shared.xml @@ -2,6 +2,7 @@ backstack + onboarding textfields diff --git a/features/onboarding/impl/src/main/kotlin/io/element/android/features/onboarding/impl/OnBoardingScreen.kt b/features/onboarding/impl/src/main/kotlin/io/element/android/features/onboarding/impl/OnBoardingScreen.kt index 9623f37ac8..278b01cf50 100644 --- a/features/onboarding/impl/src/main/kotlin/io/element/android/features/onboarding/impl/OnBoardingScreen.kt +++ b/features/onboarding/impl/src/main/kotlin/io/element/android/features/onboarding/impl/OnBoardingScreen.kt @@ -18,14 +18,11 @@ package io.element.android.features.onboarding.impl import androidx.compose.foundation.Image import androidx.compose.foundation.layout.Arrangement -import androidx.compose.foundation.layout.Box import androidx.compose.foundation.layout.Column import androidx.compose.foundation.layout.ColumnScope import androidx.compose.foundation.layout.Spacer -import androidx.compose.foundation.layout.fillMaxSize import androidx.compose.foundation.layout.fillMaxWidth import androidx.compose.foundation.layout.padding -import androidx.compose.foundation.layout.systemBarsPadding import androidx.compose.foundation.layout.width import androidx.compose.material.icons.Icons import androidx.compose.material.icons.filled.QrCode @@ -34,13 +31,13 @@ import androidx.compose.runtime.Composable import androidx.compose.ui.Alignment.Companion.CenterHorizontally import androidx.compose.ui.Modifier import androidx.compose.ui.graphics.ColorFilter -import androidx.compose.ui.layout.ContentScale import androidx.compose.ui.res.painterResource import androidx.compose.ui.res.stringResource import androidx.compose.ui.text.style.TextAlign import androidx.compose.ui.tooling.preview.Preview import androidx.compose.ui.unit.dp import androidx.compose.ui.unit.sp +import io.element.android.libraries.designsystem.atomic.pages.OnBoardingPage import io.element.android.libraries.designsystem.preview.ElementPreviewDark import io.element.android.libraries.designsystem.preview.ElementPreviewLight import io.element.android.libraries.designsystem.theme.components.Button @@ -58,40 +55,21 @@ fun OnBoardingScreen( onSignIn: () -> Unit = {}, onCreateAccount: () -> Unit = {}, ) { - Box( - modifier = modifier - .fillMaxSize() - ) { - // BG - Image( - modifier = modifier - .fillMaxSize(), - painter = painterResource(id = R.drawable.onboarding_bg), - contentScale = ContentScale.Crop, - contentDescription = null, - ) - Column( - modifier = Modifier - .fillMaxSize() - .systemBarsPadding() - .padding(vertical = 16.dp), - ) { - Column( - modifier = Modifier - .weight(1f) - .padding(horizontal = 24.dp) - .fillMaxWidth(), - ) { - Spacer(modifier = Modifier.weight(2f)) - OnBoardingHeader() - Spacer(modifier = Modifier.weight(3f)) - } + OnBoardingPage( + modifier = modifier, + footer = { OnBoardingButtons( onSignInWithQrCode = onSignInWithQrCode, onSignIn = onSignIn, onCreateAccount = onCreateAccount, ) } + ) { + Column(modifier.fillMaxWidth()) { + Spacer(modifier = Modifier.weight(2f)) + OnBoardingHeader() + Spacer(modifier = Modifier.weight(3f)) + } } } @@ -128,11 +106,11 @@ private fun OnBoardingButtons( onSignInWithQrCode: () -> Unit, onSignIn: () -> Unit, onCreateAccount: () -> Unit, + modifier: Modifier = Modifier, ) { Column( - modifier = Modifier - .fillMaxWidth() - .padding(horizontal = 16.dp), + modifier = modifier + .fillMaxWidth(), horizontalAlignment = CenterHorizontally, verticalArrangement = Arrangement.spacedBy(16.dp) ) { diff --git a/libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/atomic/pages/OnBoardingPage.kt b/libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/atomic/pages/OnBoardingPage.kt new file mode 100644 index 0000000000..0e0292957b --- /dev/null +++ b/libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/atomic/pages/OnBoardingPage.kt @@ -0,0 +1,126 @@ +/* + * Copyright (c) 2023 New Vector Ltd + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +package io.element.android.libraries.designsystem.atomic.pages + +import androidx.compose.foundation.Image +import androidx.compose.foundation.layout.Box +import androidx.compose.foundation.layout.Column +import androidx.compose.foundation.layout.fillMaxSize +import androidx.compose.foundation.layout.fillMaxWidth +import androidx.compose.foundation.layout.padding +import androidx.compose.foundation.layout.systemBarsPadding +import androidx.compose.runtime.Composable +import androidx.compose.ui.Alignment +import androidx.compose.ui.Modifier +import androidx.compose.ui.layout.ContentScale +import androidx.compose.ui.res.painterResource +import androidx.compose.ui.tooling.preview.Preview +import androidx.compose.ui.unit.dp +import androidx.compose.ui.unit.sp +import io.element.android.libraries.designsystem.R +import io.element.android.libraries.designsystem.preview.ElementPreviewDark +import io.element.android.libraries.designsystem.preview.ElementPreviewLight +import io.element.android.libraries.designsystem.theme.components.Text + +/** + * Page for onboarding screens, with content and optional footer. + * + * Ref: https://www.figma.com/file/o9p34zmiuEpZRyvZXJZAYL/FTUE?type=design&node-id=133-5427&t=5SHVppfYzjvkEywR-0 + * @param modifier Classical modifier. + * @param footer optional footer. + * @param content main content. + */ +@Composable +fun OnBoardingPage( + modifier: Modifier = Modifier, + footer: @Composable () -> Unit = {}, + content: @Composable () -> Unit = {}, +) { + Box( + modifier = modifier + .fillMaxSize() + ) { + // BG + Image( + modifier = Modifier + .fillMaxSize(), + painter = painterResource(id = R.drawable.onboarding_bg), + contentScale = ContentScale.Crop, + contentDescription = null, + ) + Column( + modifier = Modifier + .fillMaxSize() + .systemBarsPadding() + .padding(vertical = 16.dp), + ) { + // Content + Column( + modifier = Modifier + .weight(1f) + .padding(horizontal = 24.dp) + .fillMaxWidth(), + ) { + content() + } + // Footer + Box(modifier = Modifier.padding(horizontal = 16.dp)) { + footer() + } + } + } +} + +@Preview +@Composable +internal fun OnBoardingPageLightPreview() = + ElementPreviewLight { ContentToPreview() } + +@Preview +@Composable +internal fun OnBoardingPageDarkPreview() = + ElementPreviewDark { ContentToPreview() } + +@Composable +private fun ContentToPreview() { + OnBoardingPage( + content = { + Box( + Modifier + .fillMaxSize(), + contentAlignment = Alignment.Center + ) { + Text( + text = "Content", + fontSize = 40.sp + ) + } + }, + footer = { + Box( + Modifier + .fillMaxWidth(), + contentAlignment = Alignment.Center + ) { + Text( + text = "Footer", + fontSize = 40.sp + ) + } + } + ) +} diff --git a/features/onboarding/impl/src/main/res/drawable/onboarding_bg.png b/libraries/designsystem/src/main/res/drawable/onboarding_bg.png similarity index 100% rename from features/onboarding/impl/src/main/res/drawable/onboarding_bg.png rename to libraries/designsystem/src/main/res/drawable/onboarding_bg.png