Merge branch 'copy-button' into 'master'

Add copy to clipboard button to code blocks

Closes #56

See merge request gitlab-com/gitlab-docs!235

6 files changed, 88 insertions, 12 deletions

diff --git a/content/assets/javascripts/clipboardjs.js b/content/assets/javascripts/clipboardjs.js
new file mode 100644
index 00000000..15f9ebf9
--- /dev/null
+++ b/content/assets/javascripts/clipboardjs.js
@@ -0,0 +1,37 @@
+// add a copy button to every code // working
+$('pre').append($('<button class="clip-btn" title="Click to copy" data-selector="true"><i class="fa fa-clipboard" aria-hidden="true"></i></button>'));
+
+// Tooltip
+$('button').tooltip({
+  trigger: 'click',
+  placement: 'auto left'
+});
+
+function setTooltip(btn, message) {
+  $(btn).tooltip('hide')
+    .attr('data-original-title', message)
+    .tooltip('show');
+}
+
+function hideTooltip(btn) {
+  setTimeout(function() {
+    $(btn).tooltip('hide');
+  }, 1000);
+}
+
+// trigger clipboardjs
+var clipboard = new ClipboardJS('.clip-btn', {
+  target: function(trigger) {
+    return trigger.previousElementSibling;
+  }
+});
+
+clipboard.on('success', function(e) {
+  setTooltip(e.trigger, 'Copied!');
+  hideTooltip(e.trigger);
+});
+
+clipboard.on('error', function(e) {
+  setTooltip(e.trigger, 'Failed!');
+  hideTooltip(e.trigger);
+});
diff --git a/content/assets/stylesheets/_variables.scss b/content/assets/stylesheets/_variables.scss
index c8441744..382618a0 100644
--- a/content/assets/stylesheets/_variables.scss
+++ b/content/assets/stylesheets/_variables.scss
@@ -18,6 +18,9 @@ $link-code-color: rgb(55, 119, 176);
 $code-color: rgb(95, 131, 65);
 $code-background-color: rgba(95, 131, 65, .1);
 
+//copy button bkg color == pre code color
+$pre-code-color: #2b303b;
+
 // Home page colors
 $landing-background: #34373c;
 $topic-border: rgb(215, 215, 215);
diff --git a/content/assets/stylesheets/highlight.scss b/content/assets/stylesheets/highlight.scss
index ec916705..ad7deb9a 100644
--- a/content/assets/stylesheets/highlight.scss
+++ b/content/assets/stylesheets/highlight.scss
@@ -8,16 +8,18 @@ pre.highlight {
   border: 1px solid rgba(0, 0, 0, 0.15);
   box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.15);
   border-radius: 3px;
-  overflow-x: auto;
+  overflow-x: hidden;
   margin: 20px 0;
   background: #2b303b;
   color: #eff1f5;
 
   // Code itself
   code {
+    display: block;
     border-color: transparent;
     color: inherit;
     background-color: transparent;
+    overflow-x: scroll;
   }
 
   .hll { background-color: #4f5b66 }
diff --git a/content/assets/stylesheets/stylesheet.scss b/content/assets/stylesheets/stylesheet.scss
index d4ef0b0a..395c180f 100644
--- a/content/assets/stylesheets/stylesheet.scss
+++ b/content/assets/stylesheets/stylesheet.scss
@@ -1,5 +1,5 @@
 ---
-version: 33
+version: 34
 ---
 
 @import "variables";
@@ -81,22 +81,48 @@ blockquote {
 
 pre {
   background-color: $pre-background-color;
+  position: relative;
 
   code {
+    color: $code-color;
+    background-color: $code-background-color;
     word-wrap: normal;
     word-break: normal;
     white-space: pre;
   }
-}
 
-hr {
-  border: 0;
-  border-top: 1px solid $hr-border-color;
-}
+  .clip-btn {
+    display: inline-block;
+    padding: 5px;
+    padding-left: 10px;
+    right: 5px;
+    top: 5px;
+    cursor: pointer;
+    position: absolute;
+    color: $white;
+    background-color: $pre-code-color;
+    border: 0;
+    outline: 0;
 
-code {
-  color: $code-color;
-  background-color: $code-background-color;
+    i {
+      opacity: .5;
+      transition: opacity .3s ease-in;
+    }
+
+    @media all and (max-width: $mobile-width) {
+      display: none;
+    }
+  }
+
+  &:hover {
+    .clip-btn {
+      background-color: $pre-code-color;
+
+      i {
+        opacity: 1;
+      }
+    }
+  }
 }
 
 code, code span {
@@ -112,6 +138,11 @@ a > code {
   color: $link-code-color;
 }
 
+hr {
+  border: 0;
+  border-top: 1px solid $hr-border-color;
+}
+
 // Make code in headers match the font size of the given header.
 h2, h3, h4, h5, h6 {
   border-bottom: solid 1px $h-border-bottom;
diff --git a/layouts/default.html b/layouts/default.html
index b08da70f..3b2e22bc 100644
--- a/layouts/default.html
+++ b/layouts/default.html
@@ -59,7 +59,10 @@
     </div>
     <div class="clear"></div>
   </div>
-
+  <script src="https://cdn.jsdelivr.net/jquery/3.2.1/jquery.min.js"></script>
+  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/clipboard@2/dist/clipboard.min.js"></script>
+  <script type="application/javascript" src="/assets/javascripts/clipboardjs.js"></script>
   <%= render '/footer.*' %>
   <%= render '/docsearch.*' %>
   <%= render '/analytics.*' %>
diff --git a/layouts/instantsearch.html b/layouts/instantsearch.html
index 76347e10..ca5e9a15 100644
--- a/layouts/instantsearch.html
+++ b/layouts/instantsearch.html
@@ -8,7 +8,6 @@
     <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/instantsearch.js@2.5.0/dist/instantsearch-theme-algolia.min.css">
     <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/instantsearch.js@2.5.0/dist/instantsearch.min.css">
     <script src="https://cdn.jsdelivr.net/npm/instantsearch.js@2.5.0"></script>
-    <script src="https://cdn.jsdelivr.net/jquery/3.2.1/jquery.min.js"></script>
     <!-- end of instantsearch -->
   </head>
   <body>
@@ -21,6 +20,7 @@
         <hr>
       <div class="clear"></div>
     </div>
+      <script src="https://cdn.jsdelivr.net/jquery/3.2.1/jquery.min.js"></script>
       <script type="application/javascript" src="/assets/javascripts/instantsearch.js"></script>
       <%= render '/footer.*' %>
       <%= render '/analytics.*' %>