Skip to content

Commit 87ff409

Browse files
l-olson1214l-olson1214
authored
Merge pull request #5521 from wikimedia/T409352
T409352: Punchlist logged in readers
2 parents 8560d13 + 1d44411 commit 87ff409

File tree

3 files changed

+80
-75
lines changed

3 files changed

+80
-75
lines changed

‎WMFComponents/Sources/WMFComponents/Components/Activity Tab/WMFActivityTabInfoCardView.swift‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -49,15 +49,18 @@ struct WMFActivityTabInfoCardView<Content: View>: View {
4949
}
5050
}
5151

52-
HStack(alignment: .center) {
52+
HStack(alignment: .bottom) {
5353
Text("\(amount)")
5454
.foregroundStyle(Color(theme.text))
5555
.font(Font(WMFFont.for(.boldTitle1)))
5656
Spacer()
5757
content()
5858
}
59+
.frame(maxWidth: .infinity)
60+
.padding(.bottom, 16)
5961
}
60-
.padding(16)
62+
.padding(.horizontal, 16)
63+
.padding(.top, 16)
6164
.background(Color(theme.paperBackground))
6265
.cornerRadius(10)
6366
.overlay(

‎WMFComponents/Sources/WMFComponents/Components/Activity Tab/WMFActivityTabView.swift‎

Lines changed: 72 additions & 69 deletions
Original file line numberDiff line numberDiff line change
@@ -14,65 +14,68 @@ public struct WMFActivityTabView: View {
1414
}
1515

1616
public var body: some View {
17-
VStack(spacing: 20) {
18-
ZStack {
19-
if viewModel.isLoggedIn {
20-
VStack(spacing: 20) {
21-
headerView
22-
23-
VStack(alignment: .leading, spacing: 16) {
24-
VStack(alignment: .center, spacing: 8) {
25-
hoursMinutesRead
26-
Text(viewModel.localizedStrings.timeSpentReading)
27-
.font(Font(WMFFont.for(.semiboldHeadline)))
28-
.foregroundColor(Color(uiColor: theme.text))
29-
}
30-
.frame(maxWidth: .infinity)
31-
32-
// Start of modules on top section
33-
articlesReadModule
34-
savedArticlesModule
35-
if !viewModel.model.topCategories.isEmpty {
36-
topCategoriesModule(categories: viewModel.model.topCategories)
17+
ScrollView {
18+
VStack(spacing: 20) {
19+
ZStack {
20+
if viewModel.isLoggedIn {
21+
VStack(spacing: 20) {
22+
headerView
23+
24+
VStack(alignment: .leading, spacing: 16) {
25+
VStack(alignment: .center, spacing: 8) {
26+
hoursMinutesRead
27+
Text(viewModel.localizedStrings.timeSpentReading)
28+
.font(Font(WMFFont.for(.semiboldHeadline)))
29+
.foregroundColor(Color(uiColor: theme.text))
30+
}
31+
.frame(maxWidth: .infinity)
32+
33+
// Start of modules on top section
34+
articlesReadModule
35+
savedArticlesModule
36+
if !viewModel.model.topCategories.isEmpty {
37+
topCategoriesModule(categories: viewModel.model.topCategories)
38+
}
39+
Spacer()
3740
}
38-
Spacer()
41+
.padding(.horizontal, 16)
42+
.frame(maxWidth: .infinity, alignment: .leading)
3943
}
40-
.padding(.horizontal, 16)
41-
.frame(maxWidth: .infinity, alignment: .leading)
42-
}
43-
.background(
44-
LinearGradient(
45-
stops: [
46-
Gradient.Stop(color: Color(uiColor: theme.paperBackground), location: 0.00),
47-
Gradient.Stop(color: Color(uiColor: theme.softEditorBlue), location: 1.00)
48-
],
49-
startPoint: UnitPoint(x: 0.5, y: 0),
50-
endPoint: UnitPoint(x: 0.5, y: 1)
44+
.background(
45+
LinearGradient(
46+
stops: [
47+
Gradient.Stop(color: Color(uiColor: theme.paperBackground), location: 0.00),
48+
Gradient.Stop(color: Color(uiColor: theme.softEditorBlue), location: 1.00)
49+
],
50+
startPoint: UnitPoint(x: 0.5, y: 0),
51+
endPoint: UnitPoint(x: 0.5, y: 1)
52+
)
5153
)
52-
)
53-
.frame(maxWidth: .infinity)
54-
} else {
55-
loggedOutView
54+
.frame(maxWidth: .infinity)
55+
} else {
56+
loggedOutView
57+
}
58+
59+
Spacer()
5660
}
61+
.padding(.top, 16)
5762

5863
Spacer()
5964
}
60-
.padding(.top, 16)
61-
62-
Spacer()
63-
}
64-
.frame(maxWidth: .infinity)
65-
.onAppear {
66-
viewModel.fetchData()
67-
viewModel.hasSeenActivityTab()
65+
.frame(maxWidth: .infinity)
66+
.onAppear {
67+
viewModel.fetchData()
68+
viewModel.hasSeenActivityTab()
69+
}
6870
}
71+
.background((Color(uiColor: theme.paperBackground)))
6972
}
7073

7174
private var headerView: some View {
7275
VStack(alignment: .center, spacing: 8) {
7376
Text(viewModel.model.usernamesReading)
7477
.foregroundColor(Color(uiColor: theme.text))
75-
.font(Font(WMFFont.for(.boldHeadline)))
78+
.font(Font(WMFFont.for(.boldBody)))
7679
.frame(maxWidth: .infinity, alignment: .center)
7780
Text(viewModel.localizedStrings.onWikipediaiOS)
7881
.font(.custom("Menlo", size: 11, relativeTo: .caption2))
@@ -169,7 +172,7 @@ public struct WMFActivityTabView: View {
169172
private var articlesReadModule: some View {
170173
Group {
171174
WMFActivityTabInfoCardView(
172-
icon: WMFSFSymbolIcon.for(symbol: .bookPages),
175+
icon: WMFSFSymbolIcon.for(symbol: .bookPages, font: WMFFont.boldCaption1),
173176
title: viewModel.localizedStrings.totalArticlesRead,
174177
dateText: viewModel.model.dateTimeLastRead,
175178
amount: viewModel.model.totalArticlesRead,
@@ -187,7 +190,7 @@ public struct WMFActivityTabView: View {
187190
private var savedArticlesModule: some View {
188191
Group {
189192
WMFActivityTabInfoCardView(
190-
icon: WMFSFSymbolIcon.for(symbol: .bookmark),
193+
icon: WMFSFSymbolIcon.for(symbol: .bookmark, font: WMFFont.boldCaption1),
191194
title: viewModel.localizedStrings.articlesSavedTitle,
192195
dateText: viewModel.model.dateTimeLastSaved,
193196
amount: viewModel.model.articlesSavedAmount,
@@ -216,7 +219,6 @@ public struct WMFActivityTabView: View {
216219
}
217220
.frame(width: 38, height: 38)
218221
.clipShape(Circle())
219-
.overlay(Circle().stroke(Color.white, lineWidth: 2))
220222
}
221223
} else {
222224
ForEach(images.prefix(3), id: \.self) { imageURL in
@@ -229,38 +231,37 @@ public struct WMFActivityTabView: View {
229231
}
230232
.frame(width: 38, height: 38)
231233
.clipShape(Circle())
232-
.overlay(Circle().stroke(Color.white, lineWidth: 2))
233234
}
234235

235236
let remaining = totalSavedCount - 3
236237
Text(viewModel.localizedStrings.remaining(remaining))
237-
.font(.system(size: 14, weight: .medium))
238+
.font(Font(WMFFont.for(.caption2)))
238239
.foregroundColor(.white)
239240
.frame(width: 38, height: 38)
240-
.background(Circle().fill(Color.gray))
241-
.overlay(Circle().stroke(Color.white, lineWidth: 2))
242241
}
243242
}
244243
}
245244

246245
private func articlesReadGraph(weeklyReads: [Int]) -> some View {
247-
Chart {
248-
ForEach(weeklyReads.indices, id: \.self) { index in
249-
BarMark(
250-
x: .value(viewModel.localizedStrings.week, index),
251-
y: .value(viewModel.localizedStrings.articlesRead, weeklyReads[index] + 1),
252-
width: 12
253-
)
254-
.foregroundStyle(weeklyReads[index] > 0 ? Color(uiColor: theme.accent) : Color(uiColor: theme.baseBackground))
255-
.cornerRadius(1.5)
246+
Group {
247+
Chart {
248+
ForEach(weeklyReads.indices, id: \.self) { index in
249+
BarMark(
250+
x: .value(viewModel.localizedStrings.week, index),
251+
y: .value(viewModel.localizedStrings.articlesRead, weeklyReads[index] + 1),
252+
width: 12
253+
)
254+
.foregroundStyle(weeklyReads[index] > 0 ? Color(uiColor: theme.accent) : Color(uiColor: theme.newBorder))
255+
.cornerRadius(1.5)
256+
}
257+
}
258+
.frame(maxWidth: 54, maxHeight: 45)
259+
.chartXAxis(.hidden)
260+
.chartYAxis(.hidden)
261+
.chartPlotStyle { plotArea in
262+
plotArea
263+
.background(Color.clear)
256264
}
257-
}
258-
.frame(maxWidth: 65, maxHeight: 45)
259-
.chartXAxis(.hidden)
260-
.chartYAxis(.hidden)
261-
.chartPlotStyle { plotArea in
262-
plotArea
263-
.background(Color.clear)
264265
}
265266
}
266267

@@ -273,14 +274,16 @@ public struct WMFActivityTabView: View {
273274
Text(viewModel.localizedStrings.topCategories)
274275
.foregroundStyle(Color(theme.text))
275276
.font(Font(WMFFont.for(.boldCaption1)))
276-
Spacer()
277277
}
278+
.frame(maxWidth: .infinity, alignment: .leading)
279+
278280
ForEach(categories.indices, id: \.self) { index in
279281
let category = categories[index]
280282
VStack(alignment: .leading, spacing: 16) {
281283
Text(category)
282284
.foregroundStyle(Color(theme.text))
283285
.font(Font(WMFFont.for(.callout)))
286+
.lineLimit(2)
284287

285288
if index < categories.count - 1 {
286289
Divider()

‎WMFComponents/Sources/WMFComponents/Style/WMFFont.swift‎

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -69,10 +69,9 @@ public enum WMFFont {
6969
return UIFont(descriptor: descriptor, size: 0)
7070

7171
case .boldCaption1:
72-
guard let descriptor = UIFontDescriptor.preferredFontDescriptor(withTextStyle: .caption1, compatibleWith: traitCollection).withSymbolicTraits(.traitBold) else {
73-
fatalError()
74-
}
75-
return UIFont(descriptor: descriptor, size: 0)
72+
let base = UIFont.preferredFont(forTextStyle: .caption1, compatibleWith: traitCollection)
73+
let bold = UIFont.systemFont(ofSize: base.pointSize, weight: .bold)
74+
return UIFontMetrics(forTextStyle: .caption1).scaledFont(for: bold)
7675

7776
case .boldFootnote:
7877
guard let descriptor = UIFontDescriptor.preferredFontDescriptor(withTextStyle: .footnote, compatibleWith: traitCollection).withSymbolicTraits(.traitBold) else {

0 commit comments

Comments
 (0)