Skip to content

Commit

Permalink
[#804] Display OdsHorizontalCard XML version in the demo app
Browse files Browse the repository at this point in the history
  • Loading branch information
@paulinea
paulinea committed Feb 2, 2024
1 parent b9577f2 commit ca9cab3
Show file tree
Hide file tree
Showing 2 changed files with 136 additions and 19 deletions.
79 changes: 60 additions & 19 deletions app/src/main/java/com/orange/ods/app/ui/components/cards/CardHorizontal.kt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,8 @@

package com.orange.ods.app.ui.components.cards

import android.graphics.drawable.Drawable
import androidx.appcompat.content.res.AppCompatResources
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.padding
Expand All @@ -25,9 +27,13 @@ import androidx.compose.ui.res.dimensionResource
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.res.stringResource
import coil.compose.rememberAsyncImagePainter
import coil.imageLoader
import coil.request.ImageRequest
import com.orange.ods.app.R
import com.orange.ods.app.databinding.OdsHorizontalCardBinding
import com.orange.ods.app.domain.recipes.LocalRecipes
import com.orange.ods.app.ui.LocalThemeManager
import com.orange.ods.app.ui.UiFramework
import com.orange.ods.app.ui.components.utilities.clickOnElement
import com.orange.ods.app.ui.utilities.DrawableManager
import com.orange.ods.app.ui.utilities.code.CodeImplementationColumn
Expand All @@ -51,29 +57,64 @@ fun CardHorizontal(customizationState: CardCustomizationState) {
.verticalScroll(state = rememberScrollState())
.padding(dimensionResource(id = com.orange.ods.R.dimen.spacing_m))
) {
val title = recipe.title
val subtitle = if (hasSubtitle) recipe.subtitle else null
val text = if (hasText) recipe.description else null
val firstButtonText = stringResource(id = R.string.component_element_first_button)
val onFirstButtonClick = if (hasFirstButton) {
{ clickOnElement(context, firstButtonText) }
} else null
val secondButtonText = stringResource(id = R.string.component_element_second_button)
val onSecondButtonClick = if (hasSecondButton) {
{ clickOnElement(context, secondButtonText) }
} else null
val cardText = stringResource(id = R.string.component_card_element_card)

OdsHorizontalCard(
title = recipe.title,
image = OdsCard.Image(
rememberAsyncImagePainter(
model = buildImageRequest(context, recipe.imageUrl, darkModeEnabled),
placeholder = painterResource(id = DrawableManager.getPlaceholderResId()),
error = painterResource(id = DrawableManager.getPlaceholderResId(error = true))
),
""
),
subtitle = if (hasSubtitle) recipe.subtitle else null,
text = if (hasText) recipe.description else null,
onClick = if (isClickable) {
{ clickOnElement(context, cardText) }
} else null,
firstButton = if (hasFirstButton) OdsCard.Button(firstButtonText) { clickOnElement(context, firstButtonText) } else null,
secondButton = if (hasSecondButton) OdsCard.Button(secondButtonText) { clickOnElement(context, secondButtonText) } else null,
imagePosition = imagePosition.value,
divider = hasDivider
val placeholderResId = DrawableManager.getPlaceholderResId()
val errorPlaceholderResId = DrawableManager.getPlaceholderResId(error = true)

UiFramework<OdsHorizontalCardBinding>(
compose = {
OdsHorizontalCard(
title = title,
image = OdsCard.Image(
rememberAsyncImagePainter(
model = buildImageRequest(context, recipe.imageUrl, darkModeEnabled),
placeholder = painterResource(id = placeholderResId),
error = painterResource(id = errorPlaceholderResId)
),
""
),
subtitle = subtitle,
text = text,
onClick = if (isClickable) {
{ clickOnElement(context, cardText) }
} else null,
firstButton = onFirstButtonClick?.let { OdsCard.Button(firstButtonText, it) },
secondButton = onSecondButtonClick?.let { OdsCard.Button(secondButtonText, it) },
imagePosition = imagePosition.value,
divider = hasDivider
)
},
xml = {
this.title = title
this.subtitle = subtitle
this.text = text

this.firstButtonText = firstButtonText
this.secondButtonText = secondButtonText
odsHorizontalCard.onFirstButtonClick = onFirstButtonClick
odsHorizontalCard.onSecondButtonClick = onSecondButtonClick

odsHorizontalCard.image = AppCompatResources.getDrawable(context, placeholderResId)
val onDrawable: (Drawable?) -> Unit = { odsHorizontalCard.image = it }
val request = ImageRequest.Builder(buildImageRequest(context, recipe.imageUrl, darkModeEnabled))
.error(errorPlaceholderResId)
.target(onError = onDrawable, onSuccess = onDrawable)
.build()
context.imageLoader.enqueue(request)
this.imagePosition = this@with.imagePosition.value
}
)

CodeImplementationColumn(
Expand Down
76 changes: 76 additions & 0 deletions app/src/main/res/layout/ods_horizontal_card.xml
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,76 @@
<?xml version="1.0" encoding="utf-8"?>

<!--
~ Software Name: Orange Design System
~ SPDX-FileCopyrightText: Copyright (c) Orange SA
~ SPDX-License-Identifier: MIT
~
~ This software is distributed under the MIT licence,
~ the text of which is available at https://opensource.org/license/MIT/
~ or see the "LICENSE" file for more details.
~
~ Software description: Android library of reusable graphical components
-->

<layout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">

<data>

<variable
name="title"
type="String" />

<variable
name="subtitle"
type="String" />

<variable
name="text"
type="String" />

<variable
name="firstButtonText"
type="String" />

<variable
name="secondButtonText"
type="String" />

<variable
name="imagePosition"
type="com.orange.ods.compose.component.card.OdsCard.Image.Position" />
</data>

<FrameLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">

<com.orange.ods.xml.component.card.OdsHorizontalCard
android:id="@+id/ods_horizontal_card"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:title="@{title}"
app:subtitle="@{subtitle}"
app:text="@{text}"
app:firstButtonText="@{firstButtonText}"
app:secondButtonText="@{secondButtonText}"
app:odsHorizontalCardImagePosition="@{imagePosition}" />

<!-- Invisible OdsHorizontalCard used for tests -->
<com.orange.ods.xml.component.card.OdsHorizontalCard
android:id="@+id/ods_horizontal_card_test"
android:visibility="gone"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:title="Card title"
app:subtitle="Card subtitle"
app:text="Text displayed in the card."
app:firstButtonText="First button"
app:secondButtonText="Second button"
app:imageContentDescription="Content description of the image"
app:odsHorizontalCardImagePosition="end" />

</FrameLayout>

</layout>

0 comments on commit ca9cab3

Please sign in to comment.