diff --git a/app/lib/frontend/templates/views/pkg/package_list.dart b/app/lib/frontend/templates/views/pkg/package_list.dart index 58166d6c02..c6c1a70653 100644 --- a/app/lib/frontend/templates/views/pkg/package_list.dart +++ b/app/lib/frontend/templates/views/pkg/package_list.dart @@ -20,6 +20,7 @@ import '../../package_misc.dart'; import '../shared/images.dart'; import 'license.dart'; import 'screenshots.dart'; +import 'title_content.dart'; /// Renders the listing page (list of packages). d.Node listOfPackagesNode({ @@ -176,6 +177,8 @@ d.Node _packageItem( labeledScoresNode: labeledScoresNodeFromPackageView(view), description: view.ellipsizedDescription ?? '', metadataNode: metadataNode, + copyIcon: + copyIcon(package: view.name, version: view.releases.stable.version), tagsNode: tagsNodeFromPackageView(searchForm: searchForm, package: view), replacedBy: view.replacedBy, apiPages: view.apiPages @@ -205,6 +208,7 @@ d.Node _item({ required String description, required d.Node metadataNode, required d.Node? tagsNode, + d.Node? copyIcon, required String? replacedBy, required List<_ApiPageUrl>? apiPages, }) { @@ -216,10 +220,12 @@ d.Node _item({ d.div( classes: ['packages-header'], children: [ - d.h3( - classes: ['packages-title'], - child: d.a(href: url, text: name), - ), + d.h3(classes: [ + 'packages-title' + ], children: [ + d.a(href: url, text: name), + if (copyIcon != null) copyIcon, + ]), if (age != null && age.inDays <= 30) d.div( classes: ['packages-recent'], diff --git a/app/lib/frontend/templates/views/pkg/title_content.dart b/app/lib/frontend/templates/views/pkg/title_content.dart index 4f88a209ae..65b679581c 100644 --- a/app/lib/frontend/templates/views/pkg/title_content.dart +++ b/app/lib/frontend/templates/views/pkg/title_content.dart @@ -11,31 +11,35 @@ d.Node titleContentNode({ }) { return d.fragment([ d.text('$package $version '), - d.span( - classes: ['pkg-page-title-copy'], - children: [ - d.img( - classes: ['pkg-page-title-copy-icon'], - attributes: { - 'data-copy-content': '$package: ^$version', - 'data-ga-click-event': 'copy-package-version', - }, - image: d.Image( - src: staticUrls.getAssetUrl('/static/img/content-copy-icon.svg'), - alt: 'copy "$package: ^$version" to clipboard', - width: 18, - height: 18, - ), - title: 'Copy "$package: ^$version" to clipboard', - ), - d.div( - classes: ['pkg-page-title-copy-feedback'], - children: [ - d.span(classes: ['code'], text: '$package: ^$version'), - d.text(' copied to clipboard'), - ], - ), - ], - ), + copyIcon(package: package, version: version), ]); } + +d.Node copyIcon({required String package, required String version}) { + return d.span( + classes: ['pkg-page-title-copy'], + children: [ + d.img( + classes: ['pkg-page-title-copy-icon'], + attributes: { + 'data-copy-content': '$package: ^$version', + 'data-ga-click-event': 'copy-package-version', + }, + image: d.Image( + src: staticUrls.getAssetUrl('/static/img/content-copy-icon.svg'), + alt: 'copy "$package: ^$version" to clipboard', + width: 18, + height: 18, + ), + title: 'Copy "$package: ^$version" to clipboard', + ), + d.div( + classes: ['pkg-page-title-copy-feedback'], + children: [ + d.span(classes: ['code'], text: '$package: ^$version'), + d.text(' copied to clipboard'), + ], + ), + ], + ); +} diff --git a/app/test/frontend/golden/my_packages.html b/app/test/frontend/golden/my_packages.html index 29cea6ac39..cf5fe8a7d6 100644 --- a/app/test/frontend/golden/my_packages.html +++ b/app/test/frontend/golden/my_packages.html @@ -183,6 +183,13 @@