Merge remote-tracking branch 'upstream/pr/570'

Author: carols10cents

app/styles/crate.scss

@@ -241,13 +241,35 @@
             color: white;
             padding: 20px;
         }
-
+        button, button:active {
+          padding:5px 0;
+          background-color: #FFFFFF;
+          border: none;
+          width: 60px;
+        }
+        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;
 
+      span {
+        font-size:80%;
+        font-weight:bold;
+      }
+      .copy-success {
+        color:$link-color;
+      }
+      .copy-failure {
+        color:red;
+      }
+
+    }
     .last-update {
         color: $main-color-light;
         font-size: 90%;

app/templates/crate/version.hbs

@@ -57,7 +57,13 @@
         {{/if}}
         <div class='install'>
             <div class='action'>Cargo.toml</div>
-            <code>{{ crate.name }} = "{{ currentVersion.num }}"</code>
+            <code id="crate-toml">{{ crate.name }} = "{{ currentVersion.num }}"</code>
+            <button id="crate-download-button" data-clipboard-action="copy" data-clipboard-target="#crate-toml">
+                <img src="/assets/copy.svg" alt="Copy to clipboard" height="25px" />
+            </button>
+        </div>
+        <div class="copy-result">
+          <span id="copy-notification"></span>
         </div>
     </div>
     <div class='authorship'>
@@ -271,3 +277,39 @@
     </div>
 </div>
 {{/if}}
+
+<script type="text/javascript">
+  if (!Clipboard.isSupported()) {
+    document.getElementById('crate-download-button').classList.add('hidden');
+  }
+
+  var clipboard = new Clipboard('#crate-download-button');
+  var notificationElement = document.getElementById('copy-notification');
+  clipboard.on('success', function(e) {
+      var successText = 'Copied !';
+
+      e.clearSelection();
+      notificationElement.classList.add('copy-success')
+      notificationElement.textContent = successText;
+      fadeOffElement(notificationElement, 2000);
+  });
+  clipboard.on('error', function(e) {
+      var failureText = 'An error occured. Please use CTRL+C.';
+
+      notificationElement.classList.add('copy-failure')
+      notificationElement.textContent = failureText;
+      fadeOffElement(notificationElement, 2000);
+  });
+
+  function fadeOffElement(element, delay) {
+    setTimeout(function() {
+      resetElement(element);
+    }, delay);
+  }
+
+  function resetElement(element) {
+    element.innerHTML = '';
+    element.className = '';
+  }
+
+</script>

bower.json

@@ -8,6 +8,7 @@
     "moment": "2.17.1",
     "moment-timezone": "0.5.11",
     "normalize-css": "5.0.0",
-    "pretender": "1.4.2"
+    "pretender": "1.4.2",
+    "clipboard": "1.6.0"
   }
 }

ember-cli-build.js

@@ -22,6 +22,6 @@ module.exports = function(defaults) {
 
   app.import('bower_components/moment/moment.js');
   app.import('bower_components/normalize-css/normalize.css');
-
+  app.import('bower_components/clipboard/dist/clipboard.js');
   return app.toTree();
 };