Fix #1276: Add copy to clipboard for commands

Author: prashantpandey9

djangoproject/scss/_console-tabs.scss

@@ -44,4 +44,17 @@
     >.c-tab-win:checked~.c-content-win {
         display: block;
     }
+    >.c-content-win, >.c-content-unix .highlight-console{
+        .highlight{
+            display: flex;
+            justify-content: space-between;
+
+            .btn-clipboard{
+                float: right;
+                position: sticky;
+                cursor: pointer;
+                margin: 15px;
+            }
+        }
+    }
 }

djangoproject/static/js/main.js

@@ -98,7 +98,7 @@ define(function() {
         mods.push('mod/messages');
     }
 
-    if (hasClass('code-block-caption') || hasClass('snippet')) {
+    if (hasClass('code-block-caption') || hasClass('snippet') || hasClass('c-content-unix') || hasClass('c-content-win')){
         mods.push('mod/clippify');
     }
 

djangoproject/static/js/mod/clippify.js

@@ -8,6 +8,20 @@ define(['jquery', 'clipboard'], function($, Clipboard) {
         btn.data('clipboard-text', $.trim(code.text()));
         header.append(btn);
     });
+    $('.c-content-win, .c-content-unix').each(function() {
+        var header = $(this);
+        var wrapper = header.parent();
+        var code = $('.highlight', wrapper);
+    
+        // Check if the icon has already been added
+        if (!$('.btn-clipboard', code).length) {
+            var btn = $('<span class="btn-clipboard" title="Copy this code">');
+            btn.append('<i class="icon icon-clipboard">');
+            btn.data('clipboard-text', $.trim(code.text()));
+            code.append(btn);
+        }
+    });
+    
     // For Django 2.0 docs and older.
     $('.snippet').each(function() {
         var code = $('.highlight', this);