Use nice, unobtrusive GitHub-styled icon as button

Includes the following changes: - text buttons replaced with icons - darker color while inactive for less distraction - also hide button until hovering over code block Ported from jdbrice/obsidian-code-block-copy#13
Cito · Sep 1, 2021 · 8e9b511 · 8e9b511
1 parent 5680b5f
commit 8e9b511
Show file tree

Hide file tree

Showing 2 changed files with 56 additions and 42 deletions.
diff --git a/src/core.ts b/src/core.ts
@@ -1,12 +1,13 @@
-import { MarkdownPostProcessorContext, MarkdownView, Menu } from "obsidian";
+import { MarkdownPostProcessorContext, Menu } from "obsidian";
 import CodeBlockCopyPlugin from "./main";
-const COPY_TEXT = 'Copy'
-const COPY_OVER_TEXT = 'Done'
+
 const DEFAULT_LANG_ATTR = 'language-text'
 const DEFAULT_LANG = ''
 const LANG_REG = /^language-/
 const LINE_SPLIT_MARK = '\n'
 
+const SVG_COPY = '<svg height="16" width="16" viewBox="0 0 16 16" version="1.1" data-view-component="true" class="copy"><path fill-rule="evenodd" d="M5.75 1a.75.75 0 00-.75.75v3c0 .414.336.75.75.75h4.5a.75.75 0 00.75-.75v-3a.75.75 0 00-.75-.75h-4.5zm.75 3V2.5h3V4h-3zm-2.874-.467a.75.75 0 00-.752-1.298A1.75 1.75 0 002 3.75v9.5c0 .966.784 1.75 1.75 1.75h8.5A1.75 1.75 0 0014 13.25v-9.5a1.75 1.75 0 00-.874-1.515.75.75 0 10-.752 1.298.25.25 0 01.126.217v9.5a.25.25 0 01-.25.25h-8.5a.25.25 0 01-.25-.25v-9.5a.25.25 0 01.126-.217z"></path></svg>'
+const SVG_SUCCESS = '<svg height="16" width="16" viewBox="0 0 16 16" version="1.1" data-view-component="true" class="copy-success"><path fill-rule="evenodd" d="M13.78 4.22a.75.75 0 010 1.06l-7.25 7.25a.75.75 0 01-1.06 0L2.22 9.28a.75.75 0 011.06-1.06L6 10.94l6.72-6.72a.75.75 0 011.06 0z"></path></svg>'
 
 interface CodeBlockMeta {
   /**
@@ -56,7 +57,7 @@ export function enhanceCodeBlock (el: HTMLElement, ctx: MarkdownPostProcessorCon
     pre.classList.add(DEFAULT_LANG_ATTR)
   }
   // Ignore already has copy button 
-  if (pre.querySelector('button.code-block-copy-button')) {
+  if (pre.querySelector('div.code-block-copy-button')) {
     return;
   }
   // let div position: relative;
@@ -85,14 +86,11 @@ export function enhanceCodeBlock (el: HTMLElement, ctx: MarkdownPostProcessorCon
 
 
 
-function createEle (tagName: string, text: string, defaultClassName?: string) {
+function createElement(tagName: string, defaultClassName?: string) {
   const element = document.createElement(tagName)
   if (defaultClassName) {
     element.className = defaultClassName
   }
-  if (text) {
-    element.innerText = text
-  }
   return element
 }
 
@@ -173,39 +171,39 @@ function enhanceContextMenu (plugin: CodeBlockCopyPlugin, cbMeta: CodeBlockMeta)
 }
 function addLangName (plugin: CodeBlockCopyPlugin, cbMeta: CodeBlockMeta) {
   const { langName, pre } = cbMeta
-  const langNameTip = createEle('span', langName, 'code-block-lang-name')
+  const langNameTip = createElement('span', 'code-block-lang-name')
+  langNameTip.innerText = langName
   pre.appendChild(langNameTip)
 }
 
 function addCopyButton (plugin: CodeBlockCopyPlugin, cbMeta: CodeBlockMeta) {
   const { code, pre } = cbMeta
-  const copyButton = createEle('button', COPY_TEXT, 'code-block-copy-button')
+  const copyButton = createElement('div', 'code-block-copy-button')
+  copyButton.setAttribute('aria-label', 'Copy')
+  copyButton.innerHTML = SVG_COPY;
+
   const copyHandler = () => {
-    const cpBtClassList = copyButton.classList
-    const doneClassName = 'code-block-copy-button__copied'
-    navigator.clipboard.writeText(code.textContent).then(function () {
-      copyButton.innerText = COPY_OVER_TEXT;
-      cpBtClassList.add(doneClassName)
-      setTimeout(function () {
-        copyButton.innerText = COPY_TEXT;
-        cpBtClassList.remove(doneClassName)
-      }, 1000);
-    }, function (error: Error) {
+    navigator.clipboard.writeText(code.textContent).then(() => {
+      copyButton.innerHTML = SVG_SUCCESS
+      setTimeout(() => {
+        copyButton.innerHTML = SVG_COPY
+      }, 1500);
+    }, () => {
       copyButton.innerText = 'Error';
     });
   }
   plugin.registerDomEvent(copyButton, 'click', copyHandler)
   pre.appendChild(copyButton);
-
+  pre.classList.add('code-block-pre__has-copy-button')
 }
 
 
 function addLineNumber (plugin: CodeBlockCopyPlugin, cbMeta: CodeBlockMeta) {
   const { lineSize, pre } = cbMeta
   // const { fontSize, lineHeight } = window.getComputedStyle(cbMeta.code)
-  const lineNumber = createEle('span', null, 'code-block-linenum-wrap')
+  const lineNumber = createElement('span', 'code-block-linenum-wrap')
   Array.from({ length: lineSize }, (v, k) => k).forEach(i => {
-    const singleLine = createEle('span', null, 'code-block-linenum')
+    const singleLine = createElement('span', 'code-block-linenum')
     // singleLine.style.fontSize = fontSize
     // singleLine.style.lineHeight = lineHeight
     lineNumber.appendChild(singleLine)

diff --git a/src/styles/index.scss b/src/styles/index.scss
@@ -1,26 +1,32 @@
 $cb-font-size: 0.8rem;
 $cb-line-height: 1.5em;
 .code-block-copy-button {
+  display: none;
+  margin: 0 0 0 auto;
+  padding: 4px;
   position: absolute;
-  top: 0px;
-  right: 0px;
-  margin-right: 0;
-  padding: 0;
-  text-align: center;
-  width: 3rem;
-  height: 1.25rem;
-  font-size: $cb-font-size;
-  color: var(--background-primary);
-  background-color: var(--text-faint);
-  border-radius: 0px 4px 0px 0px;
-  &__copied {
-    background-color: #11b64b;
-    color: white;
-    transition: background-color 0.5s;
+  top: 0;
+  right: 0;
+
+  svg.copy path {
+    fill: var(--interactive-normal);
   }
-  &:hover {
+
+  &:hover,
+  &:active {
     cursor: pointer;
-    background-color: var(--text-normal);
+    svg path {
+      fill: var(--interactive-accent-hover);
+      transition: all ease 0.3s;
+    }
+  }
+
+  svg.copy-success path {
+    fill: var(--interactive-success);
+  }
+
+  &:focus {
+    outline: 0;
   }
 }
 .code-block-lang-name {
@@ -44,8 +50,17 @@ pre[class*="language-"] {
     line-height: $cb-line-height !important;
   }
 }
-pre[class*="language-"].code-block-pre__has-linenum {
-  padding-left: 4.5em;
+.code-block-pre {
+  position: relative;
+
+  &__has-copy-button:hover {
+    .code-block-copy-button {
+      display: block;
+    }
+  }
+  &__has-linenum {
+    padding-left: 4.5em !important;
+  }
 }
 .code-block-linenum-wrap {
   position: absolute;
@@ -60,6 +75,7 @@ pre[class*="language-"].code-block-pre__has-linenum {
   user-select: none;
   pointer-events: none;
   opacity: 0.9;
+  background-color: var(--background-primary-alt);
   .code-block-linenum {
     display: block;
     counter-increment: line-num;