Skip to content

Commit 2268ff2

Browse files
authored
Copy icon on package listings (#7695)
1 parent d0ca760 commit 2268ff2

File tree

7 files changed

+110
-30
lines changed

7 files changed

+110
-30
lines changed

app/lib/frontend/templates/views/pkg/package_list.dart

Lines changed: 10 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@ import '../../package_misc.dart';
2020
import '../shared/images.dart';
2121
import 'license.dart';
2222
import 'screenshots.dart';
23+
import 'title_content.dart';
2324

2425
/// Renders the listing page (list of packages).
2526
d.Node listOfPackagesNode({
@@ -176,6 +177,8 @@ d.Node _packageItem(
176177
labeledScoresNode: labeledScoresNodeFromPackageView(view),
177178
description: view.ellipsizedDescription ?? '',
178179
metadataNode: metadataNode,
180+
copyIcon:
181+
copyIcon(package: view.name, version: view.releases.stable.version),
179182
tagsNode: tagsNodeFromPackageView(searchForm: searchForm, package: view),
180183
replacedBy: view.replacedBy,
181184
apiPages: view.apiPages
@@ -205,6 +208,7 @@ d.Node _item({
205208
required String description,
206209
required d.Node metadataNode,
207210
required d.Node? tagsNode,
211+
d.Node? copyIcon,
208212
required String? replacedBy,
209213
required List<_ApiPageUrl>? apiPages,
210214
}) {
@@ -216,10 +220,12 @@ d.Node _item({
216220
d.div(
217221
classes: ['packages-header'],
218222
children: [
219-
d.h3(
220-
classes: ['packages-title'],
221-
child: d.a(href: url, text: name),
222-
),
223+
d.h3(classes: [
224+
'packages-title'
225+
], children: [
226+
d.a(href: url, text: name),
227+
if (copyIcon != null) copyIcon,
228+
]),
223229
if (age != null && age.inDays <= 30)
224230
d.div(
225231
classes: ['packages-recent'],

app/lib/frontend/templates/views/pkg/title_content.dart

Lines changed: 30 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -11,31 +11,35 @@ d.Node titleContentNode({
1111
}) {
1212
return d.fragment([
1313
d.text('$package $version '),
14-
d.span(
15-
classes: ['pkg-page-title-copy'],
16-
children: [
17-
d.img(
18-
classes: ['pkg-page-title-copy-icon'],
19-
attributes: {
20-
'data-copy-content': '$package: ^$version',
21-
'data-ga-click-event': 'copy-package-version',
22-
},
23-
image: d.Image(
24-
src: staticUrls.getAssetUrl('/static/img/content-copy-icon.svg'),
25-
alt: 'copy "$package: ^$version" to clipboard',
26-
width: 18,
27-
height: 18,
28-
),
29-
title: 'Copy "$package: ^$version" to clipboard',
30-
),
31-
d.div(
32-
classes: ['pkg-page-title-copy-feedback'],
33-
children: [
34-
d.span(classes: ['code'], text: '$package: ^$version'),
35-
d.text(' copied to clipboard'),
36-
],
37-
),
38-
],
39-
),
14+
copyIcon(package: package, version: version),
4015
]);
4116
}
17+
18+
d.Node copyIcon({required String package, required String version}) {
19+
return d.span(
20+
classes: ['pkg-page-title-copy'],
21+
children: [
22+
d.img(
23+
classes: ['pkg-page-title-copy-icon'],
24+
attributes: {
25+
'data-copy-content': '$package: ^$version',
26+
'data-ga-click-event': 'copy-package-version',
27+
},
28+
image: d.Image(
29+
src: staticUrls.getAssetUrl('/static/img/content-copy-icon.svg'),
30+
alt: 'copy "$package: ^$version" to clipboard',
31+
width: 18,
32+
height: 18,
33+
),
34+
title: 'Copy "$package: ^$version" to clipboard',
35+
),
36+
d.div(
37+
classes: ['pkg-page-title-copy-feedback'],
38+
children: [
39+
d.span(classes: ['code'], text: '$package: ^$version'),
40+
d.text(' copied to clipboard'),
41+
],
42+
),
43+
],
44+
);
45+
}

app/test/frontend/golden/my_packages.html

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -183,6 +183,13 @@ <h1 class="title">user</h1>
183183
<div class="packages-header">
184184
<h3 class="packages-title">
185185
<a href="/packages/oxygen">oxygen</a>
186+
<span class="pkg-page-title-copy">
187+
<img class="pkg-page-title-copy-icon" src="/static/hash-%%etag%%/img/content-copy-icon.svg" alt="copy &quot;oxygen: ^1.2.0&quot; to clipboard" width="18" height="18" title="Copy &quot;oxygen: ^1.2.0&quot; to clipboard" data-copy-content="oxygen: ^1.2.0" data-ga-click-event="copy-package-version"/>
188+
<div class="pkg-page-title-copy-feedback">
189+
<span class="code">oxygen: ^1.2.0</span>
190+
copied to clipboard
191+
</div>
192+
</span>
186193
</h3>
187194
<div class="packages-recent">
188195
<img class="packages-recent-icon" src="/static/hash-%%etag%%/img/schedule-icon.svg" alt="recently created package" width="10" height="10" title="recently created package"/>
@@ -259,6 +266,13 @@ <h3 class="packages-title">
259266
<div class="packages-header">
260267
<h3 class="packages-title">
261268
<a href="/packages/neon">neon</a>
269+
<span class="pkg-page-title-copy">
270+
<img class="pkg-page-title-copy-icon" src="/static/hash-%%etag%%/img/content-copy-icon.svg" alt="copy &quot;neon: ^1.0.0&quot; to clipboard" width="18" height="18" title="Copy &quot;neon: ^1.0.0&quot; to clipboard" data-copy-content="neon: ^1.0.0" data-ga-click-event="copy-package-version"/>
271+
<div class="pkg-page-title-copy-feedback">
272+
<span class="code">neon: ^1.0.0</span>
273+
copied to clipboard
274+
</div>
275+
</span>
262276
</h3>
263277
<div class="packages-recent">
264278
<img class="packages-recent-icon" src="/static/hash-%%etag%%/img/schedule-icon.svg" alt="recently created package" width="10" height="10" title="recently created package"/>

app/test/frontend/golden/pkg_index_page.html

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -450,6 +450,13 @@ <h3 class="packages-title">
450450
<div class="packages-header">
451451
<h3 class="packages-title">
452452
<a href="/packages/oxygen">oxygen</a>
453+
<span class="pkg-page-title-copy">
454+
<img class="pkg-page-title-copy-icon" src="/static/hash-%%etag%%/img/content-copy-icon.svg" alt="copy &quot;oxygen: ^1.2.0&quot; to clipboard" width="18" height="18" title="Copy &quot;oxygen: ^1.2.0&quot; to clipboard" data-copy-content="oxygen: ^1.2.0" data-ga-click-event="copy-package-version"/>
455+
<div class="pkg-page-title-copy-feedback">
456+
<span class="code">oxygen: ^1.2.0</span>
457+
copied to clipboard
458+
</div>
459+
</span>
453460
</h3>
454461
<div class="packages-recent">
455462
<img class="packages-recent-icon" src="/static/hash-%%etag%%/img/schedule-icon.svg" alt="recently created package" width="10" height="10" title="recently created package"/>
@@ -526,6 +533,13 @@ <h3 class="packages-title">
526533
<div class="packages-header">
527534
<h3 class="packages-title">
528535
<a href="/packages/flutter_titanium">flutter_titanium</a>
536+
<span class="pkg-page-title-copy">
537+
<img class="pkg-page-title-copy-icon" src="/static/hash-%%etag%%/img/content-copy-icon.svg" alt="copy &quot;flutter_titanium: ^1.10.0&quot; to clipboard" width="18" height="18" title="Copy &quot;flutter_titanium: ^1.10.0&quot; to clipboard" data-copy-content="flutter_titanium: ^1.10.0" data-ga-click-event="copy-package-version"/>
538+
<div class="pkg-page-title-copy-feedback">
539+
<span class="code">flutter_titanium: ^1.10.0</span>
540+
copied to clipboard
541+
</div>
542+
</span>
529543
</h3>
530544
<div class="packages-recent">
531545
<img class="packages-recent-icon" src="/static/hash-%%etag%%/img/schedule-icon.svg" alt="recently created package" width="10" height="10" title="recently created package"/>

app/test/frontend/golden/publisher_packages_page.html

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -185,6 +185,13 @@ <h1 class="title">example.com</h1>
185185
<div class="packages-header">
186186
<h3 class="packages-title">
187187
<a href="/packages/neon">neon</a>
188+
<span class="pkg-page-title-copy">
189+
<img class="pkg-page-title-copy-icon" src="/static/hash-%%etag%%/img/content-copy-icon.svg" alt="copy &quot;neon: ^1.0.0&quot; to clipboard" width="18" height="18" title="Copy &quot;neon: ^1.0.0&quot; to clipboard" data-copy-content="neon: ^1.0.0" data-ga-click-event="copy-package-version"/>
190+
<div class="pkg-page-title-copy-feedback">
191+
<span class="code">neon: ^1.0.0</span>
192+
copied to clipboard
193+
</div>
194+
</span>
188195
</h3>
189196
<div class="packages-recent">
190197
<img class="packages-recent-icon" src="/static/hash-%%etag%%/img/schedule-icon.svg" alt="recently created package" width="10" height="10" title="recently created package"/>
@@ -259,6 +266,13 @@ <h3 class="packages-title">
259266
<div class="packages-header">
260267
<h3 class="packages-title">
261268
<a href="/packages/flutter_titanium">flutter_titanium</a>
269+
<span class="pkg-page-title-copy">
270+
<img class="pkg-page-title-copy-icon" src="/static/hash-%%etag%%/img/content-copy-icon.svg" alt="copy &quot;flutter_titanium: ^1.10.0&quot; to clipboard" width="18" height="18" title="Copy &quot;flutter_titanium: ^1.10.0&quot; to clipboard" data-copy-content="flutter_titanium: ^1.10.0" data-ga-click-event="copy-package-version"/>
271+
<div class="pkg-page-title-copy-feedback">
272+
<span class="code">flutter_titanium: ^1.10.0</span>
273+
copied to clipboard
274+
</div>
275+
</span>
262276
</h3>
263277
<div class="packages-recent">
264278
<img class="packages-recent-icon" src="/static/hash-%%etag%%/img/schedule-icon.svg" alt="recently created package" width="10" height="10" title="recently created package"/>

app/test/frontend/golden/publisher_unlisted_packages_page.html

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -191,6 +191,13 @@ <h1 class="title">example.com</h1>
191191
<div class="packages-header">
192192
<h3 class="packages-title">
193193
<a href="/packages/neon">neon</a>
194+
<span class="pkg-page-title-copy">
195+
<img class="pkg-page-title-copy-icon" src="/static/hash-%%etag%%/img/content-copy-icon.svg" alt="copy &quot;neon: ^1.0.0&quot; to clipboard" width="18" height="18" title="Copy &quot;neon: ^1.0.0&quot; to clipboard" data-copy-content="neon: ^1.0.0" data-ga-click-event="copy-package-version"/>
196+
<div class="pkg-page-title-copy-feedback">
197+
<span class="code">neon: ^1.0.0</span>
198+
copied to clipboard
199+
</div>
200+
</span>
194201
</h3>
195202
<div class="packages-recent">
196203
<img class="packages-recent-icon" src="/static/hash-%%etag%%/img/schedule-icon.svg" alt="recently created package" width="10" height="10" title="recently created package"/>
@@ -265,6 +272,13 @@ <h3 class="packages-title">
265272
<div class="packages-header">
266273
<h3 class="packages-title">
267274
<a href="/packages/flutter_titanium">flutter_titanium</a>
275+
<span class="pkg-page-title-copy">
276+
<img class="pkg-page-title-copy-icon" src="/static/hash-%%etag%%/img/content-copy-icon.svg" alt="copy &quot;flutter_titanium: ^1.10.0&quot; to clipboard" width="18" height="18" title="Copy &quot;flutter_titanium: ^1.10.0&quot; to clipboard" data-copy-content="flutter_titanium: ^1.10.0" data-ga-click-event="copy-package-version"/>
277+
<div class="pkg-page-title-copy-feedback">
278+
<span class="code">flutter_titanium: ^1.10.0</span>
279+
copied to clipboard
280+
</div>
281+
</span>
268282
</h3>
269283
<div class="packages-recent">
270284
<img class="packages-recent-icon" src="/static/hash-%%etag%%/img/schedule-icon.svg" alt="recently created package" width="10" height="10" title="recently created package"/>

app/test/frontend/golden/search_page.html

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -432,6 +432,13 @@ <h3 class="search-form-section-header foldable-button">
432432
<div class="packages-header">
433433
<h3 class="packages-title">
434434
<a href="/packages/oxygen">oxygen</a>
435+
<span class="pkg-page-title-copy">
436+
<img class="pkg-page-title-copy-icon" src="/static/hash-%%etag%%/img/content-copy-icon.svg" alt="copy &quot;oxygen: ^1.2.0&quot; to clipboard" width="18" height="18" title="Copy &quot;oxygen: ^1.2.0&quot; to clipboard" data-copy-content="oxygen: ^1.2.0" data-ga-click-event="copy-package-version"/>
437+
<div class="pkg-page-title-copy-feedback">
438+
<span class="code">oxygen: ^1.2.0</span>
439+
copied to clipboard
440+
</div>
441+
</span>
435442
</h3>
436443
<div class="packages-recent">
437444
<img class="packages-recent-icon" src="/static/hash-%%etag%%/img/schedule-icon.svg" alt="recently created package" width="10" height="10" title="recently created package"/>
@@ -519,6 +526,13 @@ <h3 class="packages-title">
519526
<div class="packages-header">
520527
<h3 class="packages-title">
521528
<a href="/packages/flutter_titanium">flutter_titanium</a>
529+
<span class="pkg-page-title-copy">
530+
<img class="pkg-page-title-copy-icon" src="/static/hash-%%etag%%/img/content-copy-icon.svg" alt="copy &quot;flutter_titanium: ^1.10.0&quot; to clipboard" width="18" height="18" title="Copy &quot;flutter_titanium: ^1.10.0&quot; to clipboard" data-copy-content="flutter_titanium: ^1.10.0" data-ga-click-event="copy-package-version"/>
531+
<div class="pkg-page-title-copy-feedback">
532+
<span class="code">flutter_titanium: ^1.10.0</span>
533+
copied to clipboard
534+
</div>
535+
</span>
522536
</h3>
523537
<div class="packages-recent">
524538
<img class="packages-recent-icon" src="/static/hash-%%etag%%/img/schedule-icon.svg" alt="recently created package" width="10" height="10" title="recently created package"/>

0 commit comments

Comments
 (0)