Merge pull request #152 from ZusorCode/copy-text-component

Add component to copy text
slmnio · Nov 19, 2022 · 595d6c7 · 595d6c7
2 parents 78f3a75 + 4ca77a4
commit 595d6c7
Show file tree

Hide file tree

Showing 5 changed files with 59 additions and 15 deletions.
diff --git a/website/package.json b/website/package.json
@@ -9,7 +9,7 @@
     "build-stage": "vue-cli-service build --mode staging"
   },
   "dependencies": {
-    "bootstrap-vue": "^2.21.2",
+    "bootstrap-vue": "^2.23.1",
     "core-js": "^3.6.5",
     "howler": "^2.2.3",
     "jimp": "^0.16.1",

diff --git a/website/src/components/website/CopyTextButton.vue b/website/src/components/website/CopyTextButton.vue
@@ -0,0 +1,38 @@
+<template>
+    <span class="parent" @click="copyText">
+        <span ref="copy"><slot></slot></span> <i :class="`fas ${recentlyCopied ? 'fa-clipboard-check' : 'fa-clipboard'}`"></i>
+    </span>
+</template>
+
+<script>
+
+export default {
+    name: "CopyTextButton",
+    data: () => ({
+        recentlyCopied: false
+    }),
+    methods: {
+        copyText() {
+            navigator.clipboard.writeText(this.$refs.copy.innerText);
+            this.recentlyCopied = true;
+            setTimeout(() => {
+                this.recentlyCopied = false;
+            }, 1000);
+        }
+    }
+};
+</script>
+
+<style scoped>
+.parent {
+    cursor: pointer;
+}
+
+i {
+    opacity: 0;
+    transition: opacity .1s ease-in-out;
+}
+.parent:hover > i {
+    opacity: 100%;
+}
+</style>
diff --git a/website/src/views/DetailedMatch.vue b/website/src/views/DetailedMatch.vue
@@ -28,8 +28,12 @@
                                     <div :is="player.limited ? 'div' : 'router-link'" class="ct-active" :to="url('player', player)">{{ player.name }} </div>
                                     <span v-if="showCastingInfo && player.pronouns" class="player-pronouns ml-1 badge rounded-pill bg-light text-dark" :data-pronoun="player.pronouns">{{ player.pronouns }}</span></div>
                                 <div class="player-info player-pronounce" v-if="showCastingInfo"><i class="fas fa-w fa-lips player-icon-holder"></i> {{ player.pronunciation }}</div>
-                                <div class="player-info player-dtag" v-if="showPlayerInfo"><i class="fab fa-fw fa-discord player-icon-holder"></i> {{ player.discord_tag }}</div>
-                                <div class="player-info player-btag" v-if="showPlayerInfo"><i class="fab fa-fw fa-battle-net player-icon-holder"></i> {{ player.battletag }}</div>
+                                <div class="player-info player-dtag" v-if="showPlayerInfo">
+                                    <i class="fab fa-fw fa-discord player-icon-holder"></i> <CopyTextButton>{{player.discord_tag}}</CopyTextButton>
+                                </div>
+                                <div class="player-info player-btag" v-if="showPlayerInfo">
+                                    <i class="fab fa-fw fa-battle-net player-icon-holder"></i> <CopyTextButton>{{player.battletag}}</CopyTextButton>
+                                </div>
                             </div>
                         </div>
                     </div>
@@ -159,10 +163,11 @@ import PreviousMatch from "@/components/website/match/PreviousMatch";
 import DetailedMatchStat from "@/components/website/match/DetailedMatchStat";
 import Markdown from "@/components/website/Markdown";
 import { resizedImage, resizedImageNoWrap } from "@/utils/images";
+import CopyTextButton from "@/components/website/CopyTextButton";
 
 export default {
     name: "DetailedMatch",
-    components: { Markdown, PreviousMatch, ThemeLogo, MapDisplay, stat: DetailedMatchStat },
+    components: { CopyTextButton, Markdown, PreviousMatch, ThemeLogo, MapDisplay, stat: DetailedMatchStat },
     props: ["id"],
     data: () => ({
         showPlayerInfo: false,

diff --git a/website/src/views/sub-views/ThingTheme.vue b/website/src/views/sub-views/ThingTheme.vue
@@ -21,7 +21,7 @@
         <div v-if="colors.length" class="color-list mb-3">
             <div class="color" v-for="color in colors" v-bind:key="color.name">
                 <div class="color-swatch" :style="{backgroundColor: color.value}"></div>
-                <div class="color-name">{{ color.name }}: <code>{{ color.value }}</code></div>
+                <div class="color-name">{{ color.name }}: <CopyTextButton><code>{{ color.value }}</code></CopyTextButton> </div>
             </div>
         </div>
 
@@ -80,6 +80,7 @@ import ContentThing from "@/components/website/ContentThing";
 import StandingsTeam from "@/components/broadcast/StandingsTeam";
 import { resizedImageNoWrap } from "@/utils/images";
 import { getDataServerAddress } from "@/utils/fetch";
+import CopyTextButton from "@/components/website/CopyTextButton";
 // import RecoloredHero from "@/components/broadcast/RecoloredHero";
 // import { ReactiveArray, ReactiveRoot } from "@/utils/reactive";
 // import HeroColorControls from "@/components/broadcast/HeroColorControls";
@@ -90,7 +91,7 @@ function cleanKey(key) {
 
 export default {
     name: "ThingTheme",
-    components: { /* HeroColorControls, RecoloredHero, */ BracketTeam, IngameTeam, ContentRow, ContentThing, StandingsTeam },
+    components: { CopyTextButton, /* HeroColorControls, RecoloredHero, */ BracketTeam, IngameTeam, ContentRow, ContentThing, StandingsTeam },
     props: ["team", "event"],
     computed: {
         // heroes() {

diff --git a/website/yarn.lock b/website/yarn.lock
@@ -2473,21 +2473,21 @@ boolbase@^1.0.0, boolbase@~1.0.0:
   resolved "https://registry.yarnpkg.com/boolbase/-/boolbase-1.0.0.tgz#68dff5fbe60c51eb37725ea9e3ed310dcc1e776e"
   integrity sha1-aN/1++YMUes3cl6p4+0xDcwed24=
 
-bootstrap-vue@^2.21.2:
-  version "2.21.2"
-  resolved "https://registry.yarnpkg.com/bootstrap-vue/-/bootstrap-vue-2.21.2.tgz#ec38f66c3a2205becccddb6158a991d96509ed0b"
-  integrity sha512-0Exe+4MZysqhZNXIKf4TzkvXaupxh9EHsoCRez0o5Dc0J7rlafayOEwql63qXv74CgZO8E4U8ugRNJko1vMvNw==
+bootstrap-vue@^2.23.1:
+  version "2.23.1"
+  resolved "https://registry.yarnpkg.com/bootstrap-vue/-/bootstrap-vue-2.23.1.tgz#8f866f7cda27eb0e7e13a0bea8d55d8fc7a82199"
+  integrity sha512-SEWkG4LzmMuWjQdSYmAQk1G/oOKm37dtNfjB5kxq0YafnL2W6qUAmeDTcIZVbPiQd2OQlIkWOMPBRGySk/zGsg==
   dependencies:
     "@nuxt/opencollective" "^0.3.2"
-    bootstrap ">=4.5.3 <5.0.0"
+    bootstrap "^4.6.1"
     popper.js "^1.16.1"
     portal-vue "^2.1.7"
     vue-functional-data-merge "^3.1.0"
 
-"bootstrap@>=4.5.3 <5.0.0":
-  version "4.6.0"
-  resolved "https://registry.yarnpkg.com/bootstrap/-/bootstrap-4.6.0.tgz#97b9f29ac98f98dfa43bf7468262d84392552fd7"
-  integrity sha512-Io55IuQY3kydzHtbGvQya3H+KorS/M9rSNyfCGCg9WZ4pyT/lCxIlpJgG1GXW/PswzC84Tr2fBYi+7+jFVQQBw==
+bootstrap@^4.6.1:
+  version "4.6.2"
+  resolved "https://registry.yarnpkg.com/bootstrap/-/bootstrap-4.6.2.tgz#8e0cd61611728a5bf65a3a2b8d6ff6c77d5d7479"
+  integrity sha512-51Bbp/Uxr9aTuy6ca/8FbFloBUJZLHwnhTcnjIeRn2suQWsWzcuJhGjKDB5eppVte/8oCdOL3VuwxvZDUggwGQ==
 
 brace-expansion@^1.1.7:
   version "1.1.11"