From 77a60bcf959959569bc42a3176cc7147674d5c2e Mon Sep 17 00:00:00 2001 From: Alex Grebenyuk Date: Mon, 28 Jul 2025 13:39:36 -0400 Subject: [PATCH 01/18] Better PlaceholderRowView --- Modules/Sources/JetpackStats/Cards/TopListCard.swift | 8 +++----- .../Views/TopList/TopListItemsView.swift | 12 ++++++++---- 2 files changed, 11 insertions(+), 9 deletions(-) diff --git a/Modules/Sources/JetpackStats/Cards/TopListCard.swift b/Modules/Sources/JetpackStats/Cards/TopListCard.swift index b215aa597f1d..698e37c0d81c 100644 --- a/Modules/Sources/JetpackStats/Cards/TopListCard.swift +++ b/Modules/Sources/JetpackStats/Cards/TopListCard.swift @@ -275,9 +275,7 @@ struct TopListCard: View { } #Preview { - NavigationView { - TopListCardPreview(item: .authors) - } + TopListCardPreview(item: .authors) } private struct TopListCardPreview: View { @@ -293,13 +291,13 @@ private struct TopListCardPreview: View { metric: item == .fileDownloads ? .downloads : .views ), dateRange: Calendar.demo.makeDateRange(for: .last28Days), - service: MockStatsService() + service: MockStatsService(), + fetchLimit: 3 )) } var body: some View { TopListCard(viewModel: viewModel) - .cardStyle() .frame(maxWidth: .infinity, maxHeight: .infinity) .background(Constants.Colors.background) } diff --git a/Modules/Sources/JetpackStats/Views/TopList/TopListItemsView.swift b/Modules/Sources/JetpackStats/Views/TopList/TopListItemsView.swift index 7bbb2c08f6bc..4d2bd2dd5a95 100644 --- a/Modules/Sources/JetpackStats/Views/TopList/TopListItemsView.swift +++ b/Modules/Sources/JetpackStats/Views/TopList/TopListItemsView.swift @@ -46,11 +46,15 @@ struct PlaceholderRowView: View { Rectangle() .fill(Color.clear) .background( - TopListItemBarBackground( - value: 100, - maxValue: 100, - barColor: .secondary.opacity(0.5) + LinearGradient( + colors: [ + Color.secondary.opacity(0.08), + Color.secondary.opacity(0.05) + ], + startPoint: .leading, + endPoint: .trailing ) + .clipShape(RoundedRectangle(cornerRadius: Constants.step1)) ) .frame(height: height) } From 3e83ce25d7b9829e924cfa341f888520beac657f Mon Sep 17 00:00:00 2001 From: Alex Grebenyuk Date: Mon, 28 Jul 2025 13:42:47 -0400 Subject: [PATCH 02/18] Better empty rows --- Modules/Sources/JetpackStats/Cards/TopListCard.swift | 3 +-- .../Sources/JetpackStats/Views/TopList/TopListItemsView.swift | 2 +- 2 files changed, 2 insertions(+), 3 deletions(-) diff --git a/Modules/Sources/JetpackStats/Cards/TopListCard.swift b/Modules/Sources/JetpackStats/Cards/TopListCard.swift index 698e37c0d81c..d06f98b7764e 100644 --- a/Modules/Sources/JetpackStats/Cards/TopListCard.swift +++ b/Modules/Sources/JetpackStats/Cards/TopListCard.swift @@ -291,8 +291,7 @@ private struct TopListCardPreview: View { metric: item == .fileDownloads ? .downloads : .views ), dateRange: Calendar.demo.makeDateRange(for: .last28Days), - service: MockStatsService(), - fetchLimit: 3 + service: MockStatsService() )) } diff --git a/Modules/Sources/JetpackStats/Views/TopList/TopListItemsView.swift b/Modules/Sources/JetpackStats/Views/TopList/TopListItemsView.swift index 4d2bd2dd5a95..ed7ddb5f95d5 100644 --- a/Modules/Sources/JetpackStats/Views/TopList/TopListItemsView.swift +++ b/Modules/Sources/JetpackStats/Views/TopList/TopListItemsView.swift @@ -49,7 +49,7 @@ struct PlaceholderRowView: View { LinearGradient( colors: [ Color.secondary.opacity(0.08), - Color.secondary.opacity(0.05) + Color.secondary.opacity(0.02) ], startPoint: .leading, endPoint: .trailing From ac251cb1b1283a4f92e292f9836c7e6378f2c2a8 Mon Sep 17 00:00:00 2001 From: Alex Grebenyuk Date: Mon, 28 Jul 2025 13:43:54 -0400 Subject: [PATCH 03/18] Lighter bars in dark mode --- .../JetpackStats/Views/TopList/TopListItemBarBackground.swift | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/Modules/Sources/JetpackStats/Views/TopList/TopListItemBarBackground.swift b/Modules/Sources/JetpackStats/Views/TopList/TopListItemBarBackground.swift index 36dfd47421df..7a7270129e46 100644 --- a/Modules/Sources/JetpackStats/Views/TopList/TopListItemBarBackground.swift +++ b/Modules/Sources/JetpackStats/Views/TopList/TopListItemBarBackground.swift @@ -12,8 +12,8 @@ struct TopListItemBarBackground: View { HStack(spacing: 0) { LinearGradient( colors: [ - barColor.opacity(colorScheme == .light ? 0.06 : 0.15), - barColor.opacity(colorScheme == .light ? 0.12 : 0.3), + barColor.opacity(colorScheme == .light ? 0.06 : 0.25), + barColor.opacity(colorScheme == .light ? 0.12 : 0.4), ], startPoint: .leading, endPoint: .trailing From b3f8eddc63828f480d8557db593c29291812d672 Mon Sep 17 00:00:00 2001 From: Alex Grebenyuk Date: Mon, 28 Jul 2025 13:44:57 -0400 Subject: [PATCH 04/18] Lighter bars in dark mode --- .../JetpackStats/Views/TopList/TopListItemBarBackground.swift | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/Modules/Sources/JetpackStats/Views/TopList/TopListItemBarBackground.swift b/Modules/Sources/JetpackStats/Views/TopList/TopListItemBarBackground.swift index 7a7270129e46..6d709826a4c5 100644 --- a/Modules/Sources/JetpackStats/Views/TopList/TopListItemBarBackground.swift +++ b/Modules/Sources/JetpackStats/Views/TopList/TopListItemBarBackground.swift @@ -12,8 +12,8 @@ struct TopListItemBarBackground: View { HStack(spacing: 0) { LinearGradient( colors: [ - barColor.opacity(colorScheme == .light ? 0.06 : 0.25), - barColor.opacity(colorScheme == .light ? 0.12 : 0.4), + barColor.opacity(colorScheme == .light ? 0.06 : 0.22), + barColor.opacity(colorScheme == .light ? 0.12 : 0.35), ], startPoint: .leading, endPoint: .trailing From 790b5bad5c1da66b82873eb71dfbab56dd322c60 Mon Sep 17 00:00:00 2001 From: Alex Grebenyuk Date: Mon, 28 Jul 2025 13:47:13 -0400 Subject: [PATCH 05/18] Better contrast on a map --- .../Views/CountryMap/InteractiveMapView.swift | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/Modules/Sources/JetpackStats/Views/CountryMap/InteractiveMapView.swift b/Modules/Sources/JetpackStats/Views/CountryMap/InteractiveMapView.swift index 37647f812650..4c91091b4ae1 100644 --- a/Modules/Sources/JetpackStats/Views/CountryMap/InteractiveMapView.swift +++ b/Modules/Sources/JetpackStats/Views/CountryMap/InteractiveMapView.swift @@ -50,16 +50,16 @@ struct InteractiveMapView: View { tintColor.lightened(by: 0.75), tintColor ], - strokeColor: UIColor(white: 0.85, alpha: 1), - fillColor: UIColor(white: 0.96, alpha: 1) + strokeColor: UIColor(white: 0.8, alpha: 1), + fillColor: UIColor(white: 0.94, alpha: 1) ) self.darkStyle = MapStyle( colorAxis: [ tintColor.lightened(by: 0.7), tintColor ], - strokeColor: UIColor(white: 0.33, alpha: 1), - fillColor: UIColor(white: 0.13, alpha: 1) + strokeColor: UIColor(white: 0.36, alpha: 1), + fillColor: UIColor(white: 0.19, alpha: 1) ) } } From 6dc781e1264e6f6e3814bfe2491bb915329d25c4 Mon Sep 17 00:00:00 2001 From: Alex Grebenyuk Date: Mon, 28 Jul 2025 13:49:31 -0400 Subject: [PATCH 06/18] Fix map selection --- .../JetpackStats/Resources/interactive-map-template.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/Modules/Sources/JetpackStats/Resources/interactive-map-template.html b/Modules/Sources/JetpackStats/Resources/interactive-map-template.html index 0268521cc1e7..1f33980ff5c8 100644 --- a/Modules/Sources/JetpackStats/Resources/interactive-map-template.html +++ b/Modules/Sources/JetpackStats/Resources/interactive-map-template.html @@ -58,7 +58,7 @@ const svg = document.querySelector('svg'); // Single click handler for all interactions - svg.addEventListener('click', function(e) { + svg.addEventListener('touchstart', function(e) { e.preventDefault(); // Check if the clicked element is a path with an ID (country) From e1ab7fe43fcf3b8f600da744439e77005b1a6fd7 Mon Sep 17 00:00:00 2001 From: Alex Grebenyuk Date: Mon, 28 Jul 2025 13:55:44 -0400 Subject: [PATCH 07/18] Better loading state for avatars --- .../JetpackStats/Resources/interactive-map-template.html | 9 ++------- Modules/Sources/JetpackStats/Views/AvatarView.swift | 2 +- 2 files changed, 3 insertions(+), 8 deletions(-) diff --git a/Modules/Sources/JetpackStats/Resources/interactive-map-template.html b/Modules/Sources/JetpackStats/Resources/interactive-map-template.html index 1f33980ff5c8..e9f53d62c553 100644 --- a/Modules/Sources/JetpackStats/Resources/interactive-map-template.html +++ b/Modules/Sources/JetpackStats/Resources/interactive-map-template.html @@ -20,13 +20,8 @@ height: auto; } path { - cursor: pointer; transition: opacity 0.2s ease; } - path:hover { - opacity: 0.8; - stroke-width: 2; - } path.selected { stroke-width: 3; stroke: #007AFF; @@ -34,7 +29,7 @@