From 96170bccf9a1dc36aaa571f32f895da2813020a8 Mon Sep 17 00:00:00 2001 From: Pauline Auvray Date: Mon, 21 Nov 2022 11:15:28 +0100 Subject: [PATCH] [#327] Replace action buttons switches by a counter and factorize customization between card variants --- .../cards/CardCustomizationState.kt | 22 +++--- .../ui/components/cards/CardImageFirst.kt | 66 +++++++----------- .../ods/demo/ui/components/cards/CardSmall.kt | 51 +++++--------- .../ui/components/cards/CardTitleFirst.kt | 69 +++++++------------ .../demo/ui/components/cards/ComponentCard.kt | 50 ++++++++++++-- demo/src/main/res/values/strings.xml | 4 +- 6 files changed, 131 insertions(+), 131 deletions(-) diff --git a/demo/src/main/java/com/orange/ods/demo/ui/components/cards/CardCustomizationState.kt b/demo/src/main/java/com/orange/ods/demo/ui/components/cards/CardCustomizationState.kt index 59899f55b..f811571d1 100644 --- a/demo/src/main/java/com/orange/ods/demo/ui/components/cards/CardCustomizationState.kt +++ b/demo/src/main/java/com/orange/ods/demo/ui/components/cards/CardCustomizationState.kt @@ -22,11 +22,10 @@ fun rememberCardCustomizationState( thumbnailChecked: MutableState = rememberSaveable { mutableStateOf(true) }, textChecked: MutableState = rememberSaveable { mutableStateOf(true) }, subtitleChecked: MutableState = rememberSaveable { mutableStateOf(true) }, - button1Checked: MutableState = rememberSaveable { mutableStateOf(true) }, - button2Checked: MutableState = rememberSaveable { mutableStateOf(true) } + actionButtonCount: MutableState = rememberSaveable { mutableStateOf(CardCustomizationState.MinActionButtonCount) } ) = - remember(clickable, thumbnailChecked, textChecked, subtitleChecked, button1Checked, button2Checked) { - CardCustomizationState(clickable, thumbnailChecked, textChecked, subtitleChecked, button1Checked, button2Checked) + remember(clickable, thumbnailChecked, textChecked, subtitleChecked, actionButtonCount) { + CardCustomizationState(clickable, thumbnailChecked, textChecked, subtitleChecked, actionButtonCount) } class CardCustomizationState( @@ -34,12 +33,17 @@ class CardCustomizationState( val thumbnailChecked: MutableState, val textChecked: MutableState, val subtitleChecked: MutableState, - val button1Checked: MutableState, - val button2Checked: MutableState + val actionButtonCount: MutableState ) { + + companion object { + const val MinActionButtonCount = 0 + const val MaxActionButtonCount = 2 + } + val isClickable get() = clickable.value - + val hasThumbnail get() = thumbnailChecked.value @@ -50,8 +54,8 @@ class CardCustomizationState( get() = subtitleChecked.value val hasButton1 - get() = button1Checked.value + get() = actionButtonCount.value > 0 val hasButton2 - get() = button2Checked.value + get() = actionButtonCount.value > 1 } \ No newline at end of file diff --git a/demo/src/main/java/com/orange/ods/demo/ui/components/cards/CardImageFirst.kt b/demo/src/main/java/com/orange/ods/demo/ui/components/cards/CardImageFirst.kt index e8ef99494..d4973c724 100644 --- a/demo/src/main/java/com/orange/ods/demo/ui/components/cards/CardImageFirst.kt +++ b/demo/src/main/java/com/orange/ods/demo/ui/components/cards/CardImageFirst.kt @@ -16,8 +16,6 @@ import androidx.compose.foundation.layout.fillMaxSize import androidx.compose.foundation.layout.padding import androidx.compose.foundation.rememberScrollState import androidx.compose.foundation.verticalScroll -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 @@ -26,51 +24,37 @@ import androidx.compose.ui.res.painterResource import androidx.compose.ui.res.stringResource import com.orange.ods.compose.component.card.OdsImageFirstCard import com.orange.ods.demo.R -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.SwitchListItem -@OptIn(ExperimentalMaterialApi::class) @Composable -fun CardImageFirst() { +fun CardImageFirst(customizationState: CardCustomizationState) { val context = LocalContext.current - val cardCustomizationState = rememberCardCustomizationState() - with(cardCustomizationState) { - ComponentCustomizationBottomSheetScaffold( - bottomSheetScaffoldState = rememberBottomSheetScaffoldState(), - bottomSheetContent = { - SwitchListItem(labelRes = R.string.component_card_clickable, checked = clickable) - SwitchListItem(labelRes = R.string.component_element_subtitle, checked = subtitleChecked) - SwitchListItem(labelRes = R.string.component_element_text, checked = textChecked) - SwitchListItem(labelRes = R.string.component_element_button1, checked = button1Checked) - SwitchListItem(labelRes = R.string.component_element_button2, checked = button2Checked) - }) { - Column( - modifier = Modifier - .fillMaxSize() - .padding(dimensionResource(id = R.dimen.spacing_m)) - .verticalScroll(state = rememberScrollState()), - verticalArrangement = Arrangement.spacedBy(dimensionResource(id = R.dimen.spacing_m)) - ) { - val button1Text = stringResource(id = R.string.component_element_button1) - val button2Text = stringResource(id = R.string.component_element_button2) - val cardContainerText = stringResource(id = R.string.component_card_element_container) + with(customizationState) { + Column( + modifier = Modifier + .fillMaxSize() + .padding(dimensionResource(id = R.dimen.spacing_m)) + .verticalScroll(state = rememberScrollState()), + verticalArrangement = Arrangement.spacedBy(dimensionResource(id = R.dimen.spacing_m)) + ) { + val button1Text = stringResource(id = R.string.component_element_button1) + val button2Text = stringResource(id = R.string.component_element_button2) + val cardContainerText = stringResource(id = R.string.component_card_element_container) - OdsImageFirstCard( - title = stringResource(id = R.string.component_element_title), - image = painterResource(id = R.drawable.placeholder), - subtitle = if (hasSubtitle) stringResource(id = R.string.component_element_subtitle) else null, - text = if (hasText) stringResource(id = R.string.component_element_text_value) else null, - onCardClick = if (isClickable) { - { clickOnElement(context, cardContainerText) } - } else null, - button1Text = if (hasButton1) button1Text else null, - onButton1Click = { clickOnElement(context, button1Text) }, - button2Text = if (hasButton2) button2Text else null, - onButton2Click = { clickOnElement(context, button2Text) } - ) - } + OdsImageFirstCard( + title = stringResource(id = R.string.component_element_title), + image = painterResource(id = R.drawable.placeholder), + subtitle = if (hasSubtitle) stringResource(id = R.string.component_element_subtitle) else null, + text = if (hasText) stringResource(id = R.string.component_element_text_value) else null, + onCardClick = if (isClickable) { + { clickOnElement(context, cardContainerText) } + } else null, + button1Text = if (hasButton1) button1Text else null, + onButton1Click = { clickOnElement(context, button1Text) }, + button2Text = if (hasButton2) button2Text else null, + onButton2Click = { clickOnElement(context, button2Text) } + ) } } } \ No newline at end of file diff --git a/demo/src/main/java/com/orange/ods/demo/ui/components/cards/CardSmall.kt b/demo/src/main/java/com/orange/ods/demo/ui/components/cards/CardSmall.kt index f8ca59596..d99acc505 100644 --- a/demo/src/main/java/com/orange/ods/demo/ui/components/cards/CardSmall.kt +++ b/demo/src/main/java/com/orange/ods/demo/ui/components/cards/CardSmall.kt @@ -15,8 +15,6 @@ import androidx.compose.foundation.layout.Box import androidx.compose.foundation.layout.Row import androidx.compose.foundation.layout.fillMaxSize import androidx.compose.foundation.layout.padding -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 @@ -25,42 +23,31 @@ import androidx.compose.ui.res.painterResource import androidx.compose.ui.res.stringResource import com.orange.ods.compose.component.card.OdsSmallCard import com.orange.ods.demo.R -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.SwitchListItem -@OptIn(ExperimentalMaterialApi::class) @Composable -fun CardSmall() { +fun CardSmall(customizationState: CardCustomizationState) { val context = LocalContext.current - val cardCustomizationState = rememberCardCustomizationState() - with(cardCustomizationState) { - ComponentCustomizationBottomSheetScaffold( - bottomSheetScaffoldState = rememberBottomSheetScaffoldState(), - bottomSheetContent = { - SwitchListItem(labelRes = R.string.component_card_clickable, checked = clickable) - SwitchListItem(labelRes = R.string.component_element_subtitle, checked = subtitleChecked) - }) { - Row( - modifier = Modifier - .fillMaxSize() - .padding(dimensionResource(id = R.dimen.spacing_m)), - horizontalArrangement = Arrangement.spacedBy(dimensionResource(id = R.dimen.spacing_m)), - ) { - val cardContainerText = stringResource(id = R.string.component_card_element_container) + with(customizationState) { + Row( + modifier = Modifier + .fillMaxSize() + .padding(dimensionResource(id = R.dimen.spacing_m)), + horizontalArrangement = Arrangement.spacedBy(dimensionResource(id = R.dimen.spacing_m)), + ) { + val cardContainerText = stringResource(id = R.string.component_card_element_container) - OdsSmallCard( - modifier = Modifier.weight(0.5f), - image = painterResource(id = R.drawable.placeholder), - title = stringResource(id = R.string.component_element_title), - subtitle = if (subtitleChecked.value) stringResource(id = R.string.component_element_subtitle) else null, - onCardClick = if (isClickable) { - { clickOnElement(context, cardContainerText) } - } else null - ) - Box(modifier = Modifier.weight(0.5f)) - } + OdsSmallCard( + modifier = Modifier.weight(0.5f), + image = painterResource(id = R.drawable.placeholder), + title = stringResource(id = R.string.component_element_title), + subtitle = if (subtitleChecked.value) stringResource(id = R.string.component_element_subtitle) else null, + onCardClick = if (isClickable) { + { clickOnElement(context, cardContainerText) } + } else null + ) + Box(modifier = Modifier.weight(0.5f)) } } } \ No newline at end of file diff --git a/demo/src/main/java/com/orange/ods/demo/ui/components/cards/CardTitleFirst.kt b/demo/src/main/java/com/orange/ods/demo/ui/components/cards/CardTitleFirst.kt index bb490a73a..d7c1c8ff4 100644 --- a/demo/src/main/java/com/orange/ods/demo/ui/components/cards/CardTitleFirst.kt +++ b/demo/src/main/java/com/orange/ods/demo/ui/components/cards/CardTitleFirst.kt @@ -16,8 +16,6 @@ import androidx.compose.foundation.layout.fillMaxSize import androidx.compose.foundation.layout.padding import androidx.compose.foundation.rememberScrollState import androidx.compose.foundation.verticalScroll -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 @@ -26,53 +24,38 @@ import androidx.compose.ui.res.painterResource import androidx.compose.ui.res.stringResource import com.orange.ods.compose.component.card.OdsTitleFirstCard import com.orange.ods.demo.R -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.SwitchListItem -@OptIn(ExperimentalMaterialApi::class) @Composable -fun CardTitleFirst() { +fun CardTitleFirst(customizationState: CardCustomizationState) { val context = LocalContext.current - val cardCustomizationState = rememberCardCustomizationState() - with(cardCustomizationState) { - ComponentCustomizationBottomSheetScaffold( - bottomSheetScaffoldState = rememberBottomSheetScaffoldState(), - bottomSheetContent = { - SwitchListItem(labelRes = R.string.component_card_clickable, checked = clickable) - SwitchListItem(labelRes = R.string.component_element_thumbnail, checked = thumbnailChecked) - SwitchListItem(labelRes = R.string.component_element_subtitle, checked = subtitleChecked) - SwitchListItem(labelRes = R.string.component_element_text, checked = textChecked) - SwitchListItem(labelRes = R.string.component_element_button1, checked = button1Checked) - SwitchListItem(labelRes = R.string.component_element_button2, checked = button2Checked) - }) { - Column( - modifier = Modifier - .fillMaxSize() - .padding(dimensionResource(id = R.dimen.spacing_m)) - .verticalScroll(state = rememberScrollState()), - verticalArrangement = Arrangement.spacedBy(dimensionResource(id = R.dimen.spacing_m)) - ) { - val button1Text = stringResource(id = R.string.component_element_button1) - val button2Text = stringResource(id = R.string.component_element_button2) - val cardContainerText = stringResource(id = R.string.component_card_element_container) + with(customizationState) { + Column( + modifier = Modifier + .fillMaxSize() + .padding(dimensionResource(id = R.dimen.spacing_m)) + .verticalScroll(state = rememberScrollState()), + verticalArrangement = Arrangement.spacedBy(dimensionResource(id = R.dimen.spacing_m)) + ) { + val button1Text = stringResource(id = R.string.component_element_button1) + val button2Text = stringResource(id = R.string.component_element_button2) + val cardContainerText = stringResource(id = R.string.component_card_element_container) - OdsTitleFirstCard( - title = stringResource(id = R.string.component_element_title), - image = painterResource(id = R.drawable.placeholder), - thumbnail = if (hasThumbnail) painterResource(id = R.drawable.placeholder) else null, - subtitle = if (hasSubtitle) stringResource(id = R.string.component_element_subtitle) else null, - text = if (hasText) stringResource(id = R.string.component_element_text_value) else null, - onCardClick = if (isClickable) { - { clickOnElement(context, cardContainerText) } - } else null, - button1Text = if (hasButton1) button1Text else null, - onButton1Click = { clickOnElement(context, button1Text) }, - button2Text = if (hasButton2) button2Text else null, - onButton2Click = { clickOnElement(context, button2Text) } - ) - } + OdsTitleFirstCard( + title = stringResource(id = R.string.component_element_title), + image = painterResource(id = R.drawable.placeholder), + thumbnail = if (hasThumbnail) painterResource(id = R.drawable.placeholder) else null, + subtitle = if (hasSubtitle) stringResource(id = R.string.component_element_subtitle) else null, + text = if (hasText) stringResource(id = R.string.component_element_text_value) else null, + onCardClick = if (isClickable) { + { clickOnElement(context, cardContainerText) } + } else null, + button1Text = if (hasButton1) button1Text else null, + onButton1Click = { clickOnElement(context, button1Text) }, + button2Text = if (hasButton2) button2Text else null, + onButton2Click = { clickOnElement(context, button2Text) } + ) } } } \ No newline at end of file diff --git a/demo/src/main/java/com/orange/ods/demo/ui/components/cards/ComponentCard.kt b/demo/src/main/java/com/orange/ods/demo/ui/components/cards/ComponentCard.kt index e3970c740..3d9e67775 100644 --- a/demo/src/main/java/com/orange/ods/demo/ui/components/cards/ComponentCard.kt +++ b/demo/src/main/java/com/orange/ods/demo/ui/components/cards/ComponentCard.kt @@ -10,15 +10,55 @@ package com.orange.ods.demo.ui.components.cards +import androidx.compose.foundation.layout.fillMaxWidth +import androidx.compose.foundation.layout.padding +import androidx.compose.material.ExperimentalMaterialApi +import androidx.compose.material.rememberBottomSheetScaffoldState import androidx.compose.runtime.Composable +import androidx.compose.ui.Modifier +import androidx.compose.ui.res.dimensionResource +import androidx.compose.ui.res.stringResource +import com.orange.ods.demo.R import com.orange.ods.demo.ui.components.Variant +import com.orange.ods.demo.ui.components.utilities.ComponentCountRow +import com.orange.ods.demo.ui.components.utilities.ComponentCustomizationBottomSheetScaffold +import com.orange.ods.demo.ui.utilities.composable.SwitchListItem +@OptIn(ExperimentalMaterialApi::class) @Composable fun ComponentCard(variant: Variant) { - when (variant) { - Variant.CardImageFirst -> CardImageFirst() - Variant.CardSmall -> CardSmall() - Variant.CardTitleFirst -> CardTitleFirst() - else -> {} + val cardCustomizationState = rememberCardCustomizationState() + + with(cardCustomizationState) { + ComponentCustomizationBottomSheetScaffold( + bottomSheetScaffoldState = rememberBottomSheetScaffoldState(), + bottomSheetContent = { + SwitchListItem(labelRes = R.string.component_card_clickable, checked = clickable) + if (variant == Variant.CardTitleFirst) { + SwitchListItem(labelRes = R.string.component_element_thumbnail, checked = thumbnailChecked) + } + SwitchListItem(labelRes = R.string.component_element_subtitle, checked = subtitleChecked) + if (variant in listOf(Variant.CardTitleFirst, Variant.CardImageFirst)) { + SwitchListItem(labelRes = R.string.component_element_text, checked = textChecked) + ComponentCountRow( + title = stringResource(id = R.string.component_card_action_button_count), + count = actionButtonCount, + minusIconContentDescription = stringResource(id = R.string.component_card_remove_action_button), + plusIconContentDescription = stringResource(id = R.string.component_card_add_action_button), + modifier = Modifier + .fillMaxWidth() + .padding(horizontal = dimensionResource(id = R.dimen.screen_horizontal_margin)), + minCount = CardCustomizationState.MinActionButtonCount, + maxCount = CardCustomizationState.MaxActionButtonCount + ) + } + }) { + when (variant) { + Variant.CardImageFirst -> CardImageFirst(customizationState = cardCustomizationState) + Variant.CardSmall -> CardSmall(customizationState = cardCustomizationState) + Variant.CardTitleFirst -> CardTitleFirst(customizationState = cardCustomizationState) + else -> {} + } + } } } \ No newline at end of file diff --git a/demo/src/main/res/values/strings.xml b/demo/src/main/res/values/strings.xml index bff8d4488..df5fbc87f 100644 --- a/demo/src/main/res/values/strings.xml +++ b/demo/src/main/res/values/strings.xml @@ -139,7 +139,9 @@ Cards are important components that can be used to organise and present a number of different types of related information. Card container Clickable card - + Action buttons + Remove action button + Add action button Checkboxes