From 15455817ef94e618823a03b65f46cd833670a292 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Asbj=C3=B8rn=20Apeland?= <aude@users.noreply.github.com>
Date: Wed, 26 Oct 2022 14:45:57 +0000
Subject: [PATCH] doc: refactor copy to clipboard button (#2894)

* doc: remove copy button background colour

the motivation for this commit is that I often get a feeling of having
marked the COPY buttons, but when I check, it turns out I haven't

that happens because the COPY buttons have a background colour that is
basically the same as when you mark text

* doc: use emoji for copy button

kind seems to be fond of emojis, it can maybe work here as well?

* doc: copy kubernetes.io code blocks design

as per feedback in PR

* doc: comply with copycode.svg license

* Revert "doc: comply with copycode.svg license"

This reverts commit c018fda4bc70ddd4c38c2c7b284fd1ae5f8580ff.
---
 site/assets/css/inline.css                  | 33 +++++++++------------
 site/layouts/shortcodes/codeFromFile.html   | 10 +++++--
 site/layouts/shortcodes/codeFromInline.html |  7 +++--
 site/static/copycode.svg                    |  3 ++
 4 files changed, 29 insertions(+), 24 deletions(-)
 create mode 100644 site/static/copycode.svg

diff --git a/site/assets/css/inline.css b/site/assets/css/inline.css
index f3116189..32adf901 100644
--- a/site/assets/css/inline.css
+++ b/site/assets/css/inline.css
@@ -261,38 +261,33 @@ table.includecode {
   max-width: 100%;
   width: 100%;
   table-layout: fixed;
-  background: #f3f4f4;
-  border: .15em solid black;
+  border: 1px solid rgba(0,0,0,.125);
   border-spacing: 0;
 }
 
-table.includecode thead {
-  background: #333;
-  color: white;
-}
-
-table.includecode thead th a {
-  color: white;
-}
-
 table.includecode thead th {
-  border-bottom: .1em solid black;
+  border-bottom: 1px solid rgba(0,0,0,.125);
   font-weight: normal;
-  font-size: .9em;
+  font-size: 85%;
 }
 
 table.includecode thead th {
   text-align: right;
 }
 
+table.includecode thead th a {
+  font-family: monospace;
+}
+
 table.includecode thead th button {
-  background: #326be5;
-  border: .25em solid white;
-  color: white;
-  font-weight: bold;
-  margin: .25em;
+  vertical-align: middle;
+  background: transparent;
+  border: 0;
   cursor: pointer;
-  padding: .1em .5em;
+}
+
+table.includecode tbody {
+  background: #f3f4f4;
 }
 
 table.includecode pre {
diff --git a/site/layouts/shortcodes/codeFromFile.html b/site/layouts/shortcodes/codeFromFile.html
index 8b903d3a..78b66632 100644
--- a/site/layouts/shortcodes/codeFromFile.html
+++ b/site/layouts/shortcodes/codeFromFile.html
@@ -9,8 +9,12 @@
 <table class="includecode" id="code-{{ $virtualPath }}">
   <thead>
     <tr>
-      <th><a href="/{{ $virtualPath }}">{{ $virtualPath }}</a> <button
-          onclick='copyText("code-{{ $virtualPath }}-hidden-copy-text");'>COPY</button></th>
+      <th>
+        <a href="/{{ $virtualPath }}">{{ $virtualPath }}</a>
+        <button onclick='copyText("code-{{ $virtualPath }}-hidden-copy-text");' title="Copy to clipboard">
+          <img src="{{ "copycode.svg" | relURL }}" alt="Copy">
+        </button>
+      </th>
     </tr>
   </thead>
   <tbody>
@@ -19,4 +23,4 @@
     </tr>
   </tbody>
   <textarea class="hidden-copy-text" id="code-{{ $virtualPath }}-hidden-copy-text">{{ ($file | readFile) }}</textarea>
-</table>
\ No newline at end of file
+</table>
diff --git a/site/layouts/shortcodes/codeFromInline.html b/site/layouts/shortcodes/codeFromInline.html
index 76859d5d..69d456b3 100644
--- a/site/layouts/shortcodes/codeFromInline.html
+++ b/site/layouts/shortcodes/codeFromInline.html
@@ -5,8 +5,11 @@
 <table class="includecode" id="inline-code-{{ $hash }}">
   <thead>
   <tr>
-    <th> <button
-        onclick='copyText("inline-code-{{ $hash }}-hidden-copy-text");'>COPY</button></th>
+    <th>
+      <button onclick='copyText("inline-code-{{ $hash }}-hidden-copy-text");' title="Copy to clipboard">
+        <img src="{{ "copycode.svg" | relURL }}" alt="Copy">
+      </button>
+    </th>
   </tr>
   </thead>
   <tbody>
diff --git a/site/static/copycode.svg b/site/static/copycode.svg
new file mode 100644
index 00000000..6358377e
--- /dev/null
+++ b/site/static/copycode.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" viewBox="0 0 24 24" fill="#184eb1">
+<path d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z"/>
+</svg>
\ No newline at end of file