refactor: AdminToolのツールチップをライブラリのものにした

osushi-academy · Mar 4, 2022 · 97f8424 · 97f8424
1 parent 97146e3
commit 97f8424
Show file tree

Hide file tree

Showing 3 changed files with 39 additions and 4 deletions.
diff --git a/app/front/components/AdminTool/AdminTool.vue b/app/front/components/AdminTool/AdminTool.vue
@@ -78,26 +78,29 @@
                 topicStateItems[topic.id] === 'not-started' ||
                 topicStateItems[topic.id] === 'paused'
               "
+              v-tippy
               aria-label="トピックを開始する"
-              title="トピックを開始する"
+              content="トピックを開始する"
               @click="clickPlayPauseButton(topic.id)"
             >
               <PlayCircleIcon aria-hidden="true"></PlayCircleIcon>
             </button>
             <!-- ongoing -->
             <template v-else-if="topicStateItems[topic.id] === 'ongoing'">
               <button
+                v-tippy
                 class="pause"
-                title="トピックを一時停止する"
+                content="トピックを一時停止する"
                 aria-label="トピックを一時停止する"
                 @click="clickPlayPauseButton(topic.id)"
               >
                 <PauseCircleIcon aria-hidden="true"></PauseCircleIcon>
               </button>
               <button
+                v-tippy
                 class="danger"
                 aria-label="トピックを終了する"
-                title="トピックを終了する"
+                content="トピックを終了する"
                 @click="clickFinishButton(topic.id)"
               >
                 <StopCircleIcon aria-hidden="true"></StopCircleIcon>
@@ -106,8 +109,9 @@
             <!-- finished -->
             <button
               v-else-if="topicStateItems[topic.id] === 'finished'"
+              v-tippy
               aria-label="トピックを再度開始する"
-              title="トピックを再度開始する"
+              content="トピックを再度開始する"
               class="reopen"
               @click="clickRestartButton(topic.id)"
             >
@@ -152,6 +156,8 @@ import {
   CheckIcon,
   AlertCircleIcon,
 } from "vue-feather-icons"
+// @ts-ignore
+import VueTippy, { TippyComponent } from "vue-tippy"
 import ICONS from "@/utils/icons"
 import {
   UserItemStore,
@@ -166,6 +172,9 @@ type DataType = {
   copyAdminCompleted: boolean
 }
 
+Vue.use(VueTippy)
+Vue.component("Tippy", TippyComponent)
+
 export default Vue.extend({
   name: "AdminTool",
   components: {

diff --git a/app/front/package.json b/app/front/package.json
@@ -30,6 +30,7 @@
     "vue-feather-icons": "^5.1.0",
     "vue-js-modal": "^2.0.0-rc.6",
     "vue-material-design-icons": "^4.13.0",
+    "vue-tippy": "v4",
     "vuedraggable": "^2.24.3"
   },
   "devDependencies": {

diff --git a/yarn.lock b/yarn.lock
@@ -8358,6 +8358,11 @@ humanize-ms@^1.2.1:
   dependencies:
     ms "^2.0.0"
 
+humps@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/humps/-/humps-2.0.1.tgz#dd02ea6081bd0568dc5d073184463957ba9ef9aa"
+  integrity sha1-3QLqYIG9BWjcXQcxhEY5V7qe+ao=
+
 [email protected], iconv-lite@^0.4.24:
   version "0.4.24"
   resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.4.24.tgz#2022b4b25fbddc21d2f524974a474aafe733908b"
@@ -11751,6 +11756,11 @@ pnp-webpack-plugin@^1.6.4:
   dependencies:
     ts-pnp "^1.1.6"
 
+popper.js@^1.14.7:
+  version "1.16.1"
+  resolved "https://registry.yarnpkg.com/popper.js/-/popper.js-1.16.1.tgz#2a223cb3dc7b6213d740e40372be40de43e65b1b"
+  integrity sha512-Wb4p1J4zyFTbM+u6WuO4XstYx4Ky9Cewe4DWrel7B0w6VVICvPwdOpotjzcf6eD8TsckVnIMNONQyPIUFOUbCQ==
+
 posix-character-classes@^0.1.0:
   version "0.1.1"
   resolved "https://registry.yarnpkg.com/posix-character-classes/-/posix-character-classes-0.1.1.tgz#01eac0fe3b5af71a2a6c02feabb8c1fef7e00eab"
@@ -14532,6 +14542,13 @@ tiny-inflate@^1.0.0:
   resolved "https://registry.yarnpkg.com/tiny-inflate/-/tiny-inflate-1.0.3.tgz#122715494913a1805166aaf7c93467933eea26c4"
   integrity sha512-pkY1fj1cKHb2seWDy0B16HeWyczlJA9/WW3u3c4z/NiWDsO3DOU5D7nhTLE9CF0yXv/QZFY7sEJmj24dK+Rrqw==
 
+tippy.js@^4.3.5:
+  version "4.3.5"
+  resolved "https://registry.yarnpkg.com/tippy.js/-/tippy.js-4.3.5.tgz#882bff8d92f09bb0546d2826d5668c0560006f54"
+  integrity sha512-NDq3efte8nGK6BOJ1dDN1/WelAwfmh3UtIYXXck6+SxLzbIQNZE/cmRSnwScZ/FyiKdIcvFHvYUgqmoGx8CcyA==
+  dependencies:
+    popper.js "^1.14.7"
+
 tmp@^0.0.33:
   version "0.0.33"
   resolved "https://registry.yarnpkg.com/tmp/-/tmp-0.0.33.tgz#6d34335889768d21b2bcda0aa277ced3b1bfadf9"
@@ -15325,6 +15342,14 @@ vue-template-es2015-compiler@^1.6.0, vue-template-es2015-compiler@^1.9.0:
   resolved "https://registry.yarnpkg.com/vue-template-es2015-compiler/-/vue-template-es2015-compiler-1.9.1.tgz#1ee3bc9a16ecbf5118be334bb15f9c46f82f5825"
   integrity sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw==
 
+vue-tippy@v4:
+  version "4.13.0"
+  resolved "https://registry.yarnpkg.com/vue-tippy/-/vue-tippy-4.13.0.tgz#02634c4901c6dd270432f1a53d0c07abfe8851fd"
+  integrity sha512-olKDi2plk0Yjs8A/31FwjWHaZKpwVC0/GbDXJH6tSWLEStOnIOW4M79P07aM4KuuCZIPVmuZWXP8zmLGS9Z0pg==
+  dependencies:
+    humps "^2.0.1"
+    tippy.js "^4.3.5"
+
 vue@^2.0.0, vue@^2.5.16, vue@^2.6.12:
   version "2.6.14"
   resolved "https://registry.yarnpkg.com/vue/-/vue-2.6.14.tgz#e51aa5250250d569a3fbad3a8a5a687d6036e235"