fix: showing tick mark in all clipboard button on copy action

Author: technikhil314

README.md

@@ -1,13 +1,44 @@
 # offline-diff-viewer
 
-## Why another diff viewer
+## Why another diff viewer and motivation behind the tool
+
+## Resoning for building yet another diff viewer tool
 
 I realise we are missing a diff viewer that is
 
 - Privacy focused
 - Simple to use
 - And most importantly does not store any data on server to give sharable diff urls
 
+## Motivation
+
+I realise as a developer community we are missing on a diff viewer tool that does not store your data on their server to give you links to diff view to share with your teams.
+There can be serious implications of storing your enterprise data on some server that you don’t know anything about
+
+Also due to lack of such tool, if you want to see the the diff again you have to do the following
+
+1. Ask/get the data from someone/somewhere
+2. Search for a diff viewer tool online
+3. Copy paste the data sources to the tool
+4. Compare and share findings
+
+This is still a mechnical part that can be easily automated. But most such tools out there right now store your data to give you sharable diff URLs which was a concerning thing at least for me for security reasons.
+
+The simplest solution in my opinion will be
+
+1. Get the data just once
+2. Search for diff tool online just once
+3. Copy your data to the tool just once
+4. Compare and get a sharable url that stores your data in link itself
+
+In the chase of one such tool I ended up creating one as I did not find any that satisfied my requirements.
+This is open source and has very easy user interface. Here is the link to the tool https://diffviewer.vercel.app/
+It has following benefits
+Since the tool does not store your data on its server there is no server required in the tool
+that makes the tools blazing fast
+most importantly the link can be shared with anyone without security concerns(Unless you share it over some insecure media)
+as the link contains data whomever you share link with can get data too
+
 ## Build Setup
 
 ```bash

components/RTStickyCopyButton.vue

@@ -1,10 +1,15 @@
 <template>
   <div class="sticky top-0 text-right z-1">
     <button
-      @click="clickHandler"
-      class="absolute top-0 right-0 p-2 transition-all transform bg-gray-100 rounded-full shadow  z-1 hover:shadow-lg hover:scale-110 hover:rotate-12"
+      @click="handleClick"
+      class="absolute top-0 right-0 p-2 transition-all transform rounded-full shadow  z-1 hover:shadow-lg hover:scale-110 hover:rotate-12"
+      v-bind:class="{
+        'bg-gray-100': !copied,
+        'bg-green-500': copied,
+      }"
     >
       <svg
+        v-show="!copied"
         class="w-6 h-6"
         fill="none"
         stroke="currentColor"
@@ -18,12 +23,41 @@
           d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"
         ></path>
       </svg>
+      <svg
+        v-show="copied"
+        class="w-6 h-6"
+        fill="none"
+        stroke="currentColor"
+        viewBox="0 0 24 24"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          stroke-width="2"
+          d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4"
+        ></path>
+      </svg>
     </button>
   </div>
 </template>
 
 <script>
 export default {
   props: ['clickHandler'],
+  data() {
+    return {
+      copied: false,
+    }
+  },
+  methods: {
+    handleClick(e) {
+      this.copied = true
+      this.clickHandler(e)
+      setTimeout(() => {
+        this.copied = false
+      }, 5000)
+    },
+  },
 }
 </script>

pages/diff/_diff.vue

@@ -5,23 +5,46 @@
         <button
           type="button"
           @click="copyUrlToClipboard"
-          class="inline-flex justify-center px-4 py-2 text-white transition-transform transform bg-blue-600 rounded-md shadow-lg outline-none  copy-uri-button align-center focus:ring-4 active:scale-y-75"
+          class="inline-flex justify-center px-4 py-2 text-white transition-transform transform rounded-md shadow-lg outline-none  copy-uri-button align-center focus:ring-4 active:scale-y-75"
+          v-bind:class="{
+            'bg-blue-600 text-white': !copied,
+            'bg-green-500 text-black': copied,
+          }"
         >
-          <svg
-            class="w-6 h-6 mr-2"
-            fill="none"
-            stroke="currentColor"
-            viewBox="0 0 24 24"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <path
-              stroke-linecap="round"
-              stroke-linejoin="round"
-              stroke-width="2"
-              d="M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1"
-            ></path>
-          </svg>
-          <span>Copy link</span>
+          <span class="inline-flex justify-center" v-show="copied">
+            <svg
+              class="w-6 h-6 mr-2"
+              fill="none"
+              stroke="currentColor"
+              viewBox="0 0 24 24"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                stroke-width="2"
+                d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4"
+              ></path>
+            </svg>
+            <span>Copied</span>
+          </span>
+          <span class="inline-flex justify-center" v-show="!copied">
+            <svg
+              class="w-6 h-6 mr-2"
+              fill="none"
+              stroke="currentColor"
+              viewBox="0 0 24 24"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                stroke-width="2"
+                d="M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1"
+              ></path>
+            </svg>
+            <span>Copy link</span>
+          </span>
         </button>
       </template>
     </Navbar>
@@ -98,6 +121,7 @@ export default {
     return {
       lhsDiff: this.lhsDiff,
       rhsDiff: this.rhsDiff,
+      copied: false,
     }
   },
   methods: {
@@ -124,8 +148,10 @@ export default {
         theme: 'success',
       })
       this.$store.commit('toast/toggle')
+      this.copied = true
       setTimeout(() => {
         this.$store.commit('toast/toggle')
+        this.copied = false
       }, 5000)
       setTimeout(() => {
         this.$store.commit('toast/clean')