From 54167f028e1f813f39f807b9b0d4a49c337b8749 Mon Sep 17 00:00:00 2001 From: Istvan Soos Date: Fri, 29 Aug 2025 10:35:38 +0200 Subject: [PATCH] Refactor like button template. --- .../views/pkg/liked_package_list.dart | 48 ++++++++++--------- .../golden/pkg_activity_log_page.html | 4 +- app/test/frontend/golden/pkg_admin_page.html | 4 +- .../frontend/golden/pkg_changelog_page.html | 4 +- .../frontend/golden/pkg_example_page.html | 4 +- .../frontend/golden/pkg_install_page.html | 4 +- app/test/frontend/golden/pkg_score_page.html | 4 +- .../pkg_score_page_with_downloads_chart.html | 4 +- app/test/frontend/golden/pkg_show_page.html | 4 +- .../golden/pkg_show_page_discontinued.html | 4 +- .../golden/pkg_show_page_flutter_plugin.html | 4 +- .../golden/pkg_show_page_publisher.html | 4 +- .../golden/pkg_show_page_retracted.html | 4 +- ..._page_retracted_non_retracted_version.html | 4 +- .../golden/pkg_show_version_page.html | 4 +- .../frontend/golden/pkg_versions_page.html | 4 +- .../testdata/goldens/packages/oxygen.html | 4 +- .../goldens/packages/oxygen/changelog.html | 4 +- .../goldens/packages/oxygen/example.html | 4 +- .../goldens/packages/oxygen/install.html | 4 +- .../goldens/packages/oxygen/license.html | 4 +- .../goldens/packages/oxygen/score.html | 4 +- .../goldens/packages/oxygen/versions.html | 4 +- .../packages/oxygen/versions/1.0.0.html | 4 +- .../oxygen/versions/1.0.0/changelog.html | 4 +- .../oxygen/versions/1.0.0/example.html | 4 +- .../oxygen/versions/1.0.0/install.html | 4 +- .../oxygen/versions/1.0.0/license.html | 4 +- .../packages/oxygen/versions/1.0.0/score.html | 4 +- .../packages/oxygen/versions/2.0.0.html | 4 +- pkg/web_app/lib/src/likes.dart | 22 ++++----- 31 files changed, 93 insertions(+), 93 deletions(-) diff --git a/app/lib/frontend/templates/views/pkg/liked_package_list.dart b/app/lib/frontend/templates/views/pkg/liked_package_list.dart index e3654f3ea8..dec1249cc5 100644 --- a/app/lib/frontend/templates/views/pkg/liked_package_list.dart +++ b/app/lib/frontend/templates/views/pkg/liked_package_list.dart @@ -72,34 +72,13 @@ d.Node renderLikeButtonAndLabel( return d.div( classes: ['like-button-and-label'], children: [ - material.iconButton( - classes: ['like-button-and-label--button'], - isOn: isLiked, - onIcon: d.Image( - src: staticUrls.getAssetUrl('/static/img/like-active.svg'), - alt: 'liked status: active', - width: 18, - height: 18, - ), - offIcon: d.Image( - src: staticUrls.getAssetUrl('/static/img/like-inactive.svg'), - alt: 'liked status: inactive', - width: 18, - height: 18, - ), - title: isLiked ? 'Unlike this package' : 'Like this package', - attributes: { - 'data-ga-click-event': 'toggle-like', - 'aria-pressed': isLiked ? 'true' : 'false', - }, - ), + _renderLikeButton(package, isLiked), d.span( classes: ['like-button-and-label--count-wrapper'], child: d.span( classes: ['like-button-and-label--count'], text: _formatPackageLikes(likeCount), attributes: { - 'data-package': package, 'data-value': likeCount.toString(), }, ), @@ -108,6 +87,31 @@ d.Node renderLikeButtonAndLabel( ); } +d.Node _renderLikeButton(String package, bool isLiked) { + return material.iconButton( + classes: ['like-button-and-label--button'], + isOn: isLiked, + onIcon: d.Image( + src: staticUrls.getAssetUrl('/static/img/like-active.svg'), + alt: 'liked status: active', + width: 18, + height: 18, + ), + offIcon: d.Image( + src: staticUrls.getAssetUrl('/static/img/like-inactive.svg'), + alt: 'liked status: inactive', + width: 18, + height: 18, + ), + title: isLiked ? 'Unlike this package' : 'Like this package', + attributes: { + 'data-ga-click-event': 'toggle-like', + 'aria-pressed': isLiked ? 'true' : 'false', + 'data-package': package, + }, + ); +} + // keep in-sync with pkg/web_app/lib/src/likes.dart String? _formatPackageLikes(int? likesCount) { if (likesCount == null) return null; diff --git a/app/test/frontend/golden/pkg_activity_log_page.html b/app/test/frontend/golden/pkg_activity_log_page.html index c29bde2de1..269e732a29 100644 --- a/app/test/frontend/golden/pkg_activity_log_page.html +++ b/app/test/frontend/golden/pkg_activity_log_page.html @@ -186,12 +186,12 @@

diff --git a/app/test/frontend/golden/pkg_admin_page.html b/app/test/frontend/golden/pkg_admin_page.html index 0293ca8d4e..00595e346d 100644 --- a/app/test/frontend/golden/pkg_admin_page.html +++ b/app/test/frontend/golden/pkg_admin_page.html @@ -186,12 +186,12 @@

diff --git a/app/test/frontend/golden/pkg_changelog_page.html b/app/test/frontend/golden/pkg_changelog_page.html index 94b28e6320..dbd5e7559d 100644 --- a/app/test/frontend/golden/pkg_changelog_page.html +++ b/app/test/frontend/golden/pkg_changelog_page.html @@ -161,12 +161,12 @@

diff --git a/app/test/frontend/golden/pkg_example_page.html b/app/test/frontend/golden/pkg_example_page.html index 5a752dae87..37263ca75f 100644 --- a/app/test/frontend/golden/pkg_example_page.html +++ b/app/test/frontend/golden/pkg_example_page.html @@ -161,12 +161,12 @@

diff --git a/app/test/frontend/golden/pkg_install_page.html b/app/test/frontend/golden/pkg_install_page.html index d338c96672..13a25c95da 100644 --- a/app/test/frontend/golden/pkg_install_page.html +++ b/app/test/frontend/golden/pkg_install_page.html @@ -161,12 +161,12 @@

diff --git a/app/test/frontend/golden/pkg_score_page.html b/app/test/frontend/golden/pkg_score_page.html index 85f5bfb7ba..be2c1a29b6 100644 --- a/app/test/frontend/golden/pkg_score_page.html +++ b/app/test/frontend/golden/pkg_score_page.html @@ -161,12 +161,12 @@

diff --git a/app/test/frontend/golden/pkg_score_page_with_downloads_chart.html b/app/test/frontend/golden/pkg_score_page_with_downloads_chart.html index 85f5bfb7ba..be2c1a29b6 100644 --- a/app/test/frontend/golden/pkg_score_page_with_downloads_chart.html +++ b/app/test/frontend/golden/pkg_score_page_with_downloads_chart.html @@ -161,12 +161,12 @@

diff --git a/app/test/frontend/golden/pkg_show_page.html b/app/test/frontend/golden/pkg_show_page.html index 226c0827a7..af68a92d5d 100644 --- a/app/test/frontend/golden/pkg_show_page.html +++ b/app/test/frontend/golden/pkg_show_page.html @@ -152,12 +152,12 @@

diff --git a/app/test/frontend/golden/pkg_show_page_discontinued.html b/app/test/frontend/golden/pkg_show_page_discontinued.html index 5a678ebeeb..e736343abf 100644 --- a/app/test/frontend/golden/pkg_show_page_discontinued.html +++ b/app/test/frontend/golden/pkg_show_page_discontinued.html @@ -160,12 +160,12 @@

diff --git a/app/test/frontend/golden/pkg_show_page_flutter_plugin.html b/app/test/frontend/golden/pkg_show_page_flutter_plugin.html index 049b9e3aa3..975fba5106 100644 --- a/app/test/frontend/golden/pkg_show_page_flutter_plugin.html +++ b/app/test/frontend/golden/pkg_show_page_flutter_plugin.html @@ -150,12 +150,12 @@

diff --git a/app/test/frontend/golden/pkg_show_page_publisher.html b/app/test/frontend/golden/pkg_show_page_publisher.html index c50b75d2dd..4c53104a61 100644 --- a/app/test/frontend/golden/pkg_show_page_publisher.html +++ b/app/test/frontend/golden/pkg_show_page_publisher.html @@ -155,12 +155,12 @@

diff --git a/app/test/frontend/golden/pkg_show_page_retracted.html b/app/test/frontend/golden/pkg_show_page_retracted.html index a4a124cc09..cdd3716100 100644 --- a/app/test/frontend/golden/pkg_show_page_retracted.html +++ b/app/test/frontend/golden/pkg_show_page_retracted.html @@ -143,12 +143,12 @@

retracted diff --git a/app/test/frontend/golden/pkg_show_page_retracted_non_retracted_version.html b/app/test/frontend/golden/pkg_show_page_retracted_non_retracted_version.html index b95eb9093d..24ee2e3fc5 100644 --- a/app/test/frontend/golden/pkg_show_page_retracted_non_retracted_version.html +++ b/app/test/frontend/golden/pkg_show_page_retracted_non_retracted_version.html @@ -151,12 +151,12 @@

diff --git a/app/test/frontend/golden/pkg_show_version_page.html b/app/test/frontend/golden/pkg_show_version_page.html index 804978da85..1281df1116 100644 --- a/app/test/frontend/golden/pkg_show_version_page.html +++ b/app/test/frontend/golden/pkg_show_version_page.html @@ -161,12 +161,12 @@

diff --git a/app/test/frontend/golden/pkg_versions_page.html b/app/test/frontend/golden/pkg_versions_page.html index c40708809d..5c375e6bb4 100644 --- a/app/test/frontend/golden/pkg_versions_page.html +++ b/app/test/frontend/golden/pkg_versions_page.html @@ -160,12 +160,12 @@

diff --git a/app/test/task/testdata/goldens/packages/oxygen.html b/app/test/task/testdata/goldens/packages/oxygen.html index 25e0f47b26..f8ed0f947b 100644 --- a/app/test/task/testdata/goldens/packages/oxygen.html +++ b/app/test/task/testdata/goldens/packages/oxygen.html @@ -153,12 +153,12 @@

diff --git a/app/test/task/testdata/goldens/packages/oxygen/changelog.html b/app/test/task/testdata/goldens/packages/oxygen/changelog.html index 97f5edfe6a..1c3f7c7afd 100644 --- a/app/test/task/testdata/goldens/packages/oxygen/changelog.html +++ b/app/test/task/testdata/goldens/packages/oxygen/changelog.html @@ -153,12 +153,12 @@

diff --git a/app/test/task/testdata/goldens/packages/oxygen/example.html b/app/test/task/testdata/goldens/packages/oxygen/example.html index 8577583afc..a3e6788e33 100644 --- a/app/test/task/testdata/goldens/packages/oxygen/example.html +++ b/app/test/task/testdata/goldens/packages/oxygen/example.html @@ -153,12 +153,12 @@

diff --git a/app/test/task/testdata/goldens/packages/oxygen/install.html b/app/test/task/testdata/goldens/packages/oxygen/install.html index d8c4621a5e..7e5cbe8c87 100644 --- a/app/test/task/testdata/goldens/packages/oxygen/install.html +++ b/app/test/task/testdata/goldens/packages/oxygen/install.html @@ -153,12 +153,12 @@

diff --git a/app/test/task/testdata/goldens/packages/oxygen/license.html b/app/test/task/testdata/goldens/packages/oxygen/license.html index 071af87aa5..58ed2570e9 100644 --- a/app/test/task/testdata/goldens/packages/oxygen/license.html +++ b/app/test/task/testdata/goldens/packages/oxygen/license.html @@ -153,12 +153,12 @@

diff --git a/app/test/task/testdata/goldens/packages/oxygen/score.html b/app/test/task/testdata/goldens/packages/oxygen/score.html index 2a6593a1c9..80b6748411 100644 --- a/app/test/task/testdata/goldens/packages/oxygen/score.html +++ b/app/test/task/testdata/goldens/packages/oxygen/score.html @@ -153,12 +153,12 @@

diff --git a/app/test/task/testdata/goldens/packages/oxygen/versions.html b/app/test/task/testdata/goldens/packages/oxygen/versions.html index 1545ad8bbd..bd17e6b3e6 100644 --- a/app/test/task/testdata/goldens/packages/oxygen/versions.html +++ b/app/test/task/testdata/goldens/packages/oxygen/versions.html @@ -152,12 +152,12 @@

diff --git a/app/test/task/testdata/goldens/packages/oxygen/versions/1.0.0.html b/app/test/task/testdata/goldens/packages/oxygen/versions/1.0.0.html index 3f83b73693..684ad631a6 100644 --- a/app/test/task/testdata/goldens/packages/oxygen/versions/1.0.0.html +++ b/app/test/task/testdata/goldens/packages/oxygen/versions/1.0.0.html @@ -157,12 +157,12 @@

diff --git a/app/test/task/testdata/goldens/packages/oxygen/versions/1.0.0/changelog.html b/app/test/task/testdata/goldens/packages/oxygen/versions/1.0.0/changelog.html index 3eb2ee6384..a3cbc11b47 100644 --- a/app/test/task/testdata/goldens/packages/oxygen/versions/1.0.0/changelog.html +++ b/app/test/task/testdata/goldens/packages/oxygen/versions/1.0.0/changelog.html @@ -157,12 +157,12 @@

diff --git a/app/test/task/testdata/goldens/packages/oxygen/versions/1.0.0/example.html b/app/test/task/testdata/goldens/packages/oxygen/versions/1.0.0/example.html index e072445cdc..0aa62eef7d 100644 --- a/app/test/task/testdata/goldens/packages/oxygen/versions/1.0.0/example.html +++ b/app/test/task/testdata/goldens/packages/oxygen/versions/1.0.0/example.html @@ -157,12 +157,12 @@

diff --git a/app/test/task/testdata/goldens/packages/oxygen/versions/1.0.0/install.html b/app/test/task/testdata/goldens/packages/oxygen/versions/1.0.0/install.html index e42b93a315..f8a380a489 100644 --- a/app/test/task/testdata/goldens/packages/oxygen/versions/1.0.0/install.html +++ b/app/test/task/testdata/goldens/packages/oxygen/versions/1.0.0/install.html @@ -157,12 +157,12 @@

diff --git a/app/test/task/testdata/goldens/packages/oxygen/versions/1.0.0/license.html b/app/test/task/testdata/goldens/packages/oxygen/versions/1.0.0/license.html index bd5a5fd1ef..8914894695 100644 --- a/app/test/task/testdata/goldens/packages/oxygen/versions/1.0.0/license.html +++ b/app/test/task/testdata/goldens/packages/oxygen/versions/1.0.0/license.html @@ -157,12 +157,12 @@

diff --git a/app/test/task/testdata/goldens/packages/oxygen/versions/1.0.0/score.html b/app/test/task/testdata/goldens/packages/oxygen/versions/1.0.0/score.html index ac3ef9691d..3c367dd540 100644 --- a/app/test/task/testdata/goldens/packages/oxygen/versions/1.0.0/score.html +++ b/app/test/task/testdata/goldens/packages/oxygen/versions/1.0.0/score.html @@ -157,12 +157,12 @@

diff --git a/app/test/task/testdata/goldens/packages/oxygen/versions/2.0.0.html b/app/test/task/testdata/goldens/packages/oxygen/versions/2.0.0.html index 25e0f47b26..f8ed0f947b 100644 --- a/app/test/task/testdata/goldens/packages/oxygen/versions/2.0.0.html +++ b/app/test/task/testdata/goldens/packages/oxygen/versions/2.0.0.html @@ -153,12 +153,12 @@

diff --git a/pkg/web_app/lib/src/likes.dart b/pkg/web_app/lib/src/likes.dart index 7ac17735e4..6e775dddec 100644 --- a/pkg/web_app/lib/src/likes.dart +++ b/pkg/web_app/lib/src/likes.dart @@ -45,25 +45,21 @@ void setupLikesList() { } void setupLikes() { - for (final buttonAndLabel - in document.querySelectorAll('.like-button-and-label')) { - final likeButton = buttonAndLabel - .querySelector('.like-button-and-label--button') as ButtonElement?; - if (likeButton == null) continue; - - final countLabel = - buttonAndLabel.querySelector('.like-button-and-label--count'); - if (countLabel == null) continue; - - final package = countLabel.dataset['package']; + for (final likeButton + in document.querySelectorAll('.like-button-and-label--button')) { + final package = likeButton.dataset['package']; if (package == null || package.isEmpty) continue; - final originalCount = int.tryParse(countLabel.dataset['value'] ?? ''); - if (originalCount == null) continue; + final countLabel = + likeButton.parent?.querySelector('.like-button-and-label--count'); + final originalCount = int.tryParse(countLabel?.dataset['value'] ?? ''); var likesDelta = 0; void updateLabels() { + if (countLabel == null || originalCount == null) { + return; + } final likesCount = originalCount + likesDelta; // keep in-sync with app/lib/frontend/templates/views/pkg/liked_package_list.dart countLabel.innerText = formatWithSuffix(likesCount);