UPDATE: nodata comp. tooltip context dynamic (#975)

* UPDATE: nodata comp. tooltip context dynamic * UPDATE: tooltip for meevboost censore message modifypanel comp. * ADD: meevboost censore tooltip to addpanel comp. * ADD: mevboost censored tooltip to mevboost modal * ADD: select Id show tooltip
stereum-dev · Dec 21, 2022 · 1d4c000 · 1d4c000
1 parent 1cd9fee
commit 1d4c000
Show file tree

Hide file tree

Showing 5 changed files with 177 additions and 24 deletions.
diff --git a/launcher/package-lock.json b/launcher/package-lock.json
diff --git a/launcher/src/components/UI/node-manage/AddPanel.vue b/launcher/src/components/UI/node-manage/AddPanel.vue
@@ -39,11 +39,13 @@
                 v-model="checkedRelays"
               />
               <label :for="relay.id">{{ relay.name }}</label>
-              <img
-                src="/img/icon/header-icons/usa1.png"
-                alt="flag-icon"
-                v-if="relay.freeCencorship == false"
-              />
+              <div class="iconBox" data-tooltip="OFAC Compliant - censored">
+                <img
+                  src="/img/icon/header-icons/usa1.png"
+                  alt="flag-icon"
+                  v-if="relay.freeCencorship == false"
+                />
+              </div>
             </div>
           </div>
         </div>
@@ -216,7 +218,9 @@ export default {
       );
       this.$emit("saveConfig", {
         network:
-          this.configNetwork.network === "testnet" ? "goerli" : this.configNetwork.network,
+          this.configNetwork.network === "testnet"
+            ? "goerli"
+            : this.configNetwork.network,
         installDir: this.installationPath
           ? this.installationPath
           : "/opt/stereum",
@@ -270,6 +274,37 @@ export default {
 };
 </script>
 <style scoped>
+* {
+  box-sizing: border-box;
+}
+[data-tooltip] {
+  position: relative;
+  cursor: default;
+}
+[data-tooltip]::after {
+  position: absolute;
+  width: max-content;
+  left: -950%;
+  top: 180%;
+  text-align: center;
+  content: attr(data-tooltip);
+  color: #eee;
+  background: rgba(170, 0, 30, 0.8);
+  border-radius: 5px;
+  font-size: 70%;
+  font-weight: 600;
+  padding: 20% 35%;
+  border: 1px solid #929292;
+  visibility: hidden;
+  opacity: 0;
+  transform: translateY(20%);
+  transition: opacity 0.3s transform 0.2s;
+}
+[data-tooltip]:hover::after {
+  opacity: 1;
+  visibility: visible;
+  transform: rotateY(0);
+}
 .addParent {
   grid-column: 1;
   width: 100%;
@@ -935,7 +970,10 @@ export default {
   color: #aaaaaa;
   cursor: pointer;
 }
-.relaysBoxContent .relay img {
+.iconBox {
+  display: flex;
+  justify-content: center;
+  align-items: center;
   width: 10%;
   height: 65%;
   margin-right: 5px;

diff --git a/launcher/src/components/UI/node-manage/ModifyPanel.vue b/launcher/src/components/UI/node-manage/ModifyPanel.vue
@@ -8,8 +8,13 @@
       >
         <img src="/img/icon/manage-node-icons/replace.png" alt="icon" />
       </div>
+
       <div class="service">
-        <img :src="plugin.icon" alt="icon" />
+        <img
+          :src="plugin.icon"
+          alt="icon"
+          data-tooltip="OFAC Compliant - censored"
+        />
         <div class="service-details">
           <span class="serviceName">{{ plugin.name }}</span>
           <p class="category">
@@ -18,6 +23,7 @@
           </p>
         </div>
       </div>
+
       <div class="configBox">
         <div
           class="relaysBox"
@@ -39,11 +45,13 @@
                 v-model="checkedRelays"
               />
               <label :for="relay.id">{{ relay.name }}</label>
-              <img
-                src="/img/icon/header-icons/usa1.png"
-                alt="flag-icon"
-                v-if="relay.freeCencorship == false"
-              />
+              <div class="iconBox" data-tooltip="OFAC Compliant - censored">
+                <img
+                  src="/img/icon/header-icons/usa1.png"
+                  alt="flag-icon"
+                  v-if="relay.freeCencorship == false"
+                />
+              </div>
             </div>
           </div>
         </div>
@@ -126,6 +134,7 @@
           </div>
           <div
             class="clientAddBox"
+            :serviceId-tooltip="service.config.serviceID"
             v-if="switchHandler(service)"
             @click="changeSelectedServiceToConnect(service)"
           >
@@ -300,9 +309,65 @@ export default {
 };
 </script>
 <style scoped>
-html {
+* {
   box-sizing: border-box;
 }
+[serviceId-tooltip] {
+  position: relative;
+  cursor: default;
+}
+[serviceId-tooltip]::after {
+  position: absolute;
+  width: max-content;
+  text-align: center;
+  content: attr(serviceId-tooltip);
+  color: #eee;
+  background: #000;
+  bottom: 90%;
+  left: 0;
+  padding: 2% 5%;
+  border: 1px solid #929292;
+  border-radius: 5px;
+  font-weight: 400;
+  font-size: 50%;
+  visibility: hidden;
+  opacity: 0;
+  transform: translateY(20%);
+  transition: opacity 0.3s transform 0.2s;
+}
+[serviceId-tooltip]:hover::after {
+  opacity: 1;
+  visibility: visible;
+  transform: rotateY(0);
+}
+[data-tooltip] {
+  position: relative;
+  cursor: default;
+}
+[data-tooltip]::after {
+  position: absolute;
+  width: max-content;
+  left: -950%;
+  top: 180%;
+  text-align: center;
+  content: attr(data-tooltip);
+  color: #eee;
+  background: rgba(170, 0, 30, 0.8);
+  border-radius: 5px;
+  font-size: 70%;
+  font-weight: 600;
+  padding: 20% 35%;
+  border: 1px solid #929292;
+  visibility: hidden;
+  opacity: 0;
+  transform: translateY(20%);
+  transition: opacity 0.3s transform 0.2s;
+}
+[data-tooltip]:hover::after {
+  opacity: 1;
+  visibility: visible;
+  transform: rotateY(0);
+}
 .addParent {
   grid-column: 1;
   width: 100%;
@@ -363,6 +428,7 @@ html {
   transform: scale(1);
   transition-duration: 200ms;
 }
+
 .service {
   width: 98%;
   height: 10%;
@@ -934,7 +1000,10 @@ html {
   color: #aaaaaa;
   cursor: pointer;
 }
-.relaysBoxContent .relay img {
+.iconBox {
+  display: flex;
+  justify-content: center;
+  align-items: center;
   width: 10%;
   height: 65%;
   margin-right: 5px;

diff --git a/launcher/src/components/UI/services-modal/MevboostModal.vue b/launcher/src/components/UI/services-modal/MevboostModal.vue
@@ -43,11 +43,13 @@
                   @change="enableBtn"
                 />
                 <label :for="relay.id">{{ relay.name }}</label>
-                <img
-                  src="/img/icon/header-icons/usa1.png"
-                  alt="flag-icon"
-                  v-if="relay.freeCencorship == false"
-                />
+                <div class="iconBox" data-tooltip="OFAC Compliant - censored">
+                  <img
+                    src="/img/icon/header-icons/usa1.png"
+                    alt="flag-icon"
+                    v-if="relay.freeCencorship == false"
+                  />
+                </div>
               </div>
             </div>
           </div>
@@ -178,6 +180,37 @@ export default {
 };
 </script>
 <style scoped>
+* {
+  box-sizing: border-box;
+}
+[data-tooltip] {
+  position: relative;
+  cursor: default;
+}
+[data-tooltip]::after {
+  position: absolute;
+  width: max-content;
+  left: -700%;
+  top: 180%;
+  text-align: center;
+  content: attr(data-tooltip);
+  color: #eee;
+  background: rgba(170, 0, 30, 0.8);
+  border-radius: 5px;
+  font-size: 70%;
+  font-weight: 600;
+  padding: 20% 35%;
+  border: 1px solid #929292;
+  visibility: hidden;
+  opacity: 0;
+  transform: translateY(20%);
+  transition: opacity 0.3s transform 0.2s;
+}
+[data-tooltip]:hover::after {
+  opacity: 1;
+  visibility: visible;
+  transform: rotateY(0);
+}
 .service-modal_parent {
   width: 100vw;
   height: 100vh;
@@ -443,9 +476,13 @@ export default {
   align-items: center;
   box-sizing: border-box;
 }
-.relaysBox img {
+.iconBox {
   width: 20px;
   height: 20px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-right: 2%;
 }
 .relaysBoxTitle {
   width: 100%;

diff --git a/launcher/src/components/UI/the-control/NoData.vue b/launcher/src/components/UI/the-control/NoData.vue
@@ -7,7 +7,7 @@
           <span class="comment-row1">PLEASE TURN ON A</span>
           <span class="comment-row2">NODE CLIENT &</span>
         </div>
-        <div class="icon-part" data-tooltip="peometheus">
+        <div class="icon-part" :data-tooltip="serviceName">
           <img
             src="../../../../public/img/icon/control/PrometheusServiceCircle.png"
             alt=""
@@ -17,6 +17,15 @@
     </div>
   </div>
 </template>
+<script>
+export default {
+  data() {
+    return {
+      serviceName: "Prometheus",
+    };
+  },
+};
+</script>
 
 <style scoped>
 * {