From 83a700877b48658aea8f39169c40699ed8569fc7 Mon Sep 17 00:00:00 2001 From: Benoit Marty Date: Mon, 5 Jun 2023 12:44:51 +0200 Subject: [PATCH] Introduce IconTitleSubtitleMolecule. --- .../impl/VerifySelfSessionView.kt | 54 ++------- .../molecules/IconTitleSubtitleMolecule.kt | 105 ++++++++++++++++++ 2 files changed, 112 insertions(+), 47 deletions(-) create mode 100644 libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/atomic/molecules/IconTitleSubtitleMolecule.kt diff --git a/features/verifysession/impl/src/main/kotlin/io/element/android/features/verifysession/impl/VerifySelfSessionView.kt b/features/verifysession/impl/src/main/kotlin/io/element/android/features/verifysession/impl/VerifySelfSessionView.kt index a3f3116c84..081da5d84e 100644 --- a/features/verifysession/impl/src/main/kotlin/io/element/android/features/verifysession/impl/VerifySelfSessionView.kt +++ b/features/verifysession/impl/src/main/kotlin/io/element/android/features/verifysession/impl/VerifySelfSessionView.kt @@ -17,19 +17,15 @@ package io.element.android.features.verifysession.impl import androidx.activity.compose.BackHandler -import androidx.compose.foundation.background import androidx.compose.foundation.layout.Arrangement -import androidx.compose.foundation.layout.Box import androidx.compose.foundation.layout.Column import androidx.compose.foundation.layout.Row import androidx.compose.foundation.layout.Spacer import androidx.compose.foundation.layout.fillMaxWidth import androidx.compose.foundation.layout.height import androidx.compose.foundation.layout.padding -import androidx.compose.foundation.layout.size import androidx.compose.foundation.layout.systemBarsPadding import androidx.compose.foundation.layout.widthIn -import androidx.compose.foundation.shape.RoundedCornerShape import androidx.compose.material3.MaterialTheme import androidx.compose.material3.TextButton import androidx.compose.runtime.Composable @@ -41,7 +37,6 @@ import androidx.compose.ui.Modifier import androidx.compose.ui.composed import androidx.compose.ui.platform.LocalConfiguration import androidx.compose.ui.res.stringResource -import androidx.compose.ui.text.style.TextAlign import androidx.compose.ui.text.style.TextOverflow import androidx.compose.ui.tooling.preview.Preview import androidx.compose.ui.tooling.preview.PreviewParameter @@ -51,12 +46,11 @@ import androidx.compose.ui.unit.sp import io.element.android.libraries.architecture.Async import io.element.android.libraries.designsystem.ElementTextStyles import io.element.android.libraries.designsystem.atomic.molecules.ButtonColumnMolecule +import io.element.android.libraries.designsystem.atomic.molecules.IconTitleSubtitleMolecule import io.element.android.libraries.designsystem.components.button.ButtonWithProgress import io.element.android.libraries.designsystem.preview.ElementPreviewDark import io.element.android.libraries.designsystem.preview.ElementPreviewLight -import io.element.android.libraries.designsystem.theme.LocalColors import io.element.android.libraries.designsystem.theme.components.CircularProgressIndicator -import io.element.android.libraries.designsystem.theme.components.Icon import io.element.android.libraries.designsystem.theme.components.Surface import io.element.android.libraries.designsystem.theme.components.Text import io.element.android.libraries.matrix.api.verification.VerificationEmoji @@ -125,46 +119,12 @@ internal fun HeaderContent(verificationFlowStep: FlowStep, modifier: Modifier = FlowStep.Ready, is FlowStep.Verifying, FlowStep.Completed -> R.string.screen_session_verification_compare_emojis_subtitle } - Column(modifier) { - Spacer(Modifier.height(80.dp)) - Box( - modifier = Modifier - .size(width = 70.dp, height = 70.dp) - .align(Alignment.CenterHorizontally) - .background( - color = LocalColors.current.quinary, - shape = RoundedCornerShape(14.dp) - ) - ) { - Spacer(modifier = Modifier.height(68.dp)) - Icon( - modifier = Modifier - .align(Alignment.Center) - .size(width = 48.dp, height = 48.dp), - tint = MaterialTheme.colorScheme.secondary, - resourceId = iconResourceId, - contentDescription = "", - ) - } - Spacer(modifier = Modifier.height(16.dp)) - Text( - text = stringResource(id = titleTextId), - modifier = Modifier - .fillMaxWidth() - .align(Alignment.CenterHorizontally), - textAlign = TextAlign.Center, - style = ElementTextStyles.Bold.title2, - color = MaterialTheme.colorScheme.primary, - ) - Spacer(Modifier.height(8.dp)) - Text( - text = stringResource(id = subtitleTextId), - modifier = Modifier.fillMaxWidth(), - textAlign = TextAlign.Center, - style = ElementTextStyles.Regular.subheadline, - color = MaterialTheme.colorScheme.secondary, - ) - } + IconTitleSubtitleMolecule( + modifier = modifier.padding(top = 80.dp), + iconResourceId = iconResourceId, + title = stringResource(id = titleTextId), + subTitle = stringResource(id = subtitleTextId) + ) } @Composable diff --git a/libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/atomic/molecules/IconTitleSubtitleMolecule.kt b/libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/atomic/molecules/IconTitleSubtitleMolecule.kt new file mode 100644 index 0000000000..bda10b8ba2 --- /dev/null +++ b/libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/atomic/molecules/IconTitleSubtitleMolecule.kt @@ -0,0 +1,105 @@ +/* + * 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.molecules + +import androidx.compose.foundation.background +import androidx.compose.foundation.layout.Box +import androidx.compose.foundation.layout.Column +import androidx.compose.foundation.layout.Spacer +import androidx.compose.foundation.layout.fillMaxWidth +import androidx.compose.foundation.layout.height +import androidx.compose.foundation.layout.size +import androidx.compose.foundation.shape.RoundedCornerShape +import androidx.compose.material3.MaterialTheme +import androidx.compose.runtime.Composable +import androidx.compose.ui.Alignment +import androidx.compose.ui.Modifier +import androidx.compose.ui.text.style.TextAlign +import androidx.compose.ui.tooling.preview.Preview +import androidx.compose.ui.unit.dp +import io.element.android.libraries.designsystem.ElementTextStyles +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.LocalColors +import io.element.android.libraries.designsystem.theme.components.Icon +import io.element.android.libraries.designsystem.theme.components.Text + +@Composable +fun IconTitleSubtitleMolecule( + iconResourceId: Int, + title: String, + subTitle: String, + modifier: Modifier = Modifier, +) { + Column(modifier) { + Box( + modifier = Modifier + .size(width = 70.dp, height = 70.dp) + .align(Alignment.CenterHorizontally) + .background( + color = LocalColors.current.quinary, + shape = RoundedCornerShape(14.dp) + ) + ) { + Icon( + modifier = Modifier + .align(Alignment.Center) + .size(width = 48.dp, height = 48.dp), + tint = MaterialTheme.colorScheme.secondary, + resourceId = iconResourceId, + contentDescription = "", + ) + } + Spacer(modifier = Modifier.height(16.dp)) + Text( + text = title, + modifier = Modifier + .fillMaxWidth(), + textAlign = TextAlign.Center, + style = ElementTextStyles.Bold.title2, + color = MaterialTheme.colorScheme.primary, + ) + Spacer(Modifier.height(8.dp)) + Text( + text = subTitle, + modifier = Modifier.fillMaxWidth(), + textAlign = TextAlign.Center, + style = ElementTextStyles.Regular.subheadline, + color = MaterialTheme.colorScheme.secondary, + ) + } +} + +@Preview +@Composable +internal fun IconTitleSubtitleMoleculeLightPreview() = + ElementPreviewLight { ContentToPreview() } + +@Preview +@Composable +internal fun IconTitleSubtitleMoleculeDarkPreview() = + ElementPreviewDark { ContentToPreview() } + +@Composable +private fun ContentToPreview() { + IconTitleSubtitleMolecule( + iconResourceId = R.drawable.ic_edit, + title = "Title", + subTitle = "Sub iitle", + ) +}