feat(clippy): edit positioning of clippy icon

src/content.less

@@ -12,38 +12,45 @@
   }
 }
 
-.markdown-body pre {
-  position: relative;
-  .clippy {
-    position: absolute;
-    top: 10px;
-    right: 16px;
-    width: 32px;
-    height: 32px;
-    border: 1px solid #ddd;
-    border-radius: 4px;
-    background: #f9f9f9;
-    &:hover {
-      background: #fff;
-    }
-    &:active {
-      background: #f0f0f0;
-    }
+.markdown-body {
+  .clippy-wrapper {
+    position: relative;
+    width: 0;
+    height: 0;
+    top: 8px;
+    left: ~'calc(100% - 40px)';
+    z-index: 1;
 
-    &.success {
-      i::before {
-        content: '\F03A'; // .octicon-check
+    .clippy {
+      width: 32px;
+      height: 32px;
+      border: 1px solid #ddd;
+      border-radius: 4px;
+      background: #f9f9f9;
+      &:hover {
+        background: #fff;
       }
-    }
-
-    &.fail {
-      i::before {
-        content: '\F081'; // .octicon-x
+      &:active {
+        background: #f0f0f0;
+      }
+      .icon {
+        width: 100%;
+        height: 100%;
+        display: block;
+        background-image: url("./assets/icons/octicons/clippy.svg?inline");
+        background-position: center;
+        background-repeat: no-repeat;
+      }
+      &.success {
+        .icon {
+          background-image: url("./assets/icons/octicons/check.svg?inline");
+        }
+      }
+      &.fail {
+        .icon {
+          background-image: url("./assets/icons/octicons/x.svg?inline");
+        }
       }
-    }
-
-    i::before {
-      margin-left: 2px; // make icon centered
     }
   }
 }

src/utils/DOMHelper.js

@@ -200,14 +200,20 @@ function createClippy() {
   }
 
   /**
-   * <button class="clippy">
-   *   <i class="octicon octicon-clippy" />
-   * </button>
+   * <div class="clippy-wrapper">
+   *    <button class="clippy">
+   *      <i class="octicon octicon-clippy" />
+   *    </button>
+   *  </div>
    */
+  const clippyWrapper = document.createElement('div')
+  clippyWrapper.classList.add('clippy-wrapper')
   const clippy = document.createElement('button')
   clippy.classList.add('clippy')
   const clippyIcon = document.createElement('i')
-  clippyIcon.classList.add('octicon', 'octicon-clippy')
+  clippyIcon.classList.add('icon')
+
+  clippyWrapper.appendChild(clippy)
   clippy.appendChild(clippyIcon)
 
   // set clipboard with current code snippet element's content
@@ -219,26 +225,33 @@ function createClippy() {
     }
   })
 
-  return clippy
+  return clippyWrapper
 }
 
 const clippy = createClippy()
 
 let currentCodeSnippetElement
 function attachCopySnippet() {
-  const readmeSelector = '.repository-content .readme'
+  const readmeSelector = '.repository-content .readme article'
   const readmeElement = document.querySelector(readmeSelector)
   if (readmeElement) {
-    const snippetSelector = '.repository-content .readme pre'
-    const snippetElements = readmeElement.querySelectorAll(snippetSelector)
     readmeElement.addEventListener('mouseover', ({ target }) => {
-      // only move clippy when mouse is over a new snippet
-      if (
-        Array.from(snippetElements).indexOf(target) !== -1 &&
-        currentCodeSnippetElement !== target
-      ) {
-        currentCodeSnippetElement = target
-        currentCodeSnippetElement.insertAdjacentElement('afterbegin', clippy)
+      // only move clippy when mouse is over a new snippet(<pre>)
+      if (target.nodeName === 'PRE') {
+        if (
+          currentCodeSnippetElement !== target
+        ) {
+          currentCodeSnippetElement = target
+          /**
+           *  <article>
+           *    <pre></pre>     <!-- case A -->
+           *    <div class="highlight">
+           *      <pre></pre>   <!-- case B -->
+           *    </div>
+           *  </article>
+           */
+          target.parentNode.insertBefore(clippy, target)
+        }
       }
     })
   }