diff --git a/demo/src/main/java/com/orange/ods/demo/ui/components/banners/ComponentBanners.kt b/demo/src/main/java/com/orange/ods/demo/ui/components/banners/ComponentBanners.kt index 022ea53ff..7da8dc2bf 100644 --- a/demo/src/main/java/com/orange/ods/demo/ui/components/banners/ComponentBanners.kt +++ b/demo/src/main/java/com/orange/ods/demo/ui/components/banners/ComponentBanners.kt @@ -16,6 +16,7 @@ import androidx.compose.material.ExperimentalMaterialApi import androidx.compose.material.rememberBottomSheetScaffoldState import androidx.compose.runtime.Composable import androidx.compose.ui.Modifier +import androidx.compose.ui.platform.LocalContext import androidx.compose.ui.res.dimensionResource import androidx.compose.ui.res.painterResource import androidx.compose.ui.res.stringResource @@ -26,6 +27,7 @@ import com.orange.ods.compose.component.list.OdsSwitchTrailing import com.orange.ods.demo.R import com.orange.ods.demo.ui.components.utilities.ComponentCountRow import com.orange.ods.demo.ui.components.utilities.ComponentCustomizationBottomSheetScaffold +import com.orange.ods.demo.ui.components.utilities.clickOnElement import com.orange.ods.demo.ui.utilities.composable.CodeImplementationColumn import com.orange.ods.demo.ui.utilities.composable.CommonTechnicalTextColumn import com.orange.ods.demo.ui.utilities.composable.TechnicalText @@ -60,17 +62,21 @@ fun ComponentBanners() { ) OdsListItem( text = stringResource(id = R.string.component_banner_image), - trailing = OdsSwitchTrailing(checked = iconChecked, enabled = hasTwoTextLines) + trailing = OdsSwitchTrailing(checked = iconChecked) ) } ) { + val context = LocalContext.current + val button1Text = stringResource(id = R.string.component_element_button1) + val button2Text = stringResource(id = R.string.component_element_button2) Column { OdsBanner( message = if (hasTwoTextLines) stringResource(id = R.string.component_banner_two_line_text) else stringResource(id = R.string.component_banner_one_line_text), button1Text = stringResource(id = R.string.component_snackbar_action_label), - button2Text = if (hasTwoTextLines && hasButton2) stringResource(id = R.string.component_snackbar_action_label) else null, - actionOnNewLine = !hasTwoTextLines, + button2Text = if (hasButton2) stringResource(id = R.string.component_snackbar_action_label) else null, image = if (hasIcon) painterResource(id = com.orange.ods.R.drawable.placeholder) else null, + onButton1Click = { clickOnElement(context, button1Text) }, + onButton2Click = { clickOnElement(context, button2Text) }, ) CodeImplementationColumn { @@ -80,6 +86,8 @@ fun ComponentBanners() { if (hasTwoTextLines) TechnicalText(text = " message = \"${stringResource(id = R.string.component_banner_two_line_text)}\"") else TechnicalText(text = " message = \"${stringResource(id = R.string.component_banner_one_line_text)}\"") if (hasIcon) TechnicalText(text = " image = painterResource(id = R.drawable.placeholder)") + TechnicalText(text = " button1Text = \"${stringResource(id = R.string.component_snackbar_action_label)}\"") + if (hasButton2) TechnicalText(text = " button2Text = \"${stringResource(id = R.string.component_snackbar_action_label)}\"") } } } diff --git a/lib/src/main/java/com/orange/ods/compose/component/banner/OdsBanner.kt b/lib/src/main/java/com/orange/ods/compose/component/banner/OdsBanner.kt index 4f0bca7c7..6753ab709 100644 --- a/lib/src/main/java/com/orange/ods/compose/component/banner/OdsBanner.kt +++ b/lib/src/main/java/com/orange/ods/compose/component/banner/OdsBanner.kt @@ -11,13 +11,11 @@ package com.orange.ods.compose.component.banner import androidx.compose.foundation.Image -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.layout.size -import androidx.compose.foundation.layout.width import androidx.compose.foundation.shape.CircleShape import androidx.compose.material.Divider import androidx.compose.material.Text @@ -36,6 +34,7 @@ import com.orange.ods.R import com.orange.ods.compose.component.OdsComponentApi import com.orange.ods.compose.component.button.OdsTextButton import com.orange.ods.compose.component.button.OdsTextButtonStyle +import com.orange.ods.compose.component.divider.OdsDivider import com.orange.ods.compose.component.utilities.BasicPreviewParameterProvider import com.orange.ods.compose.component.utilities.Preview import com.orange.ods.compose.component.utilities.UiModePreviews @@ -53,7 +52,6 @@ import com.orange.ods.compose.theme.OdsTheme * @param imageContentDescription Optional image content description. * @param button2Text Optional text of the second button in the banner. If not present, button will not be shown. If present, [onButton2Click] need to be handle. * @param onButton2Click Optional handler for the button2 click. - * @param actionOnNewLine whether or not action should be put on the separate line. */ @Composable @OdsComponentApi @@ -65,9 +63,9 @@ fun OdsBanner( image: Painter? = null, imageContentDescription: String? = null, button2Text: String? = null, - onButton2Click: (() -> Unit)? = null, - actionOnNewLine: Boolean = false + onButton2Click: (() -> Unit)? = null ) { + val isSingleLineBanner = image == null && button2Text == null Column( modifier = modifier .fillMaxWidth() @@ -77,52 +75,43 @@ fun OdsBanner( modifier = Modifier .fillMaxWidth() .padding( - top = dimensionResource(id = R.dimen.spacing_m), + top = if (isSingleLineBanner) dimensionResource(id = R.dimen.spacing_s) else dimensionResource(id = R.dimen.spacing_l), bottom = dimensionResource(id = R.dimen.spacing_s) - ), - horizontalArrangement = Arrangement.SpaceBetween, + ) + .padding(horizontal = dimensionResource(id = R.dimen.spacing_m)) ) { - if (!actionOnNewLine) { - image?.let { - Image( - painter = image, - contentDescription = imageContentDescription, - contentScale = ContentScale.Crop,// crop the image if it's not a square - modifier = Modifier - .padding(start = dimensionResource(id = R.dimen.spacing_m)) - .size(40.dp) - .clip(CircleShape) - ) - } - } - Text( - modifier = Modifier - .padding( - start = dimensionResource(id = R.dimen.spacing_m), - end = dimensionResource(id = R.dimen.spacing_s) - ), - text = message, - style = OdsTheme.typography.body2, - color = OdsTheme.colors.onSurface, - maxLines = 2, - overflow = TextOverflow.Ellipsis - ) - if (actionOnNewLine) { - Row( + image?.let { + Image( + painter = image, + contentDescription = imageContentDescription, + contentScale = ContentScale.Crop,// crop the image if it's not a square modifier = Modifier - .width(250.dp), - horizontalArrangement = Arrangement.End, - ) { + .padding(end = dimensionResource(id = R.dimen.spacing_m)) + .size(40.dp) + .clip(CircleShape), + ) + } + Row(verticalAlignment = Alignment.CenterVertically) { + Text( + modifier = Modifier.weight(1f), + text = message, + style = OdsTheme.typography.body2, + color = OdsTheme.colors.onSurface, + maxLines = 2, + overflow = TextOverflow.Ellipsis + ) + if (isSingleLineBanner) { OdsTextButton( - modifier = Modifier.padding(end = dimensionResource(id = R.dimen.spacing_s)), + modifier = Modifier + .padding(start = dimensionResource(id = R.dimen.spacing_s)), style = OdsTextButtonStyle.Primary, - text = button1Text.uppercase(), + text = button1Text, onClick = onButton1Click ) } } } - if (!actionOnNewLine) { + if (!isSingleLineBanner) { Row( modifier = Modifier .padding(bottom = dimensionResource(id = R.dimen.spacing_s)) @@ -144,22 +133,10 @@ fun OdsBanner( } } } - Divider() + OdsDivider() } } -@UiModePreviews.Default -@Composable -private fun PreviewOdsBanner(@PreviewParameter(OdsBannerPreviewParameterProvider::class) actionOnNewLine: Boolean) = Preview { - OdsBanner( - message = "Two lines text string with two actions.", modifier = Modifier, - button1Text = "Action", - image = painterResource(id = R.drawable.placeholder), - actionOnNewLine = actionOnNewLine - ) -} - - @UiModePreviews.Default @Composable private fun PreviewOdsBanner(@PreviewParameter(OdsBannerPreviewParameterProvider::class) parameter: OdsBannerPreviewParameter) = @@ -197,6 +174,7 @@ private val previewParameterValues: List OdsBannerPreviewParameter(longMessage, button1Text, button2Text, imageRes), OdsBannerPreviewParameter(shortMessage, button1Text), OdsBannerPreviewParameter(longMessage, button1Text, button2Text), - OdsBannerPreviewParameter(longMessage, button1Text) + OdsBannerPreviewParameter(longMessage, button1Text), + OdsBannerPreviewParameter(shortMessage, button1Text, imageRes = imageRes) ) } \ No newline at end of file