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 6319]- mobile UI create navigation bar #279

Merged
merged 12 commits into from
Aug 9, 2024
Merged

[Androapp 6319]- mobile UI create navigation bar #279

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
05c6cc4
Add `NavigationBar` component
Jul 17, 2024
ab191a3
Add `NavigationBarTest`
Jul 17, 2024
80406d0
Add `NavigationBarScreen`
Jul 17, 2024
64ae09d
Add Snapshot test for `NavigationBar`
Jul 17, 2024
ab7c31f
Add `NavigationBar` screen to app components list
Jul 17, 2024
251fc64
Move Test tags to separate constants
Jul 17, 2024
7d4adfc
Move data class and test object to separate files
Jul 18, 2024
446899e
Truncate text when not fit on the screen
Jul 25, 2024
f23d6a2
Fix item text colour and font family on selection
Aug 1, 2024
82af024
Fix text style on selection
Aug 8, 2024
a752b04
Fix merge errors
Aug 9, 2024
9799470
Fix snapshot test
Aug 9, 2024
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 org.hisp.dhis.common.screens.others.ChipsScreen
import org.hisp.dhis.common.screens.others.IndicatorScreen
import org.hisp.dhis.common.screens.others.LegendScreen
import org.hisp.dhis.common.screens.others.MetadataAvatarScreen
import org.hisp.dhis.common.screens.others.NavigationBarScreen
import org.hisp.dhis.common.screens.others.ProgressScreen
import org.hisp.dhis.common.screens.others.SearchBarScreen
import org.hisp.dhis.common.screens.others.SectionScreen
Expand Down Expand Up @@ -97,6 +98,7 @@ fun Main(
Groups.TOGGLEABLE_INPUTS -> ToggleableInputsScreen(imageBitmapLoader)
Groups.TAGS -> TagsScreen()
Groups.SEARCH_BAR -> SearchBarScreen()
Groups.NAVIGATION_BAR -> NavigationBarScreen()
Groups.NO_GROUP_SELECTED -> NoComponentSelectedScreen()
}
} else {
Expand Down
1 change: 1 addition & 0 deletions common/src/commonMain/kotlin/org/hisp/dhis/common/screens/Groups.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,5 +17,6 @@ enum class Groups(val label: String) {
METADATA_AVATAR("Metadata Avatar"),
INDICATOR("Indicators"),
PARAMETER_SELECTOR("Parameter selector"),
NAVIGATION_BAR("Navigation Bar"),
NO_GROUP_SELECTED("No group selected"),
}
200 changes: 200 additions & 0 deletions common/src/commonMain/kotlin/org/hisp/dhis/common/screens/others/NavigationBarScreen.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,200 @@
package org.hisp.dhis.common.screens.others

import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.automirrored.filled.Assignment
import androidx.compose.material.icons.automirrored.filled.List
import androidx.compose.material.icons.automirrored.filled.StickyNote2
import androidx.compose.material.icons.automirrored.outlined.Assignment
import androidx.compose.material.icons.automirrored.outlined.List
import androidx.compose.material.icons.automirrored.outlined.StickyNote2
import androidx.compose.material.icons.filled.BarChart
import androidx.compose.material.icons.filled.Description
import androidx.compose.material.icons.filled.Hub
import androidx.compose.material.icons.filled.Map
import androidx.compose.material.icons.outlined.BarChart
import androidx.compose.material.icons.outlined.Description
import androidx.compose.material.icons.outlined.Hub
import androidx.compose.material.icons.outlined.Map
import androidx.compose.material3.Icon
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
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.navigationBar.NavigationBar
import org.hisp.dhis.mobile.ui.designsystem.component.navigationBar.NavigationBarItem

@Composable
fun NavigationBarScreen() {
val homeItems = listOf(
NavigationBarItem(
defaultIcon = {
Icon(imageVector = Icons.Outlined.Description, contentDescription = null)
},
selectedIcon = {
Icon(imageVector = Icons.Filled.Description, contentDescription = null)
},
label = "Description",
),
NavigationBarItem(
defaultIcon = {
Icon(imageVector = Icons.Outlined.BarChart, contentDescription = null)
},
selectedIcon = {
Icon(imageVector = Icons.Filled.BarChart, contentDescription = null)
},
label = "Charts",
showBadge = true,
),
)

val programItems = listOf(
NavigationBarItem(
defaultIcon = {
Icon(imageVector = Icons.AutoMirrored.Outlined.List, contentDescription = null)
},
selectedIcon = {
Icon(imageVector = Icons.AutoMirrored.Filled.List, contentDescription = null)
},
label = "List",
),
NavigationBarItem(
defaultIcon = {
Icon(imageVector = Icons.Outlined.Map, contentDescription = null)
},
selectedIcon = {
Icon(imageVector = Icons.Filled.Map, contentDescription = null)
},
label = "Maps",
),
NavigationBarItem(
defaultIcon = {
Icon(imageVector = Icons.Outlined.BarChart, contentDescription = null)
},
selectedIcon = {
Icon(imageVector = Icons.Filled.BarChart, contentDescription = null)
},
label = "Charts",
showBadge = true,
badgeText = "32",
),
)

val enrollmentItems = listOf(
NavigationBarItem(
defaultIcon = {
Icon(imageVector = Icons.AutoMirrored.Outlined.Assignment, contentDescription = null)
},
selectedIcon = {
Icon(imageVector = Icons.AutoMirrored.Filled.Assignment, contentDescription = null)
},
label = "Details",
),
NavigationBarItem(
defaultIcon = {
Icon(imageVector = Icons.Outlined.BarChart, contentDescription = null)
},
selectedIcon = {
Icon(imageVector = Icons.Filled.BarChart, contentDescription = null)
},
label = "Charts",
),
NavigationBarItem(
defaultIcon = {
Icon(imageVector = Icons.Outlined.Hub, contentDescription = null)
},
selectedIcon = {
Icon(imageVector = Icons.Filled.Hub, contentDescription = null)
},
label = "Relationships",
),
NavigationBarItem(
defaultIcon = {
Icon(imageVector = Icons.AutoMirrored.Outlined.StickyNote2, contentDescription = null)
},
selectedIcon = {
Icon(imageVector = Icons.AutoMirrored.Filled.StickyNote2, contentDescription = null)
},
label = "Notes",
showBadge = true,
),
)

val formItems = listOf(
NavigationBarItem(
defaultIcon = {
Icon(imageVector = Icons.Outlined.Description, contentDescription = null)
},
selectedIcon = {
Icon(imageVector = Icons.Filled.Description, contentDescription = null)
},
label = "Description",
),
NavigationBarItem(
defaultIcon = {
Icon(imageVector = Icons.Outlined.BarChart, contentDescription = null)
},
selectedIcon = {
Icon(imageVector = Icons.Filled.BarChart, contentDescription = null)
},
label = "Charts",
),
NavigationBarItem(
defaultIcon = {
Icon(imageVector = Icons.AutoMirrored.Outlined.StickyNote2, contentDescription = null)
},
selectedIcon = {
Icon(imageVector = Icons.AutoMirrored.Filled.StickyNote2, contentDescription = null)
},
label = "Notes",
showBadge = true,
badgeText = "3",
),
)

ColumnScreenContainer(
title = Groups.NAVIGATION_BAR.label,
) {
ColumnComponentContainer("Home") {
var selectedHomeItemIndex by remember { mutableStateOf<Int?>(null) }
NavigationBar(
items = homeItems,
selectedItemIndex = selectedHomeItemIndex,
) {
selectedHomeItemIndex = it
}
}
ColumnComponentContainer("Program dashboard") {
var selectedProgramItemIndex by remember { mutableStateOf<Int?>(null) }
NavigationBar(
items = programItems,
selectedItemIndex = selectedProgramItemIndex,
) {
selectedProgramItemIndex = it
}
}

ColumnComponentContainer("Enrollment dashboard") {
var selectedEnrollmentItemIndex by remember { mutableStateOf<Int?>(null) }
NavigationBar(
items = enrollmentItems,
selectedItemIndex = selectedEnrollmentItemIndex,
) {
selectedEnrollmentItemIndex = it
}
}

ColumnComponentContainer("Form") {
var selectedFormItemIndex by remember { mutableStateOf<Int?>(null) }
NavigationBar(
items = formItems,
selectedItemIndex = selectedFormItemIndex,
) {
selectedFormItemIndex = it
}
}
}
}
Loading
Loading