Skip to content

Commit 25f1fd1

Browse files
EmilJiangEmilJiang
authored
Add populated profile screen with sample data (#120)
* Add populated profile screen with sample data * Format profile screen
1 parent 72b619d commit 25f1fd1

12 files changed

Lines changed: 443 additions & 65 deletions

File tree

‎app/src/main/java/com/cornellappdev/score/components/highlights/ArticleHighlightsCard.kt‎

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ import androidx.compose.foundation.text.BasicText
1515
import androidx.compose.material3.Icon
1616
import androidx.compose.material3.Text
1717
import androidx.compose.runtime.Composable
18+
import androidx.compose.ui.text.TextStyle
1819
import androidx.compose.ui.Alignment
1920
import androidx.compose.ui.Modifier
2021
import androidx.compose.ui.draw.clip
@@ -42,7 +43,9 @@ import com.cornellappdev.score.theme.White
4243
@Composable
4344
fun ArticleHighlightCard(
4445
articleHighlight: ArticleHighlightData,
45-
isWideFormat: Boolean
46+
isWideFormat: Boolean,
47+
linkTextStyle: TextStyle = TextStyle.Default,
48+
imageOverlayAlpha: Float = 0.4f
4649
) {
4750
Box(
4851
modifier = Modifier
@@ -54,12 +57,13 @@ fun ArticleHighlightCard(
5457
AsyncImage(
5558
model = articleHighlight.imageUrl,
5659
contentDescription = "highlight image",
60+
modifier = Modifier.matchParentSize(),
5761
contentScale = ContentScale.Crop
5862
)
5963
Box(
6064
modifier = Modifier
6165
.fillMaxSize()
62-
.background(color = Color.Black.copy(alpha = 0.4f))
66+
.background(color = Color.Black.copy(alpha = imageOverlayAlpha))
6367
)
6468
Column(
6569
modifier = Modifier
@@ -89,7 +93,8 @@ fun ArticleHighlightCard(
8993
ExternalLink(
9094
articleHighlight.articleUrl,
9195
urlLabel = "Cornell Daily Sun",
92-
linkColor = White
96+
linkColor = White,
97+
textStyle = linkTextStyle
9398
)
9499
}
95100
Text(

‎app/src/main/java/com/cornellappdev/score/components/highlights/ExternalLink.kt‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import androidx.compose.foundation.layout.fillMaxWidth
66
import androidx.compose.foundation.text.BasicText
77
import androidx.compose.material3.Icon
88
import androidx.compose.runtime.Composable
9+
import androidx.compose.ui.text.TextStyle
910
import androidx.compose.ui.Alignment
1011
import androidx.compose.ui.Modifier
1112
import androidx.compose.ui.graphics.Color
@@ -24,11 +25,13 @@ fun ExternalLink(
2425
url: String,
2526
urlLabel: String,
2627
linkColor: Color,
28+
textStyle: TextStyle = TextStyle.Default,
2729
) {
2830
Row(
2931
verticalAlignment = Alignment.CenterVertically
3032
) {
3133
BasicText(
34+
style = textStyle,
3235
text = buildAnnotatedString {
3336
withLink(
3437
LinkAnnotation.Url(
@@ -37,7 +40,7 @@ fun ExternalLink(
3740
style = SpanStyle(
3841
textDecoration = TextDecoration.Underline,
3942
color = linkColor,
40-
fontWeight = FontWeight.Bold
43+
fontWeight = textStyle.fontWeight ?: FontWeight.Bold
4144
)
4245
),
4346
)

‎app/src/main/java/com/cornellappdev/score/components/highlights/VideoHighlightsCard.kt‎

Lines changed: 13 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@ import androidx.compose.foundation.shape.RoundedCornerShape
1717
import androidx.compose.material3.Icon
1818
import androidx.compose.material3.Text
1919
import androidx.compose.runtime.Composable
20+
import androidx.compose.ui.text.TextStyle
2021
import androidx.compose.ui.Alignment
2122
import androidx.compose.ui.Modifier
2223
import androidx.compose.ui.draw.clip
@@ -41,7 +42,8 @@ import com.cornellappdev.score.theme.Style.labelsNormal
4142

4243
@Composable
4344
private fun VideoHighlightCardHeader(
44-
imageUrl: String
45+
imageUrl: String,
46+
overlay: @Composable () -> Unit
4547
) {
4648
Box(
4749
modifier = Modifier
@@ -52,20 +54,23 @@ private fun VideoHighlightCardHeader(
5254
AsyncImage(
5355
model = imageUrl,
5456
contentDescription = "Highlight article image",
57+
modifier = Modifier.fillMaxSize(),
5558
contentScale = ContentScale.Crop
5659
)
5760
Box(
5861
modifier = Modifier
5962
.fillMaxSize()
6063
.background(color = Color.Black.copy(alpha = 0.4f))
6164
)
65+
overlay()
6266
}
6367
}
6468

6569
@Composable
6670
fun VideoHighlightCardBody(
6771
videoHighlight: VideoHighlightData,
68-
isWideFormat: Boolean
72+
isWideFormat: Boolean,
73+
linkTextStyle: TextStyle = TextStyle.Default
6974
) {
7075
Column(
7176
modifier = Modifier
@@ -119,7 +124,7 @@ fun VideoHighlightCardBody(
119124
if (isWideFormat) {
120125
Text("Watch on ")
121126
}
122-
ExternalLink(videoHighlight.videoUrl, "Youtube", CrimsonPrimary)
127+
ExternalLink(videoHighlight.videoUrl, "Youtube", CrimsonPrimary, linkTextStyle)
123128
}
124129
Text(
125130
style = labelsNormal,
@@ -133,15 +138,17 @@ fun VideoHighlightCardBody(
133138
fun VideoHighlightCard(
134139
videoHighlight: VideoHighlightData,
135140
isWideFormat: Boolean,
136-
modifier: Modifier = Modifier
141+
modifier: Modifier = Modifier,
142+
linkTextStyle: TextStyle = TextStyle.Default,
143+
headerOverlay: @Composable () -> Unit = {}
137144
) {
138145
Column(
139146
modifier = modifier
140147
.then(if (isWideFormat) Modifier.fillMaxWidth() else Modifier.width(241.dp))
141148
.clip(RoundedCornerShape(12.dp))
142149
) {
143-
VideoHighlightCardHeader(videoHighlight.thumbnailImageUrl)
144-
VideoHighlightCardBody(videoHighlight, isWideFormat)
150+
VideoHighlightCardHeader(videoHighlight.thumbnailImageUrl, headerOverlay)
151+
VideoHighlightCardBody(videoHighlight, isWideFormat, linkTextStyle)
145152
}
146153
}
147154

‎app/src/main/java/com/cornellappdev/score/model/Highlights.kt‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,10 @@ data class VideoHighlightData(
66
val videoUrl: String,
77
val date: String,
88
val sport: Sport,
9-
val gender: GenderDivision
9+
val gender: GenderDivision,
10+
val duration: String? = null,
11+
val finalScore: String? = null,
12+
val photoCredit: String? = null
1013
)
1114

1215
data class ArticleHighlightData(

‎app/src/main/java/com/cornellappdev/score/model/Profile.kt‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
package com.cornellappdev.score.model
2+
3+
/** UI data for the populated profile; independent of a future account API response. */
4+
data class ProfileData(
5+
val name: String,
6+
val favorites: List<ProfileFavorite>,
7+
val bookmarks: List<HighlightData>
8+
)
9+
10+
/** A favorite identifies a sport and division, allowing both golf teams to appear separately. */
11+
data class ProfileFavorite(val sport: Sport, val gender: GenderDivision)

‎app/src/main/java/com/cornellappdev/score/screen/EmptyProfileScreen.kt‎

Lines changed: 66 additions & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -89,58 +89,7 @@ fun EmptyProfileContent(
8989
.padding(horizontal = 24.dp)
9090
.padding(top = 8.dp, bottom = 32.dp)
9191
) {
92-
Row(Modifier.fillMaxWidth(), verticalAlignment = Alignment.CenterVertically) {
93-
Text(
94-
stringResource(R.string.profile_title), style = Style.heading1,
95-
color = Color.Black, modifier = Modifier.weight(1f)
96-
)
97-
Icon(
98-
painterResource(R.drawable.profile_notifications),
99-
stringResource(R.string.profile_notifications),
100-
Modifier.size(32.dp),
101-
tint = Color.Unspecified
102-
)
103-
Spacer(Modifier.width(8.dp))
104-
Icon(
105-
painterResource(R.drawable.profile_settings),
106-
stringResource(R.string.profile_settings),
107-
Modifier.size(32.dp),
108-
tint = Color.Unspecified
109-
)
110-
}
111-
Spacer(Modifier.height(24.dp))
112-
Row(
113-
verticalAlignment = Alignment.CenterVertically,
114-
horizontalArrangement = Arrangement.spacedBy(16.dp)
115-
) {
116-
Image(
117-
painterResource(selectedPicture.drawable),
118-
stringResource(
119-
R.string.selected_profile_picture,
120-
stringResource(selectedPicture.label)
121-
),
122-
Modifier.size(70.dp)
123-
)
124-
Column(Modifier.weight(1f)) {
125-
Text(
126-
stringResource(R.string.profile_placeholder_name),
127-
style = Style.heading2,
128-
color = GrayPrimary
129-
)
130-
Box(
131-
Modifier
132-
.heightIn(min = 48.dp)
133-
.clickable(role = Role.Button, onClick = onEditProfilePicture),
134-
contentAlignment = Alignment.CenterStart
135-
) {
136-
Text(
137-
stringResource(R.string.edit_profile_picture),
138-
style = Style.labelsNormal,
139-
color = CrimsonPrimary
140-
)
141-
}
142-
}
143-
}
92+
ProfileIdentityHeader(selectedPicture, onEditProfilePicture)
14493
ProfileSectionDivider()
14594
ProfileSectionHeading(R.string.profile_favorite_sports, R.string.profile_edit, Color.Black)
14695
Spacer(Modifier.height(16.dp))
@@ -210,7 +159,70 @@ fun EmptyProfileContent(
210159
}
211160

212161
@Composable
213-
private fun ProfileSectionDivider() {
162+
internal fun ProfileIdentityHeader(
163+
selectedPicture: ProfilePicture,
164+
onEditProfilePicture: () -> Unit,
165+
compact: Boolean = false,
166+
displayName: String = stringResource(R.string.profile_placeholder_name)
167+
) {
168+
Column {
169+
Row(Modifier.fillMaxWidth(), verticalAlignment = Alignment.CenterVertically) {
170+
Text(
171+
stringResource(R.string.profile_title), style = Style.heading1,
172+
color = Color.Black, modifier = Modifier.weight(1f)
173+
)
174+
Icon(
175+
painterResource(R.drawable.profile_notifications),
176+
stringResource(R.string.profile_notifications),
177+
Modifier.size(32.dp),
178+
tint = Color.Unspecified
179+
)
180+
Spacer(Modifier.width(8.dp))
181+
Icon(
182+
painterResource(R.drawable.profile_settings),
183+
stringResource(R.string.profile_settings),
184+
Modifier.size(32.dp),
185+
tint = Color.Unspecified
186+
)
187+
}
188+
Spacer(Modifier.height(24.dp))
189+
Row(
190+
verticalAlignment = Alignment.CenterVertically,
191+
horizontalArrangement = Arrangement.spacedBy(16.dp)
192+
) {
193+
Image(
194+
painterResource(selectedPicture.drawable),
195+
stringResource(
196+
R.string.selected_profile_picture,
197+
stringResource(selectedPicture.label)
198+
),
199+
Modifier.size(70.dp)
200+
)
201+
Column(Modifier.weight(1f)) {
202+
Text(
203+
displayName,
204+
style = Style.heading2,
205+
color = GrayPrimary
206+
)
207+
Box(
208+
Modifier
209+
.heightIn(min = if (compact) 22.dp else 48.dp)
210+
.clickable(role = Role.Button, onClick = onEditProfilePicture),
211+
contentAlignment = Alignment.CenterStart
212+
) {
213+
Text(
214+
stringResource(R.string.edit_profile_picture),
215+
style = Style.labelsNormal,
216+
color = CrimsonPrimary
217+
)
218+
}
219+
}
220+
}
221+
}
222+
}
223+
224+
@Composable
225+
internal fun ProfileSectionDivider() {
214226
Column {
215227
Spacer(Modifier.height(24.dp))
216228
HorizontalDivider(color = GrayStroke)
@@ -242,7 +254,7 @@ private fun ProfileSectionHeading(@StringRes title: Int, @StringRes action: Int,
242254

243255
// Static navigation artwork: the reference tabs are intentionally non-interactive.
244256
@Composable
245-
private fun ProfileTabBar() {
257+
internal fun ProfileTabBar() {
246258
Row(
247259
Modifier
248260
.fillMaxWidth()

‎app/src/main/java/com/cornellappdev/score/screen/ProfileSampleData.kt‎

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
package com.cornellappdev.score.screen
2+
3+
import com.cornellappdev.score.R
4+
import com.cornellappdev.score.model.ArticleHighlightData
5+
import com.cornellappdev.score.model.GenderDivision
6+
import com.cornellappdev.score.model.HighlightData
7+
import com.cornellappdev.score.model.ProfileData
8+
import com.cornellappdev.score.model.ProfileFavorite
9+
import com.cornellappdev.score.model.Sport
10+
import com.cornellappdev.score.model.VideoHighlightData
11+
12+
// Temporary design fixtures. Replace ProfileScreen.data when account data is available.
13+
val sampleProfileData = ProfileData(
14+
name = "Claire Yu",
15+
favorites = listOf(
16+
ProfileFavorite(Sport.GOLF, GenderDivision.MALE),
17+
ProfileFavorite(Sport.GOLF, GenderDivision.FEMALE),
18+
ProfileFavorite(Sport.GYMNASTICS, GenderDivision.FEMALE),
19+
ProfileFavorite(Sport.LACROSSE, GenderDivision.MALE)
20+
),
21+
bookmarks = listOf(
22+
HighlightData.Video(
23+
VideoHighlightData(
24+
title = "vs. Columbia",
25+
thumbnailImageUrl = "android.resource://com.cornellappdev.score/${R.drawable.profile_highlight_soccer}",
26+
videoUrl = "https://www.youtube.com/@CornellAthletics",
27+
date = "11/09",
28+
sport = Sport.BASEBALL,
29+
gender = GenderDivision.MALE,
30+
duration = "1:25",
31+
finalScore = "3-0",
32+
photoCredit = "Photo By: Caroline Sherman"
33+
)
34+
),
35+
HighlightData.Article(
36+
ArticleHighlightData(
37+
title = "Late Goal Lifts No. 6 Men’s Hockey Over Brown",
38+
imageUrl = "android.resource://com.cornellappdev.score/${R.drawable.profile_highlight_hockey}",
39+
articleUrl = "https://cornellsun.com/",
40+
date = "11/09",
41+
sport = Sport.ICE_HOCKEY
42+
)
43+
)
44+
)
45+
)

0 commit comments

Comments
 (0)