Skip to content

Commit

Permalink
[#254] Apply same structure for components detail screens
Browse files Browse the repository at this point in the history
  • Loading branch information
@paulinea
paulinea committed Sep 8, 2022
1 parent 7f87f04 commit 47afcb7
Show file tree
Hide file tree
Showing 14 changed files with 247 additions and 159 deletions.
4 changes: 3 additions & 1 deletion demo/src/main/java/com/orange/ods/demo/ui/OdsDemoAppState.kt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,9 @@ object MainDestinations {

const val COMPONENT_DETAIL_ROUTE = "component"
const val COMPONENT_ID_KEY = "componentId"
const val COMPONENT_SUBTYPE_ROUTE = "component/subtype"
const val COMPONENT_VARIANT_ROUTE = "component/variant"
const val COMPONENT_VARIANT_ID_KEY = "componentVariantId"
const val COMPONENT_DEMO_ROUTE = "component/demo"

const val ABOUT_ITEM_DETAIL_ROUTE = "aboutItem"
const val ABOUT_ITEM_ID_KEY = "aboutItemId"
Expand Down
32 changes: 2 additions & 30 deletions demo/src/main/java/com/orange/ods/demo/ui/components/Component.kt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,17 +12,8 @@ package com.orange.ods.demo.ui.components

import androidx.annotation.DrawableRes
import androidx.annotation.StringRes
import androidx.compose.material.ExperimentalMaterialApi
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import com.orange.ods.demo.R
import com.orange.ods.demo.ui.components.bottomnavigation.ComponentBottomNavigation
import com.orange.ods.demo.ui.components.checkboxes.ComponentCheckboxesContent
import com.orange.ods.demo.ui.components.dialogs.ComponentDialogsContent
import com.orange.ods.demo.ui.components.progress.ComponentProgressContent
import com.orange.ods.demo.ui.components.radiobuttons.ComponentRadioButtonsContent
import com.orange.ods.demo.ui.components.sliders.ComponentSlidersContent
import com.orange.ods.demo.ui.components.switches.ComponentSwitchesContent

sealed class Component(
@StringRes val titleRes: Int,
Expand All @@ -32,7 +23,6 @@ sealed class Component(
val variants: List<Variant> = emptyList()
) {
companion object {

const val ImageBackgroundColor = 0xff1b1b1b
}

Expand Down Expand Up @@ -88,8 +78,7 @@ sealed class Component(
R.string.component_lists,
R.drawable.il_lists,
null,
R.string.component_lists_description,
listOf(Variant.Lists)
R.string.component_lists_description
)

object Progress : Component(R.string.component_progress, R.drawable.il_progress, null, R.string.component_progress_description)
Expand All @@ -111,21 +100,6 @@ sealed class Component(
R.string.component_tabs_description,
listOf(Variant.TabsFixed, Variant.TabsScrollable)
)

@ExperimentalMaterialApi
@Composable
fun Detail(onVariantClick: (Long) -> Unit) {
return when (this) {
BottomNavigation -> ComponentBottomNavigation()
Checkboxes -> ComponentDetail(component = this) { ComponentCheckboxesContent() }
Dialogs -> ComponentDetail(component = this) { ComponentDialogsContent() }
Progress -> ComponentDetail(component = this) { ComponentProgressContent() }
RadioButtons -> ComponentDetail(component = this) { ComponentRadioButtonsContent() }
Sliders -> ComponentDetail(component = this) { ComponentSlidersContent() }
Switches -> ComponentDetail(component = this) { ComponentSwitchesContent() }
AppBarsTop, Buttons, Cards, Chips, Lists, TextFields, Tabs -> ComponentDetailWithVariants(component = this, onVariantClick = onVariantClick)
}
}
}

val components = Component::class.sealedSubclasses.mapNotNull { it.objectInstance }
Expand All @@ -139,7 +113,7 @@ sealed class Variant(
TextFieldOutlined(R.string.component_text_field_outlined),
TextFieldFilled(R.string.component_text_field_filled)
}

val id: Long = Variant::class.sealedSubclasses.indexOf(this::class).toLong()

object AppBarsTopRegular : Variant(R.string.component_app_bars_top_regular)
Expand All @@ -156,8 +130,6 @@ sealed class Variant(
object Chip : Variant(R.string.component_chip)
object ChipFilter : Variant(R.string.component_chip_filter)

object Lists : Variant(R.string.component_lists_demo)

object TextFieldFilledText : Variant(R.string.component_text_field_text, Section.TextFieldFilled)
object TextFieldFilledPassword : Variant(R.string.component_text_field_password, Section.TextFieldFilled)
object TextFieldOutlinedText : Variant(R.string.component_text_field_text, Section.TextFieldOutlined)
Expand Down
48 changes: 48 additions & 0 deletions demo/src/main/java/com/orange/ods/demo/ui/components/ComponentDemoScreen.kt
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,48 @@
/*
*
* Copyright 2021 Orange
*
* Use of this source code is governed by an MIT-style
* license that can be found in the LICENSE file or at
* https://opensource.org/licenses/MIT.
* /
*/

package com.orange.ods.demo.ui.components

import androidx.compose.material.ExperimentalMaterialApi
import androidx.compose.runtime.Composable
import androidx.compose.runtime.remember
import com.orange.ods.demo.ui.components.bottomnavigation.ComponentBottomNavigation
import com.orange.ods.demo.ui.components.checkboxes.ComponentCheckboxes
import com.orange.ods.demo.ui.components.dialogs.ComponentDialogs
import com.orange.ods.demo.ui.components.lists.ComponentLists
import com.orange.ods.demo.ui.components.progress.ComponentProgress
import com.orange.ods.demo.ui.components.radiobuttons.ComponentRadioButtons
import com.orange.ods.demo.ui.components.sliders.ComponentSliders
import com.orange.ods.demo.ui.components.switches.ComponentSwitches

@ExperimentalMaterialApi
@Composable
fun ComponentDemoScreen(
componentId: Long,
updateTopBarTitle: (Int) -> Unit,
) {
val component = remember { components.firstOrNull { it.id == componentId } }

component?.let {
updateTopBarTitle(component.titleRes)
when (component) {
Component.BottomNavigation -> ComponentBottomNavigation()
Component.Checkboxes -> ComponentCheckboxes()
Component.Dialogs -> ComponentDialogs()
Component.Lists -> ComponentLists()
Component.Progress -> ComponentProgress()
Component.RadioButtons -> ComponentRadioButtons()
Component.Sliders -> ComponentSliders()
Component.Switches -> ComponentSwitches()
else -> {}
}
}

}
102 changes: 47 additions & 55 deletions demo/src/main/java/com/orange/ods/demo/ui/components/ComponentDetailScreen.kt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,11 +19,14 @@ import androidx.compose.foundation.rememberScrollState
import androidx.compose.foundation.verticalScroll
import androidx.compose.material.Divider
import androidx.compose.material.ExperimentalMaterialApi
import androidx.compose.material.Scaffold
import androidx.compose.material.Icon
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.PlayArrow
import androidx.compose.runtime.Composable
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.platform.LocalContext
import androidx.compose.ui.res.dimensionResource
import androidx.compose.ui.res.stringResource
import com.orange.ods.compose.component.list.OdsListItem
Expand All @@ -36,74 +39,63 @@ import com.orange.ods.demo.ui.components.utilities.ComponentHeader
fun ComponentDetailScreen(
componentId: Long,
onVariantClick: (Long) -> Unit,
onDemoClick: () -> Unit,
updateTopBarTitle: (Int) -> Unit
) {
val context = LocalContext.current
val component = remember { components.firstOrNull { component -> component.id == componentId } }

component?.let {
updateTopBarTitle(component.titleRes)
component.Detail(onVariantClick = onVariantClick)
}
}

@ExperimentalMaterialApi
@Composable
fun ComponentDetail(component: Component, bottomBar: @Composable () -> Unit = {}, content: @Composable () -> Unit) {
Scaffold(bottomBar = bottomBar) { innerPadding ->
Box(modifier = Modifier.padding(innerPadding)) {
Column(
modifier = Modifier
.verticalScroll(rememberScrollState())
.padding(bottom = dimensionResource(id = R.dimen.ods_screen_vertical_margin))
) {
ComponentHeader(
imageRes = component.imageRes,
imageAlignment = component.imageAlignment,
description = component.descriptionRes
)
Column(
modifier = Modifier
.verticalScroll(rememberScrollState())
.padding(bottom = dimensionResource(id = R.dimen.spacing_m))
modifier = Modifier.padding(top = dimensionResource(id = R.dimen.spacing_m))
) {
ComponentHeader(
imageRes = component.imageRes,
imageAlignment = component.imageAlignment,
description = component.descriptionRes
)
content()
if (component.variants.isEmpty()) {
ComponentDetailLinkItem(
context.getString(
R.string.component_demo,
context.getString(component.titleRes)
)
) { onDemoClick() }
} else {
component.variants.groupBy { it.section }.forEach { (section, variants) ->
section?.let {
Divider(modifier = Modifier.padding(top = dimensionResource(id = R.dimen.spacing_s)))
Box(modifier = Modifier.height(dimensionResource(id = R.dimen.list_single_line_item_height)), contentAlignment = Alignment.Center) {
OdsTextSubtitle2(
modifier = Modifier
.padding(horizontal = dimensionResource(id = R.dimen.ods_screen_horizontal_margin)),
text = stringResource(id = section.titleRes)
)
}

}
variants.forEach { variant ->
ComponentDetailLinkItem(stringResource(id = variant.titleRes)) { onVariantClick(variant.id) }
}
}
}
}
}
}
}

@ExperimentalMaterialApi
@Composable
fun ComponentDetailWithVariants(component: Component, onVariantClick: (Long) -> Unit) {
Column(
modifier = Modifier
.verticalScroll(rememberScrollState())
.padding(bottom = dimensionResource(id = R.dimen.ods_screen_vertical_margin))
) {
ComponentHeader(
imageRes = component.imageRes,
imageAlignment = component.imageAlignment,
description = component.descriptionRes
)
Column(
modifier = Modifier.padding(top = dimensionResource(id = R.dimen.spacing_m))
) {
component.variants.groupBy { it.section }.onEachIndexed { index, (section, variants) ->
section?.let {
if (index > 0) {
Divider(modifier = Modifier.padding(top = dimensionResource(id = R.dimen.spacing_s)))
}
Box(modifier = Modifier.height(dimensionResource(id = R.dimen.list_single_line_item_height)), contentAlignment = Alignment.Center) {
OdsTextSubtitle2(
modifier = Modifier
.padding(horizontal = dimensionResource(id = R.dimen.ods_screen_horizontal_margin)),
text = stringResource(id = section.titleRes)
)
}

}
variants.forEach { variant ->
OdsListItem(text = stringResource(id = variant.titleRes), modifier = Modifier.clickable {
onVariantClick(variant.id)
})
}

}
}
}
private fun ComponentDetailLinkItem(label: String, onClick: () -> Unit) {
OdsListItem(
icon = { Icon(imageVector = Icons.Filled.PlayArrow, contentDescription = null) },
text = label,
modifier = Modifier.clickable { onClick() })
}
4 changes: 1 addition & 3 deletions ...demo/ui/components/VariantDetailScreen.kt → ...o/ui/components/ComponentVariantScreen.kt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,15 +20,14 @@ import com.orange.ods.demo.ui.components.buttons.ComponentButtons
import com.orange.ods.demo.ui.components.cards.ComponentCard
import com.orange.ods.demo.ui.components.chips.VariantChip
import com.orange.ods.demo.ui.components.chips.VariantChipFilter
import com.orange.ods.demo.ui.components.lists.ComponentLists
import com.orange.ods.demo.ui.components.tabs.ComponentTabs
import com.orange.ods.demo.ui.components.tabs.TabsConfiguration
import com.orange.ods.demo.ui.components.textfields.ComponentTextField

@ExperimentalMaterialApi
@ExperimentalPagerApi
@Composable
fun VariantDetailScreen(
fun ComponentVariantScreen(
variantId: Long,
updateTopBarTitle: (Int) -> Unit,
updateTopAppBar: (TopAppBarConfiguration) -> Unit,
Expand All @@ -44,7 +43,6 @@ fun VariantDetailScreen(
Component.Buttons -> ComponentButtons(variant = variant)
Component.Cards -> ComponentCard(variant = variant)
Component.Chips -> if (variant == Variant.ChipFilter) VariantChipFilter() else VariantChip()
Component.Lists -> ComponentLists()
Component.TextFields -> ComponentTextField(variant = variant)
Component.Tabs -> ComponentTabs(variant, updateTopAppBarTabs)
else -> {}
Expand Down
23 changes: 18 additions & 5 deletions demo/src/main/java/com/orange/ods/demo/ui/components/ComponentsNavGraph.kt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -43,22 +43,35 @@ fun NavGraphBuilder.addComponentsGraph(
val componentId = arguments.getLong(MainDestinations.COMPONENT_ID_KEY)
ComponentDetailScreen(
componentId,
onVariantClick = { id -> onNavElementClick(MainDestinations.COMPONENT_SUBTYPE_ROUTE, id, from) },
onVariantClick = { variantId -> onNavElementClick(MainDestinations.COMPONENT_VARIANT_ROUTE, variantId, from) },
onDemoClick = { onNavElementClick(MainDestinations.COMPONENT_DEMO_ROUTE, componentId, from) },
updateTopBarTitle = updateTopBarTitle
)
}

composable(
"${MainDestinations.COMPONENT_SUBTYPE_ROUTE}/{${MainDestinations.COMPONENT_ID_KEY}}",
arguments = listOf(navArgument(MainDestinations.COMPONENT_ID_KEY) { type = NavType.LongType })
"${MainDestinations.COMPONENT_VARIANT_ROUTE}/{${MainDestinations.COMPONENT_VARIANT_ID_KEY}}",
arguments = listOf(navArgument(MainDestinations.COMPONENT_VARIANT_ID_KEY) { type = NavType.LongType })
) { from ->
val arguments = requireNotNull(from.arguments)
val variantId = arguments.getLong(MainDestinations.COMPONENT_ID_KEY)
VariantDetailScreen(
val variantId = arguments.getLong(MainDestinations.COMPONENT_VARIANT_ID_KEY)
ComponentVariantScreen(
variantId = variantId,
updateTopBarTitle = updateTopBarTitle,
updateTopAppBar = updateTopAppBar,
updateTopAppBarTabs = updateTopAppBarTabs
)
}

composable(
"${MainDestinations.COMPONENT_DEMO_ROUTE}/{${MainDestinations.COMPONENT_ID_KEY}}",
arguments = listOf(navArgument(MainDestinations.COMPONENT_ID_KEY) { type = NavType.LongType })
) { from ->
val arguments = requireNotNull(from.arguments)
val componentId = arguments.getLong(MainDestinations.COMPONENT_ID_KEY)
ComponentDemoScreen(
componentId = componentId,
updateTopBarTitle = updateTopBarTitle
)
}
}
23 changes: 17 additions & 6 deletions ...main/java/com/orange/ods/demo/ui/components/bottomnavigation/ComponentBottomNavigation.kt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,9 +11,14 @@
package com.orange.ods.demo.ui.components.bottomnavigation

import androidx.annotation.DrawableRes
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
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.Icon
import androidx.compose.material.Scaffold
import androidx.compose.runtime.Composable
import androidx.compose.runtime.MutableState
import androidx.compose.runtime.mutableStateOf
Expand All @@ -27,8 +32,6 @@ import androidx.compose.ui.res.stringResource
import com.orange.ods.compose.component.bottomnavigation.OdsBottomNavigation
import com.orange.ods.compose.component.bottomnavigation.OdsBottomNavigationItem
import com.orange.ods.demo.R
import com.orange.ods.demo.ui.components.Component
import com.orange.ods.demo.ui.components.ComponentDetail
import com.orange.ods.demo.ui.components.bottomnavigation.ComponentBottomNavigation.MaxNavigationItemCount
import com.orange.ods.demo.ui.components.bottomnavigation.ComponentBottomNavigation.MinNavigationItemCount
import com.orange.ods.demo.ui.components.utilities.ComponentCountRow
Expand All @@ -43,10 +46,18 @@ private object ComponentBottomNavigation {
@ExperimentalMaterialApi
fun ComponentBottomNavigation() {
val selectedNavigationItemCount = rememberSaveable { mutableStateOf(MinNavigationItemCount) }
ComponentDetail(
component = Component.BottomNavigation,
bottomBar = { ComponentBottomNavigationBottomBar(selectedNavigationItemCount = selectedNavigationItemCount) },
content = { ComponentBottomNavigationContent(selectedNavigationItemCount = selectedNavigationItemCount) })

Scaffold(bottomBar = { ComponentBottomNavigationBottomBar(selectedNavigationItemCount = selectedNavigationItemCount) }) { innerPadding ->
Box(modifier = Modifier.padding(innerPadding)) {
Column(
modifier = Modifier
.verticalScroll(rememberScrollState())
.padding(bottom = dimensionResource(id = R.dimen.spacing_m))
) {
ComponentBottomNavigationContent(selectedNavigationItemCount = selectedNavigationItemCount)
}
}
}
}

@Composable
Expand Down
Loading

0 comments on commit 47afcb7

Please sign in to comment.