Skip to content

Commit 2216593

Browse files
isoosisoos
authored
Refactor like button template. (#8931)
1 parent 5c64000 commit 2216593

31 files changed

+93
-93
lines changed

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

Lines changed: 26 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -72,34 +72,13 @@ d.Node renderLikeButtonAndLabel(
7272
return d.div(
7373
classes: ['like-button-and-label'],
7474
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-
),
75+
_renderLikeButton(package, isLiked),
9676
d.span(
9777
classes: ['like-button-and-label--count-wrapper'],
9878
child: d.span(
9979
classes: ['like-button-and-label--count'],
10080
text: _formatPackageLikes(likeCount),
10181
attributes: {
102-
'data-package': package,
10382
'data-value': likeCount.toString(),
10483
},
10584
),
@@ -108,6 +87,31 @@ d.Node renderLikeButtonAndLabel(
10887
);
10988
}
11089

90+
d.Node _renderLikeButton(String package, bool isLiked) {
91+
return material.iconButton(
92+
classes: ['like-button-and-label--button'],
93+
isOn: isLiked,
94+
onIcon: d.Image(
95+
src: staticUrls.getAssetUrl('/static/img/like-active.svg'),
96+
alt: 'liked status: active',
97+
width: 18,
98+
height: 18,
99+
),
100+
offIcon: d.Image(
101+
src: staticUrls.getAssetUrl('/static/img/like-inactive.svg'),
102+
alt: 'liked status: inactive',
103+
width: 18,
104+
height: 18,
105+
),
106+
title: isLiked ? 'Unlike this package' : 'Like this package',
107+
attributes: {
108+
'data-ga-click-event': 'toggle-like',
109+
'aria-pressed': isLiked ? 'true' : 'false',
110+
'data-package': package,
111+
},
112+
);
113+
}
114+
111115
// keep in-sync with pkg/web_app/lib/src/likes.dart
112116
String? _formatPackageLikes(int? likesCount) {
113117
if (likesCount == null) return null;

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -186,12 +186,12 @@ <h1 class="title pub-monochrome-icon-hoverable">
186186
</div>
187187
</div>
188188
<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">
189+
<button class="mdc-icon-button like-button-and-label--button" data-ga-click-event="toggle-like" aria-pressed="false" data-package="oxygen" 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>
193193
<span class="like-button-and-label--count-wrapper">
194-
<span class="like-button-and-label--count" data-package="oxygen" data-value="0">0</span>
194+
<span class="like-button-and-label--count" data-value="0">0</span>
195195
</span>
196196
</div>
197197
</div>

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -186,12 +186,12 @@ <h1 class="title pub-monochrome-icon-hoverable">
186186
</div>
187187
</div>
188188
<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">
189+
<button class="mdc-icon-button like-button-and-label--button" data-ga-click-event="toggle-like" aria-pressed="false" data-package="oxygen" 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>
193193
<span class="like-button-and-label--count-wrapper">
194-
<span class="like-button-and-label--count" data-package="oxygen" data-value="0">0</span>
194+
<span class="like-button-and-label--count" data-value="0">0</span>
195195
</span>
196196
</div>
197197
</div>

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -161,12 +161,12 @@ <h1 class="title pub-monochrome-icon-hoverable">
161161
</div>
162162
</div>
163163
<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">
164+
<button class="mdc-icon-button like-button-and-label--button" data-ga-click-event="toggle-like" aria-pressed="false" data-package="oxygen" 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>
168168
<span class="like-button-and-label--count-wrapper">
169-
<span class="like-button-and-label--count" data-package="oxygen" data-value="0">0</span>
169+
<span class="like-button-and-label--count" data-value="0">0</span>
170170
</span>
171171
</div>
172172
</div>

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -161,12 +161,12 @@ <h1 class="title pub-monochrome-icon-hoverable">
161161
</div>
162162
</div>
163163
<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">
164+
<button class="mdc-icon-button like-button-and-label--button" data-ga-click-event="toggle-like" aria-pressed="false" data-package="oxygen" 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>
168168
<span class="like-button-and-label--count-wrapper">
169-
<span class="like-button-and-label--count" data-package="oxygen" data-value="0">0</span>
169+
<span class="like-button-and-label--count" data-value="0">0</span>
170170
</span>
171171
</div>
172172
</div>

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -161,12 +161,12 @@ <h1 class="title pub-monochrome-icon-hoverable">
161161
</div>
162162
</div>
163163
<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">
164+
<button class="mdc-icon-button like-button-and-label--button" data-ga-click-event="toggle-like" aria-pressed="false" data-package="oxygen" 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>
168168
<span class="like-button-and-label--count-wrapper">
169-
<span class="like-button-and-label--count" data-package="oxygen" data-value="0">0</span>
169+
<span class="like-button-and-label--count" data-value="0">0</span>
170170
</span>
171171
</div>
172172
</div>

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -161,12 +161,12 @@ <h1 class="title pub-monochrome-icon-hoverable">
161161
</div>
162162
</div>
163163
<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">
164+
<button class="mdc-icon-button like-button-and-label--button" data-ga-click-event="toggle-like" aria-pressed="false" data-package="oxygen" 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>
168168
<span class="like-button-and-label--count-wrapper">
169-
<span class="like-button-and-label--count" data-package="oxygen" data-value="0">0</span>
169+
<span class="like-button-and-label--count" data-value="0">0</span>
170170
</span>
171171
</div>
172172
</div>

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -161,12 +161,12 @@ <h1 class="title pub-monochrome-icon-hoverable">
161161
</div>
162162
</div>
163163
<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">
164+
<button class="mdc-icon-button like-button-and-label--button" data-ga-click-event="toggle-like" aria-pressed="false" data-package="oxygen" 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>
168168
<span class="like-button-and-label--count-wrapper">
169-
<span class="like-button-and-label--count" data-package="oxygen" data-value="0">0</span>
169+
<span class="like-button-and-label--count" data-value="0">0</span>
170170
</span>
171171
</div>
172172
</div>

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -152,12 +152,12 @@ <h1 class="title pub-monochrome-icon-hoverable">
152152
</div>
153153
</div>
154154
<div class="like-button-and-label">
155-
<button class="mdc-icon-button like-button-and-label--button" data-ga-click-event="toggle-like" aria-pressed="false" title="Like this package">
155+
<button class="mdc-icon-button like-button-and-label--button" data-ga-click-event="toggle-like" aria-pressed="false" data-package="oxygen" title="Like this package">
156156
<img class="mdc-icon-button__icon" src="/static/hash-%%etag%%/img/like-inactive.svg" alt="liked status: inactive" width="18" height="18"/>
157157
<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"/>
158158
</button>
159159
<span class="like-button-and-label--count-wrapper">
160-
<span class="like-button-and-label--count" data-package="oxygen" data-value="0">0</span>
160+
<span class="like-button-and-label--count" data-value="0">0</span>
161161
</span>
162162
</div>
163163
</div>

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -160,12 +160,12 @@ <h1 class="title pub-monochrome-icon-hoverable">
160160
</div>
161161
</div>
162162
<div class="like-button-and-label">
163-
<button class="mdc-icon-button like-button-and-label--button" data-ga-click-event="toggle-like" aria-pressed="false" title="Like this package">
163+
<button class="mdc-icon-button like-button-and-label--button" data-ga-click-event="toggle-like" aria-pressed="false" data-package="pkg" title="Like this package">
164164
<img class="mdc-icon-button__icon" src="/static/hash-%%etag%%/img/like-inactive.svg" alt="liked status: inactive" width="18" height="18"/>
165165
<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"/>
166166
</button>
167167
<span class="like-button-and-label--count-wrapper">
168-
<span class="like-button-and-label--count" data-package="pkg" data-value="0">0</span>
168+
<span class="like-button-and-label--count" data-value="0">0</span>
169169
</span>
170170
</div>
171171
</div>

0 commit comments

Comments
 (0)