Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

ANDROAPP-5486-mobile-ui-Bottom-Sheet-Shell #61

Merged
merged 13 commits into from
Oct 2, 2023
Merged

ANDROAPP-5486-mobile-ui-Bottom-Sheet-Shell #61

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
24414cb
add: [ANDROAPP-5486] component created, spacing added
DavidAparicioAlbaAsenjo Sep 1, 2023
fc2bbcf
add: [ANDROAPP-5486] styles, animation and button to show the compone…
DavidAparicioAlbaAsenjo Sep 5, 2023
f2113a5
update: [ANDROAPP-5486] dialog properties added, new parameter onDism…
DavidAparicioAlbaAsenjo Sep 6, 2023
ec88405
update: [ANDROAPP-5486] code formated
DavidAparicioAlbaAsenjo Sep 6, 2023
e884213
update: [ANDROAPP-5486] code clean up
DavidAparicioAlbaAsenjo Sep 8, 2023
eefc9f9
Add platform specific implementations for ModalBottomSheet
xavimolloy Sep 8, 2023
30d512f
platform specific implementations
xavimolloy Sep 12, 2023
768f413
small corrections and Legend pop up implementation
xavimolloy Sep 13, 2023
d4ef1b0
last adjustments
xavimolloy Sep 13, 2023
2bc1de4
add documentation and test tag
xavimolloy Sep 13, 2023
8e14283
Update kotlin version and remove platform specific implementations, r…
xavimolloy Sep 15, 2023
a23b1fb
modify title color
xavimolloy Oct 2, 2023
8aabc4e
make BottomSheetIconButton internal and update compose to latest version
xavimolloy Oct 2, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions common/src/commonMain/kotlin/org/hisp/dhis/common/App.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,7 @@ import androidx.compose.ui.graphics.Color
import org.hisp.dhis.common.screens.BadgesScreen
import org.hisp.dhis.common.screens.BarcodeBlockScreen
import org.hisp.dhis.common.screens.BottomSheetHeaderScreen
import org.hisp.dhis.common.screens.BottomSheetScreen
import org.hisp.dhis.common.screens.ButtonBlockScreen
import org.hisp.dhis.common.screens.ButtonScreen
import org.hisp.dhis.common.screens.CheckboxScreen
Expand Down Expand Up @@ -132,6 +133,7 @@ fun Main() {
Components.BUTTON_BLOCK -> ButtonBlockScreen()
Components.METADATA_AVATAR -> MetadataAvatarScreen()
Components.BOTTOM_SHEET_HEADER -> BottomSheetHeaderScreen()
Components.BOTTOM_SHEET -> BottomSheetScreen()
andresmr marked this conversation as resolved.
Show resolved Hide resolved
Components.TAGS -> TagsScreen()
Components.SECTIONS -> SectionScreen()
Components.INPUT_POSITIVE_INTEGER_OR_ZERO -> InputPositiveIntegerOrZeroScreen()
Expand Down
1 change: 1 addition & 0 deletions common/src/commonMain/kotlin/org/hisp/dhis/common/screens/BottomSheetHeaderScreen.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -81,5 +81,6 @@ fun BottomSheetHeaderScreen() {
},
)
}
SubTitle("Bottom sheet shell with header, content and buttons", TextColor.OnSurface)
}
}
282 changes: 282 additions & 0 deletions common/src/commonMain/kotlin/org/hisp/dhis/common/screens/BottomSheetScreen.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,282 @@
package org.hisp.dhis.common.screens

import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.size
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Add
import androidx.compose.material.icons.outlined.Info
import androidx.compose.material3.Icon
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.saveable.rememberSaveable
import androidx.compose.runtime.setValue
import androidx.compose.ui.Modifier
import org.hisp.dhis.common.screens.previews.longLegendList
import org.hisp.dhis.common.screens.previews.lorem
import org.hisp.dhis.common.screens.previews.regularLegendList
import org.hisp.dhis.mobile.ui.designsystem.component.BottomSheetShell
import org.hisp.dhis.mobile.ui.designsystem.component.Button
import org.hisp.dhis.mobile.ui.designsystem.component.ButtonBlock
import org.hisp.dhis.mobile.ui.designsystem.component.ButtonStyle
import org.hisp.dhis.mobile.ui.designsystem.component.ColumnComponentContainer
import org.hisp.dhis.mobile.ui.designsystem.component.LegendRange
import org.hisp.dhis.mobile.ui.designsystem.component.SubTitle
import org.hisp.dhis.mobile.ui.designsystem.theme.Spacing
import org.hisp.dhis.mobile.ui.designsystem.theme.SurfaceColor

@Composable
fun BottomSheetScreen() {
var showBottomSheetShellScrollableContent by rememberSaveable { mutableStateOf(false) }

var showLegendBottomSheetShell by rememberSaveable { mutableStateOf(false) }
var showBottomSheetShellMaxExpansion by rememberSaveable { mutableStateOf(false) }
var showBottomSheetShellSingleButton by rememberSaveable { mutableStateOf(false) }
var showBottomSheetShellTwoButtons by rememberSaveable { mutableStateOf(false) }

if (showLegendBottomSheetShell) {
BottomSheetShell(
title = "Legend name ",
icon = {
Icon(
imageVector = Icons.Outlined.Info,
contentDescription = "Button",
tint = SurfaceColor.Primary,
)
},
content = {
Column() {
LegendRange(
regularLegendList,
)
}
},
) {
showLegendBottomSheetShell = false
}
}
if (showBottomSheetShellScrollableContent) {
BottomSheetShell(
title = "Legend name ",
icon = {
Icon(
imageVector = Icons.Outlined.Info,
contentDescription = "Button",
tint = SurfaceColor.Primary,
)
},
content = {
Column() {
LegendRange(
longLegendList,
)
}
},
) {
showBottomSheetShellScrollableContent = false
}
}
if (showBottomSheetShellMaxExpansion) {
BottomSheetShell(
title = "Legend name ",
subtitle = "Subtitle",
description = lorem + lorem,
buttonBlock = {
ButtonBlock(
primaryButton = {
Button(
style = ButtonStyle.FILLED,
icon = {
Icon(
imageVector = Icons.Filled.Add,
contentDescription = "Button",
)
},
enabled = true,
text = "Label",
onClick = {
showBottomSheetShellMaxExpansion = false
},
modifier = Modifier.fillMaxWidth(),
)
},
)
},
icon = {
Icon(
imageVector = Icons.Outlined.Info,
contentDescription = "Button",
tint = SurfaceColor.Primary,
)
},
content = {
Column() {
LegendRange(
longLegendList,
)
}
},
) {
showBottomSheetShellMaxExpansion = false
}
}

if (showBottomSheetShellSingleButton) {
BottomSheetShell(
title = "Legend name ",
subtitle = "Subtitle",
description = lorem,
buttonBlock = {
ButtonBlock(
primaryButton = {
Button(
style = ButtonStyle.FILLED,
icon = {
Icon(
imageVector = Icons.Filled.Add,
contentDescription = "Button",
)
},
enabled = true,
text = "Label",
onClick = {
showBottomSheetShellSingleButton = false
},
modifier = Modifier.fillMaxWidth(),
)
},
)
},
icon = {
Icon(
imageVector = Icons.Outlined.Info,
contentDescription = "Button",
tint = SurfaceColor.Primary,
)
},
content = {
Column() {
LegendRange(
regularLegendList,
)
}
},
) {
showBottomSheetShellSingleButton = false
}
}

if (showBottomSheetShellTwoButtons) {
BottomSheetShell(
title = "Legend name ",
subtitle = "Subtitle",
description = lorem,
buttonBlock = {
ButtonBlock(
primaryButton = {
Button(
style = ButtonStyle.OUTLINED,
icon = {
Icon(
imageVector = Icons.Filled.Add,
contentDescription = "Button",
)
},
enabled = true,
text = "Label",
onClick = {
showBottomSheetShellTwoButtons = false
},
modifier = Modifier.fillMaxWidth(),
)
},
secondaryButton = {
Button(
style = ButtonStyle.FILLED,
icon = {
Icon(
imageVector = Icons.Filled.Add,
contentDescription = "Button",
)
},
enabled = true,
text = "Label",
onClick = {
},
modifier = Modifier.fillMaxWidth(),
)
},
)
},
icon = {
Icon(
imageVector = Icons.Outlined.Info,
contentDescription = "Button",
tint = SurfaceColor.Primary,
)
},
content = {
Column() {
LegendRange(
regularLegendList,
)
}
},
) {
showBottomSheetShellTwoButtons = false
}
}

ColumnComponentContainer {
SubTitle("Legend type bottom sheet shell")
Button(
enabled = true,
ButtonStyle.FILLED,
text = "Show Modal",
) {
showLegendBottomSheetShell = !showLegendBottomSheetShell
}
Spacer(modifier = Modifier.size(Spacing.Spacing10))

SubTitle("Bottom sheet shell with scrollable content")
Button(
enabled = true,
ButtonStyle.FILLED,
text = "Show Modal",
) {
showBottomSheetShellScrollableContent = !showBottomSheetShellScrollableContent
}
Spacer(modifier = Modifier.size(Spacing.Spacing10))

SubTitle("Bottom sheet shell with with maximum expansion ")
Button(
enabled = true,
ButtonStyle.FILLED,
text = "Show Modal",
) {
showBottomSheetShellMaxExpansion = !showBottomSheetShellScrollableContent
}
Spacer(modifier = Modifier.size(Spacing.Spacing10))
SubTitle("Bottom sheet shell with single button")
Button(
enabled = true,
ButtonStyle.FILLED,
text = "Show Modal",
) {
showBottomSheetShellSingleButton = !showBottomSheetShellSingleButton
}
Spacer(modifier = Modifier.size(Spacing.Spacing10))

SubTitle("Bottom sheet shell with two buttons")
Button(
enabled = true,
ButtonStyle.FILLED,
text = "Show Modal",
) {
showBottomSheetShellTwoButtons = !showBottomSheetShellTwoButtons
}
Spacer(modifier = Modifier.size(Spacing.Spacing10))
}
}
1 change: 1 addition & 0 deletions common/src/commonMain/kotlin/org/hisp/dhis/common/screens/Components.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ enum class Components(val label: String) {
INPUT_NUMBER("Input Number"),
INPUT_LETTER("Input Letter"),
BOTTOM_SHEET_HEADER("Bottom Sheet Header"),
BOTTOM_SHEET("Bottom Sheet "),
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

same here, what about merge it with the header?

TAGS("Tags"),
SECTIONS("Sections"),
RADIO("Radio"),
Expand Down
7 changes: 4 additions & 3 deletions common/src/commonMain/kotlin/org/hisp/dhis/common/screens/FormShellsScreen.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ import androidx.compose.runtime.setValue
import androidx.compose.ui.Modifier
import androidx.compose.ui.text.input.ImeAction
import org.hisp.dhis.common.screens.previews.lorem
import org.hisp.dhis.common.screens.previews.regularLegendList
import org.hisp.dhis.mobile.ui.designsystem.component.ColumnComponentContainer
import org.hisp.dhis.mobile.ui.designsystem.component.Description
import org.hisp.dhis.mobile.ui.designsystem.component.InputShellState
Expand Down Expand Up @@ -256,7 +257,7 @@ fun FormShellsScreen() {
InputText(
"Label",
inputText = inputValue14,
legendData = LegendData(SurfaceColor.CustomGreen, "Legend"),
legendData = LegendData(SurfaceColor.CustomGreen, "Legend", popUpLegendDescriptionData = regularLegendList),
onValueChanged = {
if (it != null) {
inputValue14 = it
Expand All @@ -268,7 +269,7 @@ fun FormShellsScreen() {
InputText(
"Label",
inputText = inputValue15,
legendData = LegendData(SurfaceColor.CustomYellow, "Legend"),
legendData = LegendData(SurfaceColor.CustomYellow, "Legend", popUpLegendDescriptionData = regularLegendList),
onValueChanged = {
if (it != null) {
inputValue15 = it
Expand All @@ -282,7 +283,7 @@ fun FormShellsScreen() {
InputText(
"Label",
inputText = inputValue16,
legendData = LegendData(SurfaceColor.CustomYellow, "Legend"),
legendData = LegendData(SurfaceColor.CustomYellow, "Legend", popUpLegendDescriptionData = regularLegendList),
supportingText = listOf(
SupportingTextData(
"Supporting Text",
Expand Down
Loading
Loading