From 56700598668fa927bb181d7c0d607a55e22350a0 Mon Sep 17 00:00:00 2001
From: PAJohnson <pajohns4@ncsu.edu>
Date: Thu, 17 Sep 2020 19:23:08 -0400
Subject: [PATCH] Added tooltips for config options.

---
 GUI/package-lock.json                    | 13 +++++++++
 GUI/package.json                         |  1 +
 GUI/src/assets/wizard/wizard.js          |  4 +--
 GUI/src/components/wizard/wizardPage.vue | 37 +++++++++++++++++++++++-
 GUI/src/main.js                          |  5 +++-
 5 files changed, 56 insertions(+), 4 deletions(-)

diff --git a/GUI/package-lock.json b/GUI/package-lock.json
index 5a7294a1..f7d39709 100644
--- a/GUI/package-lock.json
+++ b/GUI/package-lock.json
@@ -9406,6 +9406,11 @@
         "ts-pnp": "^1.1.6"
       }
     },
+    "popper.js": {
+      "version": "1.15.0",
+      "resolved": "https://registry.npmjs.org/popper.js/-/popper.js-1.15.0.tgz",
+      "integrity": "sha512-w010cY1oCUmI+9KwwlWki+r5jxKfTFDVoadl7MSrIujHU5MJ5OR6HTDj6Xo8aoR/QsA56x8jKjA59qGH4ELtrA=="
+    },
     "portfinder": {
       "version": "1.0.26",
       "resolved": "https://registry.npmjs.org/portfinder/-/portfinder-1.0.26.tgz",
@@ -13141,6 +13146,14 @@
         "vue-clickaway": "^2.2.2"
       }
     },
+    "vue-directive-tooltip": {
+      "version": "1.6.3",
+      "resolved": "https://registry.npmjs.org/vue-directive-tooltip/-/vue-directive-tooltip-1.6.3.tgz",
+      "integrity": "sha512-aSdlBIdibctL+Tw+2j+IVUtz/fOZPLMQz0xxSoIGOA223WsPahiybSykJHx6QxtPzWq2phE/OZaCTmvMOVPyeA==",
+      "requires": {
+        "popper.js": "1.15.0"
+      }
+    },
     "vue-eslint-parser": {
       "version": "7.1.0",
       "resolved": "https://registry.npmjs.org/vue-eslint-parser/-/vue-eslint-parser-7.1.0.tgz",
diff --git a/GUI/package.json b/GUI/package.json
index 92be4558..3c8b6db8 100644
--- a/GUI/package.json
+++ b/GUI/package.json
@@ -25,6 +25,7 @@
     "vue": "^2.6.11",
     "vue-chartjs": "^3.5.0",
     "vue-context": "^5.2.0",
+    "vue-directive-tooltip": "^1.6.3",
     "vue-json-component": "^0.4.1",
     "vue-slider-component": "^3.2.2",
     "vue-socket.io": "^3.0.9",
diff --git a/GUI/src/assets/wizard/wizard.js b/GUI/src/assets/wizard/wizard.js
index 69202480..3372542f 100644
--- a/GUI/src/assets/wizard/wizard.js
+++ b/GUI/src/assets/wizard/wizard.js
@@ -191,7 +191,7 @@ export let pages = {
                 data: {
                     axis: "axis0",
                 },
-                tooltip: "Generic incremental encoder without index. Set cpr to 4 * PPR (pulses per revolution).",
+                tooltip: "Generic incremental encoder with index. Set cpr to 4 * PPR (pulses per revolution).",
             },
         ],
         pageComponents: [
@@ -218,7 +218,7 @@ export let pages = {
         title: "Control mode for Axis 0",
         link: "Control Modes 0",
         component: "wizardPage",
-        next: "Misc_0",
+        next: "Input_0",
         back: "Encoder_0",
         requirements: [],
         choices: [
diff --git a/GUI/src/components/wizard/wizardPage.vue b/GUI/src/components/wizard/wizardPage.vue
index 3fd5401c..9c9d65e5 100644
--- a/GUI/src/components/wizard/wizardPage.vue
+++ b/GUI/src/components/wizard/wizardPage.vue
@@ -6,6 +6,12 @@
       <wizardChoice
         v-for="choice in choices"
         v-bind:class="{chosen: selectedChoice == choice.text, unchosen: selectedChoice != choice.text}"
+        v-tooltip.top="{
+          content: choice.tooltip,
+          class: 'tooltip-custom tooltip-other-custom fade-in',
+          delay: 0,
+          visible: choice.tooltip!=null,
+        }"
         :key="choice.id"
         :imageUrl="choice.imageURL"
         :text="choice.text"
@@ -18,6 +24,12 @@
           v-bind:data="customComponent.data"
           v-bind:config="config"
           v-bind:axis="axis"
+          v-tooltip.top="{
+            content: customComponent.tooltip,
+            class: 'tooltip-custom tooltip-other-custom fade-in',
+            delay: 0,
+            visible: choice.tooltip!=null,
+          }"
           :key="customComponent.id"
           v-on:click.native="selectedChoice=customComponent.component"
           v-on:choice="handleCustomChoice"
@@ -94,7 +106,7 @@ export default {
 };
 </script>
 
-<style scoped>
+<style>
 .wizard-page {
   display: flex;
   flex-direction: column;
@@ -124,4 +136,27 @@ export default {
 .wizard-title {
   font-weight: bold;
 }
+
+.vue-tooltip.tooltip-custom {
+  background-color:  lightyellow;/* var(--fg-color); */
+  border-radius: 0px;
+  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.4);
+  font-family: "Roboto", sans-serif;
+  color: black;
+}
+
+.vue-tooltip.tooltip-custom .tooltip-arrow {
+  display: none;
+}
+
+.vue-tooltip.fade-in {
+  opacity: 0;
+  animation: fadeIn ease 0.25s;
+  animation-fill-mode: both;
+}
+
+@keyframes fadeIn {
+  from {opacity: 0}
+  to {opacity: 1}
+}
 </style>
\ No newline at end of file
diff --git a/GUI/src/main.js b/GUI/src/main.js
index 6879204d..b74a0937 100644
--- a/GUI/src/main.js
+++ b/GUI/src/main.js
@@ -1,9 +1,12 @@
 import Vue from 'vue'
 import App from './App.vue'
 import store from './store'
-
+import Tooltip from 'vue-directive-tooltip';
+import 'vue-directive-tooltip/dist/vueDirectiveTooltip.css';
+            
 
 Vue.config.productionTip = false
+Vue.use(Tooltip);
 
 new Vue({
   store,