Skip to content

Commit

Permalink
[#115] Review : Update OdsBanner display
Browse files Browse the repository at this point in the history
  • Loading branch information
@dolinetouko
dolinetouko committed Mar 1, 2023
1 parent ff1fb9e commit b473d4d
Show file tree
Hide file tree
Showing 2 changed files with 44 additions and 58 deletions.
14 changes: 11 additions & 3 deletions demo/src/main/java/com/orange/ods/demo/ui/components/banners/ComponentBanners.kt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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
Expand Down Expand Up @@ -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 {
Expand All @@ -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)}\"")
}
}
}
Expand Down
88 changes: 33 additions & 55 deletions lib/src/main/java/com/orange/ods/compose/component/banner/OdsBanner.kt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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
Expand All @@ -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
Expand All @@ -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()
Expand All @@ -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))
Expand All @@ -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) =
Expand Down Expand Up @@ -197,6 +174,7 @@ private val previewParameterValues: List<OdsBannerPreviewParameter>
OdsBannerPreviewParameter(longMessage, button1Text, button2Text, imageRes),
OdsBannerPreviewParameter(shortMessage, button1Text),
OdsBannerPreviewParameter(longMessage, button1Text, button2Text),
OdsBannerPreviewParameter(longMessage, button1Text)
OdsBannerPreviewParameter(longMessage, button1Text),
OdsBannerPreviewParameter(shortMessage, button1Text, imageRes = imageRes)
)
}

0 comments on commit b473d4d

Please sign in to comment.