Skip to content

Commit

Permalink
[#360] Add sheet bottom v1
Browse files Browse the repository at this point in the history
  • Loading branch information
dolinetouko committed Feb 10, 2023
1 parent aa833d0 commit 4a7591a
Show file tree
Hide file tree
Showing 10 changed files with 341 additions and 15 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@ sealed class Component(
AppBarsTop, BottomNavigation -> Alignment.TopCenter
Lists -> Alignment.BottomCenter
Sliders, TextFields -> Alignment.CenterEnd
Buttons, Cards, Checkboxes, Chips, Dialogs, FloatingActionButtons, Menus, Progress, RadioButtons, Snackbars, Switches, Tabs -> Alignment.Center
Buttons, Cards, Sheets, Checkboxes, Chips, Dialogs, FloatingActionButtons, Menus, Progress, RadioButtons, Snackbars, Switches, Tabs -> Alignment.Center
}

object AppBarsTop : Component(
Expand Down Expand Up @@ -144,6 +144,14 @@ sealed class Component(
composableName = OdsComponent.OdsRadioButton.name
)

object Sheets : Component(
R.string.component_sheets,
R.drawable.il_bottom_sheet,
null,
R.string.component_sheet_description,
composableName = ""
)

object Sliders : Component(
R.string.component_sliders,
R.drawable.il_sliders,
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@ import com.orange.ods.demo.ui.components.dialogs.ComponentDialog
import com.orange.ods.demo.ui.components.floatingactionbuttons.ComponentFloatingActionButton
import com.orange.ods.demo.ui.components.lists.ComponentLists
import com.orange.ods.demo.ui.components.radiobuttons.ComponentRadioButtons
import com.orange.ods.demo.ui.components.sheets.ComponentSheetBottom
import com.orange.ods.demo.ui.components.sliders.ComponentSliders
import com.orange.ods.demo.ui.components.snackbars.ComponentSnackbars
import com.orange.ods.demo.ui.components.switches.ComponentSwitches
Expand All @@ -36,6 +37,7 @@ fun ComponentDemoScreen(componentId: Long) {
Component.FloatingActionButtons -> ComponentFloatingActionButton()
Component.Lists -> ComponentLists()
Component.RadioButtons -> ComponentRadioButtons()
Component.Sheets -> ComponentSheetBottom()
Component.Sliders -> ComponentSliders()
Component.Snackbars -> ComponentSnackbars()
Component.Switches -> ComponentSwitches()
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,100 @@
/*
*
* 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.sheets

import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.padding
import androidx.compose.material.ExperimentalMaterialApi
import androidx.compose.material.rememberBottomSheetScaffoldState
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.res.dimensionResource
import androidx.compose.ui.res.stringResource
import com.orange.ods.compose.component.chip.OdsChoiceChip
import com.orange.ods.compose.component.chip.OdsChoiceChipsFlowRow
import com.orange.ods.compose.component.list.OdsListItem
import com.orange.ods.compose.text.OdsTextCaption
import com.orange.ods.compose.text.OdsTextH6
import com.orange.ods.demo.R
import com.orange.ods.demo.domain.recipes.LocalRecipes
import com.orange.ods.demo.ui.components.utilities.ComponentCustomizationBottomSheetScaffold
import com.orange.ods.demo.ui.utilities.composable.CodeImplementationColumn
import com.orange.ods.demo.ui.utilities.composable.FloatingActionButtonTechnicalTextColumn


@OptIn(ExperimentalMaterialApi::class)
@Composable
fun ComponentSheetBottom() {

val sheetsbottomCustomizationState = rememberSheetsbottomCustomizationState()

with(sheetsbottomCustomizationState) {


ComponentCustomizationBottomSheetScaffold(
bottomSheetScaffoldState = rememberBottomSheetScaffoldState(),

bottomSheetContent = {
when (content.value) {
SheetsbottomCustomizationState.Content.Empty -> {
OdsListItem(
text = ""
)
}

SheetsbottomCustomizationState.Content.Example -> {
val recipes = LocalRecipes.current
recipes.forEach { recipe ->
OdsListItem(
//icon = recipe.iconResId?.let { iconRes ->
// {
// OdsListItemIcon(
// painter = painterResource(id = iconRes),
// contentDescription = null
// )
//}
//},
text = recipe.title
)
}

}

}
}
) {
Column() {
Column(
modifier = Modifier
.padding(top = dimensionResource(id = R.dimen.screen_vertical_margin))
.padding(horizontal = dimensionResource(id = R.dimen.screen_horizontal_margin))
) {
OdsTextH6(text = stringResource(id = R.string.component_sheet_customize))
OdsTextCaption(text = stringResource(id = R.string.component_content))

OdsChoiceChipsFlowRow(
selectedChip = content,
outlinedChips = true
) {
OdsChoiceChip(textRes = R.string.component_sheet_empty, value = SheetsbottomCustomizationState.Content.Empty)
OdsChoiceChip(textRes = R.string.component_sheet_example, value = SheetsbottomCustomizationState.Content.Example)
}
}

CodeImplementationColumn {
FloatingActionButtonTechnicalTextColumn(
componentName = ""
)
}
}
}
}
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,42 @@
/*
*
* 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.sheets

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


@Composable
fun rememberSheetsbottomCustomizationState(
content: MutableState<SheetsbottomCustomizationState.Content> = rememberSaveable { mutableStateOf(SheetsbottomCustomizationState.Content.Empty) },
) =
remember(
content,
) {
SheetsbottomCustomizationState(
content,
)
}

class SheetsbottomCustomizationState(

val content: MutableState<Content>,
) {

enum class Content {
Empty, Example
}


}
Original file line number Diff line number Diff line change
Expand Up @@ -87,17 +87,17 @@ fun ComponentCustomizationBottomSheetScaffold(
.semantics {
stateDescription = bottomSheetHeaderStateDescription
},
text = stringResource(id = R.string.component_customize),
icon = {
val degrees = if (bottomSheetScaffoldState.bottomSheetState.isExpanded) 0f else -180f
val angle by animateFloatAsState(targetValue = degrees)
Icon(
modifier = Modifier.rotate(angle),
painter = painterResource(id = R.drawable.ic_chevron_down),
contentDescription = null,
tint = OdsTheme.colors.onSurface
)
})
text = stringResource(id = R.string.component_customize)
) {
val degrees = if (bottomSheetScaffoldState.bottomSheetState.isExpanded) 0f else -180f
val angle by animateFloatAsState(targetValue = degrees)
Icon(
modifier = Modifier.rotate(angle),
painter = painterResource(id = R.drawable.ic_chevron_down),
contentDescription = null,
tint = OdsTheme.colors.onSurface
)
}

Column(modifier = Modifier.verticalScroll(rememberScrollState())) {
bottomSheetContent()
Expand Down
47 changes: 47 additions & 0 deletions demo/src/main/res/drawable/il_bottom_sheet.xml
Original file line number Diff line number Diff line change
@@ -0,0 +1,47 @@
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="400dp"
android:height="200dp"
android:viewportWidth="400"
android:viewportHeight="200">
<path
android:pathData="M0,0h400v200h-400z"
android:fillColor="#1b1b1b"/>
<path
android:pathData="M93.29,37.18l-5.29,5.82l-5.29,-5.82l-4.71,-5.18l-6.47,5.18l-19.53,0l0,44l128,0l0,-44l-86.71,0z"
android:fillColor="#ccc"/>
<path
android:pathData="m53.42,77.18h125.16c0.79,0 1.42,0.64 1.42,1.42v89.4H52v-89.4c0,-0.79 0.64,-1.42 1.42,-1.42Z"
android:fillColor="#fff"
android:fillType="evenOdd"/>
<path
android:pathData="M261.29,37.18l-5.29,5.82l-5.29,-5.82l-4.71,-5.18l-6.47,5.18l-19.53,0l0,44l128,0l0,-44l-86.71,0z"
android:fillColor="#ccc"/>
<path
android:pathData="m221.42,79.18h125.16c0.79,0 1.42,0.64 1.42,1.42v87.4h-128v-87.4c0,-0.79 0.64,-1.42 1.42,-1.42Z"
android:fillColor="#fff"
android:fillType="evenOdd"/>
<path
android:pathData="M227.5,86.11h15.38v15.38h-15.38z"
android:fillColor="#ccc"/>
<path
android:pathData="M247.92,90.91h23.06v5.77h-23.06z"
android:fillColor="#ccc"/>
<path
android:pathData="M247.68,110.78h42.29v5.77h-42.29z"
android:fillColor="#ccc"/>
<path
android:pathData="M247.68,130.64h36.52v5.77h-36.52z"
android:fillColor="#ccc"/>
<path
android:pathData="M247.68,150.5h53.82v5.77h-53.82z"
android:fillColor="#ccc"/>
<path
android:pathData="M227.5,105.97h15.38v15.38h-15.38z"
android:fillColor="#ccc"/>
<path
android:pathData="M227.5,125.83h15.38v15.38h-15.38z"
android:fillColor="#ccc"/>
<path
android:pathData="M227.5,145.69h15.38v15.38h-15.38z"
android:fillColor="#ccc"/>
</vector>
47 changes: 47 additions & 0 deletions demo/src/main/res/drawable/il_bottom_sheet_generic.xml
Original file line number Diff line number Diff line change
@@ -0,0 +1,47 @@
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="400dp"
android:height="200dp"
android:viewportWidth="400"
android:viewportHeight="200">
<path
android:pathData="M0,0h400v200h-400z"
android:fillColor="#1b1b1b"/>
<path
android:pathData="M93.29,37.18l-5.29,5.82l-5.29,-5.82l-4.71,-5.18l-6.47,5.18l-19.53,0l0,44l128,0l0,-44l-86.71,0z"
android:fillColor="#ccc"/>
<path
android:pathData="m53.42,77.18h125.16c0.79,0 1.42,0.64 1.42,1.42v89.4H52v-89.4c0,-0.79 0.64,-1.42 1.42,-1.42Z"
android:fillColor="#fff"
android:fillType="evenOdd"/>
<path
android:pathData="M261.29,37.18l-5.29,5.82l-5.29,-5.82l-4.71,-5.18l-6.47,5.18l-19.53,0l0,44l128,0l0,-44l-86.71,0z"
android:fillColor="#ccc"/>
<path
android:pathData="m221.42,79.18h125.16c0.79,0 1.42,0.64 1.42,1.42v87.4h-128v-87.4c0,-0.79 0.64,-1.42 1.42,-1.42Z"
android:fillColor="#fff"
android:fillType="evenOdd"/>
<path
android:pathData="M227.5,86.11h15.38v15.38h-15.38z"
android:fillColor="#ccc"/>
<path
android:pathData="M247.92,90.91h23.06v5.77h-23.06z"
android:fillColor="#ccc"/>
<path
android:pathData="M247.68,110.78h42.29v5.77h-42.29z"
android:fillColor="#ccc"/>
<path
android:pathData="M247.68,130.64h36.52v5.77h-36.52z"
android:fillColor="#ccc"/>
<path
android:pathData="M247.68,150.5h53.82v5.77h-53.82z"
android:fillColor="#ccc"/>
<path
android:pathData="M227.5,105.97h15.38v15.38h-15.38z"
android:fillColor="#ccc"/>
<path
android:pathData="M227.5,125.83h15.38v15.38h-15.38z"
android:fillColor="#ccc"/>
<path
android:pathData="M227.5,145.69h15.38v15.38h-15.38z"
android:fillColor="#ccc"/>
</vector>
8 changes: 8 additions & 0 deletions demo/src/main/res/values/strings.xml
Original file line number Diff line number Diff line change
Expand Up @@ -243,6 +243,14 @@
<string name="component_list_divider">Divider</string>
<string name="component_list_information">Information</string>

<!-- Components Sheets -->
<string name="component_sheets">Sheets : bottom</string>
<string name="component_sheet_description">Bottom sheets are surfaces anchored to the bottom of the screen that present users supplemental content.</string>
<string name="component_content">Content</string>
<string name="component_sheet_customize">Customize the bottom sheet</string>
<string name="component_sheet_empty">Empty</string>
<string name="component_sheet_example">Example</string>

<!-- Component Snackbars -->
<string name="component_snackbars">Snackbars</string>
<string name="component_snackbars_description">There are two ways to show users short, non permanent messages giving system information or feedback about an operation.</string>
Expand Down
Loading

0 comments on commit 4a7591a

Please sign in to comment.