From 5f074fe5d99e6ae877f82a06370c54c40d23595b Mon Sep 17 00:00:00 2001
From: Hayden <64056131+hay-kot@users.noreply.github.com>
Date: Tue, 11 May 2021 20:56:30 -0800
Subject: [PATCH] Feature/copy icon (#406)

* add copy tooltip

* transparent scrollbar

* add version to header

* localize

Co-authored-by: hay-kot <hay-kot@pm.me>
---
 frontend/src/App.vue                          | 18 ++---
 .../src/components/Recipe/ContextMenu.vue     |  2 +-
 .../components/UI/Buttons/TheCopyButton.vue   | 69 +++++++++++++++++++
 frontend/src/locales/messages/en-US.json      |  1 +
 .../Admin/ManageUsers/TheSignUpTable.vue      |  9 +--
 5 files changed, 79 insertions(+), 20 deletions(-)
 create mode 100644 frontend/src/components/UI/Buttons/TheCopyButton.vue

diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index 9bfb05464e45..2f9f7214d1be 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -3,9 +3,9 @@
     <!-- Dummpy Comment -->
     <TheAppBar />
     <v-main>
-      <v-banner v-if="demo" sticky
-        ><div class="text-center"><b> This is a Demo</b> | Username: changeme@email.com | Password: demo</div></v-banner
-      >
+      <v-banner v-if="!demo" sticky>
+        <div class="text-center"><b> This is a Demo of the v0.5.0 (BETA) </b> | Username: changeme@email.com | Password: demo</div>
+      </v-banner>
       <GlobalSnackbar />
       <router-view></router-view>
     </v-main>
@@ -73,15 +73,7 @@ export default {
 </script>
 
 <style>
-*::-webkit-scrollbar {
-  width: 0.25rem;
-}
-
-*::-webkit-scrollbar-track {
-  background: lightgray;
-}
-
-*::-webkit-scrollbar-thumb {
-  background: grey;
+:root {
+  scrollbar-color: transparent transparent;
 }
 </style>
diff --git a/frontend/src/components/Recipe/ContextMenu.vue b/frontend/src/components/Recipe/ContextMenu.vue
index 25cb8c8a0529..ca7a40c80847 100644
--- a/frontend/src/components/Recipe/ContextMenu.vue
+++ b/frontend/src/components/Recipe/ContextMenu.vue
@@ -129,7 +129,7 @@ export default {
     },
     async downloadJson() {
       const recipe = await api.recipes.requestDetails(this.slug);
-      this.downloadString(JSON.stringify(recipe, "", 4), "text/json", recipe.slug+'.json');
+      this.downloadString(JSON.stringify(recipe, "", 4), "text/json", recipe.slug + ".json");
     },
     downloadString(text, fileType, fileName) {
       let blob = new Blob([text], { type: fileType });
diff --git a/frontend/src/components/UI/Buttons/TheCopyButton.vue b/frontend/src/components/UI/Buttons/TheCopyButton.vue
new file mode 100644
index 000000000000..0877731001d5
--- /dev/null
+++ b/frontend/src/components/UI/Buttons/TheCopyButton.vue
@@ -0,0 +1,69 @@
+<template>
+  <v-tooltip
+    ref="copyToolTip"
+    v-model="show"
+    color="success lighten-1"
+    right
+    :open-on-hover="false"
+    :open-on-click="true"
+    close-delay="500"
+    transition="slide-y-transition"
+  >
+    <template v-slot:activator="{ on }">
+      <v-btn
+        icon
+        color="primary"
+        @click="
+          on.click;
+          textToClipboard();
+        "
+        @blur="on.blur"
+        retain-focus-on-click
+      >
+        <v-icon>mdi-content-copy</v-icon>
+      </v-btn>
+    </template>
+    <span>
+      <v-icon left dark>
+        mdi-clipboard-check
+      </v-icon>
+      {{ $t('general.coppied')}}!
+      
+    </span>
+  </v-tooltip>
+</template>
+
+<script>
+export default {
+  props: {
+    copyText: {
+      default: "Default Copy Text",
+    },
+  },
+  data() {
+    return {
+      show: false,
+    };
+  },
+
+  methods: {
+    toggleBlur() {
+      this.$refs.copyToolTip.deactivate();
+    },
+    textToClipboard() {
+      this.show = true;
+      const copyText = this.copyText;
+      navigator.clipboard.writeText(copyText).then(
+        () => console.log("Copied", copyText),
+        () => console.log("Copied Failed", copyText)
+      );
+      setTimeout(() => {
+        this.toggleBlur();
+      }, 500);
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+</style>
\ No newline at end of file
diff --git a/frontend/src/locales/messages/en-US.json b/frontend/src/locales/messages/en-US.json
index 816bf4b6b9b1..58fba36e838c 100644
--- a/frontend/src/locales/messages/en-US.json
+++ b/frontend/src/locales/messages/en-US.json
@@ -49,6 +49,7 @@
     "confirm": "Confirm",
     "create": "Create",
     "created": "Created",
+    "coppied": "Coppied",
     "current-parenthesis": "(Current)",
     "custom": "Custom",
     "dashboard": "Dashboard",
diff --git a/frontend/src/pages/Admin/ManageUsers/TheSignUpTable.vue b/frontend/src/pages/Admin/ManageUsers/TheSignUpTable.vue
index 21138a520b1e..6610935c2003 100644
--- a/frontend/src/pages/Admin/ManageUsers/TheSignUpTable.vue
+++ b/frontend/src/pages/Admin/ManageUsers/TheSignUpTable.vue
@@ -70,11 +70,7 @@
       <v-data-table :headers="headers" :items="links" sort-by="calories">
         <template v-slot:item.token="{ item }">
           {{ `${baseURL}/sign-up/${item.token}` }}
-          <v-btn icon class="mr-1" small color="accent" @click="updateClipboard(`${baseURL}/sign-up/${item.token}`)">
-            <v-icon>
-              mdi-content-copy
-            </v-icon>
-          </v-btn>
+          <TheCopyButton :copy-text="`${baseURL}/sign-up/${item.token}`"/>
         </template>
         <template v-slot:item.admin="{ item }">
           <v-btn small :color="item.admin ? 'success' : 'error'" text>
@@ -98,11 +94,12 @@
 </template>
 
 <script>
+import TheCopyButton from "@/components/UI/Buttons/TheCopyButton";
 import ConfirmationDialog from "@/components/UI/Dialogs/ConfirmationDialog";
 import { api } from "@/api";
 import { validators } from "@/mixins/validators";
 export default {
-  components: { ConfirmationDialog },
+  components: { ConfirmationDialog, TheCopyButton },
   mixins: [validators],
   data() {
     return {