Skip to content

Profile and edit profile screen UI #106

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

Open
mqiu90 wants to merge 7 commits into
base: main
Choose a base branch
from
Open

Profile and edit profile screen UI #106

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
c1b0570
Profile and edit profile screen UI
mqiu90 Mar 4, 2026
b9064ef
Merge branch 'main' into profile-ui
EmilJiang Mar 13, 2026
d6a14ec
Fixed some of the reviews and added profile icon picker
mqiu90 Apr 12, 2026
152765a
Merge branch 'profile-ui' of https://github.com/cuappdev/score-androi…
mqiu90 Apr 12, 2026
f931b20
Fixed BaseBall Scoring and IsLive (#102)
EmilJiang Mar 25, 2026
d02c837
profile work
mqiu90 Apr 20, 2026
e525d28
Move profile nav to top right on home screen
mqiu90 Apr 21, 2026
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 app/build.gradle.kts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -81,6 +81,7 @@ dependencies {
implementation(libs.material3)
implementation("com.google.dagger:hilt-android:2.51.1")
implementation(libs.androidx.foundation)
implementation(libs.foundation)
Comment thread
coderabbitai[bot] marked this conversation as resolved.
Outdated
kapt("com.google.dagger:hilt-android-compiler:2.51.1")
implementation("androidx.hilt:hilt-navigation-compose:1.0.0")
implementation("com.google.accompanist:accompanist-pager:0.24.0-alpha")
Expand All @@ -103,6 +104,7 @@ dependencies {
lintChecks(libs.compose.lint.checks)
implementation(platform("com.google.firebase:firebase-bom:34.3.0"))
implementation("com.google.firebase:firebase-analytics")
implementation("androidx.compose.material:material-icons-extended:1.6.0")
Comment thread
coderabbitai[bot] marked this conversation as resolved.
Outdated
}

apollo {
Expand Down
74 changes: 11 additions & 63 deletions app/src/main/java/com/cornellappdev/score/components/GamesCarousel.kt
View file
Open in desktop
Copy link
Copy Markdown
Contributor

@amjiao amjiao Mar 25, 2026

Choose a reason for hiding this comment

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

since GamesCarousel is used on the home screen for another feature, changing it here for the profile page affects how the home screen looks. The changes look great but we just need to move them to a new composable so we can tweak them specifically for the profile page without accidentally changing other parts of the UI! you'll want to revert the changes in this file after you've moved them to a new composable!

also, the bookmarks lazy column might be pretty similar to the HighlightsCardRow composable (in terms of the header (Bookmarks n Results >). feel free to take a look at that/copy some code from there into the new component for this profile page row!

Original file line number Diff line number Diff line change
@@ -1,76 +1,33 @@
package com.cornellappdev.score.components

import androidx.compose.foundation.Canvas
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.PaddingValues
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.pager.HorizontalPager
import androidx.compose.foundation.pager.rememberPagerState
import androidx.compose.foundation.layout.width
import androidx.compose.foundation.lazy.LazyRow
import androidx.compose.foundation.lazy.items
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.Dp
import androidx.compose.ui.unit.dp
import com.cornellappdev.score.R
import com.cornellappdev.score.model.GameCardData
import com.cornellappdev.score.theme.CornellRed
import com.cornellappdev.score.theme.CrimsonPrimary
import com.cornellappdev.score.theme.GrayLight
import com.cornellappdev.score.util.gameList

@Composable
fun DotIndicator(
pagerState: androidx.compose.foundation.pager.PagerState,
totalPages: Int,
modifier: Modifier = Modifier,
dotSize: Dp = 14.dp,
selectedColor: Color = CrimsonPrimary,
unselectedColor: Color = GrayLight
) {
Row(
modifier = modifier,
horizontalArrangement = Arrangement.spacedBy(32.dp)
) {
for (i in 0 until totalPages) {
val color = if (i == pagerState.currentPage) selectedColor else unselectedColor
Canvas(
modifier = Modifier
.size(dotSize)
.padding(2.dp)
) {
drawCircle(color = color)
}
}
}
}

@Composable
fun GamesCarousel(
games: List<GameCardData>,
onClick: (String) -> Unit,
modifier: Modifier = Modifier,
) {
val pagerState = rememberPagerState(pageCount = { games.size })
Column(
modifier = modifier
.fillMaxWidth(),
verticalArrangement = Arrangement.spacedBy(16.dp, Alignment.Top),
LazyRow(
modifier = modifier.fillMaxWidth(),
contentPadding = PaddingValues(horizontal = 24.dp),
horizontalArrangement = Arrangement.spacedBy(16.dp)
) {
HorizontalPager(
state = pagerState,
modifier = Modifier.fillMaxWidth(),
contentPadding = PaddingValues(horizontal = 24.dp),
pageSpacing = 24.dp
) { page ->
val game = games[page]
items(games) { game ->
FeaturedGameCard(
leftTeamLogo = painterResource(R.drawable.cornell_logo),
rightTeamLogo = game.teamLogo,
Expand All @@ -81,21 +38,12 @@ fun GamesCarousel(
genderIcon = painterResource(game.genderIcon),
sportIcon = painterResource(game.sportIcon),
location = game.location,
modifier = Modifier,
headerModifier = Modifier,
gradientColor1 = CornellRed,
gradientColor2 = game.teamColor,
leftScore = game.cornellScore?.toInt(),
rightScore = game.otherScore?.toInt(),
onClick = { onClick(game.id) }
)
}

Box(modifier = Modifier.fillMaxWidth()) {
DotIndicator(
pagerState = pagerState,
totalPages = games.size,
modifier = Modifier.align(Alignment.Center)
onClick = { onClick(game.id) },
modifier = Modifier.width(300.dp)
)
}
}
Expand All @@ -105,4 +53,4 @@ fun GamesCarousel(
@Preview
private fun GamesCarouselPreview() = ScorePreview {
GamesCarousel(gameList, onClick = {})
}
}
17 changes: 16 additions & 1 deletion app/src/main/java/com/cornellappdev/score/nav/ScoreNavHost.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,11 +11,13 @@ import androidx.navigation.toRoute
import com.cornellappdev.score.model.ScoreEvent
import com.cornellappdev.score.nav.root.ScoreScreens
import com.cornellappdev.score.nav.root.ScoreScreens.Home
import com.cornellappdev.score.screen.EditProfileScreen
import com.cornellappdev.score.screen.GameDetailsScreen
import com.cornellappdev.score.screen.HighlightsScreen
import com.cornellappdev.score.screen.HighlightsSearchScreen
import com.cornellappdev.score.screen.HomeScreen
import com.cornellappdev.score.screen.PastGamesScreen
import com.cornellappdev.score.screen.ProfileScreen
import com.cornellappdev.score.util.highlightsList
import com.cornellappdev.score.util.recentSearchList
import com.cornellappdev.score.util.sportList
Expand Down Expand Up @@ -47,6 +49,20 @@ fun ScoreNavHost(navController: NavHostController) {
})
}
}
composable<ScoreScreens.Profile> {
ProfileScreen(
navigateToEditProfile = {
navController.navigate(ScoreScreens.EditProfile)
}
)
}
composable<ScoreScreens.EditProfile> {
EditProfileScreen(
onBackClick = {
navController.navigateUp()
}
)
}
Comment on lines +57 to +73
Copy link
Copy Markdown
Contributor

@EmilJiang EmilJiang Mar 25, 2026

Choose a reason for hiding this comment

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

looks good!

composable<ScoreScreens.GameDetailsPage> {
GameDetailsScreen(
onBackArrow = {
Expand Down Expand Up @@ -89,4 +105,3 @@ fun ScoreNavHost(navController: NavHostController) {
// }
}
}

20 changes: 15 additions & 5 deletions app/src/main/java/com/cornellappdev/score/nav/ScoreNavigationBar.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.vector.ImageVector
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.tooling.preview.Preview
import androidx.navigation.NavBackStackEntry
Expand Down Expand Up @@ -38,11 +39,20 @@ fun ScoreNavigationBar(
selectedIndicatorColor = Color.Transparent
),
icon = {
Icon(
painter = painterResource(id = if (isSelected) item.selectedIcon else item.unselectedIcon),
contentDescription = null,
tint = Color.Unspecified
)
val icon = if (isSelected) item.selectedIcon else item.unselectedIcon
if (icon is Int) {
Icon(
painter = painterResource(id = icon),
contentDescription = null,
tint = Color.Unspecified
)
} else if (icon is ImageVector) {
Icon(
imageVector = icon,
contentDescription = null,
tint = if (isSelected) CrimsonPrimary else GrayPrimary
)
}
Copy link
Copy Markdown
Contributor

@EmilJiang EmilJiang Mar 25, 2026

Choose a reason for hiding this comment

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

Is it possible to import the Profile Icon as a Drawable in Resource Manager on the left. This way you do not need this additional if statement. I can show you next time!

},
label = {
Text(
Expand Down
30 changes: 25 additions & 5 deletions app/src/main/java/com/cornellappdev/score/nav/root/RootNavigation.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,10 @@ import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Person
import androidx.compose.material.icons.outlined.Person
import androidx.compose.material.icons.outlined.Schedule
import androidx.compose.material3.Scaffold
import androidx.compose.material3.Surface
import androidx.compose.runtime.Composable
Expand All @@ -18,6 +22,7 @@ import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.dropShadow
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.shadow.Shadow
import androidx.compose.ui.graphics.vector.ImageVector
import androidx.compose.ui.unit.DpOffset
import androidx.compose.ui.unit.dp
import androidx.hilt.navigation.compose.hiltViewModel
Expand Down Expand Up @@ -65,7 +70,8 @@ fun RootNavigation(

Scaffold(
modifier = modifier.fillMaxSize(), bottomBar = {
if (navBackStackEntry?.toScreen() is ScoreScreens.GameDetailsPage) {
val currentScreen = navBackStackEntry?.toScreen()
if (currentScreen is ScoreScreens.GameDetailsPage || currentScreen is ScoreScreens.EditProfile) {
return@Scaffold
}
Surface(
Expand Down Expand Up @@ -110,6 +116,12 @@ sealed class ScoreScreens {
@Serializable
data class GameScoreSummaryPage(val scoreEvents: String) : ScoreScreens()

@Serializable
data object Profile : ScoreScreens()

@Serializable
data object EditProfile : ScoreScreens()

////removed for 2/2026 release
// @Serializable
// data object HighlightsScreen : ScoreScreens()
Expand All @@ -124,17 +136,19 @@ fun NavBackStackEntry.toScreen(): ScoreScreens? =
"GameDetailsPage" -> toRoute<ScoreScreens.GameDetailsPage>()
"ScoresScreen" -> toRoute<ScoreScreens.ScoresScreen>()
"GameScoreSummaryPage" -> toRoute<ScoreScreens.GameScoreSummaryPage>()
"Profile" -> toRoute<ScoreScreens.Profile>()
"EditProfile" -> toRoute<ScoreScreens.EditProfile>()
//removed for 2/2026 release
// "HighlightsScreen" -> toRoute<ScoreScreens.HighlightsScreen>()
// "HighlightsSearchScreen" -> toRoute<ScoreScreens.HighlightsScreen>()
else -> throw IllegalArgumentException("Invalid screen")
else -> null
}

data class NavItem(
val screen: ScoreScreens,
val label: String,
val unselectedIcon: Int,
val selectedIcon: Int
val unselectedIcon: Any,
val selectedIcon: Any
Copy link
Copy Markdown
Contributor

@EmilJiang EmilJiang Mar 25, 2026

Choose a reason for hiding this comment

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

change this back to int

)

val tabs = listOf(
Expand All @@ -157,4 +171,10 @@ val tabs = listOf(
selectedIcon = R.drawable.ic_scores_filled,
screen = ScoreScreens.ScoresScreen,
),
)
NavItem(
Copy link
Copy Markdown
Contributor

@amjiao amjiao Apr 6, 2026

Choose a reason for hiding this comment

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

i think we might've talked ab this after you opened this PR so no worries, but just a note that this icon will be in the top right corner of the home page!

label = "Profile",
unselectedIcon = Icons.Outlined.Person,
selectedIcon = Icons.Filled.Person,
screen = ScoreScreens.Profile,
),
)
Copy link
Copy Markdown
Contributor

@EmilJiang EmilJiang Mar 25, 2026

Choose a reason for hiding this comment

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

I think all the other Icons are Drawable so here u would make the change!

Loading
Loading