From bf1a13dee1858f2ff17bac8bf80fd870b88e29d9 Mon Sep 17 00:00:00 2001
From: aysenur-jf <54525698+aysenur-jf@users.noreply.github.com>
Date: Tue, 19 May 2020 20:56:18 +0300
Subject: [PATCH] App :: Add tooltip for copy to clipboard button

---
 src/App.js    | 24 +++++++++++++++++-------
 src/index.css | 26 +++++++++++++++++++++++++-
 2 files changed, 42 insertions(+), 8 deletions(-)

diff --git a/src/App.js b/src/App.js
index d8e504b..121ab70 100644
--- a/src/App.js
+++ b/src/App.js
@@ -85,6 +85,7 @@ class App extends Component {
     this.state = {
       ready: false,
       darkMode: false,
+      copied: false,
       sidebar: true,
       codeView: false,
       view: 'desktop',
@@ -111,7 +112,7 @@ class App extends Component {
   }
 
   handleContentDidMount() {
-     setTimeout(() => {
+    setTimeout(() => {
       this.setState({
         ready: true,
         markup: this.markupRef.current.innerHTML
@@ -211,10 +212,16 @@ class App extends Component {
     input.select();
     document.execCommand('copy');
     document.body.removeChild(input);
+    this.setState({copied: true});
+    setTimeout(() => {
+      this.setState({
+        copied: false
+      })
+    }, 2000);
 }
 
   render() {
-    const { darkMode, theme, blockName, blockType, sidebar, view } = this.state;
+    const { darkMode, theme, blockName, blockType, sidebar, view, copied } = this.state;
     return (
       <div className={`app${darkMode ? ' dark-mode' : ''}${sidebar ? ' has-sidebar' : ''} ${theme} ${view}`}>
         <textarea className="copy-textarea" ref={this.textareaRef} />
@@ -223,11 +230,14 @@ class App extends Component {
         </aside>
         <div className="toolbar">
           <button className="opener" onClick={this.toggleSidebar}>TAILBLOCKS</button>
-          {this.state.codeView ? (
-            <button className="copy-the-block copy-to-clipboard" onClick={this.copyToClipboard}>
-              {clipboardIcon}
-              <span>COPY TO CLIPBOARD</span>
-            </button>) : ''
+          {this.state.codeView &&
+            <div className="clipboard-wrapper">
+              <button className="copy-the-block copy-to-clipboard" onClick={this.copyToClipboard}>
+                {clipboardIcon}
+                <span>COPY TO CLIPBOARD</span>
+              </button>
+              <span className={`clipboard-tooltip${copied ? ' is-copied ' : ''}`} >Copied!</span>
+            </div>
           }
           <button className="copy-the-block" onClick={this.toggleView}>
             {!this.state.codeView ?
diff --git a/src/index.css b/src/index.css
index 1dd1d7d..f6357b8 100644
--- a/src/index.css
+++ b/src/index.css
@@ -558,4 +558,28 @@ pre, code {
   display: inline-flex;
   align-items: center;
   justify-content: center;
-}
\ No newline at end of file
+}
+
+.clipboard-wrapper {
+  display: flex;
+  flex-direction: row-reverse;
+  align-items: center;
+}
+
+.clipboard-tooltip {
+  margin-right: -10px;
+  color: #fff;
+  font-size: 13px;
+  background-color: rgba(255, 255, 255, 0.4);
+  padding: 2px 5px;
+  letter-spacing: .2px;
+  border-radius: 4px;
+  position: relative; 
+  opacity: 0;
+  transition: opacity .4s, margin-right .4s;
+}
+
+.clipboard-tooltip.is-copied {
+  margin-right: 6px;
+  opacity: 1;
+}