FIX: fixes for release (stereum-dev#1549)

* FIX: replace plugin change modal * FIX: relays icons * FIX: replace * FIX: custom network dropdown * FIX: preset dropdown & validation * FIX: arm monitoring check
daGscheid · Nov 8, 2023 · 58b4cf8 · 58b4cf8
1 parent 4a9f43e
commit 58b4cf8
Show file tree

Hide file tree

Showing 8 changed files with 154 additions and 63 deletions.
diff --git a/...on/click-installation/Gnosis Agnostic.png → .../img/icon/click-installation/agnostic.png b/...on/click-installation/Gnosis Agnostic.png → .../img/icon/click-installation/agnostic.png
diff --git a/launcher/public/output.css b/launcher/public/output.css
@@ -1848,6 +1848,54 @@ video {
           transform-origin: top right;
 }
 
+.-translate-y-2{
+  --tw-translate-y: -0.5rem;
+  -webkit-transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+          transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
+.-translate-y-10{
+  --tw-translate-y: -2.5rem;
+  -webkit-transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+          transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
+.translate-y-10{
+  --tw-translate-y: 2.5rem;
+  -webkit-transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+          transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
+.-translate-y-4{
+  --tw-translate-y: -1rem;
+  -webkit-transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+          transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
+.-translate-y-1{
+  --tw-translate-y: -0.25rem;
+  -webkit-transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+          transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
+.-translate-y-0{
+  --tw-translate-y: -0px;
+  -webkit-transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+          transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
+.translate-y-0{
+  --tw-translate-y: 0px;
+  -webkit-transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+          transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
+.translate-y-4{
+  --tw-translate-y: 1rem;
+  -webkit-transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+          transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
 .rotate-180{
   --tw-rotate: 180deg;
   -webkit-transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
@@ -2898,6 +2946,11 @@ video {
   background-color: rgb(100 116 139 / var(--tw-bg-opacity));
 }
 
+.bg-teal-500{
+  --tw-bg-opacity: 1;
+  background-color: rgb(20 184 166 / var(--tw-bg-opacity));
+}
+
 .bg-teal-600{
   --tw-bg-opacity: 1;
   background-color: rgb(13 148 136 / var(--tw-bg-opacity));
@@ -3098,6 +3151,10 @@ video {
   padding-top: 0.5rem;
 }
 
+.pt-20{
+  padding-top: 5rem;
+}
+
 .pt-4{
   padding-top: 1rem;
 }
@@ -3110,10 +3167,6 @@ video {
   padding-top: 2rem;
 }
 
-.pt-20{
-  padding-top: 5rem;
-}
-
 .text-left{
   text-align: left;
 }
@@ -3621,6 +3674,15 @@ video {
           transition-duration: 150ms;
 }
 
+.transition-opacity{
+  -webkit-transition-property: opacity;
+  transition-property: opacity;
+  -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+          transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  -webkit-transition-duration: 150ms;
+          transition-duration: 150ms;
+}
+
 .delay-100{
   -webkit-transition-delay: 100ms;
           transition-delay: 100ms;
@@ -3909,13 +3971,6 @@ html body {
           transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
 
-.hover\:scale-90:hover{
-  --tw-scale-x: .9;
-  --tw-scale-y: .9;
-  -webkit-transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
-          transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
-}
-
 .hover\:scale-95:hover{
   --tw-scale-x: .95;
   --tw-scale-y: .95;
@@ -3970,11 +4025,6 @@ html body {
   border-color: rgb(13 148 136 / var(--tw-border-opacity));
 }
 
-.hover\:bg-\[\#141517\]:hover{
-  --tw-bg-opacity: 1;
-  background-color: rgb(20 21 23 / var(--tw-bg-opacity));
-}
-
 .hover\:bg-\[\#224141\]:hover{
   --tw-bg-opacity: 1;
   background-color: rgb(34 65 65 / var(--tw-bg-opacity));

diff --git a/launcher/src/components/UI/custom-installation/components/CustomPath.vue b/launcher/src/components/UI/custom-installation/components/CustomPath.vue
@@ -9,20 +9,22 @@
         <div class="col-start-1 col-span-full row-start-1 row-span-2 flex justify-center items-center p-2">
           <span class="text-left text-gray-200 text-sm"> {{ $t("customInstallation.customInstallationText") }}</span>
         </div>
-        <div class="col-start-1 col-span-full row-start-3 row-span-full grid grid-cols-12 grid-rows-7">
+        <div
+          class="col-start-1 col-span-full row-start-3 row-span-full grid grid-cols-12 grid-rows-7 relative duration-500"
+        >
           <div
             class="col-start-3 col-span-8 row-start-1 row-span-1 bg-gray-200 rounded-md grid grid-cols-6 cursor-pointer"
             @click="networkListDropdown = !networkListDropdown"
           >
             <img
-              v-if="currentNetwork.icon"
+              v-if="displayItem?.icon"
               class="col-start-1 col-span-1 w-7 h-7 justify-self-center self-center"
-              :src="currentNetwork?.icon"
+              :src="displayItem?.icon"
               alt="Arrow icon"
             />
             <span
               class="col-start-2 col-end-6 justify-self-center self-center text-center text-gray-800 text-lg font-semibold"
-              >{{ currentNetwork?.name ? currentNetwork?.name : "Select Network" }}</span
+              >{{ displayItem?.name ? displayItem?.name : displayItem }}</span
             >
 
             <svg
@@ -36,29 +38,30 @@
               <path stroke-linecap="round" stroke-width="2" d="M5 10l7 7 7-7"></path>
             </svg>
           </div>
-          <Transition name="slide-fade">
-            <ul
-              v-if="networkListDropdown"
-              class="col-start-3 col-span-8 row-start-2 row-span-full transition-all max-h-[200px] duration-400 ease-in-out bg-gray-700 rounded-lg shadow-lg pb-1 w-full z-10 divide-y overflow-y-auto flex flex-col justify-start items-center mt-2"
+          <TransitionGroup
+            v-if="networkListDropdown"
+            tag="ul"
+            name="slide-fade"
+            class="col-start-3 col-span-8 row-start-2 row-span-full max-h-[200px] bg-gray-700 rounded-lg shadow-lg pb-1 w-full z-10 divide-y overflow-y-auto flex flex-col justify-start items-center mt-2"
+            :duration="500"
+          >
+            <li
+              v-for="item in networkList"
+              :key="item.name"
+              class="w-full min-h-[40px] max-h-[40px] grid grid-cols-6 px-4 hover:bg-blue-400"
+              @click="selectNetwork(item)"
             >
-              <li
-                v-for="item in networkList"
-                :key="item.name"
-                class="w-full min-h-[40px] max-h-[40px] grid grid-cols-6 px-4 hover:bg-blue-400"
-                @click="selectNetwork(item)"
+              <img
+                class="h-[30px] col-start-1 col-end-2 self-center justify-self-center"
+                :src="item.icon"
+                alt="service Icon"
+              />
+              <span
+                class="col-start-3 col-end-6 px-4 py-1 flex justify-start items-center outline-0 whitespace-nowrap cursor-pointer text-lg text-gray-200 font-semibold"
+                >{{ item.name }}</span
               >
-                <img
-                  class="h-[30px] col-start-1 col-end-2 self-center justify-self-center"
-                  :src="item.icon"
-                  alt="service Icon"
-                />
-                <span
-                  class="col-start-3 col-end-6 px-4 py-1 flex justify-start items-center outline-0 whitespace-nowrap cursor-pointer text-lg text-gray-200 font-semibold"
-                  >{{ item.name }}</span
-                >
-              </li>
-            </ul>
-          </Transition>
+            </li>
+          </TransitionGroup>
           <div
             class="w-full col-start-1 col-span-full row-start-3 row-span-full mx-auto flex flex-col justify-start items-center px-2"
           >
@@ -104,6 +107,7 @@ export default {
       selectedNetworkName: "",
       inputTitle: "Choose your installation path where Stereum will be installed",
       nextBtnDisabled: false,
+      displayItem: "Click to select a network",
     };
   },
 
@@ -121,12 +125,16 @@ export default {
     this.activeBtn();
     this.getInstallPath();
   },
+  mounted() {
+    this.displayItem = "Click to select a network";
+  },
 
   methods: {
     selectNetwork(network) {
       this.selectedNetworkIcon = network.icon;
       this.selectedNetworkName = network.name;
       this.currentNetwork = network;
+      this.displayItem = network;
       this.nextBtnDisabled = true;
       this.networkListDropdown = false;
     },
@@ -158,15 +166,18 @@ export default {
 
 <style scoped>
 .slide-fade-enter-active {
-  transition: all 0.2s ease-out;
+  transition-duration: 500;
+  opacity: 0;
 }
 
 .slide-fade-leave-active {
-  transition: all 0.3s cubic-bezier(1, 0.5, 0.8, 1);
+  transition-duration: 500;
+  opacity: 0;
 }
 
 .slide-fade-enter-from,
 .slide-fade-leave-to {
+  transition-duration: 500;
   transform: translateY(-20px);
 }
 .custom-layer_parent {

diff --git a/launcher/src/components/UI/one-click/components/plugin/ConfigBody.vue b/launcher/src/components/UI/one-click/components/plugin/ConfigBody.vue
@@ -97,7 +97,7 @@ const selectedPluginsValidation = () => {
 };
 const pluginChangeHandler = (plugin, item, idx) => {
   plugin.openReplaceModal = false;
-  const oldPluginIndex = clickStore.selectedPreset.includedPlugins.findIndex((e) => e.id === plugin.id);
+  const oldPluginIndex = clickStore.selectedPreset.includedPlugins.findIndex((e) => e.id === plugin?.id);
 
   if (oldPluginIndex !== -1) {
     clickStore.selectedPreset.includedPlugins.splice(oldPluginIndex, 1);
@@ -154,7 +154,7 @@ const pluginExChange = (el) => {
   if (el.category !== "service") {
     clickStore.selectedPreset.includedPlugins.filter((item) => {
       item.openReplaceModal = false;
-      if (item?.service === el.service) {
+      if (item.service === el.service) {
         checkPluginCategory(item);
       }
     });

diff --git a/launcher/src/components/UI/one-click/components/plugin/InstallationPath.vue b/launcher/src/components/UI/one-click/components/plugin/InstallationPath.vue
@@ -29,7 +29,6 @@
             <input
               id="MarketingAccept"
               v-model="clickStore.installMonitoring"
-              a
               type="checkbox"
               name="marketing_accept"
               class="h-5 w-5 rounded-md border-gray-200 bg-white shadow-sm"
@@ -50,6 +49,11 @@
 
 <script setup>
 import { useClickInstall } from "@/store/clickInstallation";
+import { onMounted } from "vue";
 
 const clickStore = useClickInstall();
+
+onMounted(() => {
+  clickStore.installMonitoring = false;
+});
 </script>
diff --git a/launcher/src/components/UI/one-click/components/plugin/PluginRows.vue b/launcher/src/components/UI/one-click/components/plugin/PluginRows.vue
@@ -17,11 +17,13 @@
         <div
           v-for="(item, idx) in props.filteredPlugin"
           :key="idx"
-          class="col-span-1 w-9 h-9 flex justify-center items-center relative bg-[#191c21] rounded-md p-1 justify-self-center self-center hover:bg-[#141517] hover:scale-90 transition-all duration-200 ease-in-out cursor-pointer"
+          class="col-span-1 w-9 h-9 flex justify-center items-center relative rounded-md p-1 justify-self-center self-center hover:scale-105 transition-all duration-200 ease-in-out cursor-pointer active:scale-100"
+          :class="item.replacePanel ? 'bg-teal-500' : 'bg-[#191c21]'"
           @mouseover="runningTooltip(item)"
           @mouseleave="item.displayTooltip = false"
+          @click="changeHandler(plugin, item, idx)"
         >
-          <img :src="item.icon" alt="icon" class="w-5" @click="changeHandler(plugin, item, idx)" />
+          <img :src="item.icon" alt="icon" class="w-5" />
           <span
             class="absolute -bottom-8 -right-4 text-xs text-[#14171a] font-semibold bg-gray-300 rounded-md px-2 py-1 z-50"
             :class="item.displayTooltip ? 'block' : 'invisible'"
@@ -55,6 +57,10 @@ const runningTooltip = (el) => {
 };
 
 const changeHandler = (plugin, item, idx) => {
+  clickStore.selectedPreset.includedPlugins.forEach((i) => {
+    i.replacePanel = false;
+  });
+  item.replacePanel = true;
   emit("changeHandler", plugin, item, idx);
 };