Copy icon on package listings (#7695)

dart-lang · May 2, 2024 · 2268ff2 · 2268ff2
1 parent d0ca760
commit 2268ff2
Show file tree

Hide file tree

Showing 7 changed files with 110 additions and 30 deletions.
diff --git 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
@@ -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
@@ -183,6 +183,13 @@ <h1 class="title">user</h1>
                       <div class="packages-header">
                         <h3 class="packages-title">
                           <a href="/packages/oxygen">oxygen</a>
+                          <span class="pkg-page-title-copy">
+                            <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"/>
+                            <div class="pkg-page-title-copy-feedback">
+                              <span class="code">oxygen: ^1.2.0</span>
+                              copied to clipboard
+                            </div>
+                          </span>
                         </h3>
                         <div class="packages-recent">
                           <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">
                       <div class="packages-header">
                         <h3 class="packages-title">
                           <a href="/packages/neon">neon</a>
+                          <span class="pkg-page-title-copy">
+                            <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"/>
+                            <div class="pkg-page-title-copy-feedback">
+                              <span class="code">neon: ^1.0.0</span>
+                              copied to clipboard
+                            </div>
+                          </span>
                         </h3>
                         <div class="packages-recent">
                           <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"/>

diff --git a/app/test/frontend/golden/pkg_index_page.html b/app/test/frontend/golden/pkg_index_page.html
@@ -450,6 +450,13 @@ <h3 class="packages-title">
               <div class="packages-header">
                 <h3 class="packages-title">
                   <a href="/packages/oxygen">oxygen</a>
+                  <span class="pkg-page-title-copy">
+                    <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"/>
+                    <div class="pkg-page-title-copy-feedback">
+                      <span class="code">oxygen: ^1.2.0</span>
+                      copied to clipboard
+                    </div>
+                  </span>
                 </h3>
                 <div class="packages-recent">
                   <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">
               <div class="packages-header">
                 <h3 class="packages-title">
                   <a href="/packages/flutter_titanium">flutter_titanium</a>
+                  <span class="pkg-page-title-copy">
+                    <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"/>
+                    <div class="pkg-page-title-copy-feedback">
+                      <span class="code">flutter_titanium: ^1.10.0</span>
+                      copied to clipboard
+                    </div>
+                  </span>
                 </h3>
                 <div class="packages-recent">
                   <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"/>

diff --git a/app/test/frontend/golden/publisher_packages_page.html b/app/test/frontend/golden/publisher_packages_page.html
@@ -185,6 +185,13 @@ <h1 class="title">example.com</h1>
                       <div class="packages-header">
                         <h3 class="packages-title">
                           <a href="/packages/neon">neon</a>
+                          <span class="pkg-page-title-copy">
+                            <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"/>
+                            <div class="pkg-page-title-copy-feedback">
+                              <span class="code">neon: ^1.0.0</span>
+                              copied to clipboard
+                            </div>
+                          </span>
                         </h3>
                         <div class="packages-recent">
                           <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">
                       <div class="packages-header">
                         <h3 class="packages-title">
                           <a href="/packages/flutter_titanium">flutter_titanium</a>
+                          <span class="pkg-page-title-copy">
+                            <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"/>
+                            <div class="pkg-page-title-copy-feedback">
+                              <span class="code">flutter_titanium: ^1.10.0</span>
+                              copied to clipboard
+                            </div>
+                          </span>
                         </h3>
                         <div class="packages-recent">
                           <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"/>

diff --git a/app/test/frontend/golden/publisher_unlisted_packages_page.html b/app/test/frontend/golden/publisher_unlisted_packages_page.html
@@ -191,6 +191,13 @@ <h1 class="title">example.com</h1>
                       <div class="packages-header">
                         <h3 class="packages-title">
                           <a href="/packages/neon">neon</a>
+                          <span class="pkg-page-title-copy">
+                            <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"/>
+                            <div class="pkg-page-title-copy-feedback">
+                              <span class="code">neon: ^1.0.0</span>
+                              copied to clipboard
+                            </div>
+                          </span>
                         </h3>
                         <div class="packages-recent">
                           <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">
                       <div class="packages-header">
                         <h3 class="packages-title">
                           <a href="/packages/flutter_titanium">flutter_titanium</a>
+                          <span class="pkg-page-title-copy">
+                            <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"/>
+                            <div class="pkg-page-title-copy-feedback">
+                              <span class="code">flutter_titanium: ^1.10.0</span>
+                              copied to clipboard
+                            </div>
+                          </span>
                         </h3>
                         <div class="packages-recent">
                           <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"/>

diff --git a/app/test/frontend/golden/search_page.html b/app/test/frontend/golden/search_page.html
@@ -432,6 +432,13 @@ <h3 class="search-form-section-header foldable-button">
               <div class="packages-header">
                 <h3 class="packages-title">
                   <a href="/packages/oxygen">oxygen</a>
+                  <span class="pkg-page-title-copy">
+                    <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"/>
+                    <div class="pkg-page-title-copy-feedback">
+                      <span class="code">oxygen: ^1.2.0</span>
+                      copied to clipboard
+                    </div>
+                  </span>
                 </h3>
                 <div class="packages-recent">
                   <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">
               <div class="packages-header">
                 <h3 class="packages-title">
                   <a href="/packages/flutter_titanium">flutter_titanium</a>
+                  <span class="pkg-page-title-copy">
+                    <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"/>
+                    <div class="pkg-page-title-copy-feedback">
+                      <span class="code">flutter_titanium: ^1.10.0</span>
+                      copied to clipboard
+                    </div>
+                  </span>
                 </h3>
                 <div class="packages-recent">
                   <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"/>