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

@@ -3,9 +3,9 @@
     <!-- Dummpy Comment -->
     <TheAppBar />
     <v-main>
-      <v-banner v-if="demo" sticky
+      <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
+        <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 {
+:root {
-  width: 0.25rem;
+  scrollbar-color: transparent transparent;
-}
-
-*::-webkit-scrollbar-track {
-  background: lightgray;
-}
-
-*::-webkit-scrollbar-thumb {
-  background: grey;
 }
 </style>

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 });

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>

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",

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}`)">
+          <TheCopyButton :copy-text="`${baseURL}/sign-up/${item.token}`"/>
-            <v-icon>
-              mdi-content-copy
-            </v-icon>
-          </v-btn>
         </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 {