Add tooltip dialog to the control tap

stereum-dev · Aug 16, 2023 · 488d07c · 488d07c
1 parent f16278e
commit 488d07c
Show file tree

Hide file tree

Showing 4 changed files with 102 additions and 4 deletions.
diff --git a/launcher/src/components/UI/the-control/AmsterdamComponent.vue b/launcher/src/components/UI/the-control/AmsterdamComponent.vue
@@ -1,5 +1,7 @@
 <template>
   <div class="amsterdam-parent">
+    <tooltip-dialog open="test"></tooltip-dialog>
+
     <div
       class="icoTitle"
       @mouseenter="cursorLocation = `${footerInfo} ${currentNetwork.name}`"
@@ -36,11 +38,12 @@
                 red: n.slotStatus == 'missed',
               }"
               @mouseenter="
-                cursorLocation = `the current epoch: ${currentResult.currentEpoch} and the slot number is ${
+                (cursorLocation = `the current epoch: ${currentResult.currentEpoch} and the slot number is ${
                   n.slotNumber === 0 ? 'null' : n.slotNumber
-                }`
+                }`),
+                  dialogOpen()
               "
-              @mouseleave="cursorLocation = ''"
+              @mouseleave="(cursorLocation = ''), dialogClose()"
             ></div>
           </div>
         </div>
@@ -117,7 +120,12 @@ import { mapWritableState } from "pinia";
 import { useFooter } from "@/store/theFooter";
 import { useControlStore } from "@/store/theControl";
 import ControlService from "@/store/ControlService";
+// import TooltipDialog from "./TooltipDialog.vue";
+
 export default {
+  components: {
+    // TooltipDialog,
+  },
   data() {
     return {
       showSyncInfo: false,
@@ -137,6 +145,7 @@ export default {
     }),
     ...mapWritableState(useFooter, {
       cursorLocation: "cursorLocation",
+      dialog: "dialog",
     }),
     ...mapWritableState(useControlStore, {
       currentSlotData: "currentSlotData",
@@ -204,6 +213,14 @@ export default {
     clearInterval(this.polling);
   },
   methods: {
+    dialogOpen() {
+      this.dialog = true;
+      console.log(this.dialog);
+    },
+    dialogClose() {
+      this.dialog = false;
+    },
+
     initializeProposedBlock() {
       if (this.currentNetwork.id === 4) {
         return Array.from({ length: 16 }, () => ({ slotNumber: 0, slotStatus: "pending" }));
@@ -240,6 +257,7 @@ export default {
   justify-content: center;
   align-content: center;
   color: #c1c1c1;
+  position: relative;
 }
 .icoTitle {
   display: flex;

diff --git a/launcher/src/components/UI/the-control/ControlGrid.vue b/launcher/src/components/UI/the-control/ControlGrid.vue
@@ -1,5 +1,6 @@
 <template>
   <div class="ctrGridParent">
+    <TooltipDialog :open="dialog" />
     <div class="plugins-container">
       <control-plugins>
         <div class="plugins-title">
@@ -113,6 +114,7 @@
 </template>
 
 <script>
+import TooltipDialog from "./TooltipDialog.vue";
 import ControlService from "@/store/ControlService";
 import ControlDashboard from "./ControlDashboard.vue";
 import ControlPlugins from "./ControlPlugins.vue";
@@ -128,7 +130,7 @@ export default {
     ControlDashboard,
     ControlPlugins,
     ControlAlert,
-
+    TooltipDialog,
     TheExpert,
     PrunningModal,
     ResyncModal,
@@ -161,6 +163,7 @@ export default {
 
     ...mapWritableState(useFooter, {
       cursorLocation: "cursorLocation",
+      dialog: "dialog",
     }),
   },
   methods: {
@@ -280,6 +283,7 @@ export default {
   grid-template-rows: 32% 31% 32% 5%;
   z-index: 0;
   text-align: center;
+  position: relative;
 }
 
 .plugins-container {

diff --git a/launcher/src/components/UI/the-control/TooltipDialog.vue b/launcher/src/components/UI/the-control/TooltipDialog.vue
@@ -0,0 +1,75 @@
+<template>
+  <div v-if="open" :class="['parent-dialog', animateClass]">
+    <div class="wrapper">
+      <div class="top-epoch"><span>epoch</span><span>12345</span></div>
+      <div class="bottom-epoch"><span>slot</span><span>34567789</span></div>
+    </div>
+  </div>
+</template>
+
+<script>
+import "animate.css";
+export default {
+  props: {
+    open: {
+      type: Boolean,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      animateClass: "",
+    };
+  },
+  watch: {
+    open(newVal) {
+      if (newVal) {
+        this.animateClass = "animate__animated animate__flipInX";
+        setTimeout(() => {
+          this.animateClass = "";
+        }, 500); // Adjust this delay to match your animation-duration
+      }
+    },
+  },
+};
+</script>
+
+<style scoped>
+.parent-dialog {
+  border-radius: 10px;
+  z-index: 100;
+  position: fixed;
+  top: 10%;
+  left: 40%;
+  height: 25%;
+  width: 30%;
+  border: 3px solid #929292;
+  background: #000;
+  color: #eee;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  animation-duration: 0.5s;
+}
+.wrapper {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+.top-epoch,
+.bottom-epoch {
+  width: 100%;
+  height: 50%;
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+  font-size: 150%;
+  color: #eee;
+  font-weight: 600;
+  text-transform: uppercase;
+}
+.top-epoch > span:nth-child(2) {
+  color: #568d50; /* Change this to the desired font color */
+}
+</style>
diff --git a/launcher/src/store/theFooter.js b/launcher/src/store/theFooter.js
@@ -5,6 +5,7 @@ export const useFooter = defineStore("theFooter", {
     return {
       cursorLocation: "",
       stereumStatus: true,
+      dialog: false,
     };
   },
   getters: {},