Skip to content

Commit 40a1f8f

Browse files
isoosisoos
committed
New like button markup with class selectors.
1 parent 912d739 commit 40a1f8f

39 files changed

+347
-274
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/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/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/pkg_activity_log_page.html‎

Lines changed: 5 additions & 5 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>

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

Lines changed: 5 additions & 5 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="eyJwa2dEYXRhIjp7InBhY2thZ2UiOiJveHlnZW4iLCJ2ZXJzaW9uIjoiMS4yLjAiLCJsaWtlcyI6MCwiaXNEaXNjb250aW51ZWQiOmZhbHNlLCJpc0xhdGVzdCI6dHJ1ZX0sInNlc3Npb25Bd2FyZSI6dHJ1ZX0="/>
34+
<meta name="pub-page-data" content="eyJwa2dEYXRhIjp7InBhY2thZ2UiOiJveHlnZW4iLCJ2ZXJzaW9uIjoiMS4yLjAiLCJpc0Rpc2NvbnRpbnVlZCI6ZmFsc2UsImlzTGF0ZXN0Ijp0cnVlfSwic2Vzc2lvbkF3YXJlIjp0cnVlfQ=="/>
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>

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

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@
3232
<script src="/static/hash-%%etag%%/material/bundle/script.min.js" defer="defer"></script>
3333
<script src="/static/hash-%%etag%%/js/script.dart.js" defer="defer"></script>
3434
<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>
35-
<meta name="pub-page-data" content="eyJwa2dEYXRhIjp7InBhY2thZ2UiOiJveHlnZW4iLCJ2ZXJzaW9uIjoiMS4yLjAiLCJsaWtlcyI6MCwiaXNEaXNjb250aW51ZWQiOmZhbHNlLCJpc0xhdGVzdCI6dHJ1ZX0sInNlc3Npb25Bd2FyZSI6ZmFsc2V9"/>
35+
<meta name="pub-page-data" content="eyJwa2dEYXRhIjp7InBhY2thZ2UiOiJveHlnZW4iLCJ2ZXJzaW9uIjoiMS4yLjAiLCJpc0Rpc2NvbnRpbnVlZCI6ZmFsc2UsImlzTGF0ZXN0Ijp0cnVlfSwic2Vzc2lvbkF3YXJlIjpmYWxzZX0="/>
3636
<link rel="preload" href="/static/hash-%%etag%%/highlight/highlight-with-init.js" as="script"/>
3737
</head>
3838
<body class="light-theme">
@@ -160,13 +160,13 @@ <h1 class="title pub-monochrome-icon-hoverable">
160160
<a class="tag-badge-sub" href="/packages?q=platform%3Awindows" rel="nofollow" title="Packages compatible with Windows platform">Windows</a>
161161
</div>
162162
</div>
163-
<div class="detail-like">
164-
<button id="-pub-like-icon-button" class="mdc-icon-button" data-ga-click-event="toggle-like" aria-pressed="false" title="Like this package">
163+
<div class="like-button-and-label">
164+
<button class="mdc-icon-button like-button-and-label--button" data-ga-click-event="toggle-like" aria-pressed="false" title="Like this package">
165165
<img class="mdc-icon-button__icon" src="/static/hash-%%etag%%/img/like-inactive.svg" alt="liked status: inactive" width="18" height="18"/>
166166
<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"/>
167167
</button>
168-
<span class="likes-count">
169-
<span id="likes-count">0</span>
168+
<span class="like-button-and-label--count-wrapper">
169+
<span class="like-button-and-label--count" data-package="oxygen" data-value="0">0</span>
170170
</span>
171171
</div>
172172
</div>

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

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@
3232
<script src="/static/hash-%%etag%%/material/bundle/script.min.js" defer="defer"></script>
3333
<script src="/static/hash-%%etag%%/js/script.dart.js" defer="defer"></script>
3434
<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>
35-
<meta name="pub-page-data" content="eyJwa2dEYXRhIjp7InBhY2thZ2UiOiJveHlnZW4iLCJ2ZXJzaW9uIjoiMS4yLjAiLCJsaWtlcyI6MCwiaXNEaXNjb250aW51ZWQiOmZhbHNlLCJpc0xhdGVzdCI6dHJ1ZX0sInNlc3Npb25Bd2FyZSI6ZmFsc2V9"/>
35+
<meta name="pub-page-data" content="eyJwa2dEYXRhIjp7InBhY2thZ2UiOiJveHlnZW4iLCJ2ZXJzaW9uIjoiMS4yLjAiLCJpc0Rpc2NvbnRpbnVlZCI6ZmFsc2UsImlzTGF0ZXN0Ijp0cnVlfSwic2Vzc2lvbkF3YXJlIjpmYWxzZX0="/>
3636
<link rel="preload" href="/static/hash-%%etag%%/highlight/highlight-with-init.js" as="script"/>
3737
</head>
3838
<body class="light-theme">
@@ -160,13 +160,13 @@ <h1 class="title pub-monochrome-icon-hoverable">
160160
<a class="tag-badge-sub" href="/packages?q=platform%3Awindows" rel="nofollow" title="Packages compatible with Windows platform">Windows</a>
161161
</div>
162162
</div>
163-
<div class="detail-like">
164-
<button id="-pub-like-icon-button" class="mdc-icon-button" data-ga-click-event="toggle-like" aria-pressed="false" title="Like this package">
163+
<div class="like-button-and-label">
164+
<button class="mdc-icon-button like-button-and-label--button" data-ga-click-event="toggle-like" aria-pressed="false" title="Like this package">
165165
<img class="mdc-icon-button__icon" src="/static/hash-%%etag%%/img/like-inactive.svg" alt="liked status: inactive" width="18" height="18"/>
166166
<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"/>
167167
</button>
168-
<span class="likes-count">
169-
<span id="likes-count">0</span>
168+
<span class="like-button-and-label--count-wrapper">
169+
<span class="like-button-and-label--count" data-package="oxygen" data-value="0">0</span>
170170
</span>
171171
</div>
172172
</div>

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

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@
3232
<script src="/static/hash-%%etag%%/material/bundle/script.min.js" defer="defer"></script>
3333
<script src="/static/hash-%%etag%%/js/script.dart.js" defer="defer"></script>
3434
<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>
35-
<meta name="pub-page-data" content="eyJwa2dEYXRhIjp7InBhY2thZ2UiOiJveHlnZW4iLCJ2ZXJzaW9uIjoiMS4yLjAiLCJsaWtlcyI6MCwiaXNEaXNjb250aW51ZWQiOmZhbHNlLCJpc0xhdGVzdCI6dHJ1ZX0sInNlc3Npb25Bd2FyZSI6ZmFsc2V9"/>
35+
<meta name="pub-page-data" content="eyJwa2dEYXRhIjp7InBhY2thZ2UiOiJveHlnZW4iLCJ2ZXJzaW9uIjoiMS4yLjAiLCJpc0Rpc2NvbnRpbnVlZCI6ZmFsc2UsImlzTGF0ZXN0Ijp0cnVlfSwic2Vzc2lvbkF3YXJlIjpmYWxzZX0="/>
3636
<link rel="preload" href="/static/hash-%%etag%%/highlight/highlight-with-init.js" as="script"/>
3737
</head>
3838
<body class="light-theme">
@@ -160,13 +160,13 @@ <h1 class="title pub-monochrome-icon-hoverable">
160160
<a class="tag-badge-sub" href="/packages?q=platform%3Awindows" rel="nofollow" title="Packages compatible with Windows platform">Windows</a>
161161
</div>
162162
</div>
163-
<div class="detail-like">
164-
<button id="-pub-like-icon-button" class="mdc-icon-button" data-ga-click-event="toggle-like" aria-pressed="false" title="Like this package">
163+
<div class="like-button-and-label">
164+
<button class="mdc-icon-button like-button-and-label--button" data-ga-click-event="toggle-like" aria-pressed="false" title="Like this package">
165165
<img class="mdc-icon-button__icon" src="/static/hash-%%etag%%/img/like-inactive.svg" alt="liked status: inactive" width="18" height="18"/>
166166
<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"/>
167167
</button>
168-
<span class="likes-count">
169-
<span id="likes-count">0</span>
168+
<span class="like-button-and-label--count-wrapper">
169+
<span class="like-button-and-label--count" data-package="oxygen" data-value="0">0</span>
170170
</span>
171171
</div>
172172
</div>

0 commit comments

Comments
 (0)