Skip to content

Commit

Permalink
Merge pull request #691 from Orange-OpenSource/683-bug-ods-component-…
Browse files Browse the repository at this point in the history
…image-item-tile

683 - [Bug]: ODS - component - Image item (tile)
  • Loading branch information
paulinea authored Nov 8, 2023
2 parents 08f8dae + 3675afa commit e69596a
Show file tree
Hide file tree
Showing 23 changed files with 147 additions and 140 deletions.
14 changes: 7 additions & 7 deletions app/src/main/java/com/orange/ods/app/ui/components/Component.kt
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ import com.orange.ods.app.ui.components.chips.Chip
import com.orange.ods.app.ui.components.chips.ChipFilter
import com.orange.ods.app.ui.components.dialogs.ComponentDialog
import com.orange.ods.app.ui.components.floatingactionbuttons.ComponentFloatingActionButton
import com.orange.ods.app.ui.components.imagetile.ComponentImageTile
import com.orange.ods.app.ui.components.imageitem.ComponentImageItem
import com.orange.ods.app.ui.components.listitem.ComponentListItem
import com.orange.ods.app.ui.components.menus.ComponentMenu
import com.orange.ods.app.ui.components.navigationdrawers.ComponentModalDrawers
Expand Down Expand Up @@ -169,13 +169,13 @@ sealed class Component(
demoScreen = { _, _ -> ComponentFloatingActionButton() }
)

object ImageTile : Component(
R.string.component_image_tile,
R.drawable.il_image_tile,
object ImageItem : Component(
R.string.component_image_item,
R.drawable.il_image_item,
null,
R.string.component_image_tile_description,
composableName = OdsComposable.OdsImageTile.name,
demoScreen = { _, _ -> ComponentImageTile() }
R.string.component_image_item_description,
composableName = OdsComposable.OdsImageItem.name,
demoScreen = { _, _ -> ComponentImageItem() }
)

object ListItem : Component(
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@
* /
*/

package com.orange.ods.app.ui.components.imagetile
package com.orange.ods.app.ui.components.imageitem

import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxSize
Expand Down Expand Up @@ -43,24 +43,24 @@ import com.orange.ods.compose.OdsComposable
import com.orange.ods.compose.component.button.OdsIconButtonIcon
import com.orange.ods.compose.component.chip.OdsChoiceChip
import com.orange.ods.compose.component.chip.OdsChoiceChipsFlowRow
import com.orange.ods.compose.component.imagetile.OdsImageTile
import com.orange.ods.compose.component.imagetile.OdsImageTileIconToggleButton
import com.orange.ods.compose.component.imagetile.OdsImageTileImage
import com.orange.ods.compose.component.imagetile.OdsImageTileLegendAreaDisplayType
import com.orange.ods.compose.component.imageitem.OdsImageItem
import com.orange.ods.compose.component.imageitem.OdsImageItemIconToggleButton
import com.orange.ods.compose.component.imageitem.OdsImageItemImage
import com.orange.ods.compose.component.imageitem.OdsImageItemLegendAreaDisplayType
import com.orange.ods.compose.component.list.OdsListItem
import com.orange.ods.compose.component.list.OdsListItemTrailingSwitch

@OptIn(ExperimentalMaterialApi::class)
@Composable
fun ComponentImageTile() {
fun ComponentImageItem() {
val context = LocalContext.current
val imageTileCustomizationState = rememberImageTileCustomizationState()
val imageItemCustomizationState = rememberImageItemCustomizationState()
var iconChecked by rememberSaveable { mutableStateOf(false) }
val recipes = LocalRecipes.current
val recipe = rememberSaveable { recipes.random() }

with(imageTileCustomizationState) {
if (type.value == OdsImageTileLegendAreaDisplayType.None) {
with(imageItemCustomizationState) {
if (type.value == OdsImageItemLegendAreaDisplayType.None) {
iconDisplayed.value = false
}
if (!hasIcon) {
Expand All @@ -69,21 +69,21 @@ fun ComponentImageTile() {
ComponentCustomizationBottomSheetScaffold(
bottomSheetScaffoldState = rememberBottomSheetScaffoldState(),
bottomSheetContent = {
Subtitle(textRes = R.string.component_image_tile_legend_area_display_type, horizontalPadding = true)
Subtitle(textRes = R.string.component_image_item_legend_area_display_type, horizontalPadding = true)
OdsChoiceChipsFlowRow(
value = type.value,
onValueChange = { value -> type.value = value },
modifier = Modifier.padding(horizontal = dimensionResource(id = com.orange.ods.R.dimen.spacing_m)),
chips = listOf(
OdsChoiceChip(
text = stringResource(R.string.component_image_tile_legend_area_display_type_overlay),
value = OdsImageTileLegendAreaDisplayType.Overlay
text = stringResource(R.string.component_image_item_legend_area_display_type_overlay),
value = OdsImageItemLegendAreaDisplayType.Overlay
),
OdsChoiceChip(
text = stringResource(R.string.component_image_tile_legend_area_display_type_below),
value = OdsImageTileLegendAreaDisplayType.Below
text = stringResource(R.string.component_image_item_legend_area_display_type_below),
value = OdsImageItemLegendAreaDisplayType.Below
),
OdsChoiceChip(text = stringResource(R.string.component_element_none), value = OdsImageTileLegendAreaDisplayType.None),
OdsChoiceChip(text = stringResource(R.string.component_element_none), value = OdsImageItemLegendAreaDisplayType.None),
)
)
OdsListItem(
Expand All @@ -103,16 +103,16 @@ fun ComponentImageTile() {
) {
val imageSize = 200.dp
val height = when (type.value) {
OdsImageTileLegendAreaDisplayType.Below -> imageSize + dimensionResource(id = com.orange.ods.R.dimen.image_tile_legend_area_height)
OdsImageTileLegendAreaDisplayType.Overlay,
OdsImageTileLegendAreaDisplayType.None -> imageSize
OdsImageItemLegendAreaDisplayType.Below -> imageSize + dimensionResource(id = com.orange.ods.R.dimen.image_item_legend_area_height)
OdsImageItemLegendAreaDisplayType.Overlay,
OdsImageItemLegendAreaDisplayType.None -> imageSize
}
OdsImageTile(
OdsImageItem(
modifier = Modifier
.width(imageSize)
.height(height),
onClick = { clickOnElement(context, context.getString(R.string.component_image_tile)) },
image = OdsImageTileImage(
onClick = { clickOnElement(context, context.getString(R.string.component_image_item)) },
image = OdsImageItemImage(
rememberAsyncImagePainter(
model = recipe.imageUrl,
placeholder = painterResource(id = R.drawable.placeholder),
Expand All @@ -122,7 +122,7 @@ fun ComponentImageTile() {
title = if (hasText) recipe.title else null,
legendAreaDisplayType = type.value,
icon = if (hasIcon) {
OdsImageTileIconToggleButton(
OdsImageItemIconToggleButton(
uncheckedIcon = OdsIconButtonIcon(
painterResource(id = R.drawable.ic_heart_outlined),
stringResource(id = R.string.component_button_icon_toggle_favorite_add_icon_desc)
Expand All @@ -142,17 +142,17 @@ fun ComponentImageTile() {
modifier = Modifier.padding(end = dimensionResource(id = com.orange.ods.R.dimen.spacing_m))
) {
FunctionCallCode(
name = OdsComposable.OdsImageTile.name,
name = OdsComposable.OdsImageItem.name,
exhaustiveParameters = false,
parameters = {
enum("legendAreaDisplayType", type.value)
if (hasText) title(recipe.title)
classInstance<OdsImageTileImage>("image") {
classInstance<OdsImageItemImage>("image") {
painter()
contentDescription("")
}
if (hasIcon) {
classInstance<OdsImageTileIconToggleButton>("icon") {
classInstance<OdsImageItemIconToggleButton>("icon") {
checked(iconChecked)
lambda("onCheckedChange")
classInstance<OdsIconButtonIcon>("uncheckedIcon") {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -8,31 +8,31 @@
* /
*/

package com.orange.ods.app.ui.components.imagetile
package com.orange.ods.app.ui.components.imageitem

import androidx.compose.runtime.Composable
import androidx.compose.runtime.MutableState
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.saveable.rememberSaveable
import com.orange.ods.compose.component.imagetile.OdsImageTileLegendAreaDisplayType
import com.orange.ods.compose.component.imageitem.OdsImageItemLegendAreaDisplayType

@Composable
fun rememberImageTileCustomizationState(
type: MutableState<OdsImageTileLegendAreaDisplayType> = rememberSaveable { mutableStateOf(OdsImageTileLegendAreaDisplayType.Overlay) },
fun rememberImageItemCustomizationState(
type: MutableState<OdsImageItemLegendAreaDisplayType> = rememberSaveable { mutableStateOf(OdsImageItemLegendAreaDisplayType.Overlay) },
iconDisplayed: MutableState<Boolean> = rememberSaveable { mutableStateOf(false) }
) =
remember(type, iconDisplayed) {
ImageTileCustomizationState(type, iconDisplayed)
ImageItemCustomizationState(type, iconDisplayed)
}

class ImageTileCustomizationState(
val type: MutableState<OdsImageTileLegendAreaDisplayType>,
class ImageItemCustomizationState(
val type: MutableState<OdsImageItemLegendAreaDisplayType>,
val iconDisplayed: MutableState<Boolean>
) {
val hasIcon
get() = iconDisplayed.value

val hasText
get() = type.value != OdsImageTileLegendAreaDisplayType.None
get() = type.value != OdsImageItemLegendAreaDisplayType.None
}
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,7 @@ object DrawableManager {
R.drawable.il_chips_small_generic to R.drawable.il_chips_small,
R.drawable.il_dialogs_generic to R.drawable.il_dialogs,
R.drawable.il_fab_generic to R.drawable.il_fab,
R.drawable.il_image_tile_generic to R.drawable.il_image_tile,
R.drawable.il_image_item_generic to R.drawable.il_image_item,
R.drawable.il_list_item_generic to R.drawable.il_list_item,
R.drawable.il_lists_generic to R.drawable.il_lists,
R.drawable.il_menus_generic to R.drawable.il_menus,
Expand Down
34 changes: 17 additions & 17 deletions app/src/main/res/values/strings.xml
Original file line number Diff line number Diff line change
Expand Up @@ -173,7 +173,7 @@
<string name="component_button_icon_toggle_remove">Remove toggle</string>
<string name="component_button_icon_toggle_add">Add toggle</string>

<!-- Components Cards -->
<!-- Component Cards -->
<string name="component_cards">Cards</string>
<string name="component_card_vertical_image_first">Vertical image first card</string>
<string name="component_card_vertical_header_first">Vertical header first card</string>
Expand Down Expand Up @@ -223,15 +223,15 @@
<string name="component_floating_action_button_size_mini">Mini</string>
<string name="component_floating_action_button_full_screen_width">Full screen width</string>

<!-- Component Image Tile -->
<string name="component_image_tile">Image tile</string>
<string name="component_image_tile_description">An image tile contains primary information which is usually an image. It can also contain secondary information such as a title or an action.</string>
<string name="component_image_tile_sizes">Image tile sizes</string>
<string name="component_image_tile_small">Small image</string>
<string name="component_image_tile_large">Large image</string>
<string name="component_image_tile_legend_area_display_type">Legend area display type</string>
<string name="component_image_tile_legend_area_display_type_overlay">Overlay</string>
<string name="component_image_tile_legend_area_display_type_below">Below</string>
<!-- Component Image item -->
<string name="component_image_item">Image item</string>
<string name="component_image_item_description">An image item contains primary information which is usually an image. It can also contain secondary information such as a title or an action.</string>
<string name="component_image_item_sizes">Image item sizes</string>
<string name="component_image_item_small">Small image</string>
<string name="component_image_item_large">Large image</string>
<string name="component_image_item_legend_area_display_type">Legend area display type</string>
<string name="component_image_item_legend_area_display_type_overlay">Overlay</string>
<string name="component_image_item_legend_area_display_type_below">Below</string>

<!-- Component List item -->
<string name="component_list_item">List item</string>
Expand Down Expand Up @@ -264,8 +264,8 @@
<string name="component_menu_divider">Divider example</string>
<string name="component_menu_show_ingredients">Show ingredients</string>

<!-- Component Navigation Drawers -->
<string name="component_modal_drawers">Navigation Drawers</string>
<!-- Component Navigation drawers -->
<string name="component_modal_drawers">Navigation drawers</string>
<string name="component_modal_drawers_description">The navigation drawer slides in from the left when the nav icon is tapped. The content should be concerned with identity and/or navigation.</string>
<string name="component_modal_drawer_side">Side navigation drawer</string>
<string name="component_modal_drawer_content">>>> Swipe to open drawer >>></string>
Expand All @@ -277,8 +277,8 @@
<string name="component_modal_drawer_content_example">Content example</string>
<string name="component_modal_drawer_list_example">Section list example</string>

<!-- Component Radio Buttons -->
<string name="component_radio_buttons">Radio Buttons</string>
<!-- Component Radio buttons -->
<string name="component_radio_buttons">Radio buttons</string>
<string name="component_radio_buttons_description">Radio buttons enable users to choose one item from a set of mutually exclusive, related choices.</string>

<!-- Component Switches -->
Expand All @@ -302,8 +302,8 @@
<string name="component_slider_value_displayed">Display value</string>
<string name="component_slider_stepped">Stepped</string>

<!-- Component Progress Indicators -->
<string name="component_progress">Progress Indicators</string>
<!-- Component Progress indicators -->
<string name="component_progress">Progress indicators</string>
<string name="component_progress_description">Progress bar and activity indicator are used when a process is taking place to illustrate progress and to reassure users that something is happening, and if possible, how long it will take.</string>
<string name="component_progress_linear">Linear</string>
<string name="component_progress_determinate">Determinate</string>
Expand All @@ -312,7 +312,7 @@
<string name="component_progress_circular">Circular</string>
<string name="component_progress_label">Downloading …</string>

<!-- Components Sheets -->
<!-- Component Sheets -->
<string name="component_sheets_bottom">Sheets: bottom</string>
<string name="component_sheet_bottom_description">Bottom sheets are surfaces anchored to the bottom of the screen that present users supplemental content.</string>
<string name="component_sheet_bottom_customize">Customize the bottom sheet</string>
Expand Down
9 changes: 8 additions & 1 deletion changelog.md
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,14 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0

- \[App\] Display `OdsBottomNavigation` XML code implementation ([#671](https://github.com/Orange-OpenSource/ods-android/issues/671))

### Changed

- \[Lib\] Rename `OdsImageTile` to `OdsImageItem` ([#683](https://github.com/Orange-OpenSource/ods-android/issues/683))

### Fixed

- \[Lib\] Fix back button color in `OdsLargeTopAppBar` ([#685](https://github.com/Orange-OpenSource/ods-android/issues/685))

## [0.17.0](https://github.com/Orange-OpenSource/ods-android/compare/0.16.0...0.17.0) - 2023-11-06

### Added
Expand All @@ -32,7 +40,6 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
- \[Lib\] Fix a bug where chip was not properly selected in `OdsChoiceChipsFlowRow` ([#650](https://github.com/Orange-OpenSource/ods-android/issues/650))
- \[Lib\] Change text color of `OdsTextToggleButtonsRow` selected button for accessibility reason ([#559](https://github.com/Orange-OpenSource/ods-android/issues/559))
- \[Lib\] Fix vertical padding of buttons in `OdsTextToggleButtonsRow` ([#559](https://github.com/Orange-OpenSource/ods-android/issues/559))
- \[Lib\] Fix back button color in `OdsLargeTopAppBar` ([#685](https://github.com/Orange-OpenSource/ods-android/issues/685))

## [0.16.0](https://github.com/Orange-OpenSource/ods-android/compare/0.15.1...0.16.0) - 2023-10-10

Expand Down
4 changes: 2 additions & 2 deletions docs/_data/data_menu.yml
Original file line number Diff line number Diff line change
Expand Up @@ -31,8 +31,8 @@ toc2:
url: /components/Dialogs_docs
- page: Floating action buttons
url: /components/FloatingActionButtons_docs
- page: Image tile
url: /components/ImageTile_docs
- page: Image item
url: /components/ImageItem_docs
- page: List items
url: /components/ListItems_docs
- page: Menus
Expand Down
Loading

0 comments on commit e69596a

Please sign in to comment.