Skip to content

Commit

Permalink
feat: [ANDROAPP-6390] TopBar component (#287)
Browse files Browse the repository at this point in the history 
* Adds TopBar component and samples

* refactor parameters and add tests

Signed-off-by: Pablo <[email protected]>

* missing trailing commas

Signed-off-by: Pablo <[email protected]>

* missing arguments

Signed-off-by: Pablo <[email protected]>

* updates topbar and includes a dark version in sample app

* Fix screenshot tests

---------

Signed-off-by: Pablo <[email protected]>
Co-authored-by: Pablo <[email protected]>
  • Loading branch information
@ferdyrod @Balcan
ferdyrod and Balcan authored Sep 6, 2024
1 parent 4ecde28 commit d53ddd9
Show file tree
Hide file tree
Showing 7 changed files with 463 additions and 2 deletions.
2 changes: 2 additions & 0 deletions common/src/commonMain/kotlin/org/hisp/dhis/common/App.kt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,7 @@ import org.hisp.dhis.common.screens.others.ProgressScreen
import org.hisp.dhis.common.screens.others.SearchBarScreen
import org.hisp.dhis.common.screens.others.SectionScreen
import org.hisp.dhis.common.screens.others.TagsScreen
import org.hisp.dhis.common.screens.others.TopBarScreen
import org.hisp.dhis.common.screens.parameter.ParameterSelectorScreen
import org.hisp.dhis.common.screens.toggleableInputs.ToggleableInputsScreen
import org.hisp.dhis.mobile.ui.designsystem.component.DropdownItem
Expand Down Expand Up @@ -101,6 +102,7 @@ fun Main(
Groups.SEARCH_BAR -> SearchBarScreen()
Groups.NAVIGATION_BAR -> NavigationBarScreen()
Groups.NO_GROUP_SELECTED -> NoComponentSelectedScreen()
Groups.TOP_BAR -> TopBarScreen()
}
} else {
NoComponentSelectedScreen(
Expand Down
1 change: 1 addition & 0 deletions common/src/commonMain/kotlin/org/hisp/dhis/common/screens/Groups.kt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,5 +18,6 @@ enum class Groups(val label: String) {
INDICATOR("Indicators"),
PARAMETER_SELECTOR("Parameter selector"),
NAVIGATION_BAR("Navigation Bar"),
TOP_BAR("Top Bar"),
NO_GROUP_SELECTED("No group selected"),
}
261 changes: 261 additions & 0 deletions common/src/commonMain/kotlin/org/hisp/dhis/common/screens/others/TopBarScreen.kt
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,261 @@
package org.hisp.dhis.common.screens.others

import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.automirrored.outlined.ArrowBack
import androidx.compose.material.icons.outlined.Delete
import androidx.compose.material.icons.outlined.FileDownload
import androidx.compose.material.icons.outlined.Menu
import androidx.compose.material.icons.outlined.Share
import androidx.compose.material3.DropdownMenu
import androidx.compose.material3.DropdownMenuItem
import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.Icon
import androidx.compose.material3.Text
import androidx.compose.material3.TopAppBarDefaults
import androidx.compose.runtime.Composable
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.text.style.TextOverflow
import org.hisp.dhis.common.screens.Groups
import org.hisp.dhis.mobile.ui.designsystem.component.ColumnComponentContainer
import org.hisp.dhis.mobile.ui.designsystem.component.ColumnScreenContainer
import org.hisp.dhis.mobile.ui.designsystem.component.IconButton
import org.hisp.dhis.mobile.ui.designsystem.component.TopBar
import org.hisp.dhis.mobile.ui.designsystem.component.TopBarActionIcon
import org.hisp.dhis.mobile.ui.designsystem.component.TopBarDropdownMenuIcon
import org.hisp.dhis.mobile.ui.designsystem.component.TopBarType

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun TopBarScreen() {
ColumnScreenContainer(
title = Groups.TOP_BAR.label,
) {
ColumnComponentContainer("Default") {
TopBar(
type = TopBarType.DEFAULT,
title = {
Text(
text = "Title",
maxLines = 1,
overflow = TextOverflow.Ellipsis,
)
},
navigationIcon = {
IconButton(
onClick = { },
icon = {
Icon(
imageVector = Icons.Outlined.Menu,
contentDescription = "Menu Button",
)
},
)
},
actions = {
TopBarActionIcon(
icon = Icons.Outlined.Share,
onClick = { },
)
TopBarActionIcon(
icon = Icons.Outlined.FileDownload,
onClick = { },
)
TopBarDropdownMenuIcon { showMenu, onDismissRequest ->
DropdownMenu(
expanded = showMenu,
onDismissRequest = onDismissRequest,
) {
DropdownMenuItem(
text = { Text("Action 1") },
onClick = {},
leadingIcon = {
IconButton(
onClick = {
onDismissRequest()
},
icon = {
Icon(
imageVector = Icons.Outlined.Delete,
contentDescription = "Edit Button",
)
},
)
},
)
}
}
},
)
}

ColumnComponentContainer("Back") {
TopBar(
type = TopBarType.DEFAULT,
title = {
Text(
text = "Title",
maxLines = 1,
overflow = TextOverflow.Ellipsis,
)
},
navigationIcon = {
IconButton(
onClick = { },
icon = {
Icon(
imageVector = Icons.AutoMirrored.Outlined.ArrowBack,
contentDescription = "Back Button",
)
},
)
},
actions = {
TopBarActionIcon(
icon = Icons.Outlined.Share,
onClick = { },
)
},
)
}

ColumnComponentContainer("Back") {
TopBar(
type = TopBarType.DEFAULT,
title = {
Text(
text = "Title",
maxLines = 1,
overflow = TextOverflow.Ellipsis,
color = Color.White,
)
},
navigationIcon = {
IconButton(
onClick = { },
icon = {
Icon(
imageVector = Icons.AutoMirrored.Outlined.ArrowBack,
contentDescription = "Back Button",
tint = Color.White,
)
},
)
},
actions = {
TopBarActionIcon(
icon = Icons.Outlined.Share,
tint = Color.White,
onClick = { },
)
TopBarDropdownMenuIcon(
iconTint = Color.White,
) { showMenu, onDismissRequest ->
DropdownMenu(
expanded = showMenu,
onDismissRequest = onDismissRequest,
) {
DropdownMenuItem(
text = { Text("Action 1") },
onClick = {},
leadingIcon = {
IconButton(
onClick = {
onDismissRequest()
},
icon = {
Icon(
imageVector = Icons.Outlined.Delete,
contentDescription = "Edit Button",
)
},
)
},
)
}
}
},
colors = TopAppBarDefaults.topAppBarColors(
containerColor = Color.Black,
navigationIconContentColor = Color.White,
actionIconContentColor = Color.White,
),
)
}

ColumnComponentContainer("Without Icons") {
TopBar(
type = TopBarType.DEFAULT,
title = {
Text(
text = "Title",
maxLines = 1,
overflow = TextOverflow.Ellipsis,
)
},
navigationIcon = {
IconButton(
onClick = { },
icon = {
Icon(
imageVector = Icons.AutoMirrored.Outlined.ArrowBack,
contentDescription = "Back Button",
)
},
)
},
actions = {
},
)
}

ColumnComponentContainer("Centered") {
TopBar(
type = TopBarType.CENTERED,
title = {
Text(
text = "Title",
maxLines = 1,
overflow = TextOverflow.Ellipsis,
)
},
navigationIcon = {
IconButton(
onClick = { },
icon = {
Icon(
imageVector = Icons.AutoMirrored.Outlined.ArrowBack,
contentDescription = "Back Button",
)
},
)
},
actions = {
TopBarDropdownMenuIcon { showMenu, onDismissRequest ->
DropdownMenu(
expanded = showMenu,
onDismissRequest = onDismissRequest,
) {
DropdownMenuItem(
text = { Text("Action 1") },
onClick = {},
leadingIcon = {
IconButton(
onClick = {
onDismissRequest()
},
icon = {
Icon(
imageVector = Icons.Outlined.Delete,
contentDescription = "Edit Button",
)
},
)
},
)
}
}
},
)
}
}
}
102 changes: 102 additions & 0 deletions ...tem/src/androidUnitTest/kotlin/org/hisp/dhis/mobile/ui/designsystem/TopBarSnapshotTest.kt
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,102 @@
package org.hisp.dhis.mobile.ui.designsystem

import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.outlined.FileDownload
import androidx.compose.material.icons.outlined.Menu
import androidx.compose.material.icons.outlined.Share
import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.Icon
import androidx.compose.material3.Text
import androidx.compose.ui.text.style.TextOverflow
import org.hisp.dhis.mobile.ui.designsystem.component.ColumnComponentContainer
import org.hisp.dhis.mobile.ui.designsystem.component.ColumnScreenContainer
import org.hisp.dhis.mobile.ui.designsystem.component.IconButton
import org.hisp.dhis.mobile.ui.designsystem.component.TopBar
import org.hisp.dhis.mobile.ui.designsystem.component.TopBarActionIcon
import org.hisp.dhis.mobile.ui.designsystem.component.TopBarDropdownMenuIcon
import org.hisp.dhis.mobile.ui.designsystem.component.TopBarType
import org.junit.Rule
import org.junit.Test

class TopBarSnapshotTest {
@get:Rule
val paparazzi = paparazzi()

@OptIn(ExperimentalMaterial3Api::class)
@Test
fun launchTopBar() {
paparazzi.snapshot {
ColumnScreenContainer(title = "Top bars") {
ColumnComponentContainer(subTitle = "Default") {
TopBar(
type = TopBarType.DEFAULT,
title = {
Text(
text = "Title",
maxLines = 1,
overflow = TextOverflow.Ellipsis,
)
},
navigationIcon = {
IconButton(
onClick = { },
icon = {
Icon(
imageVector = Icons.Outlined.Menu,
contentDescription = "Menu Button",
)
},
)
},
actions = {
TopBarActionIcon(
icon = Icons.Outlined.Share,
onClick = { },
)
TopBarActionIcon(
icon = Icons.Outlined.FileDownload,
onClick = { },
)
TopBarDropdownMenuIcon { _, _ ->
}
},
)
}

ColumnComponentContainer(subTitle = "Centered") {
TopBar(
type = TopBarType.CENTERED,
title = {
Text(
text = "Title",
maxLines = 1,
overflow = TextOverflow.Ellipsis,
)
},
navigationIcon = {
IconButton(
onClick = { },
icon = {
Icon(
imageVector = Icons.Outlined.Menu,
contentDescription = "Menu Button",
)
},
)
},
actions = {
TopBarActionIcon(
icon = Icons.Outlined.Share,
onClick = { },
)
TopBarActionIcon(
icon = Icons.Outlined.FileDownload,
onClick = { },
)
},
)
}
}
}
}
}
Loading

0 comments on commit d53ddd9

Please sign in to comment.