Add a text to show code was copied to clipboard

tramlinehq · Nov 7, 2022 · fb019a8 · fb019a8
1 parent d3d65c1
commit fb019a8
Show file tree

Hide file tree

Showing 6 changed files with 40 additions and 12 deletions.
diff --git a/Cargo.lock b/Cargo.lock
diff --git a/Cargo.toml b/Cargo.toml
@@ -6,6 +6,7 @@ edition = "2021"
 [dependencies]
 yew = { git = "https://github.com/yewstack/yew.git", features = ["csr"] }
 yew-hooks = { git = "https://github.com/jetli/yew-hooks" }
+gloo = "0.8.0"
 gloo-utils = { version = "0.1.5", features = ["serde"] }
 askama = "0.11"
 wasm-bindgen = "0.2.83"

diff --git a/index.html b/index.html
@@ -1,12 +1,12 @@
 <!DOCTYPE html>
 <html lang="en">
   <head>
-    <title>cong</title>
+    <title>macigè</title>
     <base data-trunk-public-url />
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
     <link rel="stylesheet" href="/public/simple.min.css">
-    <link rel="stylesheet" href="/public/androidstudio.min.css">
+    <link rel="stylesheet" href="/public/atom-one-light.min.css">
     <link data-trunk rel="copy-dir" href="public/" />
     <link rel="stylesheet" href="public/style.css">
     <link rel="apple-touch-icon" sizes="57x57" href="public/apple-icon-57x57.png">

diff --git a/public/atom-one-light.min.css b/public/atom-one-light.min.css
diff --git a/public/style.css b/public/style.css
@@ -29,9 +29,6 @@ button.copy {
   font-size: 1em !important;
   background-color: lightgrey !important;
   padding: 2px;
-  margin: 0;
-  margin-bottom: 0.5em;
-  float: right;
 }
 
 button:focus { filter: none; }
@@ -46,24 +43,29 @@ select:focus {
 }
 
 pre {
-  background: #282b2e;
   white-space: pre;
   word-wrap: break-word;
   overflow: auto;
 }
 
+.notice {
+  background: var(--accent-bg);
+  border: 2px solid var(--border);
+  border-radius: 5px;
+  padding: 1.5rem;
+  margin: 2rem 0;
+}
+
 pre.code {
   border-radius: 4px;
   border: 1px solid #282b2e;
   position: relative;
-  clear: both;
 }
 
 pre.code label {
   font-family: inherit;
   font-weight: bold;
   font-size: 13px;
-  color: #ddd;
   position: absolute;
   left: 1px;
   top: 15px;
@@ -84,7 +86,17 @@ pre.code code {
   overflow-x: auto;
   font-size: 13px;
   line-height: 19px;
-  color: #ddd;
+}
+
+.copy-to-clipboard {
+  display: flex;
+  justify-content: right;
+  gap: 1em;
+  align-items: center;
+}
+
+.sm-t {
+  font-size: 12px;
 }
 
 .pickers {
@@ -98,7 +110,6 @@ pre.code code {
   grid-column: span 2;
 }
 
-
 @media screen and (max-width: 600px) {
   .pickers {
     display: grid;

diff --git a/src/main.rs b/src/main.rs
@@ -39,13 +39,24 @@ pub struct CopyToClipboardProps {
 #[function_component]
 fn CopyToClipboardButton(props: &CopyToClipboardProps) -> Html {
     let clipboard = use_clipboard();
+    let should_say_copied = use_state(|| false);
 
     let onclick = {
         let clipboard = clipboard.clone();
+        let should_say_copied_clone = should_say_copied.clone();
 
         if let Some(code) = props.code.clone() {
             Callback::from(move |e: MouseEvent| {
                 e.prevent_default();
+
+                // some serious cloning going on in here?!
+                let should_say_copied_cc = should_say_copied_clone.clone();
+                should_say_copied_cc.set(true);
+                gloo::timers::callback::Timeout::new(1300, move || {
+                    should_say_copied_cc.set(false);
+                })
+                .forget();
+
                 clipboard.write_text(code.clone())
             })
         } else {
@@ -54,11 +65,14 @@ fn CopyToClipboardButton(props: &CopyToClipboardProps) -> Html {
     };
 
     html! {
-        <>
+        <div class="copy-to-clipboard">
+            if *should_say_copied {
+                <p class="sm-t"><mark>{"Copied!"}</mark></p>
+            }
             <button class="copy" onclick={onclick}>
             <img src="/public/clipboard-text.svg" width="24" />
             </button>
-        </>
+        </div>
     }
 }