From 4ca77a49b9f7f415fc814e6517abe881402344f2 Mon Sep 17 00:00:00 2001 From: Tobias Messner Date: Sat, 19 Nov 2022 18:54:19 +0100 Subject: [PATCH] Add component to copy text within it and use it on the detailed match and theme pages --- website/package.json | 2 +- .../src/components/website/CopyTextButton.vue | 38 +++++++++++++++++++ website/src/main.js | 1 + website/src/views/DetailedMatch.vue | 11 ++++-- website/src/views/sub-views/ThingTheme.vue | 5 ++- website/yarn.lock | 18 ++++----- 6 files changed, 60 insertions(+), 15 deletions(-) create mode 100644 website/src/components/website/CopyTextButton.vue diff --git a/website/package.json b/website/package.json index 660dbfd4..f2cd13bd 100644 --- 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 new file mode 100644 index 00000000..471925cc --- /dev/null +++ b/website/src/components/website/CopyTextButton.vue @@ -0,0 +1,38 @@ + + + + + diff --git a/website/src/main.js b/website/src/main.js index 43719fb2..7660402d 100644 --- a/website/src/main.js +++ b/website/src/main.js @@ -7,6 +7,7 @@ import VueRouter from "vue-router"; import VueSocketIOExt from "vue-socket.io-extended"; import { io } from "socket.io-client"; import { VBTooltip } from "bootstrap-vue"; +import "bootstrap-vue/dist/bootstrap-vue.css"; import VueYoutubeEmbed from "vue-youtube-embed"; import VueCookies from "vue-cookies"; diff --git a/website/src/views/DetailedMatch.vue b/website/src/views/DetailedMatch.vue index d8eb2eb3..af5a8de2 100644 --- a/website/src/views/DetailedMatch.vue +++ b/website/src/views/DetailedMatch.vue @@ -28,8 +28,12 @@
{{ player.name }}
{{ player.pronouns }}
{{ player.pronunciation }}
-
{{ player.discord_tag }}
-
{{ player.battletag }}
+
+ {{player.discord_tag}} +
+
+ {{player.battletag}} +
@@ -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 index a81d3324..ebc9fa77 100644 --- a/website/src/views/sub-views/ThingTheme.vue +++ b/website/src/views/sub-views/ThingTheme.vue @@ -21,7 +21,7 @@
-
{{ color.name }}: {{ color.value }}
+
{{ color.name }}: {{ color.value }}
@@ -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 index 7cba0372..7a4fe0c5 100644 --- a/website/yarn.lock +++ b/website/yarn.lock @@ -2466,21 +2466,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"