diff --git a/Cargo.lock b/Cargo.lock index 960921b..6ccd779 100644 --- a/Cargo.lock +++ b/Cargo.lock @@ -94,6 +94,7 @@ name = "cong" version = "1.0.0" dependencies = [ "askama", + "gloo 0.8.0", "gloo-utils", "log", "serde", diff --git a/Cargo.toml b/Cargo.toml index b832682..55bc8c7 100644 --- 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 index 8484173..0b07590 100644 --- a/index.html +++ b/index.html @@ -1,12 +1,12 @@ - cong + macigè - + diff --git a/public/atom-one-light.min.css b/public/atom-one-light.min.css new file mode 100644 index 0000000..df0268a --- /dev/null +++ b/public/atom-one-light.min.css @@ -0,0 +1 @@ +pre code.hljs{display:block;overflow-x:auto;padding:1em}code.hljs{padding:3px 5px}.hljs{color:#383a42;background:#fafafa}.hljs-comment,.hljs-quote{color:#a0a1a7;font-style:italic}.hljs-doctag,.hljs-formula,.hljs-keyword{color:#a626a4}.hljs-deletion,.hljs-name,.hljs-section,.hljs-selector-tag,.hljs-subst{color:#e45649}.hljs-literal{color:#0184bb}.hljs-addition,.hljs-attribute,.hljs-meta .hljs-string,.hljs-regexp,.hljs-string{color:#50a14f}.hljs-attr,.hljs-number,.hljs-selector-attr,.hljs-selector-class,.hljs-selector-pseudo,.hljs-template-variable,.hljs-type,.hljs-variable{color:#986801}.hljs-bullet,.hljs-link,.hljs-meta,.hljs-selector-id,.hljs-symbol,.hljs-title{color:#4078f2}.hljs-built_in,.hljs-class .hljs-title,.hljs-title.class_{color:#c18401}.hljs-emphasis{font-style:italic}.hljs-strong{font-weight:700}.hljs-link{text-decoration:underline} \ No newline at end of file diff --git a/public/style.css b/public/style.css index 43c4f9e..f4bce22 100644 --- 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 index 9600a99..63e101a 100644 --- 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! { - <> +
+ if *should_say_copied { +

{"Copied!"}

+ } - +
} }