Adjust copy-button style (#1277)

theme-next · Nov 15, 2019 · f4e757d · f4e757d
1 parent 3846991
commit f4e757d
Show file tree

Hide file tree

Showing 5 changed files with 18 additions and 26 deletions.
diff --git a/languages/en.yml b/languages/en.yml
@@ -32,9 +32,6 @@ post:
   sticky: Sticky
   views: Views
   related_posts: Related Posts
-  copy_button: Copy
-  copy_success: Copied
-  copy_failure: Copy failed
   copyright:
     author: Post author
     link: Post link

diff --git a/layout/_partials/head/head.swig b/layout/_partials/head/head.swig
@@ -88,11 +88,6 @@
     localsearch: {{ theme.local_search | json }},
     path: '{{ config.search.path }}',
     motion: {{ theme.motion | json }},
-    translation: {
-      copy_button: '{{ __("post.copy_button") }}',
-      copy_success: '{{ __("post.copy_success") }}',
-      copy_failure: '{{ __("post.copy_failure") }}'
-    },
     sidebarPadding: 40
   };
 </script>
diff --git a/source/css/_common/scaffolding/highlight/copy-code.styl b/source/css/_common/scaffolding/highlight/copy-code.styl
@@ -1,8 +1,8 @@
-.highlight-wrap {
+.highlight-container {
   position: relative;
 }
 
-.highlight-wrap:hover .copy-btn, .highlight-wrap .copy-btn:focus {
+.highlight-container:hover .copy-btn, .highlight-container .copy-btn:focus {
   opacity: 1;
 }
 
@@ -44,7 +44,7 @@
 }
 
 if (hexo-config('codeblock.copy_button.style') == 'mac') {
-  .highlight-wrap {
+  .highlight-container {
     background: #21252b;
     border-radius: 5px;
     box-shadow: 0 10px 30px 0 rgba(0, 0, 0, .4);

diff --git a/source/css/_common/scaffolding/highlight/highlight.styl b/source/css/_common/scaffolding/highlight/highlight.styl
@@ -50,7 +50,7 @@ pre {
   pre {
     border: 0;
     margin: 0;
-    padding: 10px 0;
+    padding: 0;
   }
 
   table {
@@ -59,6 +59,15 @@ pre {
     width: auto;
   }
 
+  tr {
+    &:first-child pre {
+      padding-top: 10px;
+    }
+    &:last-child pre {
+      padding-bottom: 10px;
+    }
+  }
+
   td {
     border: 0;
     padding: 0;

diff --git a/source/js/utils.js b/source/js/utils.js
@@ -60,26 +60,18 @@ NexT.utils = {
    */
   registerCopyCode: function() {
     document.querySelectorAll('figure.highlight').forEach(element => {
-      const initButton = button => {
-        if (CONFIG.copycode.style === 'mac') {
-          button.innerHTML = '<i class="fa fa-clipboard"></i>';
-        } else {
-          button.innerText = CONFIG.translation.copy_button;
-        }
-      };
       const box = document.createElement('div');
-      box.classList.add('highlight-wrap');
       element.wrap(box);
-      element.parentNode.insertAdjacentHTML('beforeend', '<div class="copy-btn"></div>');
+      box.classList.add('highlight-container');
+      box.insertAdjacentHTML('beforeend', '<div class="copy-btn"><i class="fa fa-clipboard"></i></div>');
       var button = element.parentNode.querySelector('.copy-btn');
       button.addEventListener('click', event => {
         var target = event.currentTarget;
         var code = [...target.parentNode.querySelectorAll('.code .line')].map(line => {
           return line.innerText;
         }).join('\n');
         var ta = document.createElement('textarea');
-        var yPosition = window.scrollY;
-        ta.style.top = yPosition + 'px'; // Prevent page scrolling
+        ta.style.top = window.scrollY + 'px'; // Prevent page scrolling
         ta.style.position = 'absolute';
         ta.style.opacity = '0';
         ta.readOnly = true;
@@ -92,7 +84,7 @@ NexT.utils = {
         ta.readOnly = false;
         var result = document.execCommand('copy');
         if (CONFIG.copycode.show_result) {
-          target.innerText = result ? CONFIG.translation.copy_success : CONFIG.translation.copy_failure;
+          target.querySelector('i').className = result ? 'fa fa-check' : 'fa fa-times';
         }
         ta.blur(); // For iOS
         target.blur();
@@ -104,10 +96,9 @@ NexT.utils = {
       });
       button.addEventListener('mouseleave', event => {
         setTimeout(() => {
-          initButton(event.target);
+          event.target.querySelector('i').className = 'fa fa-clipboard';
         }, 300);
       });
-      initButton(button);
     });
   },