ADD: ReconnectAnimation

Added animation to ReconnectModal
stereum-dev · Jan 10, 2024 · 10e66af · 10e66af
1 parent 72ea7c4
commit 10e66af
Show file tree

Hide file tree

Showing 23 changed files with 39 additions and 2 deletions.
diff --git a/launcher/public/img/icon/manage-node-icons/stereum_cant_connect.gif b/launcher/public/img/icon/manage-node-icons/stereum_cant_connect.gif
diff --git a/launcher/public/img/icon/manage-node-icons/stereum_connected.gif b/launcher/public/img/icon/manage-node-icons/stereum_connected.gif
diff --git a/launcher/public/img/icon/manage-node-icons/stereum_connection_lost.gif b/launcher/public/img/icon/manage-node-icons/stereum_connection_lost.gif
diff --git a/launcher/src/components/UI/node-header/IconsNav.vue b/launcher/src/components/UI/node-header/IconsNav.vue
@@ -138,6 +138,7 @@ export default {
       osUpdating: "osUpdating",
       searchingForOsUpdates: "searchingForOsUpdates",
       refresh: "refresh",
+      reconnecting: "reconnecting",
       stereumUpdate: "stereumUpdate",
       tutorial: "tutorial",
       stakeGuide: "stakeGuide",
@@ -229,7 +230,9 @@ export default {
     },
     async reconnect() {
       console.log("reconnecting");
+      this.reconnecting = true;
       await ControlService.reconnect();
+      this.reconnecting = false;
       this.refresh = true;
     },
     updateModalHandler() {

diff --git a/launcher/src/components/UI/node-header/ReconnectModal.vue b/launcher/src/components/UI/node-header/ReconnectModal.vue
@@ -10,9 +10,14 @@
       <div class="title-box">
         <span>{{ $t("reconnectModal.reconnectTitle") }}</span>
       </div>
-      <div class="messageContent">
+      <div v-if="!reconnecting" class="messageContent">
+        <img src="/img/icon/manage-node-icons/stereum_cant_connect.gif"/>
         <span class="message">{{ $t("reconnectModal.reconnectMessage") }}</span>
       </div>
+      <div v-if="reconnecting" class="messageContent">
+        <img v-if="reconnecting" src="/img/icon/manage-node-icons/stereum_connected.gif"/>
+        <span class="message">{{ $t("reconnectModal.reconnectingMessage") }}</span>
+      </div>
       <div class="confirmBtn">
         <div class="confirmBox" @click="$emit('confirmReconnect')">
           <span>{{ $t("reconnectModal.reconnectBtn") }}</span>
@@ -21,7 +26,18 @@
     </div>
   </div>
 </template>
-<script></script>
+<script>
+import { mapWritableState } from "pinia";
+import { useNodeHeader } from "../../../store/nodeHeader";
+export default {
+  computed: {
+    ...mapWritableState(useNodeHeader, {
+      reconnecting: "reconnecting",
+    }),
+    
+  },
+}
+</script>
 <style scoped>
 .reconnect-modal-parent {
   width: 100%;

diff --git a/launcher/src/languages/ar.json b/launcher/src/languages/ar.json
@@ -403,6 +403,7 @@
   "reconnectModal": {
     "reconnectTitle": "Connection lost",
     "reconnectMessage": "Check your connection and try again.",
+    "reconnectingMessage": "Reconnecting...",
     "reconnectBtn": "Reconnect"
   },
   "prunningModal": {

diff --git a/launcher/src/languages/bg.json b/launcher/src/languages/bg.json
@@ -403,6 +403,7 @@
   "reconnectModal": {
     "reconnectTitle": "Connection lost",
     "reconnectMessage": "Check your connection and try again.",
+    "reconnectingMessage": "Reconnecting...",
     "reconnectBtn": "Reconnect"
   },
   "prunningModal": {

diff --git a/launcher/src/languages/cs.json b/launcher/src/languages/cs.json
@@ -403,6 +403,7 @@
   "reconnectModal": {
     "reconnectTitle": "Connection lost",
     "reconnectMessage": "Check your connection and try again.",
+    "reconnectingMessage": "Reconnecting...",
     "reconnectBtn": "Reconnect"
   },
   "prunningModal": {

diff --git a/launcher/src/languages/de.json b/launcher/src/languages/de.json
@@ -403,6 +403,7 @@
   "reconnectModal": {
     "reconnectTitle": "Connection lost",
     "reconnectMessage": "Check your connection and try again.",
+    "reconnectingMessage": "Reconnecting...",
     "reconnectBtn": "Reconnect"
   },
   "prunningModal": {

diff --git a/launcher/src/languages/en.json b/launcher/src/languages/en.json
@@ -403,6 +403,7 @@
   "reconnectModal": {
     "reconnectTitle": "Connection lost",
     "reconnectMessage": "Check your connection and try again.",
+    "reconnectingMessage": "Reconnecting...",
     "reconnectBtn": "Reconnect"
   },
   "prunningModal": {

diff --git a/launcher/src/languages/es.json b/launcher/src/languages/es.json
@@ -403,6 +403,7 @@
   "reconnectModal": {
     "reconnectTitle": "Connection lost",
     "reconnectMessage": "Check your connection and try again.",
+    "reconnectingMessage": "Reconnecting...",
     "reconnectBtn": "Reconnect"
   },
   "prunningModal": {

diff --git a/launcher/src/languages/fa.json b/launcher/src/languages/fa.json
@@ -403,6 +403,7 @@
   "reconnectModal": {
     "reconnectTitle": "Connection lost",
     "reconnectMessage": "Check your connection and try again.",
+    "reconnectingMessage": "Reconnecting...",
     "reconnectBtn": "Reconnect"
   },
   "prunningModal": {

diff --git a/launcher/src/languages/fr.json b/launcher/src/languages/fr.json
@@ -403,6 +403,7 @@
   "reconnectModal": {
     "reconnectTitle": "Connection lost",
     "reconnectMessage": "Check your connection and try again.",
+    "reconnectingMessage": "Reconnecting...",
     "reconnectBtn": "Reconnect"
   },
   "prunningModal": {

diff --git a/launcher/src/languages/it.json b/launcher/src/languages/it.json
@@ -403,6 +403,7 @@
   "reconnectModal": {
     "reconnectTitle": "Connection lost",
     "reconnectMessage": "Check your connection and try again.",
+    "reconnectingMessage": "Reconnecting...",
     "reconnectBtn": "Reconnect"
   },
   "prunningModal": {

diff --git a/launcher/src/languages/ja.json b/launcher/src/languages/ja.json
@@ -403,6 +403,7 @@
   "reconnectModal": {
     "reconnectTitle": "Connection lost",
     "reconnectMessage": "Check your connection and try again.",
+    "reconnectingMessage": "Reconnecting...",
     "reconnectBtn": "Reconnect"
   },
   "prunningModal": {

diff --git a/launcher/src/languages/mn.json b/launcher/src/languages/mn.json
@@ -403,6 +403,7 @@
   "reconnectModal": {
     "reconnectTitle": "Connection lost",
     "reconnectMessage": "Check your connection and try again.",
+    "reconnectingMessage": "Reconnecting...",
     "reconnectBtn": "Reconnect"
   },
   "prunningModal": {

diff --git a/launcher/src/languages/nl.json b/launcher/src/languages/nl.json
@@ -403,6 +403,7 @@
   "reconnectModal": {
     "reconnectTitle": "Connection lost",
     "reconnectMessage": "Check your connection and try again.",
+    "reconnectingMessage": "Reconnecting...",
     "reconnectBtn": "Reconnect"
   },
   "prunningModal": {

diff --git a/launcher/src/languages/pt.json b/launcher/src/languages/pt.json
@@ -403,6 +403,7 @@
   "reconnectModal": {
     "reconnectTitle": "Connection lost",
     "reconnectMessage": "Check your connection and try again.",
+    "reconnectingMessage": "Reconnecting...",
     "reconnectBtn": "Reconnect"
   },
   "prunningModal": {

diff --git a/launcher/src/languages/ru.json b/launcher/src/languages/ru.json
@@ -403,6 +403,7 @@
   "reconnectModal": {
     "reconnectTitle": "Connection lost",
     "reconnectMessage": "Check your connection and try again.",
+    "reconnectingMessage": "Reconnecting...",
     "reconnectBtn": "Reconnect"
   },
   "prunningModal": {

diff --git a/launcher/src/languages/sr.json b/launcher/src/languages/sr.json
@@ -403,6 +403,7 @@
   "reconnectModal": {
     "reconnectTitle": "Connection lost",
     "reconnectMessage": "Check your connection and try again.",
+    "reconnectingMessage": "Reconnecting...",
     "reconnectBtn": "Reconnect"
   },
   "prunningModal": {

diff --git a/launcher/src/languages/tr.json b/launcher/src/languages/tr.json
@@ -403,6 +403,7 @@
   "reconnectModal": {
     "reconnectTitle": "Connection lost",
     "reconnectMessage": "Check your connection and try again.",
+    "reconnectingMessage": "Reconnecting...",
     "reconnectBtn": "Reconnect"
   },
   "prunningModal": {

diff --git a/launcher/src/languages/vi.json b/launcher/src/languages/vi.json
@@ -403,6 +403,7 @@
   "reconnectModal": {
     "reconnectTitle": "Connection lost",
     "reconnectMessage": "Check your connection and try again.",
+    "reconnectingMessage": "Reconnecting...",
     "reconnectBtn": "Reconnect"
   },
   "prunningModal": {

diff --git a/launcher/src/languages/zh.json b/launcher/src/languages/zh.json
@@ -403,6 +403,7 @@
   "reconnectModal": {
     "reconnectTitle": "Connection lost",
     "reconnectMessage": "Check your connection and try again.",
+    "reconnectingMessage": "Reconnecting...",
     "reconnectBtn": "Reconnect"
   },
   "prunningModal": {