From 7c208cfcb8218935c7fb51d95930814475a0a9c1 Mon Sep 17 00:00:00 2001 From: Florent Maitre Date: Fri, 3 Nov 2023 17:30:32 +0100 Subject: [PATCH 1/3] [#683] Rename OdsImageTile to OdsImageItem --- .../orange/ods/app/ui/components/Component.kt | 14 +-- .../ComponentImageItem.kt} | 50 ++++----- .../ImageItemCustomizationState.kt} | 16 +-- .../ods/app/ui/utilities/DrawableManager.kt | 2 +- .../{il_image_tile.png => il_image_item.png} | Bin ..._generic.png => il_image_item_generic.png} | Bin .../{il_image_tile.png => il_image_item.png} | Bin ..._generic.png => il_image_item_generic.png} | Bin .../{il_image_tile.png => il_image_item.png} | Bin ..._generic.png => il_image_item_generic.png} | Bin .../{il_image_tile.png => il_image_item.png} | Bin ..._generic.png => il_image_item_generic.png} | Bin .../{il_image_tile.png => il_image_item.png} | Bin ..._generic.png => il_image_item_generic.png} | Bin app/src/main/res/values/strings.xml | 18 +-- changelog.md | 1 + docs/_data/data_menu.yml | 4 +- .../components/{ImageTile.md => ImageItem.md} | 34 +++--- docs/components/ImageItem_docs.md | 4 + docs/components/ImageTile_docs.md | 4 - .../OdsImageItem.kt} | 104 +++++++++--------- .../compose/component/utilities/Preview.kt | 8 +- lib/src/main/res/values/dimens.xml | 4 +- 23 files changed, 132 insertions(+), 131 deletions(-) rename app/src/main/java/com/orange/ods/app/ui/components/{imagetile/ComponentImageTile.kt => imageitem/ComponentImageItem.kt} (82%) rename app/src/main/java/com/orange/ods/app/ui/components/{imagetile/ImageTileCustomizationState.kt => imageitem/ImageItemCustomizationState.kt} (59%) rename app/src/main/res/drawable-hdpi/{il_image_tile.png => il_image_item.png} (100%) rename app/src/main/res/drawable-hdpi/{il_image_tile_generic.png => il_image_item_generic.png} (100%) rename app/src/main/res/drawable-mdpi/{il_image_tile.png => il_image_item.png} (100%) rename app/src/main/res/drawable-mdpi/{il_image_tile_generic.png => il_image_item_generic.png} (100%) rename app/src/main/res/drawable-xhdpi/{il_image_tile.png => il_image_item.png} (100%) rename app/src/main/res/drawable-xhdpi/{il_image_tile_generic.png => il_image_item_generic.png} (100%) rename app/src/main/res/drawable-xxhdpi/{il_image_tile.png => il_image_item.png} (100%) rename app/src/main/res/drawable-xxhdpi/{il_image_tile_generic.png => il_image_item_generic.png} (100%) rename app/src/main/res/drawable-xxxhdpi/{il_image_tile.png => il_image_item.png} (100%) rename app/src/main/res/drawable-xxxhdpi/{il_image_tile_generic.png => il_image_item_generic.png} (100%) rename docs/components/{ImageTile.md => ImageItem.md} (58%) create mode 100644 docs/components/ImageItem_docs.md delete mode 100644 docs/components/ImageTile_docs.md rename lib/src/main/java/com/orange/ods/compose/component/{imagetile/OdsImageTile.kt => imageitem/OdsImageItem.kt} (74%) diff --git a/app/src/main/java/com/orange/ods/app/ui/components/Component.kt b/app/src/main/java/com/orange/ods/app/ui/components/Component.kt index 11c9ab891..89cd618cb 100644 --- a/app/src/main/java/com/orange/ods/app/ui/components/Component.kt +++ b/app/src/main/java/com/orange/ods/app/ui/components/Component.kt @@ -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 @@ -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( diff --git a/app/src/main/java/com/orange/ods/app/ui/components/imagetile/ComponentImageTile.kt b/app/src/main/java/com/orange/ods/app/ui/components/imageitem/ComponentImageItem.kt similarity index 82% rename from app/src/main/java/com/orange/ods/app/ui/components/imagetile/ComponentImageTile.kt rename to app/src/main/java/com/orange/ods/app/ui/components/imageitem/ComponentImageItem.kt index 28832f72c..b6af33540 100644 --- a/app/src/main/java/com/orange/ods/app/ui/components/imagetile/ComponentImageTile.kt +++ b/app/src/main/java/com/orange/ods/app/ui/components/imageitem/ComponentImageItem.kt @@ -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 @@ -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) { @@ -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( @@ -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), @@ -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) @@ -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("image") { + classInstance("image") { painter() contentDescription("") } if (hasIcon) { - classInstance("icon") { + classInstance("icon") { checked(iconChecked) lambda("onCheckedChange") classInstance("uncheckedIcon") { diff --git a/app/src/main/java/com/orange/ods/app/ui/components/imagetile/ImageTileCustomizationState.kt b/app/src/main/java/com/orange/ods/app/ui/components/imageitem/ImageItemCustomizationState.kt similarity index 59% rename from app/src/main/java/com/orange/ods/app/ui/components/imagetile/ImageTileCustomizationState.kt rename to app/src/main/java/com/orange/ods/app/ui/components/imageitem/ImageItemCustomizationState.kt index cd19b7274..2365b9636 100644 --- a/app/src/main/java/com/orange/ods/app/ui/components/imagetile/ImageTileCustomizationState.kt +++ b/app/src/main/java/com/orange/ods/app/ui/components/imageitem/ImageItemCustomizationState.kt @@ -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 = rememberSaveable { mutableStateOf(OdsImageTileLegendAreaDisplayType.Overlay) }, +fun rememberImageItemCustomizationState( + type: MutableState = rememberSaveable { mutableStateOf(OdsImageItemLegendAreaDisplayType.Overlay) }, iconDisplayed: MutableState = rememberSaveable { mutableStateOf(false) } ) = remember(type, iconDisplayed) { - ImageTileCustomizationState(type, iconDisplayed) + ImageItemCustomizationState(type, iconDisplayed) } -class ImageTileCustomizationState( - val type: MutableState, +class ImageItemCustomizationState( + val type: MutableState, val iconDisplayed: MutableState ) { val hasIcon get() = iconDisplayed.value val hasText - get() = type.value != OdsImageTileLegendAreaDisplayType.None + get() = type.value != OdsImageItemLegendAreaDisplayType.None } \ No newline at end of file diff --git a/app/src/main/java/com/orange/ods/app/ui/utilities/DrawableManager.kt b/app/src/main/java/com/orange/ods/app/ui/utilities/DrawableManager.kt index 65efd2f1a..5e2d8c5f3 100644 --- a/app/src/main/java/com/orange/ods/app/ui/utilities/DrawableManager.kt +++ b/app/src/main/java/com/orange/ods/app/ui/utilities/DrawableManager.kt @@ -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, diff --git a/app/src/main/res/drawable-hdpi/il_image_tile.png b/app/src/main/res/drawable-hdpi/il_image_item.png similarity index 100% rename from app/src/main/res/drawable-hdpi/il_image_tile.png rename to app/src/main/res/drawable-hdpi/il_image_item.png diff --git a/app/src/main/res/drawable-hdpi/il_image_tile_generic.png b/app/src/main/res/drawable-hdpi/il_image_item_generic.png similarity index 100% rename from app/src/main/res/drawable-hdpi/il_image_tile_generic.png rename to app/src/main/res/drawable-hdpi/il_image_item_generic.png diff --git a/app/src/main/res/drawable-mdpi/il_image_tile.png b/app/src/main/res/drawable-mdpi/il_image_item.png similarity index 100% rename from app/src/main/res/drawable-mdpi/il_image_tile.png rename to app/src/main/res/drawable-mdpi/il_image_item.png diff --git a/app/src/main/res/drawable-mdpi/il_image_tile_generic.png b/app/src/main/res/drawable-mdpi/il_image_item_generic.png similarity index 100% rename from app/src/main/res/drawable-mdpi/il_image_tile_generic.png rename to app/src/main/res/drawable-mdpi/il_image_item_generic.png diff --git a/app/src/main/res/drawable-xhdpi/il_image_tile.png b/app/src/main/res/drawable-xhdpi/il_image_item.png similarity index 100% rename from app/src/main/res/drawable-xhdpi/il_image_tile.png rename to app/src/main/res/drawable-xhdpi/il_image_item.png diff --git a/app/src/main/res/drawable-xhdpi/il_image_tile_generic.png b/app/src/main/res/drawable-xhdpi/il_image_item_generic.png similarity index 100% rename from app/src/main/res/drawable-xhdpi/il_image_tile_generic.png rename to app/src/main/res/drawable-xhdpi/il_image_item_generic.png diff --git a/app/src/main/res/drawable-xxhdpi/il_image_tile.png b/app/src/main/res/drawable-xxhdpi/il_image_item.png similarity index 100% rename from app/src/main/res/drawable-xxhdpi/il_image_tile.png rename to app/src/main/res/drawable-xxhdpi/il_image_item.png diff --git a/app/src/main/res/drawable-xxhdpi/il_image_tile_generic.png b/app/src/main/res/drawable-xxhdpi/il_image_item_generic.png similarity index 100% rename from app/src/main/res/drawable-xxhdpi/il_image_tile_generic.png rename to app/src/main/res/drawable-xxhdpi/il_image_item_generic.png diff --git a/app/src/main/res/drawable-xxxhdpi/il_image_tile.png b/app/src/main/res/drawable-xxxhdpi/il_image_item.png similarity index 100% rename from app/src/main/res/drawable-xxxhdpi/il_image_tile.png rename to app/src/main/res/drawable-xxxhdpi/il_image_item.png diff --git a/app/src/main/res/drawable-xxxhdpi/il_image_tile_generic.png b/app/src/main/res/drawable-xxxhdpi/il_image_item_generic.png similarity index 100% rename from app/src/main/res/drawable-xxxhdpi/il_image_tile_generic.png rename to app/src/main/res/drawable-xxxhdpi/il_image_item_generic.png diff --git a/app/src/main/res/values/strings.xml b/app/src/main/res/values/strings.xml index 4d9281e32..1fecdefd0 100644 --- a/app/src/main/res/values/strings.xml +++ b/app/src/main/res/values/strings.xml @@ -223,15 +223,15 @@ Mini Full screen width - - Image tile - An image tile contains primary information which is usually an image. It can also contain secondary information such as a title or an action. - Image tile sizes - Small image - Large image - Legend area display type - Overlay - Below + + Image item + An image item contains primary information which is usually an image. It can also contain secondary information such as a title or an action. + Image item sizes + Small image + Large image + Legend area display type + Overlay + Below List item diff --git a/changelog.md b/changelog.md index 63b1a7abc..e855e59c7 100644 --- a/changelog.md +++ b/changelog.md @@ -24,6 +24,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 - \[Lib\] Review and update technical documentation ([#638](https://github.com/Orange-OpenSource/ods-android/issues/638)) - \[Lib\] Update `OdsListItem` API ([#650](https://github.com/Orange-OpenSource/ods-android/issues/650)) - \[Lib\] Update `OdsSnackbarHost` API ([#674](https://github.com/Orange-OpenSource/ods-android/issues/674)) +- \[Lib\] Rename `OdsImageTile` to `OdsImageItem` ([#683](https://github.com/Orange-OpenSource/ods-android/issues/683)) ### Fixed diff --git a/docs/_data/data_menu.yml b/docs/_data/data_menu.yml index 658aeb3ad..0259eec44 100644 --- a/docs/_data/data_menu.yml +++ b/docs/_data/data_menu.yml @@ -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 diff --git a/docs/components/ImageTile.md b/docs/components/ImageItem.md similarity index 58% rename from docs/components/ImageTile.md rename to docs/components/ImageItem.md index f96dd2a4e..9d9d4df3e 100644 --- a/docs/components/ImageTile.md +++ b/docs/components/ImageItem.md @@ -1,6 +1,6 @@ --- layout: detail -title: Image Tile +title: Image item description: --- @@ -10,37 +10,37 @@ description: * [Accessibility](#accessibility) * [Implementation](#implementation) * [Jetpack Compose](#jetpack-compose) - * [OdsImageTile API](#odsimagetile-api) + * [OdsImageItem API](#odsimageitem-api) --- ## Specifications references -- [Design System Manager - Image Tile](https://system.design.orange.com/0c1af118d/p/49434d-image-item) +- [Design System Manager - Image item](https://system.design.orange.com/0c1af118d/p/49434d-image-item) - [Material Design - Image lists](https://m2.material.io/components/image-lists) ## Accessibility Please follow [accessibility criteria for development](https://a11y-guidelines.orange.com/en/mobile/android/development/). -An image in an `OdsImageTile` should always be associated to a content description. This is the reason why the `OdsImageTileImage` forces the developer to fill a content description parameter. +An image in an `OdsImageItem` should always be associated to a content description. This is the reason why the `OdsImageItemImage` forces the developer to fill a content description parameter. ## Implementation #### Jetpack Compose -You can use the `OdsImageTile` composable like this: +You can use the `OdsImageItem` composable like this: ```kotlin -OdsImageTile( - image = OdsImageTileImage( +OdsImageItem( + image = OdsImageItemImage( painterResource(id = R.drawable.placeholder), "Picture content description" ), modifier = modifier, - captionDisplayType = OdsImageTileCaptionDisplayType.Overlay, - title = "Component Image Tile", - icon = OdsImageTileIconToggleButton( + captionDisplayType = OdsImageItemCaptionDisplayType.Overlay, + title = "Component Image item", + icon = OdsImageItemIconToggleButton( uncheckedIcon = OdsIconButtonIcon( painterResource(id = R.drawable.ic_heart_outlined), "Add to favourites" @@ -56,14 +56,14 @@ OdsImageTile( ) ``` -##### OdsImageTile API +##### OdsImageItem API Parameter | Default value | Description -- | -- | -- -`image: OdsImageTileImage` | | Image displayed into the tile -`legendAreaDisplayType: OdsImageTileLegendAreaDisplayType` | | Controls how the title and the icon are displayed relatively to the image. If set to `OdsImageTileLegendAreaDisplayType.None`, no legend area will be displayed. -`modifier: Modifier` | `Modifier` | `Modifier` applied to the image tile -`title: String?` | `null` | Title displayed into the tile. It is linked to the image and displayed according to the `legendAreaDisplayType` value. -`icon: OdsImageTileIconToggleButton` | `null` | Clickable icon displayed next to the `title` -`onClick: (() -> Unit)?` | `null` | Callback invoked on tile click +`image: OdsImageItemImage` | | Image displayed into the item +`legendAreaDisplayType: OdsImageItemLegendAreaDisplayType` | | Controls how the title and the icon are displayed relatively to the image. If set to `OdsImageItemLegendAreaDisplayType.None`, no legend area will be displayed. +`modifier: Modifier` | `Modifier` | `Modifier` applied to the image item +`title: String?` | `null` | Title displayed into the image item. It is linked to the image and displayed according to the `legendAreaDisplayType` value. +`icon: OdsImageItemIconToggleButton` | `null` | Clickable icon displayed next to the `title` +`onClick: (() -> Unit)?` | `null` | Callback invoked on image item click {:.table} diff --git a/docs/components/ImageItem_docs.md b/docs/components/ImageItem_docs.md new file mode 100644 index 000000000..9ded86b13 --- /dev/null +++ b/docs/components/ImageItem_docs.md @@ -0,0 +1,4 @@ +--- +layout: main +content_page: ImageItem.md +--- \ No newline at end of file diff --git a/docs/components/ImageTile_docs.md b/docs/components/ImageTile_docs.md deleted file mode 100644 index f892cf69b..000000000 --- a/docs/components/ImageTile_docs.md +++ /dev/null @@ -1,4 +0,0 @@ ---- -layout: main -content_page: ImageTile.md ---- \ No newline at end of file diff --git a/lib/src/main/java/com/orange/ods/compose/component/imagetile/OdsImageTile.kt b/lib/src/main/java/com/orange/ods/compose/component/imageitem/OdsImageItem.kt similarity index 74% rename from lib/src/main/java/com/orange/ods/compose/component/imagetile/OdsImageTile.kt rename to lib/src/main/java/com/orange/ods/compose/component/imageitem/OdsImageItem.kt index d7384a51a..1fc0b0929 100644 --- a/lib/src/main/java/com/orange/ods/compose/component/imagetile/OdsImageTile.kt +++ b/lib/src/main/java/com/orange/ods/compose/component/imageitem/OdsImageItem.kt @@ -8,7 +8,7 @@ * / */ -package com.orange.ods.compose.component.imagetile +package com.orange.ods.compose.component.imageitem import androidx.compose.foundation.background import androidx.compose.foundation.clickable @@ -47,32 +47,32 @@ import com.orange.ods.extension.orElse /** - * An image tile contains primary information which is an image. It can also contain secondary information such as text or action. Tiles have no more than two + * An image item contains primary information which is an image. It can also contain secondary information such as text or action. Image items have no more than two * actions. They are usually used in grids. * - * @param image [OdsImageTileImage] displayed into the tile. - * @param legendAreaDisplayType Controls how the title and the icon are displayed relatively to the image. If set to [OdsImageTileLegendAreaDisplayType.None], + * @param image [OdsImageItemImage] displayed into the item. + * @param legendAreaDisplayType Controls how the title and the icon are displayed relatively to the image. If set to [OdsImageItemLegendAreaDisplayType.None], * no legend area will be displayed. - * @param modifier [Modifier] applied to the image tile. - * @param title Title displayed into the tile. It is linked to the image and displayed according to the [legendAreaDisplayType] value. - * @param icon [OdsImageTileIconToggleButton] displayed next to the title. - * @param onClick Callback invoked on tile click. + * @param modifier [Modifier] applied to the image item. + * @param title Title displayed into the image item. It is linked to the image and displayed according to the [legendAreaDisplayType] value. + * @param icon [OdsImageItemIconToggleButton] displayed next to the title. + * @param onClick Callback invoked on image item click. */ @Composable @OdsComposable -fun OdsImageTile( - image: OdsImageTileImage, - legendAreaDisplayType: OdsImageTileLegendAreaDisplayType, +fun OdsImageItem( + image: OdsImageItemImage, + legendAreaDisplayType: OdsImageItemLegendAreaDisplayType, modifier: Modifier = Modifier, title: String? = null, - icon: OdsImageTileIconToggleButton? = null, + icon: OdsImageItemIconToggleButton? = null, onClick: (() -> Unit)? = null, ) { Box(modifier = modifier.run { onClick?.let { clickable { onClick() } }.orElse { this } }) { when (legendAreaDisplayType) { - OdsImageTileLegendAreaDisplayType.Overlay -> { + OdsImageItemLegendAreaDisplayType.Overlay -> { image.Content(modifier = Modifier.fillMaxSize()) title?.let { Row( @@ -82,7 +82,7 @@ fun OdsImageTile( .align(Alignment.BottomStart) .height(dimensionResource(id = R.dimen.list_single_line_item_height)) ) { - OdsImageTileLegendArea( + OdsImageItemLegendArea( text = it, color = Color.White, displaySurface = OdsDisplaySurface.Dark, @@ -95,7 +95,7 @@ fun OdsImageTile( } } - OdsImageTileLegendAreaDisplayType.Below -> + OdsImageItemLegendAreaDisplayType.Below -> Column(verticalArrangement = Arrangement.Center) { image.Content( modifier = Modifier @@ -105,10 +105,10 @@ fun OdsImageTile( Row( verticalAlignment = Alignment.CenterVertically, modifier = Modifier - .height(dimensionResource(id = R.dimen.image_tile_legend_area_height)) + .height(dimensionResource(id = R.dimen.image_item_legend_area_height)) ) { title?.let { - OdsImageTileLegendArea( + OdsImageItemLegendArea( text = it, color = OdsTheme.colors.onSurface, displaySurface = OdsDisplaySurface.Default, @@ -121,23 +121,23 @@ fun OdsImageTile( } } - OdsImageTileLegendAreaDisplayType.None -> + OdsImageItemLegendAreaDisplayType.None -> image.Content(modifier = Modifier.fillMaxSize()) } } } /** - * An image in an [OdsImageTile]. + * An image in an [OdsImageItem]. */ -class OdsImageTileImage : OdsComponentImage { +class OdsImageItemImage : OdsComponentImage { /** - * Creates an instance of [OdsImageTileImage]. + * Creates an instance of [OdsImageItemImage]. * * @param painter The painter to draw. - * @param contentDescription The content description associated to this [OdsImageTileImage]. - * @param contentScale The rule to apply to scale the image in this [OdsImageTileImage], [ContentScale.Crop] by default. + * @param contentDescription The content description associated to this [OdsImageItemImage]. + * @param contentScale The rule to apply to scale the image in this [OdsImageItemImage], [ContentScale.Crop] by default. */ constructor(painter: Painter, contentDescription: String, contentScale: ContentScale = ContentScale.Crop) : super( painter, @@ -146,11 +146,11 @@ class OdsImageTileImage : OdsComponentImage { ) /** - * Creates an instance of [OdsImageTileImage]. + * Creates an instance of [OdsImageItemImage]. * * @param imageVector The image vector to draw. - * @param contentDescription The content description associated to this [OdsImageTileImage]. - * @param contentScale The rule to apply to scale the image in this [OdsImageTileImage], [ContentScale.Crop] by default. + * @param contentDescription The content description associated to this [OdsImageItemImage]. + * @param contentScale The rule to apply to scale the image in this [OdsImageItemImage], [ContentScale.Crop] by default. */ constructor(imageVector: ImageVector, contentDescription: String, contentScale: ContentScale = ContentScale.Crop) : super( imageVector, @@ -159,11 +159,11 @@ class OdsImageTileImage : OdsComponentImage { ) /** - * Creates an instance of [OdsImageTileImage]. + * Creates an instance of [OdsImageItemImage]. * * @param bitmap The image bitmap to draw. - * @param contentDescription The content description associated to this [OdsImageTileImage]. - * @param contentScale The rule to apply to scale the image in this [OdsImageTileImage], [ContentScale.Crop] by default. + * @param contentDescription The content description associated to this [OdsImageItemImage]. + * @param contentScale The rule to apply to scale the image in this [OdsImageItemImage], [ContentScale.Crop] by default. */ constructor(bitmap: ImageBitmap, contentDescription: String, contentScale: ContentScale = ContentScale.Crop) : super( bitmap, @@ -173,14 +173,14 @@ class OdsImageTileImage : OdsComponentImage { } /** - * An icon toggle button in an [OdsImageTile]. + * An icon toggle button in an [OdsImageItem]. * * @param checked Specify if icon is currently checked. * @param onCheckedChange Callback to be invoked when this icon is selected. - * @param checkedIcon Icon displayed in front of the [OdsImageTile] when icon is checked. - * @param uncheckedIcon Icon displayed in front of the [OdsImageTile] when icon is unchecked. + * @param checkedIcon Icon displayed in front of the [OdsImageItem] when icon is checked. + * @param uncheckedIcon Icon displayed in front of the [OdsImageItem] when icon is unchecked. */ -class OdsImageTileIconToggleButton( +class OdsImageItemIconToggleButton( val checked: Boolean, val onCheckedChange: (Boolean) -> Unit, val checkedIcon: OdsIconButtonIcon, @@ -198,16 +198,16 @@ class OdsImageTileIconToggleButton( } } -enum class OdsImageTileLegendAreaDisplayType { +enum class OdsImageItemLegendAreaDisplayType { Below, Overlay, None } @Composable -private fun OdsImageTileLegendArea( +private fun OdsImageItemLegendArea( text: String, color: Color, displaySurface: OdsDisplaySurface, - icon: OdsImageTileIconToggleButton?, + icon: OdsImageItemIconToggleButton?, modifier: Modifier ) { Text( @@ -221,15 +221,15 @@ private fun OdsImageTileLegendArea( icon?.Content(displaySurface) } -@UiModePreviews.ImageTile +@UiModePreviews.ImageItem @Composable -private fun PreviewOdsImageTile(@PreviewParameter(OdsImageTilePreviewParameterProvider::class) parameter: OdsImageTilePreviewParameter) = +private fun PreviewOdsImageItem(@PreviewParameter(OdsImageItemPreviewParameterProvider::class) parameter: OdsImageItemPreviewParameter) = Preview { - OdsImageTile( - image = OdsImageTileImage(painterResource(id = parameter.image), ""), + OdsImageItem( + image = OdsImageItemImage(painterResource(id = parameter.image), ""), title = parameter.title, legendAreaDisplayType = parameter.type, - icon = OdsImageTileIconToggleButton( + icon = OdsImageItemIconToggleButton( uncheckedIcon = OdsIconButtonIcon(painterResource(id = parameter.uncheckedIcon), "click to select"), checkedIcon = OdsIconButtonIcon(painterResource(id = parameter.checkedIcon), "click to unselect"), checked = parameter.checked, @@ -238,19 +238,19 @@ private fun PreviewOdsImageTile(@PreviewParameter(OdsImageTilePreviewParameterPr ) } -private data class OdsImageTilePreviewParameter( +private data class OdsImageItemPreviewParameter( val image: Int, val checked: Boolean, val title: String, val checkedIcon: Int, val uncheckedIcon: Int, - val type: OdsImageTileLegendAreaDisplayType + val type: OdsImageItemLegendAreaDisplayType ) -private class OdsImageTilePreviewParameterProvider : - BasicPreviewParameterProvider(*previewParameterValues.toTypedArray()) +private class OdsImageItemPreviewParameterProvider : + BasicPreviewParameterProvider(*previewParameterValues.toTypedArray()) -private val previewParameterValues: List +private val previewParameterValues: List get() { val title = "Subtitle 1" val image = R.drawable.placeholder @@ -258,29 +258,29 @@ private val previewParameterValues: List val uncheckedIcon = R.drawable.ic_check return listOf( - OdsImageTilePreviewParameter( + OdsImageItemPreviewParameter( image, title = title, checkedIcon = checkedIcon, uncheckedIcon = uncheckedIcon, checked = false, - type = OdsImageTileLegendAreaDisplayType.Below + type = OdsImageItemLegendAreaDisplayType.Below ), - OdsImageTilePreviewParameter( + OdsImageItemPreviewParameter( image, title = title, checkedIcon = checkedIcon, uncheckedIcon = uncheckedIcon, checked = false, - type = OdsImageTileLegendAreaDisplayType.Overlay + type = OdsImageItemLegendAreaDisplayType.Overlay ), - OdsImageTilePreviewParameter( + OdsImageItemPreviewParameter( image, title = title, checkedIcon = checkedIcon, uncheckedIcon = uncheckedIcon, checked = true, - type = OdsImageTileLegendAreaDisplayType.None + type = OdsImageItemLegendAreaDisplayType.None ) ) } \ No newline at end of file diff --git a/lib/src/main/java/com/orange/ods/compose/component/utilities/Preview.kt b/lib/src/main/java/com/orange/ods/compose/component/utilities/Preview.kt index 970ff1fe6..d90841054 100644 --- a/lib/src/main/java/com/orange/ods/compose/component/utilities/Preview.kt +++ b/lib/src/main/java/com/orange/ods/compose/component/utilities/Preview.kt @@ -59,7 +59,7 @@ internal annotation class UiModePreviews { private const val DarkName = "Dark" private const val ButtonWidthDp = 200 private const val ChipWidthDp = 180 - private const val ImageTileSizeDp = 300 + private const val ImageItemSizeDp = 300 private const val TabWidthDp = 100 } @@ -75,9 +75,9 @@ internal annotation class UiModePreviews { @Preview(name = DarkName, uiMode = Configuration.UI_MODE_NIGHT_YES, showBackground = true, widthDp = ChipWidthDp) annotation class Chip - @Preview(name = LightName, widthDp = ImageTileSizeDp, heightDp = ImageTileSizeDp) - @Preview(name = DarkName, uiMode = Configuration.UI_MODE_NIGHT_YES, showBackground = true, widthDp = ImageTileSizeDp, heightDp = ImageTileSizeDp) - annotation class ImageTile + @Preview(name = LightName, widthDp = ImageItemSizeDp, heightDp = ImageItemSizeDp) + @Preview(name = DarkName, uiMode = Configuration.UI_MODE_NIGHT_YES, showBackground = true, widthDp = ImageItemSizeDp, heightDp = ImageItemSizeDp) + annotation class ImageItem @Preview(name = LightName, widthDp = TabWidthDp) @Preview(name = DarkName, uiMode = Configuration.UI_MODE_NIGHT_YES, showBackground = true, widthDp = TabWidthDp) diff --git a/lib/src/main/res/values/dimens.xml b/lib/src/main/res/values/dimens.xml index 6fa14bd2b..cf1179e76 100644 --- a/lib/src/main/res/values/dimens.xml +++ b/lib/src/main/res/values/dimens.xml @@ -37,8 +37,8 @@ 20dp - - 48dp + + 48dp 48dp From 5552199eb7b9d492132e79be5ef7306747a5f413 Mon Sep 17 00:00:00 2001 From: Florent Maitre Date: Fri, 3 Nov 2023 17:59:53 +0100 Subject: [PATCH 2/3] [#683] Remove uppercase in component names --- app/src/main/res/values/strings.xml | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/app/src/main/res/values/strings.xml b/app/src/main/res/values/strings.xml index 1fecdefd0..35ba53948 100644 --- a/app/src/main/res/values/strings.xml +++ b/app/src/main/res/values/strings.xml @@ -173,7 +173,7 @@ Remove toggle Add toggle - + Cards Vertical image first card Vertical header first card @@ -264,8 +264,8 @@ Divider example Show ingredients - - Navigation Drawers + + Navigation drawers The navigation drawer slides in from the left when the nav icon is tapped. The content should be concerned with identity and/or navigation. Side navigation drawer >>> Swipe to open drawer >>> @@ -277,8 +277,8 @@ Content example Section list example - - Radio Buttons + + Radio buttons Radio buttons enable users to choose one item from a set of mutually exclusive, related choices. @@ -302,8 +302,8 @@ Display value Stepped - - Progress Indicators + + Progress indicators 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. Linear Determinate @@ -312,7 +312,7 @@ Circular Downloading … - + Sheets: bottom Bottom sheets are surfaces anchored to the bottom of the screen that present users supplemental content. Customize the bottom sheet From 3675afa730da8fc8ca60633025ee415259d735f4 Mon Sep 17 00:00:00 2001 From: Pauline Auvray Date: Wed, 8 Nov 2023 10:01:38 +0100 Subject: [PATCH 3/3] [#683] Fix changelog after rebase --- changelog.md | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) diff --git a/changelog.md b/changelog.md index e855e59c7..0aea4001a 100644 --- a/changelog.md +++ b/changelog.md @@ -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 @@ -24,7 +32,6 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 - \[Lib\] Review and update technical documentation ([#638](https://github.com/Orange-OpenSource/ods-android/issues/638)) - \[Lib\] Update `OdsListItem` API ([#650](https://github.com/Orange-OpenSource/ods-android/issues/650)) - \[Lib\] Update `OdsSnackbarHost` API ([#674](https://github.com/Orange-OpenSource/ods-android/issues/674)) -- \[Lib\] Rename `OdsImageTile` to `OdsImageItem` ([#683](https://github.com/Orange-OpenSource/ods-android/issues/683)) ### Fixed @@ -33,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