Add Cargo.toml copy button to crate rows

app/components/crate-row.js

@@ -1,7 +1,11 @@
 import Component from '@ember/component';
+import { computed } from '@ember/object';
 
 export default Component.extend({
   classNames: ['crate', 'row'],
+  crateTomlText: computed('crate.name', 'max_version', function() {
+    return `${this.get('crate.name')} = "${this.get('crate.max_version')}"`;
+  }),
 
   'data-test-crate-row': true,
 });

app/components/crate-toml-copy.js

@@ -0,0 +1,32 @@
+import Component from '@ember/component';
+import { later } from '@ember/runloop';
+
+export default Component.extend({
+  classNames: ['crate-toml-copy'],
+  copyText: '',
+  showSuccess: false,
+  showNotification: false,
+  toggleClipboardProps(isSuccess) {
+    this.setProperties({
+      showSuccess: isSuccess,
+      showNotification: true,
+    });
+    later(
+      this,
+      () => {
+        this.set('showNotification', false);
+      },
+      2000,
+    );
+  },
+  actions: {
+    copySuccess(event) {
+      event.clearSelection();
+      this.toggleClipboardProps(true);
+    },
+
+    copyError() {
+      this.toggleClipboardProps(false);
+    },
+  },
+});

app/controllers/crate/version.js

@@ -4,7 +4,6 @@ import Controller from '@ember/controller';
 import PromiseProxyMixin from '@ember/object/promise-proxy-mixin';
 import ArrayProxy from '@ember/array/proxy';
 import { computed, observer } from '@ember/object';
-import { later } from '@ember/runloop';
 import moment from 'moment';
 
 const NUM_VERSIONS = 5;
@@ -25,6 +24,9 @@ export default Controller.extend({
   fetchingFollowing: true,
   following: false,
   currentVersion: alias('model'),
+  crateTomlText: computed('crate.name', 'currentVersion.num', function() {
+    return `${this.get('crate.name')} = "${this.get('currentVersion.num')}"`;
+  }),
   requestedVersion: null,
   keywords: alias('crate.keywords'),
   categories: alias('crate.categories'),
@@ -152,30 +154,7 @@ export default Controller.extend({
     return data;
   }),
 
-  toggleClipboardProps(isSuccess) {
-    this.setProperties({
-      showSuccess: isSuccess,
-      showNotification: true,
-    });
-    later(
-      this,
-      () => {
-        this.set('showNotification', false);
-      },
-      2000,
-    );
-  },
-
   actions: {
-    copySuccess(event) {
-      event.clearSelection();
-      this.toggleClipboardProps(true);
-    },
-
-    copyError() {
-      this.toggleClipboardProps(false);
-    },
-
     toggleFollow() {
       this.set('fetchingFollowing', true);
 

app/styles/crate.scss

@@ -88,6 +88,28 @@
     }
 }
 
+.crate-toml-copy {
+    button, button:active {
+        background-color: #FFFFFF;
+        border: none;
+        cursor: pointer;
+        position: relative;
+    }
+
+    .copy-notification {
+        font-size: 70%;
+        font-weight: bold;
+        position: absolute;
+
+        &.copy-success {
+            color: $link-color;
+        }
+        &.copy-failure {
+            color: red;
+        }
+    }
+}
+
 #results {
     width: 100%;
     @include display-flex;
@@ -132,6 +154,35 @@
         width: 75%;
     }
 
+    .crate-toml-copy {
+        display: inline-block;
+
+        button, button:active {
+            padding: 0 .2rem;
+            outline: 0;
+
+            &:hover {
+                background: inherit;
+            }
+
+            svg {
+                height: 1rem;
+                width: 1rem;
+            }
+
+            .copy-notification {
+                top: -1.25rem;
+                left: 0;
+                padding: 0;
+                text-align: left;
+                width: 4rem;
+
+                &.copy-failure {
+                    width: 15rem;
+                }
+            }
+        }
+    }
     .info a {
         color: $main-color;
         font-weight: bold;
@@ -300,33 +351,36 @@
             color: white;
             padding: 20px;
         }
-        button, button:active {
-            padding: 5px 0;
-            background-color: #FFFFFF;
-            border: none;
-            width: 60px;
-            cursor: pointer;
-        }
-        button:hover {
-            background: #edebdd;
-        }
         @media only screen and (min-width: 500px) {
             .action { @include flex(2); display: block; }
             code { @include flex(8); }
         }
-    }
-    .copy-result {
-        text-align: right;
+        .crate-toml-copy {
+            display: flex;
 
-        span {
-            font-size: 80%;
-            font-weight: bold;
-        }
-        .copy-success {
-            color: $link-color;
-        }
-        .copy-failure {
-            color: red;
+            button, button:active {
+                padding: 5px 0;
+                width: 60px;
+                cursor: pointer;
+                position: relative;
+            }
+            button:hover {
+                background: #edebdd;
+            }
+
+            .copy-notification {
+                &.copy-success {
+                    width: 100%;
+                    text-align: center;
+                }
+
+                &.copy-failure {
+                    bottom: -2rem;
+                    right: 0;
+                    width: 18rem;
+                    text-align: right;
+                }
+            }
         }
     }
     .crate-readme {

app/templates/components/crate-row.hbs

@@ -1,6 +1,7 @@
 <div class='desc'>
   <div class='info'>
     {{#link-to 'crate' crate.id data-test-crate-link}}{{ crate.name }}{{/link-to}}
+    {{crate-toml-copy copyText=crateTomlText}}
     {{crate-badge crate=crate}}
     {{#each crate.annotated_badges as |badge|}}
       {{component badge.component_name badge=badge data-test-badge=badge.badge_type}}

app/templates/components/crate-toml-copy.hbs

@@ -0,0 +1,12 @@
+{{#copy-button clipboardText=copyText success=(action 'copySuccess') error=(action 'copyError') title="Copy Cargo.toml snippet to clipboard"}}
+  {{svg-jar "copy" alt="Copy Cargo.toml snippet to clipboard"}}
+  <div class="copy-notification {{if showSuccess "copy-success" "copy-failure"}}">
+    {{#if showNotification}}
+      {{#if showSuccess}}
+        Copied!
+      {{else}}
+        An error occured. Please use CTRL+C.
+      {{/if}}
+    {{/if}}
+  </div>
+{{/copy-button}}

app/templates/crate/version.hbs

@@ -65,24 +65,11 @@
     {{else}}
       <div class='install'>
         <div class='action'>Cargo.toml</div>
-        <code id="crate-toml">{{ crate.name }} = "{{ currentVersion.num }}"</code>
+        <code id="crate-toml">{{ crateTomlText }}</code>
         {{#if (is-clipboard-supported)}}
-          {{#copy-button clipboardTarget="#crate-toml" success=(action 'copySuccess') error=(action 'copyError') title="Copy to clipboard"}}
-            {{svg-jar "copy" alt="Copy to clipboard"}}
-          {{/copy-button}}
+          {{crate-toml-copy copyText=crateTomlText}}
         {{/if}}
       </div>
-      <div class="copy-result">
-        <span id="copy-notification" class="{{if showSuccess "copy-success" "copy-failure"}}">
-          {{#if showNotification}}
-            {{#if showSuccess}}
-              Copied!
-            {{else}}
-              An error occured. Please use CTRL+C.
-            {{/if}}
-          {{/if}}
-        </span>
-      </div>
       {{#if crate.readme}}
         <section class="crate-readme" aria-label="Readme">
           {{crate-readme rendered=crate.readme}}