Skip to content

Commit

Permalink
updates topbar and includes a dark version in sample app
Browse files Browse the repository at this point in the history
  • Loading branch information
@ferdyrod
ferdyrod committed Sep 5, 2024
1 parent 9052cf7 commit 15e48e2
Show file tree
Hide file tree
Showing 4 changed files with 126 additions and 33 deletions.
101 changes: 97 additions & 4 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
Expand Up @@ -8,9 +8,13 @@ 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
Expand All @@ -20,6 +24,7 @@ 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(
Expand All @@ -28,7 +33,13 @@ fun TopBarScreen() {
ColumnComponentContainer("Default") {
TopBar(
type = TopBarType.DEFAULT,
title = "Title",
title = {
Text(
text = "Title",
maxLines = 1,
overflow = TextOverflow.Ellipsis,
)
},
navigationIcon = {
IconButton(
onClick = { },
Expand Down Expand Up @@ -80,31 +91,107 @@ fun TopBarScreen() {
ColumnComponentContainer("Back") {
TopBar(
type = TopBarType.DEFAULT,
title = "Title",
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 = "Title",
title = {
Text(
text = "Title",
maxLines = 1,
overflow = TextOverflow.Ellipsis,
)
},
navigationIcon = {
IconButton(
onClick = { },
Expand All @@ -124,7 +211,13 @@ fun TopBarScreen() {
ColumnComponentContainer("Centered") {
TopBar(
type = TopBarType.CENTERED,
title = "Title",
title = {
Text(
text = "Title",
maxLines = 1,
overflow = TextOverflow.Ellipsis,
)
},
navigationIcon = {
IconButton(
onClick = { },
Expand Down
23 changes: 18 additions & 5 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
Expand Up @@ -4,30 +4,39 @@ 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.hisp.dhis.mobile.ui.designsystem.theme.SurfaceColor
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 = "Title",
title = {
Text(
text = "Title",
maxLines = 1,
overflow = TextOverflow.Ellipsis,
)
},
navigationIcon = {
IconButton(
onClick = { },
Expand All @@ -51,14 +60,19 @@ class TopBarSnapshotTest {
TopBarDropdownMenuIcon { _, _ ->
}
},
color = SurfaceColor.PrimaryContainer,
)
}

ColumnComponentContainer(subTitle = "Centered") {
TopBar(
type = TopBarType.CENTERED,
title = "Title",
title = {
Text(
text = "Title",
maxLines = 1,
overflow = TextOverflow.Ellipsis,
)
},
navigationIcon = {
IconButton(
onClick = { },
Expand All @@ -80,7 +94,6 @@ class TopBarSnapshotTest {
onClick = { },
)
},
color = SurfaceColor.PrimaryContainer,
)
}
}
Expand Down
32 changes: 11 additions & 21 deletions designsystem/src/commonMain/kotlin/org/hisp/dhis/mobile/ui/designsystem/component/TopBar.kt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,8 +6,8 @@ import androidx.compose.material.icons.filled.MoreVert
import androidx.compose.material3.CenterAlignedTopAppBar
import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.Icon
import androidx.compose.material3.Text
import androidx.compose.material3.TopAppBar
import androidx.compose.material3.TopAppBarColors
import androidx.compose.material3.TopAppBarDefaults
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
Expand All @@ -17,8 +17,6 @@ import androidx.compose.runtime.setValue
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.vector.ImageVector
import androidx.compose.ui.text.style.TextOverflow
import org.hisp.dhis.mobile.ui.designsystem.theme.SurfaceColor

@OptIn(ExperimentalMaterial3Api::class)
@Composable
Expand All @@ -27,43 +25,32 @@ fun TopBar(
type: TopBarType = TopBarType.DEFAULT,
navigationIcon: @Composable () -> Unit,
actions: @Composable RowScope.() -> Unit,
title: String,
color: Color = SurfaceColor.PrimaryContainer,
title: @Composable () -> Unit,
colors: TopAppBarColors = TopAppBarDefaults.topAppBarColors(),
) {
if (type == TopBarType.DEFAULT) {
TopAppBar(
modifier = modifier,
title = {
Text(text = title)
},
title = title,
navigationIcon = navigationIcon,
actions = actions,
colors = TopAppBarDefaults.topAppBarColors(
containerColor = color,
),
colors = colors,
)
} else {
CenterAlignedTopAppBar(
modifier = modifier,
title = {
Text(
text = title,
maxLines = 1,
overflow = TextOverflow.Ellipsis,
)
},
title = title,
navigationIcon = navigationIcon,
actions = actions,
colors = TopAppBarDefaults.topAppBarColors(
containerColor = color,
),
colors = colors,
)
}
}

@Composable
fun TopBarActionIcon(
icon: ImageVector,
tint: Color = Color.Unspecified,
contentDescription: String = "",
onClick: () -> Unit,
) {
Expand All @@ -73,13 +60,15 @@ fun TopBarActionIcon(
Icon(
imageVector = icon,
contentDescription = contentDescription,
tint = tint,
)
},
)
}

@Composable
fun TopBarDropdownMenuIcon(
iconTint: Color = Color.Unspecified,
dropDownMenu: @Composable (showMenu: Boolean, onDismissRequest: () -> Unit) -> Unit,
) {
var showMenu by remember { mutableStateOf(false) }
Expand All @@ -90,6 +79,7 @@ fun TopBarDropdownMenuIcon(
Icon(
imageVector = Icons.Default.MoreVert,
contentDescription = "More",
tint = iconTint,
)
},
)
Expand Down
3 changes: 0 additions & 3 deletions ...images/org.hisp.dhis.mobile.ui.designsystem_TopBarSnapshotTest_launchTopBar.png
View file

This file was deleted.

0 comments on commit 15e48e2

Please sign in to comment.