Skip to content

Commit 112b416

Browse files
amjiaoamjiao
authored
Highlights Screen UI (#86)
* Highlights Card UI * Added wide highlight card case and handled title line overflow * filter button for highlights screen * made highlights filter button clickable * highlights screen * Some name changes * Abstracted EmptyState * EmptyState.kt improvements + resulting syntax changes in other files * Address highlights card comments * Fixes to highlight cards * Fixed SportSelectorHeader scroll appearance * Highlights Card Fixes * HighlightsFilter fixes * Search Bar refactoring * Utils * Fix padding to match design * Address PR comments
1 parent 261fdcc commit 112b416

20 files changed

+1029
-55
lines changed

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

Lines changed: 30 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,19 @@
11
package com.cornellappdev.score.components
22

3+
import androidx.annotation.DrawableRes
34
import androidx.compose.foundation.Image
45
import androidx.compose.foundation.layout.Arrangement
56
import androidx.compose.foundation.layout.Box
67
import androidx.compose.foundation.layout.Column
78
import androidx.compose.foundation.layout.Spacer
89
import androidx.compose.foundation.layout.fillMaxWidth
910
import androidx.compose.foundation.layout.height
11+
import androidx.compose.material3.Icon
1012
import androidx.compose.material3.Text
1113
import androidx.compose.runtime.Composable
1214
import androidx.compose.ui.Alignment
1315
import androidx.compose.ui.Modifier
16+
import androidx.compose.ui.graphics.Color
1417
import androidx.compose.ui.res.painterResource
1518
import androidx.compose.ui.tooling.preview.Preview
1619
import androidx.compose.ui.unit.Dp
@@ -21,58 +24,46 @@ import com.cornellappdev.score.theme.GrayPrimary
2124
import com.cornellappdev.score.theme.Style.bodyNormal
2225
import com.cornellappdev.score.theme.Style.heading2
2326

24-
@Composable
25-
fun EmptyState(
26-
modifier: Modifier = Modifier,
27-
title: String = "No games yet.",
28-
subtitle: String = "Check back here later!"
29-
) {
30-
Column(
31-
modifier = modifier,
32-
horizontalAlignment = Alignment.CenterHorizontally,
33-
verticalArrangement = Arrangement.Center
34-
) {
35-
Image(
36-
painter = painterResource(R.drawable.ic_speaker_gray),
37-
contentDescription = "score speaker icon"
38-
)
39-
Spacer(modifier = Modifier.height(16.dp))
40-
Text(
41-
text = title,
42-
style = heading2.copy(color = GrayPrimary)
43-
)
44-
Spacer(modifier = Modifier.height(8.dp))
45-
Text(
46-
text = subtitle,
47-
style = bodyNormal.copy(color = GrayMedium)
48-
)
49-
}
50-
}
51-
5227
@Composable
5328
fun EmptyStateBox(
29+
@DrawableRes icon: Int,
30+
title: String,
5431
modifier: Modifier = Modifier,
55-
height: Dp = 550.dp,
56-
title: String = "No games yet.",
57-
subtitle: String = "Check back here later!"
32+
subtitle: String = "Check back here later!",
33+
height: Dp = 550.dp //(appx height when full-screen error)
5834
) {
5935
Box(
6036
modifier = modifier
6137
.height(height)
6238
.fillMaxWidth(), contentAlignment = Alignment.Center
6339
) {
64-
EmptyState(title = title, subtitle = subtitle)
40+
Column(
41+
modifier = Modifier,
42+
horizontalAlignment = Alignment.CenterHorizontally,
43+
verticalArrangement = Arrangement.Center
44+
) {
45+
Icon(
46+
painter = painterResource(icon),
47+
contentDescription = "empty state icon",
48+
tint = Color.Unspecified
49+
)
50+
Spacer(modifier = Modifier.height(16.dp))
51+
Text(
52+
text = title,
53+
style = heading2.copy(color = GrayPrimary)
54+
)
55+
Spacer(modifier = Modifier.height(8.dp))
56+
Text(
57+
text = subtitle,
58+
style = bodyNormal.copy(color = GrayMedium)
59+
)
60+
}
6561
}
6662
}
6763

68-
@Preview
69-
@Composable
70-
private fun EmptyStatePreview() = ScorePreview {
71-
EmptyState()
72-
}
7364

7465
@Preview
7566
@Composable
7667
private fun EmptyStateBoxPreview() = ScorePreview {
77-
EmptyStateBox()
78-
}
68+
EmptyStateBox(R.drawable.ic_speaker_gray, "No games yet.")
69+
}

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

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -78,7 +78,10 @@ fun SportSelectorHeader(
7878
}
7979
}
8080
Spacer(Modifier.height(24.dp))
81-
LazyRow(Modifier.fillMaxWidth()) {
81+
LazyRow(
82+
Modifier.fillMaxWidth(),
83+
horizontalArrangement = Arrangement.spacedBy(20.dp)
84+
) {
8285
items(sports) { selection ->
8386
when (selection) {
8487
SportSelection.All -> {
@@ -108,11 +111,7 @@ fun SportSelectorHeader(
108111
}
109112
}
110113
}
111-
112-
113-
Spacer(modifier = Modifier.width(20.dp))
114114
}
115-
item { Spacer(modifier = Modifier.width(4.dp)) }
116115
}
117116
}
118117
}

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

Lines changed: 133 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,133 @@
1+
package com.cornellappdev.score.components.highlights
2+
3+
import androidx.compose.foundation.background
4+
import androidx.compose.foundation.layout.Arrangement
5+
import androidx.compose.foundation.layout.Box
6+
import androidx.compose.foundation.layout.Column
7+
import androidx.compose.foundation.layout.Row
8+
import androidx.compose.foundation.layout.fillMaxSize
9+
import androidx.compose.foundation.layout.fillMaxWidth
10+
import androidx.compose.foundation.layout.height
11+
import androidx.compose.foundation.layout.padding
12+
import androidx.compose.foundation.layout.width
13+
import androidx.compose.foundation.shape.RoundedCornerShape
14+
import androidx.compose.foundation.text.BasicText
15+
import androidx.compose.material3.Icon
16+
import androidx.compose.material3.Text
17+
import androidx.compose.runtime.Composable
18+
import androidx.compose.ui.Alignment
19+
import androidx.compose.ui.Modifier
20+
import androidx.compose.ui.draw.clip
21+
import androidx.compose.ui.graphics.Color
22+
import androidx.compose.ui.layout.ContentScale
23+
import androidx.compose.ui.res.painterResource
24+
import androidx.compose.ui.text.LinkAnnotation
25+
import androidx.compose.ui.text.SpanStyle
26+
import androidx.compose.ui.text.TextLinkStyles
27+
import androidx.compose.ui.text.buildAnnotatedString
28+
import androidx.compose.ui.text.style.TextDecoration
29+
import androidx.compose.ui.text.style.TextOverflow
30+
import androidx.compose.ui.text.withLink
31+
import androidx.compose.ui.tooling.preview.Preview
32+
import androidx.compose.ui.unit.dp
33+
import coil3.compose.AsyncImage
34+
import com.cornellappdev.score.R
35+
import com.cornellappdev.score.model.ArticleHighlightData
36+
import com.cornellappdev.score.model.Sport
37+
import com.cornellappdev.score.theme.Style.bodySemibold
38+
import com.cornellappdev.score.theme.Style.heading2
39+
import com.cornellappdev.score.theme.Style.labelsNormal
40+
import com.cornellappdev.score.theme.White
41+
42+
@Composable
43+
fun ArticleHighlightCard(
44+
articleHighlight: ArticleHighlightData,
45+
isWideFormat: Boolean
46+
) {
47+
Box(
48+
modifier = Modifier
49+
.then(if (isWideFormat) Modifier.fillMaxWidth() else Modifier.width(241.dp))
50+
.height(192.dp)
51+
.clip(shape = RoundedCornerShape(12.dp))
52+
) {
53+
//todo: empty state if image doesn't load
54+
AsyncImage(
55+
model = articleHighlight.imageUrl,
56+
contentDescription = "highlight image",
57+
contentScale = ContentScale.Crop
58+
)
59+
Box(
60+
modifier = Modifier
61+
.fillMaxSize()
62+
.background(color = Color.Black.copy(alpha = 0.4f))
63+
)
64+
Column(
65+
modifier = Modifier
66+
.fillMaxSize()
67+
.padding(12.dp),
68+
verticalArrangement = Arrangement.SpaceBetween
69+
) {
70+
Text(
71+
style = heading2,
72+
color = Color.White,
73+
text = articleHighlight.title,
74+
maxLines = 4,
75+
overflow = TextOverflow.Ellipsis
76+
)
77+
78+
Row(
79+
modifier = Modifier.fillMaxWidth(),
80+
horizontalArrangement = Arrangement.SpaceBetween,
81+
verticalAlignment = Alignment.CenterVertically
82+
) {
83+
Row(
84+
verticalAlignment = Alignment.CenterVertically
85+
) {
86+
if (isWideFormat) {
87+
Text("Read at ", color = White)
88+
}
89+
ExternalLink(
90+
articleHighlight.articleUrl,
91+
urlLabel = "Cornell Daily Sun",
92+
linkColor = White
93+
)
94+
}
95+
Text(
96+
color = Color.White,
97+
style = labelsNormal,
98+
text = articleHighlight.date
99+
)
100+
}
101+
}
102+
}
103+
}
104+
105+
@Preview
106+
@Composable
107+
private fun ArticleHighlightCardPreview() {
108+
ArticleHighlightCard(
109+
ArticleHighlightData(
110+
"Late Goal Lifts No. 6 Men’s Hockey Over Brown",
111+
"maxresdefault.jpg",
112+
"https://cornellsun.com/article/london-mcdavid-is-making-a-name-for-herself-at-cornell",
113+
"11/9",
114+
Sport.ICE_HOCKEY
115+
),
116+
false
117+
)
118+
}
119+
120+
@Preview
121+
@Composable
122+
private fun WideArticleHighlightCardPreview() {
123+
ArticleHighlightCard(
124+
ArticleHighlightData(
125+
"Late Goal Lifts No. 6 Men’s Hockey Over Brown",
126+
"maxresdefault.jpg",
127+
"https://cornellsun.com/article/london-mcdavid-is-making-a-name-for-herself-at-cornell",
128+
"11/9",
129+
Sport.ICE_HOCKEY
130+
),
131+
true
132+
)
133+
}

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

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
package com.cornellappdev.score.components.highlights
2+
3+
import androidx.compose.foundation.layout.Arrangement
4+
import androidx.compose.foundation.layout.Row
5+
import androidx.compose.foundation.layout.fillMaxWidth
6+
import androidx.compose.foundation.text.BasicText
7+
import androidx.compose.material3.Icon
8+
import androidx.compose.runtime.Composable
9+
import androidx.compose.ui.Alignment
10+
import androidx.compose.ui.Modifier
11+
import androidx.compose.ui.graphics.Color
12+
import androidx.compose.ui.res.painterResource
13+
import androidx.compose.ui.text.LinkAnnotation
14+
import androidx.compose.ui.text.SpanStyle
15+
import androidx.compose.ui.text.TextLinkStyles
16+
import androidx.compose.ui.text.buildAnnotatedString
17+
import androidx.compose.ui.text.font.FontWeight
18+
import androidx.compose.ui.text.style.TextDecoration
19+
import androidx.compose.ui.text.withLink
20+
import com.cornellappdev.score.R
21+
22+
@Composable
23+
fun ExternalLink(
24+
url: String,
25+
urlLabel: String,
26+
linkColor: Color,
27+
) {
28+
Row(
29+
verticalAlignment = Alignment.CenterVertically
30+
) {
31+
BasicText(
32+
text = buildAnnotatedString {
33+
withLink(
34+
LinkAnnotation.Url(
35+
url,
36+
TextLinkStyles(
37+
style = SpanStyle(
38+
textDecoration = TextDecoration.Underline,
39+
color = linkColor,
40+
fontWeight = FontWeight.Bold
41+
)
42+
),
43+
)
44+
) {
45+
append(urlLabel)
46+
}
47+
}
48+
)
49+
Icon(
50+
painter = painterResource(R.drawable.arrow_outward),
51+
contentDescription = "external link arrow",
52+
tint = linkColor
53+
)
54+
}
55+
}

0 commit comments

Comments
 (0)