Benoit Marty
1 year ago
committed by
Benoit Marty
4 changed files with 140 additions and 35 deletions
@ -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 |
||||||
|
) |
||||||
|
} |
||||||
|
} |
||||||
|
) |
||||||
|
} |
Loading…
Reference in new issue