[#141] Update list variants UI

Orange-OpenSource · Jul 12, 2022 · 2252de9 · 2252de9
1 parent e69077a
commit 2252de9
Show file tree

Hide file tree

Showing 10 changed files with 257 additions and 177 deletions.
diff --git a/demo/src/main/java/com/orange/ods/demo/ui/components/lists/ComponentList.kt b/demo/src/main/java/com/orange/ods/demo/ui/components/lists/ComponentList.kt
@@ -10,20 +10,36 @@
 
 package com.orange.ods.demo.ui.components.lists
 
+import androidx.compose.foundation.clickable
 import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.rememberScrollState
 import androidx.compose.foundation.verticalScroll
+import androidx.compose.material.Divider
 import androidx.compose.material.ExperimentalMaterialApi
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.res.dimensionResource
+import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.res.stringResource
+import com.orange.ods.compose.component.list.OdsListItem
+import com.orange.ods.compose.component.list.OdsListItemIcon
+import com.orange.ods.compose.component.list.OdsListItemWideThumbnail
+import com.orange.ods.compose.component.list.OdsListSquaredThumbnail
+import com.orange.ods.compose.component.utilities.OdsImageCircleShape
+import com.orange.ods.demo.R
 import com.orange.ods.demo.ui.components.Variant
 
+enum class ListIconType {
+    None, Default, Avatar, SmallImage, WideImage
+}
+
 @ExperimentalMaterialApi
 @Composable
 fun ComponentList(variant: Variant) {
     Column(
-        modifier = Modifier
-            .verticalScroll(rememberScrollState())
+        modifier = Modifier.verticalScroll(rememberScrollState())
     ) {
         VariantListContent(variant)
     }
@@ -38,4 +54,56 @@ private fun VariantListContent(variant: Variant) {
         Variant.ListsThreeLines -> ListThreeLinesContent()
         else -> {}
     }
-}
+}
+
+@ExperimentalMaterialApi
+@Composable
+fun List(
+    size: Int,
+    text: String? = stringResource(id = R.string.component_element_title),
+    secondaryText: String? = null,
+    singleLineSecondaryText: Boolean = true,
+    iconType: ListIconType = ListIconType.None,
+    trailing: (Int) -> (@Composable () -> Unit)?
+) {
+    Spacer(modifier = Modifier.padding(top = dimensionResource(R.dimen.spacing_s)))
+
+    val modifier = Modifier.clickable {}
+    repeat(size) { index ->
+        if (iconType == ListIconType.WideImage) {
+            OdsListItemWideThumbnail(
+                modifier = modifier,
+                text = text.orEmpty(),
+                secondaryText = secondaryText,
+                singleLineSecondaryText = singleLineSecondaryText,
+                thumbnail = painterResource(id = R.drawable.placeholder),
+                trailing = trailing(index)
+            )
+        } else {
+            val icon: @Composable (() -> Unit)? = when (iconType) {
+                ListIconType.None -> null
+                ListIconType.Default -> { -> OdsListItemIcon(painter = painterResource(id = R.drawable.ic_address_book)) }
+                ListIconType.Avatar -> { -> OdsImageCircleShape(painter = painterResource(id = R.drawable.placeholder)) }
+                ListIconType.SmallImage -> { -> OdsListSquaredThumbnail(painter = painterResource(id = R.drawable.placeholder)) }
+                ListIconType.WideImage -> { -> OdsListSquaredThumbnail(painter = painterResource(id = R.drawable.placeholder)) }
+            }
+            OdsListItem(
+                modifier = modifier,
+                text = text.orEmpty(),
+                secondaryText = secondaryText,
+                singleLineSecondaryText = singleLineSecondaryText,
+                icon = icon,
+                trailing = trailing(index)
+            )
+        }
+
+        val startIndent = when (iconType) {
+            ListIconType.None -> dimensionResource(id = R.dimen.spacing_m)
+            ListIconType.Default,
+            ListIconType.Avatar -> dimensionResource(id = R.dimen.avatar_size) + dimensionResource(id = R.dimen.spacing_m).times(2)
+            ListIconType.SmallImage -> dimensionResource(id = R.dimen.list_squared_thumbnail_size) + dimensionResource(id = R.dimen.spacing_m).times(2)
+            ListIconType.WideImage -> dimensionResource(id = R.dimen.list_wide_thumbnail_width) + dimensionResource(id = R.dimen.spacing_m)
+        }
+        Divider(startIndent = startIndent)
+    }
+}
diff --git a/demo/src/main/java/com/orange/ods/demo/ui/components/lists/VariantListOneLine.kt b/demo/src/main/java/com/orange/ods/demo/ui/components/lists/VariantListOneLine.kt
@@ -10,68 +10,67 @@
 
 package com.orange.ods.demo.ui.components.lists
 
-import androidx.compose.foundation.clickable
-import androidx.compose.material.Divider
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.padding
 import androidx.compose.material.ExperimentalMaterialApi
+import androidx.compose.material.Icon
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.getValue
 import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.remember
 import androidx.compose.runtime.setValue
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.res.dimensionResource
 import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.res.stringResource
 import com.orange.ods.compose.component.control.OdsCheckbox
-import com.orange.ods.compose.component.list.OdsListItem
-import com.orange.ods.compose.component.list.OdsListItemIcon
-import com.orange.ods.compose.component.list.OdsListItemWideThumbnail
-import com.orange.ods.compose.component.list.OdsListSquaredThumbnail
-import com.orange.ods.compose.component.utilities.OdsImageCircleShape
+import com.orange.ods.compose.component.control.OdsSwitch
 import com.orange.ods.demo.R
+import com.orange.ods.demo.ui.utilities.composable.Title
 
 @ExperimentalMaterialApi
 @Composable
 fun ListOneLineContent() {
-    var item1Checked by remember { mutableStateOf(false) }
-    var item2Checked by remember { mutableStateOf(false) }
-    var item3Checked by remember { mutableStateOf(false) }
+    Title(textRes = R.string.component_lists_with_label_text, withHorizontalPadding = true)
+    SingleLineList(text = null, secondaryText = stringResource(id = R.string.component_element_label))
 
-    OdsListItem(
-        modifier = Modifier.clickable { },
-        text = stringResource(id = R.string.component_element_text)
-    )
-    Divider()
-    OdsListItem(
-        modifier = Modifier.clickable { },
-        text = stringResource(id = R.string.component_element_text),
-        trailing = { OdsCheckbox(checked = item1Checked, onCheckedChange = { item1Checked = it }) }
-    )
-    Divider()
-    OdsListItem(
-        modifier = Modifier.clickable { },
-        text = stringResource(id = R.string.component_element_text),
-        icon = { OdsListItemIcon(painter = painterResource(id = R.drawable.ic_heart)) },
-        trailing = { OdsCheckbox(checked = item2Checked, onCheckedChange = { item2Checked = it }) }
-    )
-    Divider()
-    OdsListItem(
-        modifier = Modifier.clickable { },
-        text = stringResource(id = R.string.component_element_text),
-        icon = { OdsImageCircleShape(painter = painterResource(id = R.drawable.placeholder)) }
-    )
-    Divider()
-    OdsListItem(
-        modifier = Modifier.clickable { },
-        text = stringResource(id = R.string.component_element_text),
-        icon = { OdsListSquaredThumbnail(painter = painterResource(id = R.drawable.placeholder)) },
-        isThumbnailIcon = true
-    )
-    Divider()
-    OdsListItemWideThumbnail(
-        modifier = Modifier.clickable { },
-        text = stringResource(id = R.string.component_element_text),
-        thumbnail = painterResource(id = R.drawable.placeholder),
-        trailing = { OdsCheckbox(checked = item3Checked, onCheckedChange = { item3Checked = it }) }
-    )
-    Divider()
-}
+    Title(textRes = R.string.component_lists_with_normal_text, withHorizontalPadding = true)
+    SingleLineList()
+
+    Title(textRes = R.string.component_lists_with_icon_to_the_left, withHorizontalPadding = true)
+    SingleLineList(iconType = ListIconType.Default)
+
+    Title(textRes = R.string.component_lists_with_avatar, withHorizontalPadding = true)
+    SingleLineList(iconType = ListIconType.Avatar)
+
+    Title(textRes = R.string.component_lists_with_small_image, withHorizontalPadding = true)
+    SingleLineList(iconType = ListIconType.SmallImage)
+
+    Title(textRes = R.string.component_lists_with_larger_image, withHorizontalPadding = true)
+    SingleLineList(iconType = ListIconType.WideImage)
+
+    Spacer(modifier = Modifier.padding(bottom = dimensionResource(id = R.dimen.ods_screen_vertical_margin)))
+}
+
+@ExperimentalMaterialApi
+@Composable
+private fun SingleLineList(
+    text: String? = stringResource(id = R.string.component_element_title),
+    secondaryText: String? = null,
+    iconType: ListIconType = ListIconType.None,
+) {
+    List(size = 4, text = text, secondaryText = secondaryText, iconType = iconType) { index ->
+        if (index > 0) {
+            @Composable {
+                var checked by remember { mutableStateOf(true) }
+                when (index) {
+                    1 -> OdsCheckbox(checked = checked, onCheckedChange = { checked = it })
+                    2 -> OdsSwitch(checked = checked, onCheckedChange = { checked = it })
+                    3 -> Icon(painter = painterResource(id = R.drawable.ic_info), contentDescription = null)
+                }
+            }
+        } else {
+            null
+        }
+    }
+}
diff --git a/demo/src/main/java/com/orange/ods/demo/ui/components/lists/VariantListThreeLines.kt b/demo/src/main/java/com/orange/ods/demo/ui/components/lists/VariantListThreeLines.kt
@@ -10,72 +10,51 @@
 
 package com.orange.ods.demo.ui.components.lists
 
-import androidx.compose.foundation.clickable
-import androidx.compose.material.Divider
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.padding
 import androidx.compose.material.ExperimentalMaterialApi
-import androidx.compose.material.Icon
+import androidx.compose.material.MaterialTheme
 import androidx.compose.material.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.res.dimensionResource
 import androidx.compose.ui.res.stringResource
-import com.orange.ods.compose.component.list.OdsListItem
-import com.orange.ods.compose.component.list.OdsListItemWideThumbnail
-import com.orange.ods.compose.component.list.OdsListSquaredThumbnail
-import com.orange.ods.compose.component.utilities.OdsImageCircleShape
 import com.orange.ods.demo.R
+import com.orange.ods.demo.ui.utilities.composable.Title
 
 @ExperimentalMaterialApi
 @Composable
 fun ListThreeLinesContent() {
+    Title(textRes = R.string.component_lists_without_icon, withHorizontalPadding = true)
+    ThreeLineList()
 
-    OdsListItem(
-        modifier = Modifier.clickable { },
-        text = stringResource(id = R.string.component_element_text),
-        secondaryText = stringResource(id = R.string.component_element_secondary_text_value),
-        singleLineSecondaryText = false,
-        trailing = { Text(stringResource(id = R.string.component_element_caption)) }
-    )
-    Divider()
-    OdsListItem(
-        modifier = Modifier.clickable { },
-        text = stringResource(id = R.string.component_element_text),
-        overlineText = stringResource(id = R.string.component_element_overline),
-        secondaryText = stringResource(id = R.string.component_element_secondary_text_value)
-    )
-    Divider()
-    OdsListItem(
-        modifier = Modifier.clickable { },
-        text = stringResource(id = R.string.component_element_text),
-        secondaryText = stringResource(id = R.string.component_element_secondary_text_value),
-        singleLineSecondaryText = false,
-        icon = { Icon(painter = painterResource(id = R.drawable.ic_heart), contentDescription = null) }
-    )
-    Divider()
-    OdsListItem(
-        modifier = Modifier.clickable { },
-        text = stringResource(id = R.string.component_element_text),
-        secondaryText = stringResource(id = R.string.component_element_secondary_text_value),
-        singleLineSecondaryText = false,
-        icon = { OdsImageCircleShape(painter = painterResource(id = R.drawable.placeholder), contentDescription = null) },
-        trailing = { Text(text = stringResource(id = R.string.component_element_caption)) }
-    )
-    Divider()
-    OdsListItem(
-        modifier = Modifier.clickable { },
-        text = stringResource(id = R.string.component_element_text),
-        secondaryText = stringResource(id = R.string.component_element_secondary_text_value),
-        singleLineSecondaryText = false,
-        icon = { OdsListSquaredThumbnail(painter = painterResource(id = R.drawable.placeholder)) }
-    )
-    Divider()
-    OdsListItemWideThumbnail(
-        modifier = Modifier.clickable { },
-        text = stringResource(id = R.string.component_element_text),
-        secondaryText = stringResource(id = R.string.component_element_secondary_text_value),
-        singleLineSecondaryText = false,
-        thumbnail = painterResource(id = R.drawable.placeholder),
-        trailing = { Text(text = stringResource(id = R.string.component_element_caption)) }
-    )
-    Divider()
-}
+    Title(textRes = R.string.component_lists_with_icon_to_the_left, withHorizontalPadding = true)
+    ThreeLineList(iconType = ListIconType.Default)
+
+    Title(textRes = R.string.component_lists_with_avatar, withHorizontalPadding = true)
+    ThreeLineList(iconType = ListIconType.Avatar)
+
+    Title(textRes = R.string.component_lists_with_small_image, withHorizontalPadding = true)
+    ThreeLineList(iconType = ListIconType.SmallImage)
+
+    Title(textRes = R.string.component_lists_with_larger_image, withHorizontalPadding = true)
+    ThreeLineList(iconType = ListIconType.WideImage)
+
+    Spacer(modifier = Modifier.padding(bottom = dimensionResource(id = R.dimen.ods_screen_vertical_margin)))
+}
+
+@ExperimentalMaterialApi
+@Composable
+private fun ThreeLineList(iconType: ListIconType = ListIconType.None) {
+    val text = stringResource(id = R.string.component_element_title)
+    val secondaryText = stringResource(id = R.string.component_element_secondary_text_value)
+    List(size = 2, text = text, secondaryText = secondaryText, singleLineSecondaryText = false, iconType = iconType) { index ->
+        if (index == 0) {
+            @Composable {
+                Text(text = stringResource(id = R.string.component_element_caption), style = MaterialTheme.typography.caption)
+            }
+        } else {
+            null
+        }
+    }
+}