refactor: moved puttoclipboard function to utils.ts

Author: technikhil314

components/diffActionBar.vue

@@ -8,7 +8,7 @@
       py-2
       mb-4
       sticky
-      top-[80px]
+      top-[70px]
       dark:bg-gray-700
       bg-gray-300
       dark:bg-opacity-50
@@ -43,7 +43,7 @@
       <div id="nextDiffSection" class="inline-flex items-center gap-1">
         <button
           id="nextDiff"
-          class="inline-flex items-center justify-center px-1 py-1 text-sm text-gray-600 transition-transform transform bg-gray-300 border border-gray-800 rounded-sm outline-none  dark:border-gray-400 dark:text-white dark:bg-gray-800 align-center focus:ring-4 active:scale-y-75"
+          class="inline-flex items-center justify-center px-1 py-1 text-sm text-gray-600 transition-transform transform bg-gray-300 border border-gray-800 rounded-sm outline-none  dark:border-gray-400 dark:text-white dark:bg-gray-800 align-center focus:ring-4 active:scale-y-75 hover:scale-105 hover:shadow-lg"
           aria-label="Go to next diff"
           type="button"
           @click="goToNextDiff"
@@ -68,7 +68,7 @@
       <div id="prevDiffSection" class="inline-flex items-center gap-1">
         <button
           id="prevDiff"
-          class="inline-flex items-center justify-center px-1 py-1 text-sm text-gray-600 transition-transform transform bg-gray-300 border border-gray-800 rounded-sm outline-none  dark:border-gray-400 dark:text-white dark:bg-gray-800 align-center focus:ring-4 active:scale-y-75"
+          class="inline-flex items-center justify-center px-1 py-1 text-sm text-gray-600 transition-transform transform bg-gray-300 border border-gray-800 rounded-sm outline-none  dark:border-gray-400 dark:text-white dark:bg-gray-800 align-center focus:ring-4 active:scale-y-75 hover:scale-105 hover:shadow-lg"
           aria-label="Go to previous diff"
           type="button"
           @click="goToPreviousDiff"
@@ -94,7 +94,7 @@
     <div>
       <button
         type="button"
-        class="inline-flex items-center justify-center gap-1 p-2 text-sm transition-transform transform rounded-md shadow outline-none  justify-self-end focus:ring-4 active:scale-y-75"
+        class="inline-flex items-center justify-center gap-1 p-2 text-sm transition-transform transform rounded-md shadow outline-none  justify-self-end focus:ring-4 active:scale-y-75 hover:scale-105 hover:shadow-lg copy-uri-button"
         aria-label="Copy url to clipboard"
         :class="{
           'bg-blue-500 text-white': !copied,
@@ -142,6 +142,7 @@
 </template>
 
 <script>
+import { putToClipboard } from '~/helpers/utils'
 export default {
   data() {
     return {
@@ -181,32 +182,12 @@ export default {
     }
   },
   methods: {
-    putToClipboard(textToPut, toastContent) {
-      navigator.clipboard.writeText(textToPut)
-      this.$store.commit('toast/show', {
-        show: true,
-        content: toastContent,
-        iconHTML: `
-          <svg
-            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 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"
-            ></path>
-          </svg>
-        `,
-        theme: 'success',
-      })
-    },
     copyUrlToClipboard() {
-      this.putToClipboard(window.location.href, 'Link copied to your clipboard')
+      putToClipboard(
+        window.location.href,
+        'Link copied to your clipboard',
+        this.$store
+      )
       this.copied = true
       setTimeout(() => {
         this.copied = false
@@ -262,3 +243,8 @@ export default {
   },
 }
 </script>
+<style lang="scss">
+.copy-uri-button:hover svg {
+  @apply rotate-12;
+}
+</style>

components/navbar.vue

@@ -3,7 +3,10 @@
     class="sticky top-0 left-0 right-0 z-10 text-gray-800 shadow-lg  dark:shadow-dark bg-gray-50 dark:bg-gray-900 dark:text-gray-50"
   >
     <div class="container flex items-center py-4 m-auto">
-      <div v-if="showBackButton" class="hidden mr-4 md:block">
+      <div
+        v-if="showBackButton"
+        class="hidden mr-4 md:block hover:scale-110 filter hover:drop-shadow-md"
+      >
         <NuxtLink to="/">
           <svg
             class="w-6 h-6"
@@ -62,7 +65,7 @@
           <slot name="right" />
           <button
             type="button"
-            class="inline-flex items-center justify-center ml-4 bg-transparent border-2 border-gray-700 rounded-full shadow-lg  w-9 h-9 active:scale-y-75"
+            class="inline-flex items-center justify-center ml-4 bg-transparent border-2 border-gray-700 rounded-full shadow-lg  w-9 h-9 active:scale-y-75 hover:scale-105 hover:shadow-lg"
             aria-label="Toggle Dark Mode"
             @click="toggleDarkMode"
           >
@@ -104,7 +107,6 @@
         <ul class="flex items-center justify-end">
           <li class="relative inline-block ml-2 lg:ml-4">
             <a
-              class=""
               href="https://github.com/technikhil314/offline-diff-viewer"
               title="go to github repository of this open source project"
             >

components/singleDiff.vue

@@ -29,6 +29,7 @@
 </template>
 
 <script>
+import { putToClipboard } from '~/helpers/utils'
 export default {
   props: {
     diff: {
@@ -55,11 +56,12 @@ export default {
   },
   methods: {
     copyTextToClipboard(e) {
-      this.putToClipboard(
+      putToClipboard(
         e.currentTarget.parentNode.parentNode.innerText
           .split('\n\n')
           .join('\n'),
-        'Text copied to your clipboard'
+        'Text copied to your clipboard',
+        this.$store
       )
     },
   },

helpers/utils.ts

@@ -1,3 +1,6 @@
+import { Store } from 'vuex'
+import { ToastState } from '~/store/toast'
+
 export function doUrlSafeBase64(decoded: string) {
   return decoded.replace(/\+/g, '-').replace(/\//g, '_').replace(/=+$/, '')
 }
@@ -26,3 +29,32 @@ export function escapeHtml(unsafe: string) {
     .replace(/"/g, '"')
     .replace(/'/g, ''')
 }
+
+export function putToClipboard(
+  textToPut: string,
+  toastContent: string,
+  store: Store<ToastState>
+) {
+  navigator.clipboard.writeText(textToPut)
+  store.commit('toast/show', {
+    show: true,
+    content: toastContent,
+    iconHTML: `
+      <svg
+        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 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"
+        ></path>
+      </svg>
+    `,
+    theme: 'success',
+  })
+}

pages/v1/diff.vue

@@ -132,40 +132,5 @@ export default {
       driver.start()
     }
   },
-  methods: {
-    putToClipboard(textToPut, toastContent) {
-      navigator.clipboard.writeText(textToPut)
-      this.$store.commit('toast/show', {
-        show: true,
-        content: toastContent,
-        iconHTML: `
-          <svg
-            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 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"
-            ></path>
-          </svg>
-        `,
-        theme: 'success',
-      })
-    },
-  },
 }
 </script>
-
-<style lang="scss">
-.copy-uri-button:hover {
-  @apply shadow-lg;
-  svg {
-    @apply scale-110 rotate-12;
-  }
-}
-</style>