aboutsummaryrefslogtreecommitdiffhomepage
path: root/src/components
diff options
context:
space:
mode:
authorBastien Wirtz <bastien.wirtz@gmail.com>2022-11-05 15:11:48 +0100
committerBastien Wirtz <bastien.wirtz@gmail.com>2022-11-05 15:11:48 +0100
commitf72c0bc7811dc19499418371e08930747fe087dc (patch)
tree65185009e967b05fe06ad40d5bb88d070bf2f0b2 /src/components
parentbdad8933ff354ed33a4f3c004cf63433309e9597 (diff)
downloadhomer-f72c0bc7811dc19499418371e08930747fe087dc.tar.gz
homer-f72c0bc7811dc19499418371e08930747fe087dc.tar.zst
homer-f72c0bc7811dc19499418371e08930747fe087dc.zip
New Copy to clipboard custom service
Diffstat (limited to 'src/components')
-rw-r--r--src/components/services/CopyToClipboard.vue85
1 files changed, 85 insertions, 0 deletions
diff --git a/src/components/services/CopyToClipboard.vue b/src/components/services/CopyToClipboard.vue
new file mode 100644
index 0000000..18c4dc3
--- /dev/null
+++ b/src/components/services/CopyToClipboard.vue
@@ -0,0 +1,85 @@
1<template>
2 <Generic :item="item">
3 <template #indicator>
4 <div class="status">
5 <i
6 class="fa-regular fa-copy fa-xl"
7 :class="{ scale: animate }"
8 @click="copy()"
9 @animationend="animate = false"
10 ></i>
11 </div>
12 </template>
13 </Generic>
14</template>
15
16<script>
17import service from "@/mixins/service.js";
18import Generic from "./Generic.vue";
19
20export default {
21 name: "CopyToClipboard",
22 mixins: [service],
23 props: {
24 item: Object,
25 },
26 components: {
27 Generic,
28 },
29 data: () => ({
30 animate: false,
31 }),
32 methods: {
33 copy() {
34 navigator.clipboard.writeText(this.item.clipboard);
35 this.animate = true;
36 },
37 },
38};
39</script>
40
41<style scoped lang="scss">
42.scale {
43 -webkit-animation: scale-up 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
44 animation: scale-up 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
45}
46.is-light i {
47 color: black;
48}
49.is-dark i {
50 color: white;
51}
52/**
53 * ----------------------------------------
54 * animation scale-down-center
55 * ----------------------------------------
56 */
57@-webkit-keyframes scale-up {
58 0% {
59 -webkit-transform: scale(1);
60 transform: scale(1);
61 }
62 50% {
63 -webkit-transform: scale(1.25);
64 transform: scale(1.25);
65 }
66 100% {
67 -webkit-transform: scale(1);
68 transform: scale(1);
69 }
70}
71@keyframes scale-up {
72 0% {
73 -webkit-transform: scale(1);
74 transform: scale(1);
75 }
76 50% {
77 -webkit-transform: scale(1.25);
78 transform: scale(1.25);
79 }
80 100% {
81 -webkit-transform: scale(1);
82 transform: scale(1);
83 }
84}
85</style>