bs4_book: Copy button uses an icon instead of text (#1192)

cderv · web-flow · commit 78a350c5131a · 2021-07-05T16:06:29.000+02:00
diff --git a/NEWS.md b/NEWS.md
@@ -1,5 +1,7 @@
 # CHANGES IN bookdown VERSION 0.23
 
+- In `bs4_book()`, copy button has now a light icon instead of a text with white background (#1192). 
+
 - Fix an issue with `bs4_book()` where text written using [Line Block](https://bookdown.org/yihui/rmarkdown-cookbook/indent-text.html) was not found in search (thanks, @dmklotz, #1141).
 
 - `bs4_book()` has now some `<meta>` tags that allows sharing a published book on social media. `cover-image`, `url`, `title` and `description` set in YAML will be used in `index.html` and then modified to be adapted per HTML page (#1034). 
diff --git a/inst/resources/bs4_book/bs4_book.css b/inst/resources/bs4_book/bs4_book.css
@@ -392,17 +392,34 @@ code a:any-link {
   text-decoration-color: #ccc;
 }
 
+/* copy button */
+
 pre .copy {
   position: absolute;
   top: 0.5rem;
   right: 0.5rem;
 }
+
 pre .copy button {
-  background-color: #fff;
   font-size: 80%;
   padding: 4px 6px;
 }
 
+pre .copy > button > i.bi::before {
+  display: inline-block;
+  height: 1rem;
+  width: 1rem;
+  content: "";
+  vertical-align: -0.125em;
+  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16"><path d="M4 1.5H3a2 2 0 0 0-2 2V14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V3.5a2 2 0 0 0-2-2h-1v1h1a1 1 0 0 1 1 1V14a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V3.5a1 1 0 0 1 1-1h1v-1z"/><path d="M9.5 1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5h3zm-3-1A1.5 1.5 0 0 0 5 1.5v1A1.5 1.5 0 0 0 6.5 4h3A1.5 1.5 0 0 0 11 2.5v-1A1.5 1.5 0 0 0 9.5 0h-3z"/></svg>');
+  background-repeat: no-repeat;
+  background-size: 1rem 1rem;
+}
+
+pre .copy > button.btn-copy-checked > .bi::before {
+  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16"><path d="M13.854 3.646a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 1 1 .708-.708L6.5 10.293l6.646-6.647a.5.5 0 0 1 .708 0z"/></svg>');
+}
+
 /* https://github.com/rstudio/distill/blob/master/inst/rmarkdown/templates/distill_article/resources/a11y.theme + https://gist.github.com/hadley/f53b6e92df20994fdabe6562d284728a */
 code span.ot {color:#007faa}
 code span.at {color:#7d9029}
diff --git a/inst/resources/bs4_book/bs4_book.js b/inst/resources/bs4_book/bs4_book.js
@@ -107,7 +107,7 @@ function changeTooltipMessage(element, msg) {
 $(document).ready(function() {
   if(ClipboardJS.isSupported()) {
     // Insert copy buttons
-    var copyButton = "<div class='copy'><button type='button' class='btn btn-outline-primary btn-copy' title='Copy to clipboard' aria-label='Copy to clipboard' data-toggle='popover' data-placement='top' data-trigger='hover'>Copy</button></div>";
+    var copyButton = "<div class='copy'><button type='button' class='btn btn-copy' title='Copy to clipboard' aria-label='Copy to clipboard' data-toggle='popover' data-placement='top' data-trigger='hover'><i class='bi'></i></button></div>";
     $(copyButton).appendTo("pre");
     // Initialize tooltips:
     $('.btn-copy').tooltip({container: 'body', boundary: 'window'});
@@ -120,7 +120,12 @@ $(document).ready(function() {
     });
 
     clipboard.on('success', function(e) {
-      changeTooltipMessage(e.trigger, 'Copied!');
+      const btn = e.trigger;
+      changeTooltipMessage(btn, 'Copied!');
+      btn.classList.add('btn-copy-checked');
+      setTimeout(function() {
+        btn.classList.remove('btn-copy-checked');
+      }, 2000);
       e.clearSelection();
     });
 
