feat: add autohide param for copy button

reuixiy · Mar 20, 2020 · bdb6077 · bdb6077
1 parent f873fcc
commit bdb6077
Show file tree

Hide file tree

Showing 8 changed files with 44 additions and 18 deletions.
diff --git a/assets/js/copy.js b/assets/js/copy.js
@@ -47,6 +47,16 @@ function addCopyButtons(clipboard) {
         });
 
         containerEl.appendChild(button);
+
+        {{ if .Site.Params.enableCopyAutoHide }}
+            containerEl.parentNode.addEventListener('mouseover', () => {
+                button.style = 'visibility: visible; opacity: 1';
+            });
+
+            containerEl.parentNode.addEventListener('mouseout', () => {
+                button.style = 'visibility: hidden; opacity: 0';
+            });
+        {{ end }}
     });
 }
 

diff --git a/assets/scss/components/_highlight.scss b/assets/scss/components/_highlight.scss
@@ -38,19 +38,3 @@ span.lnt {
         overflow: auto;
     }
 }
-
-@if (enableCopy) {
-    .copy-button {
-        position: absolute;
-        top: 0;
-        right: 0;
-        border: 0;
-        color: var(--color-bg);
-        background-color: alpha(var(--color-contrast-medium), 0.5);
-        transition: background-color $duration;
-        cursor: pointer;
-        &:hover {
-            background-color: alpha(var(--color-primary), 0.5);
-        }
-    }
-}
diff --git a/assets/scss/layout/_single.scss b/assets/scss/layout/_single.scss
@@ -228,6 +228,29 @@ pre {
     }
 }
 
+@if ($enableCopy) {
+    .copy-button {
+        position: absolute;
+        top: 0;
+        right: 0;
+        border: 0;
+        color: var(--color-bg);
+        background-color: alpha(var(--color-contrast-medium), 0.5);
+        transition: all $duration;
+        cursor: pointer;
+        &:hover {
+            background-color: alpha(var(--color-primary), 0.5);
+        }
+    }
+
+    @if ($enableCopyAutoHide) {
+        .copy-button {
+            visibility: hidden;
+            opacity: 0;
+        }
+    }
+}
+
 .katex-display, mjx-container[jax="CHTML"][display="true"] {
     overflow: auto hidden;
     text-indent: 0;

diff --git a/assets/scss/main.scss b/assets/scss/main.scss
@@ -51,6 +51,12 @@
     $enableCopy: false;
 {{ end }}
 
+{{ if .Site.Params.enableCopyAutoHide }}
+    $enableCopyAutoHide: true;
+{{ else }}
+    $enableCopyAutoHide: false;
+{{ end }}
+
 
 // Utilities
 

diff --git a/config-examples/en/config.toml b/config-examples/en/config.toml
@@ -1242,6 +1242,7 @@ uglyURLs = false
     # Unit: em
 
     enableCopy = true
+    enableCopyAutoHide = true
 
 
     ######################################

diff --git a/config-examples/zh-cn/config.toml b/config-examples/zh-cn/config.toml
@@ -1217,6 +1217,8 @@ uglyURLs = false
 
     # 是否开启复制
     enableCopy = true
+    # 是否开启自动隐藏
+    enableCopyAutoHide = true
 
 
     ######################################

diff --git a/...leSite/resources/_gen/assets/scss/scss/main.scss_0437a1669ac8a9868f1dd1fe846b91a6.content b/...leSite/resources/_gen/assets/scss/scss/main.scss_0437a1669ac8a9868f1dd1fe846b91a6.content
diff --git a/exampleSite/resources/_gen/assets/scss/scss/main.scss_0437a1669ac8a9868f1dd1fe846b91a6.json b/exampleSite/resources/_gen/assets/scss/scss/main.scss_0437a1669ac8a9868f1dd1fe846b91a6.json
@@ -1 +1 @@
-{"Target":"css/meme.min.8ebc75cc2e0d5e4beb6ce2cd77cc927ddff5609c3822cb96860098df7115a001.css","MediaType":"text/css","Data":{"Integrity":"sha256-jrx1zC4NXkvrbOLNd8ySfd/1YJw4IsuWhgCY33EVoAE="}}
+{"Target":"css/meme.min.eede794627e4ed8002b5b86cd4c81f6b30e8f0d21321eb3eaf7e65a251666c6c.css","MediaType":"text/css","Data":{"Integrity":"sha256-7t55Rifk7YACtbhs1MgfazDo8NITIes+r35lolFmbGw="}}