✨ ENHANCE: Update SVG button with checkmark

Author: choldgraf

docs/_static/custom.css

@@ -0,0 +1,3 @@
+img.logo {
+    height: 200px !important;
+}

docs/conf.py

@@ -72,9 +72,9 @@
 # The theme to use for HTML and HTML Help pages.  See the documentation for
 # a list of builtin themes.
 #
+html_theme = "sphinx_book_theme"
 # html_theme = "alabaster"
 # html_theme = "sphinx_rtd_theme"
-html_theme = "sphinx_book_theme"
 
 # Theme options are theme-specific and customize the look and feel of a theme
 # further.  For a list of options available for each theme, see the
@@ -86,6 +86,8 @@
 # relative to this directory. They are copied after the builtin static files,
 # so a file named "default.css" will overwrite the builtin "default.css".
 html_static_path = ["_static"]
+html_logo = "../sphinx_copybutton/_static/copy-button.svg"
+html_title = "Sphinx Copybutton"
 
 # Custom sidebar templates, must be a dictionary that maps document names
 # to template names.
@@ -171,3 +173,7 @@
         "Miscellaneous",
     )
 ]
+
+
+def setup(app):
+    app.add_css_file("custom.css")

docs/second/second_page.rst

@@ -1,6 +1,6 @@
-=============
-A deeper page
-=============
+===========================
+A nested page for reference
+===========================
 
 To make sure that the images / svg still works!
 

setup.py

@@ -44,6 +44,7 @@
             "_static/copybutton_funcs.js",
             "_static/copybutton.js_t",
             "_static/copy-button.svg",
+            "_static/check-solid.svg",
             "_static/clipboard.min.js",
         ]
     },

sphinx_copybutton/_static/check-solid.svg

@@ -1,29 +1,31 @@
 /* Copy buttons */
-a.copybtn {
+button.copybtn {
     position: absolute;
-    top: .2em;
-    right: .2em;
-    width: 1.3em;
-    height: 1.3em;
-	opacity: .3;
-    transition: opacity 0.5s;
-    border: none;
+    top: .3em;
+    right: .5em;
+    width: 1.7rem;
+    height: 1.7rem;
+	opacity: 0;
+    transition: opacity 0.3s, border .3s;
     user-select: none;
+    padding: 0;
+    border: none;
+    outline: none;
+}
+
+button.copybtn img {
+    width: 100%;
 }
 
 div.highlight  {
     position: relative;
 }
 
-a.copybtn > img {
-    vertical-align: top;
-    margin: 0;
-    top: 0;
-    right: 0;
-    position: absolute;
+.highlight:hover button.copybtn {
+	opacity: .7;
 }
 
-.highlight:hover .copybtn {
+.highlight button.copybtn:hover {
 	opacity: 1;
 }
 

sphinx_copybutton/_static/copybutton.css

@@ -44,6 +44,8 @@ if( document.documentElement.lang !== undefined
   locale = document.documentElement.lang
 }
 
+const path_static = `${DOCUMENTATION_OPTIONS.URL_ROOT}_static/`;
+
 /**
  * Set up copy/paste for code blocks
  */
@@ -77,6 +79,13 @@ const temporarilyChangeTooltip = (el, oldText, newText) => {
   setTimeout(() => el.setAttribute('data-tooltip', oldText), 2000)
 }
 
+// Changes the copy button icon for two seconds, then changes it back
+const temporarilyChangeIcon = (el) => {
+  img = el.querySelector("img");
+  img.setAttribute('src', `${path_static}check-solid.svg`)
+  setTimeout(() => img.setAttribute('src', `${path_static}{{ copybutton_image_path }}`), 2000)
+}
+
 const addCopyButtonToCodeCells = () => {
   // If ClipboardJS hasn't loaded, wait a bit and try again. This
   // happens because we load ClipboardJS asynchronously.
@@ -93,9 +102,9 @@ const addCopyButtonToCodeCells = () => {
     const pre_bg = getComputedStyle(codeCell).backgroundColor;
 
     const clipboardButton = id =>
-    `<a class="copybtn o-tooltip--left" style="background-color: ${pre_bg}" data-tooltip="${messages[locale]['copy']}" data-clipboard-target="#${id}">
-      <img src="${DOCUMENTATION_OPTIONS.URL_ROOT}_static/{{ copybutton_image_path }}" alt="${messages[locale]['copy_to_clipboard']}">
-    </a>`
+    `<button class="copybtn o-tooltip--left" style="background-color: ${pre_bg}" data-tooltip="${messages[locale]['copy']}" data-clipboard-target="#${id}">
+      <img src="${path_static}{{ copybutton_image_path }}" alt="${messages[locale]['copy_to_clipboard']}">
+    </button>`
     codeCell.insertAdjacentHTML('afterend', clipboardButton(id))
   })
 
@@ -113,6 +122,7 @@ var copyTargetText = (trigger) => {
   clipboard.on('success', event => {
     clearSelection()
     temporarilyChangeTooltip(event.trigger, messages[locale]['copy'], messages[locale]['copy_success'])
+    temporarilyChangeIcon(event.trigger)
   })
 
   clipboard.on('error', event => {