Skip to content

Commit 4f4ad8d

Browse files
isoosisoos
authored
New like button markup with class selectors + also updating other labels on the page. (#8888)
1 parent 893407f commit 4f4ad8d

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

47 files changed

+460
-353
lines changed

‎app/lib/frontend/dom/material.dart‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -108,20 +108,22 @@ d.Node raisedButton({
108108

109109
/// Renders a two-state material icon button
110110
d.Node iconButton({
111-
required String id,
111+
String? id,
112112
required bool isOn,
113113
Map<String, String>? attributes,
114114
required d.Image onIcon,
115115
required d.Image offIcon,
116116
bool disabled = false,
117117
String? title,
118+
List<String>? classes,
118119
}) {
119120
return d.element(
120121
'button',
121122
id: id,
122123
classes: [
123124
'mdc-icon-button',
124125
if (isOn) 'mdc-icon-button--on',
126+
...?classes,
125127
],
126128
attributes: {
127129
...?attributes,

‎app/lib/frontend/templates/detail_page.dart‎

Lines changed: 2 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -10,16 +10,13 @@ import 'views/shared/detail/tabs.dart';
1010
final wideHeaderDetailPageClassName = '-wide-header-detail-page';
1111

1212
/// Renders the detail page's header template.
13-
///
14-
/// The like button in the header will not be displayed when [isLiked] is null.
1513
d.Node renderDetailHeader({
1614
required d.Node titleNode,
1715
d.Image? image,
18-
int? packageLikes,
19-
bool? isLiked,
2016
bool isFlutterFavorite = false,
2117
d.Node? metadataNode,
2218
d.Node? tagsNode,
19+
d.Node? likeNode,
2320

2421
/// Set true for more whitespace in the header.
2522
bool isLoose = false,
@@ -28,10 +25,9 @@ d.Node renderDetailHeader({
2825
titleNode: titleNode,
2926
metadataNode: metadataNode,
3027
tagsNode: tagsNode,
28+
likeNode: likeNode,
3129
image: image,
3230
isLoose: isLoose,
33-
isLiked: isLiked == true,
34-
likeCount: packageLikes,
3531
isFlutterFavorite: isFlutterFavorite,
3632
);
3733
}

‎app/lib/frontend/templates/package.dart‎

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@
55
import 'package:_pub_shared/data/page_data.dart';
66
import 'package:_pub_shared/search/tags.dart';
77
import 'package:collection/collection.dart' show IterableExtension;
8+
import 'package:pub_dev/frontend/templates/views/pkg/liked_package_list.dart';
89

910
import '../../package/models.dart';
1011
import '../../package/overrides.dart' show devDependencyPackages;
@@ -129,8 +130,11 @@ d.Node renderPkgHeader(PackagePageData data) {
129130
package: package.name!,
130131
version: data.version.version!,
131132
),
132-
packageLikes: package.likes,
133-
isLiked: data.isLiked,
133+
likeNode: renderLikeButtonAndLabel(
134+
package: package.name!,
135+
likeCount: package.likes,
136+
isLiked: data.isLiked,
137+
),
134138
isFlutterFavorite:
135139
(package.assignedTags ?? []).contains(PackageTags.isFlutterFavorite),
136140
metadataNode: metadataNode,
@@ -307,7 +311,6 @@ PageData pkgPageData(
307311
version: selectedVersion.version!,
308312
publisherId: package.publisherId,
309313
isDiscontinued: package.isDiscontinued,
310-
likes: package.likes,
311314
isLatest: package.latestVersion == selectedVersion.version,
312315
),
313316
sessionAware: editable,

‎app/lib/frontend/templates/package_misc.dart‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -200,6 +200,7 @@ d.Node replacedByLink(String replacedBy) {
200200
/// Renders the labeled scores widget (the score values in a compact layout).
201201
d.Node labeledScoresNodeFromPackageView(PackageView view, {String? version}) {
202202
return labeledScoresNode(
203+
package: view.name,
203204
pkgScorePageUrl: urls.pkgScoreUrl(view.name, version: version),
204205
likeCount: view.likes,
205206
grantedPubPoints: view.grantedPubPoints,

‎app/lib/frontend/templates/views/pkg/labeled_scores.dart‎

Lines changed: 9 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -7,11 +7,15 @@ import 'package:_pub_shared/format/number_format.dart';
77
import '../../../dom/dom.dart' as d;
88

99
d.Node labeledScoresNode({
10+
required String package,
1011
required String pkgScorePageUrl,
1112
required int likeCount,
1213
required int? grantedPubPoints,
1314
required int? thirtyDaysDownloads,
1415
}) {
16+
final formattedLikes = compactFormat(likeCount);
17+
final formattedDownloads =
18+
thirtyDaysDownloads == null ? null : compactFormat(thirtyDaysDownloads);
1519
return d.a(
1620
classes: ['packages-scores'],
1721
href: pkgScorePageUrl,
@@ -20,9 +24,10 @@ d.Node labeledScoresNode({
2024
classes: ['packages-score', 'packages-score-like'],
2125
child: _labeledScore(
2226
'likes',
23-
'${compactFormat(likeCount).value}'
24-
'${compactFormat(likeCount).suffix}',
27+
// keep in-sync with pkg/web_app/lib/src/likes.dart
28+
'${formattedLikes.value}${formattedLikes.suffix}',
2529
sign: ''),
30+
attributes: {'data-package': package},
2631
),
2732
d.div(
2833
classes: ['packages-score', 'packages-score-health'],
@@ -35,9 +40,8 @@ d.Node labeledScoresNode({
3540
classes: ['packages-score', 'packages-score-downloads'],
3641
child: _labeledScore(
3742
'downloads',
38-
thirtyDaysDownloads != null
39-
? '${compactFormat(thirtyDaysDownloads).value}'
40-
'${compactFormat(thirtyDaysDownloads).suffix}'
43+
formattedDownloads != null
44+
? '${formattedDownloads.value}${formattedDownloads.suffix}'
4145
: null,
4246
sign: '',
4347
),

‎app/lib/frontend/templates/views/pkg/liked_package_list.dart‎

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,8 @@
22
// for details. All rights reserved. Use of this source code is governed by a
33
// BSD-style license that can be found in the LICENSE file.
44

5+
import 'package:_pub_shared/format/number_format.dart';
6+
57
import '../../../../account/models.dart';
68
import '../../../../shared/urls.dart' as urls;
79

@@ -64,3 +66,50 @@ d.Node likedPackageListNode(List<LikeData> likes) {
6466
),
6567
);
6668
}
69+
70+
d.Node renderLikeButtonAndLabel(
71+
{required String package, required int likeCount, required bool isLiked}) {
72+
return d.div(
73+
classes: ['like-button-and-label'],
74+
children: [
75+
material.iconButton(
76+
classes: ['like-button-and-label--button'],
77+
isOn: isLiked,
78+
onIcon: d.Image(
79+
src: staticUrls.getAssetUrl('/static/img/like-active.svg'),
80+
alt: 'liked status: active',
81+
width: 18,
82+
height: 18,
83+
),
84+
offIcon: d.Image(
85+
src: staticUrls.getAssetUrl('/static/img/like-inactive.svg'),
86+
alt: 'liked status: inactive',
87+
width: 18,
88+
height: 18,
89+
),
90+
title: isLiked ? 'Unlike this package' : 'Like this package',
91+
attributes: {
92+
'data-ga-click-event': 'toggle-like',
93+
'aria-pressed': isLiked ? 'true' : 'false',
94+
},
95+
),
96+
d.span(
97+
classes: ['like-button-and-label--count-wrapper'],
98+
child: d.span(
99+
classes: ['like-button-and-label--count'],
100+
text: _formatPackageLikes(likeCount),
101+
attributes: {
102+
'data-package': package,
103+
'data-value': likeCount.toString(),
104+
},
105+
),
106+
),
107+
],
108+
);
109+
}
110+
111+
// keep in-sync with pkg/web_app/lib/src/likes.dart
112+
String? _formatPackageLikes(int? likesCount) {
113+
if (likesCount == null) return null;
114+
return formatWithSuffix(likesCount);
115+
}

‎app/lib/frontend/templates/views/pkg/score_tab.dart‎

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -318,11 +318,13 @@ d.Node _likeKeyFigureNode(int? likeCount) {
318318
label: 'likes',
319319
);
320320
}
321+
final formatted = compactFormat(likeCount);
322+
// keep in-sync with pkg/web_app/lib/src/likes.dart
321323
return _keyFigureNode(
322-
value: '${compactFormat(likeCount).value}'
323-
'${compactFormat(likeCount).suffix}',
324+
value: '${formatted.value}${formatted.suffix}',
324325
supplemental: '',
325326
label: 'likes',
327+
classes: ['score-key-figure--likes'],
326328
);
327329
}
328330

@@ -367,9 +369,10 @@ d.Node _keyFigureNode({
367369
required String value,
368370
required String supplemental,
369371
required String label,
372+
List<String>? classes,
370373
}) {
371374
return d.div(
372-
classes: ['score-key-figure'],
375+
classes: ['score-key-figure', ...?classes],
373376
children: [
374377
d.div(
375378
classes: ['score-key-figure-title'],

‎app/lib/frontend/templates/views/shared/detail/header.dart‎

Lines changed: 3 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -2,19 +2,15 @@
22
// for details. All rights reserved. Use of this source code is governed by a
33
// BSD-style license that can be found in the LICENSE file.
44

5-
import 'package:_pub_shared/format/number_format.dart';
6-
75
import '../../../../dom/dom.dart' as d;
8-
import '../../../../dom/material.dart' as material;
96
import '../../../../static_files.dart';
107

118
d.Node detailHeaderNode({
129
required d.Node titleNode,
1310
required d.Node? metadataNode,
1411
required d.Node? tagsNode,
1512
required d.Image? image,
16-
required bool isLiked,
17-
required int? likeCount,
13+
required d.Node? likeNode,
1814
required bool isFlutterFavorite,
1915

2016
/// Set true for more whitespace in the header.
@@ -116,50 +112,13 @@ d.Node detailHeaderNode({
116112
child: titleNode,
117113
),
118114
d.div(classes: ['metadata'], child: metadataNode),
119-
if (tagsNode != null || likeCount != null)
115+
if (tagsNode != null || likeNode != null)
120116
d.div(
121117
classes: ['detail-tags-and-like'],
122118
children: [
123119
if (tagsNode != null)
124120
d.div(classes: ['detail-tags'], child: tagsNode),
125-
if (likeCount != null)
126-
d.div(
127-
classes: ['detail-like'],
128-
children: [
129-
material.iconButton(
130-
id: '-pub-like-icon-button',
131-
isOn: isLiked,
132-
onIcon: d.Image(
133-
src: staticUrls
134-
.getAssetUrl('/static/img/like-active.svg'),
135-
alt: 'liked status: active',
136-
width: 18,
137-
height: 18,
138-
),
139-
offIcon: d.Image(
140-
src: staticUrls.getAssetUrl(
141-
'/static/img/like-inactive.svg'),
142-
alt: 'liked status: inactive',
143-
width: 18,
144-
height: 18,
145-
),
146-
title: isLiked
147-
? 'Unlike this package'
148-
: 'Like this package',
149-
attributes: {
150-
'data-ga-click-event': 'toggle-like',
151-
'aria-pressed': isLiked ? 'true' : 'false',
152-
},
153-
),
154-
d.span(
155-
classes: ['likes-count'],
156-
child: d.span(
157-
id: 'likes-count',
158-
text: _formatPackageLikes(likeCount),
159-
),
160-
),
161-
],
162-
),
121+
if (likeNode != null) likeNode,
163122
],
164123
),
165124
],
@@ -170,9 +129,3 @@ d.Node detailHeaderNode({
170129
),
171130
]);
172131
}
173-
174-
// keep in-sync with pkg/web_app/lib/src/likes.dart
175-
String? _formatPackageLikes(int? likesCount) {
176-
if (likesCount == null) return null;
177-
return formatWithSuffix(likesCount);
178-
}

‎app/test/frontend/golden/my_packages.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -201,7 +201,7 @@ <h3 class="packages-title pub-monochrome-icon-hoverable">
201201
<b>%%x-ago%%</b>
202202
</div>
203203
<a class="packages-scores" href="/packages/oxygen/score">
204-
<div class="packages-score packages-score-like">
204+
<div class="packages-score packages-score-like" data-package="oxygen">
205205
<div class="packages-score-value -has-value">
206206
<span class="packages-score-value-number">0</span>
207207
<span class="packages-score-value-sign"></span>
@@ -284,7 +284,7 @@ <h3 class="packages-title pub-monochrome-icon-hoverable">
284284
<b>%%x-ago%%</b>
285285
</div>
286286
<a class="packages-scores" href="/packages/neon/score">
287-
<div class="packages-score packages-score-like">
287+
<div class="packages-score packages-score-like" data-package="neon">
288288
<div class="packages-score-value -has-value">
289289
<span class="packages-score-value-number">0</span>
290290
<span class="packages-score-value-sign"></span>

‎app/test/frontend/golden/pkg_activity_log_page.html‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@
3131
<script src="/static/hash-%%etag%%/js/script.dart.js" defer="defer"></script>
3232
<script src="https://www.gstatic.com/brandstudio/kato/cookie_choice_component/cookie_consent_bar.v3.js" defer="defer" data-autoload-cookie-consent-bar="true"></script>
3333
<meta name="csrf-token" content="%%csrf-token%%"/>
34-
<meta name="pub-page-data" content="eyJwa2dEYXRhIjp7InBhY2thZ2UiOiJveHlnZW4iLCJ2ZXJzaW9uIjoiMS4yLjAiLCJsaWtlcyI6MCwiaXNEaXNjb250aW51ZWQiOmZhbHNlLCJpc0xhdGVzdCI6dHJ1ZX19"/>
34+
<meta name="pub-page-data" content="eyJwa2dEYXRhIjp7InBhY2thZ2UiOiJveHlnZW4iLCJ2ZXJzaW9uIjoiMS4yLjAiLCJpc0Rpc2NvbnRpbnVlZCI6ZmFsc2UsImlzTGF0ZXN0Ijp0cnVlfX0="/>
3535
<link rel="preload" href="/static/hash-%%etag%%/highlight/highlight-with-init.js" as="script"/>
3636
</head>
3737
<body class="light-theme">
@@ -185,13 +185,13 @@ <h1 class="title pub-monochrome-icon-hoverable">
185185
<a class="tag-badge-sub" href="/packages?q=platform%3Awindows" rel="nofollow" title="Packages compatible with Windows platform">Windows</a>
186186
</div>
187187
</div>
188-
<div class="detail-like">
189-
<button id="-pub-like-icon-button" class="mdc-icon-button" data-ga-click-event="toggle-like" aria-pressed="false" title="Like this package">
188+
<div class="like-button-and-label">
189+
<button class="mdc-icon-button like-button-and-label--button" data-ga-click-event="toggle-like" aria-pressed="false" title="Like this package">
190190
<img class="mdc-icon-button__icon" src="/static/hash-%%etag%%/img/like-inactive.svg" alt="liked status: inactive" width="18" height="18"/>
191191
<img class="mdc-icon-button__icon mdc-icon-button__icon--on" src="/static/hash-%%etag%%/img/like-active.svg" alt="liked status: active" width="18" height="18"/>
192192
</button>
193-
<span class="likes-count">
194-
<span id="likes-count">0</span>
193+
<span class="like-button-and-label--count-wrapper">
194+
<span class="like-button-and-label--count" data-package="oxygen" data-value="0">0</span>
195195
</span>
196196
</div>
197197
</div>
@@ -359,7 +359,7 @@ <h3 class="detail-lead-title">Metadata</h3>
359359
</div>
360360
<aside class="detail-info-box">
361361
<a class="packages-scores" href="/packages/oxygen/score">
362-
<div class="packages-score packages-score-like">
362+
<div class="packages-score packages-score-like" data-package="oxygen">
363363
<div class="packages-score-value -has-value">
364364
<span class="packages-score-value-number">0</span>
365365
<span class="packages-score-value-sign"></span>
@@ -435,7 +435,7 @@ <h3 class="detail-metadata-title">
435435
</h3>
436436
<div class="detail-info-box">
437437
<a class="packages-scores" href="/packages/oxygen/score">
438-
<div class="packages-score packages-score-like">
438+
<div class="packages-score packages-score-like" data-package="oxygen">
439439
<div class="packages-score-value -has-value">
440440
<span class="packages-score-value-number">0</span>
441441
<span class="packages-score-value-sign"></span>

0 commit comments

Comments
 (0)